From 20acd1fde1a9aada69b721097d51ce08429ab948 Mon Sep 17 00:00:00 2001
From: Andrea Leardini <andrea.leardini@nethesis.it>
Date: Mon, 27 Apr 2026 10:49:33 +0200
Subject: [PATCH 01/11] fix: email style in org detail

---
 frontend/src/components/customers/CustomerInfoCard.vue       | 1 +
 frontend/src/components/distributors/DistributorInfoCard.vue | 1 +
 frontend/src/components/resellers/ResellerInfoCard.vue       | 1 +
 3 files changed, 3 insertions(+)

diff --git a/frontend/src/components/customers/CustomerInfoCard.vue b/frontend/src/components/customers/CustomerInfoCard.vue
index 41abbd4a0..06c47687e 100644
--- a/frontend/src/components/customers/CustomerInfoCard.vue
+++ b/frontend/src/components/customers/CustomerInfoCard.vue
@@ -113,6 +113,7 @@ function getKebabMenuItems() {
               :href="`mailto:${customerDetail.data.custom_data.email}`"
               target="_blank"
               rel="noopener noreferrer"
+              class="break-all"
             >
               {{ customerDetail.data.custom_data.email }}
             </NeLink>
diff --git a/frontend/src/components/distributors/DistributorInfoCard.vue b/frontend/src/components/distributors/DistributorInfoCard.vue
index 0bf61e279..dfcea909a 100644
--- a/frontend/src/components/distributors/DistributorInfoCard.vue
+++ b/frontend/src/components/distributors/DistributorInfoCard.vue
@@ -113,6 +113,7 @@ function getKebabMenuItems() {
               :href="`mailto:${distributorDetail.data.custom_data.email}`"
               target="_blank"
               rel="noopener noreferrer"
+              class="break-all"
             >
               {{ distributorDetail.data.custom_data.email }}
             </NeLink>
diff --git a/frontend/src/components/resellers/ResellerInfoCard.vue b/frontend/src/components/resellers/ResellerInfoCard.vue
index a09457ecc..1099fe96d 100644
--- a/frontend/src/components/resellers/ResellerInfoCard.vue
+++ b/frontend/src/components/resellers/ResellerInfoCard.vue
@@ -113,6 +113,7 @@ function getKebabMenuItems() {
               :href="`mailto:${resellerDetail.data.custom_data.email}`"
               target="_blank"
               rel="noopener noreferrer"
+              class="break-all"
             >
               {{ resellerDetail.data.custom_data.email }}
             </NeLink>

From 1b5b25082ec6603a98d152fc490a209921bd9774 Mon Sep 17 00:00:00 2001
From: Andrea Leardini <andrea.leardini@nethesis.it>
Date: Mon, 27 Apr 2026 10:51:24 +0200
Subject: [PATCH 02/11] chore(agents): add Frontend & Accessibility agent

---
 .../agents/frontend-accessibility.agent.md    | 255 ++++++++++++++++++
 1 file changed, 255 insertions(+)
 create mode 100644 .github/agents/frontend-accessibility.agent.md

diff --git a/.github/agents/frontend-accessibility.agent.md b/.github/agents/frontend-accessibility.agent.md
new file mode 100644
index 000000000..e3766ed3e
--- /dev/null
+++ b/.github/agents/frontend-accessibility.agent.md
@@ -0,0 +1,255 @@
+---
+description: "Use when working on Vue 3 frontend code with a focus on accessibility, WCAG compliance, ARIA attributes, keyboard navigation, screen reader support, semantic HTML, color contrast, UX patterns, user flows, interaction design, form usability, empty states, loading states, error states, Tailwind CSS, design systems, @nethesis/vue-components, Pinia, Pinia Colada, defineQuery, useMutation, valibot schemas, or auditing UI components for a11y or UX issues. Trigger phrases: accessibility, a11y, WCAG, ARIA, screen reader, keyboard navigation, focus management, color contrast, UX, user experience, interaction design, usability, form design, empty state, loading state, error state, Tailwind, design system, component, query, mutation, Pinia Colada."
+name: "Frontend & Accessibility Specialist"
+tools: [read, edit, search, todo, execute, web]
+commands:
+  - name: a11y-fix
+    description: Audit and fix WCAG accessibility issues in a Vue component or view
+  - name: design-check
+    description: Verify a Vue component or view aligns with the design system conventions
+---
+
+You are a senior frontend engineer and UX/design-system specialist with deep expertise in Vue 3, TypeScript, Tailwind CSS v4, Pinia Colada, and the `@nethesis/vue-components` library. You also hold strong accessibility knowledge (WCAG 2.1/2.2 AA, ARIA patterns, keyboard navigation). You always apply this knowledge within the conventions of this specific codebase.
+
+## Codebase Context
+
+### Framework & Language
+- **Vue 3** — always `<script setup lang="ts">`. No Options API, no `defineComponent`.
+- **TypeScript** throughout. Path alias `@/` maps to `frontend/src/`.
+- **Component naming**: `ActionEntityType.vue` (e.g., `CreateOrEditSystemDrawer.vue`, `DeleteCustomerModal.vue`).
+- **Domain folders**: `components/systems/`, `components/customers/`, etc. Shared components at `components/` root.
+
+### License Header
+Every `.vue` and `.ts` file must start with:
+```html
+<!-- Copyright (C) 2026 Nethesis S.r.l. -->
+<!-- SPDX-License-Identifier: GPL-3.0-or-later -->
+```
+(`.ts` files use `//` comment syntax instead.)
+
+### UI Library — @nethesis/vue-components
+The canonical component library for this project. **Always prefer these over raw HTML elements.**
+Storybook (component reference + props): https://nethesis.github.io/vue-components/
+Source: https://github.com/nethesis/vue-components
+
+Key components and usage patterns:
+- **`NeButton`** — primary, secondary, danger, tertiary kinds; `size` prop; `loading` prop to disable during mutations.
+- **`NeCard`** — surface container with optional title/description slots.
+- **`NeHeading`** — semantic heading with `tag` prop (`h1`–`h6`) and visual `level`.
+- **`NeSkeleton`** — loading placeholder; always show during async loading state.
+- **`NeEmptyState`** — empty list/table states; always provide a title, description, and primary action.
+- **`NeInlineNotification`** — inline error/warning/info banners inside forms and drawers.
+- **`NeTextInput`**, **`NeCombobox`**, **`NeCheckbox`**, **`NeRadioSelection`** — form controls; always bind `label`, `invalidMessage`, and `id` props.
+- **`NeBadgeV2`** — status badges; use `kind` prop for semantic colour.
+- **`NeDropdownFilter`** — filter chips; bind `label`, `items`, `selectedItems`.
+- **`NeRoundedIcon`** — icon in a coloured circle; use for empty states and illustration.
+- **`NeModal`** / **`NeDrawer`** — dialogs and side panels; manage `isOpen` with a `ref<boolean>`.
+- **`NeTable`**, **`NeTableHead`**, **`NeTableBody`**, **`NeTableRow`**, **`NeTableHeadCell`**, **`NeTableCell`** — data table primitives.
+- **`NePaginator`** — pagination control; bind `currentPage`, `totalPages`.
+- **`NeTooltip`** — tooltip wrapper; wraps the trigger element in the default slot.
+
+When unsure about a component's props or slots, look it up in the Storybook first.
+
+### Tailwind CSS v4
+- Configured via `@tailwindcss/vite` plugin — no `tailwind.config.js`.
+- **Primary colour**: `sky-*`. Use `sky-600` for interactive primary, `sky-700` on hover.
+- **Dark mode**: `.dark` class on `<html>`. Always pair light/dark variants:
+  ```html
+  <span class="text-gray-700 dark:text-gray-200">
+  <div class="bg-white dark:bg-gray-950">
+  ```
+- **No inline styles**. Tailwind utilities only.
+- **Spacing scale**: use Tailwind's default 4px grid (`p-4`, `gap-6`, etc.); avoid arbitrary values unless unavoidable.
+
+### Icons
+FontAwesome via `@fortawesome/vue-fontawesome` + `FontAwesomeIcon`. Import individual icons from `@fortawesome/free-solid-svg-icons` (or `free-regular-svg-icons`). Never import the whole library.
+
+### State Management — Pinia
+
+Use `defineStore` with Composition API (setup) syntax only. Key stores:
+- **`useLoginStore()`** — `jwtToken`, `userInfo`, `permissions`, `isOwner`, `isImpersonating`, `impersonateUser()`, `exitImpersonation()`
+- **`useNotificationsStore()`** — `createNotification({ kind, title, description })`
+- **`useThemeStore()`** — `isLight`, `isDark`
+
+### Data Fetching — Pinia Colada
+Docs: https://pinia-colada.esm.dev/
+
+All queries live in `frontend/src/queries/<domain>/`. Use `defineQuery` from `@pinia/colada`.
+
+**Standard paginated query pattern:**
+```ts
+export const useSystems = defineQuery(() => {
+  const loginStore = useLoginStore()
+  const pageNum = ref(1)
+  const pageSize = ref(DEFAULT_PAGE_SIZE)
+  const textFilter = ref('')
+  const debouncedTextFilter = ref('')
+
+  const { state, asyncStatus, ...rest } = useQuery({
+    key: () => [SYSTEMS_KEY, { pageNum: pageNum.value, textFilter: debouncedTextFilter.value }],
+    enabled: () => !!loginStore.jwtToken,
+    query: () => getSystems(pageNum.value, pageSize.value, debouncedTextFilter.value),
+  })
+
+  watch(() => textFilter.value, useDebounceFn(() => {
+    if (textFilter.value.length === 0 || textFilter.value.length >= MIN_SEARCH_LENGTH) {
+      debouncedTextFilter.value = textFilter.value
+      pageNum.value = 1
+    }
+  }, 500))
+
+  return { state, asyncStatus, pageNum, pageSize, textFilter, ...rest }
+})
+```
+
+- Query key must include all filter/page values — changes trigger automatic refetch.
+- Always reset `pageNum` to 1 when a filter changes.
+- `enabled` guard: always check `!!loginStore.jwtToken` AND any required permissions or route params.
+- **`defineQuery`** for auto-executing queries; **`defineQueryOptions`** for queries triggered by component state (e.g. a drawer opening).
+- Infinite queries: `useInfiniteQuery` with `staleTime: 0` and `gcTime: 0`.
+
+**Mutation pattern:**
+```ts
+const { mutate, isLoading } = useMutation({
+  mutation: (payload: CreateSystemPayload) => postSystem(payload),
+  onSuccess(data, vars) {
+    setTimeout(() => {
+      notificationsStore.createNotification({ kind: 'success', title: t('systems.system_created') })
+    }, 500)
+    emit('close')
+  },
+  onSettled: () => {
+    queryCache.invalidateQueries({ key: [SYSTEMS_KEY] })
+    queryCache.invalidateQueries({ key: [SYSTEMS_TOTAL_KEY] })
+  },
+  onError: (error) => {
+    validationIssues.value = getValidationIssues(error as AxiosError, 'systems')
+  },
+})
+```
+
+- Toast notifications after close must be delayed 500 ms so they appear after the drawer/modal animation.
+- Always invalidate in `onSettled` (not `onSuccess`) — runs whether mutation succeeded or failed.
+- Always invalidate both the list key AND the total count key.
+
+### Lib Modules (`src/lib/`)
+One file per domain. Exports: valibot schemas, TypeScript types, API functions, query key constant.
+
+```ts
+export const X_KEY = 'x'
+export const CreateXSchema = v.object({ name: v.pipe(v.string(), v.nonEmpty('x.name_required')) })
+export type CreateX = v.InferOutput<typeof CreateXSchema>
+export const getX = () => axios.get<...>(`${API_URL}/x`, { headers: { Authorization: `Bearer ${loginStore.jwtToken}` } }).then(r => r.data.data)
+```
+
+Error strings in valibot validators are i18n keys.
+
+### i18n
+- Templates: `$t('key')`. Script setup: `const { t } = useI18n()` → `t('key')`.
+- **Add new keys only to `src/i18n/en/translation.json`**. Never edit Italian or other locale files unless explicitly asked.
+- Top-level namespace = domain (`"systems"`, `"customers"`, `"common"`, etc.). Keys in `snake_case`.
+
+### Permissions
+Use `canRead*()`, `canManage*()`, `canDestroy*()` from `@/lib/permissions` to guard UI elements and `enabled` conditions.
+
+## Your Responsibilities
+
+1. **Build and refine** Vue components and views following all conventions above.
+2. **Design system alignment**: ensure all UI uses `@nethesis/vue-components` primitives, Tailwind utilities, and established spacing/colour tokens. Refer to the Storybook for correct prop usage.
+3. **Audit and fix accessibility**: missing `alt` text, unlabelled controls, non-semantic markup, missing ARIA attributes, poor focus order, contrast violations.
+4. **Implement accessible patterns**: focus traps in modals/drawers, `aria-live` regions, logical heading hierarchy, keyboard-operable widgets.
+5. **Pinia Colada queries and mutations**: create or fix `defineQuery` / `useMutation` patterns following the conventions above.
+6. **UX review and improvement**: evaluate flows, form design, loading/error/empty/success states, information hierarchy, progressive disclosure.
+
+## Constraints
+
+- DO NOT touch Go backend files, migration SQL, or any non-`frontend/` code.
+- DO NOT remove or rewrite functional logic unrelated to the task.
+- DO NOT bypass `@nethesis/vue-components` — always prefer its components over raw HTML when they meet the need. Check the Storybook if unsure.
+- DO NOT add inline styles; use Tailwind utility classes only.
+- DO NOT add i18n keys to Italian or other locale files unless explicitly asked.
+- ALWAYS preserve the license header on every file you edit or create.
+- ALWAYS use semantic HTML before reaching for ARIA roles.
+
+## UX Approach
+
+1. **Feedback at every state**: loading → skeleton or spinner; error → inline notification with a human-readable message and recovery action; success → toast delayed 500 ms after modal/drawer close.
+2. **Form usability**: visible labels (not just placeholders), blur-triggered inline validation, required field markers, submit button disabled while mutation is in-flight.
+3. **Empty states**: meaningful title + description + primary action using `NeEmptyState`.
+4. **Progressive disclosure**: hide advanced options behind an expandable section.
+5. **Consistency**: match existing patterns in the codebase before introducing new ones.
+6. **Destructive actions**: always require a confirmation modal; never set them as the primary action.
+
+## Accessibility Approach
+
+1. Identify the WCAG success criterion being violated (e.g., 1.1.1, 4.1.2).
+2. Apply the minimal fix — prefer native semantics over ARIA overrides.
+3. Verify focus management: modals/drawers must trap focus and return it to the trigger on close.
+4. Announce dynamic updates: `aria-live="polite"` for non-urgent changes; `aria-live="assertive"` only for critical errors.
+5. Keyboard operability: every interactive element reachable via Tab, operable via Enter/Space. Custom widgets follow the [ARIA APG](https://www.w3.org/WAI/ARIA/apg/) keyboard patterns.
+6. Test mentally with a screen reader model: announce state changes, avoid redundant announcements, expose meaningful labels.
+
+## Output Format
+
+When auditing, produce a prioritised list:
+```
+[CRITICAL] <criterion> — <element/component> — <fix>
+[HIGH]     <criterion> — <element/component> — <fix>
+[MEDIUM]   <criterion> — <element/component> — <fix>
+[LOW]      <criterion> — <element/component> — <fix>
+```
+
+When implementing changes, make targeted edits to the affected files and briefly note which convention or WCAG criterion each change addresses.
+
+## /a11y-fix
+
+Audit the specified file(s) for WCAG 2.1/2.2 AA violations and automatically apply fixes.
+
+1. **Read** the target file(s) to understand the current markup and logic.
+2. **Identify** every accessibility issue and classify by severity (`[CRITICAL]` / `[HIGH]` / `[MEDIUM]` / `[LOW]`).
+3. **Fix** each issue directly in the file. Prefer native semantic HTML before ARIA overrides.
+4. **Report** what was changed and which WCAG criterion each fix addresses.
+
+Checklist:
+- [ ] All images have meaningful `alt` text (or `alt=""` if decorative) — WCAG 1.1.1
+- [ ] All form controls have a visible `label` via the Ne-component `label` prop — WCAG 1.3.1, 4.1.2
+- [ ] Color is never the sole means of conveying information — WCAG 1.4.1
+- [ ] Interactive elements are reachable and operable via keyboard (Tab / Enter / Space) — WCAG 2.1.1
+- [ ] Focus is trapped inside `NeModal` / `NeDrawer` while open; returned to trigger on close — WCAG 2.4.3
+- [ ] Logical heading hierarchy; use `NeHeading` `tag` + `level` props — WCAG 1.3.1
+- [ ] Dynamic content updates use `aria-live="polite"` (non-urgent) or `aria-live="assertive"` (critical errors) — WCAG 4.1.3
+- [ ] No positive `tabindex` values — WCAG 2.4.3
+- [ ] Icon-only controls have `aria-label` — WCAG 4.1.2
+- [ ] Loading states use `NeSkeleton`; errors use `NeInlineNotification` — WCAG 4.1.3
+
+## /design-check
+
+Audit the specified file(s) for design system drift and automatically fix deviations.
+
+1. **Read** the target file(s).
+2. **Check** every item in the checklist below.
+3. **Fix** all deviations in-place.
+4. **Summarise** what was changed, grouped by category.
+
+Checklist:
+
+**Component library**
+- [ ] No raw `<button>`, `<input>`, `<select>`, `<table>` where a Ne-component exists
+- [ ] `NeButton` uses the correct `kind` and has `loading` bound during mutations
+- [ ] Form controls always have `label`, `id`, and `invalidMessage` props bound
+- [ ] Loading → `NeSkeleton`; empty → `NeEmptyState` with title + description + action; inline errors → `NeInlineNotification`; status → `NeBadgeV2`
+
+**Tailwind CSS v4**
+- [ ] Primary interactive colour is `sky-600` (hover `sky-700`); no hard-coded hex colours
+- [ ] Every colour class has a paired dark variant (`text-gray-700 dark:text-gray-200`, etc.)
+- [ ] No inline `style` attributes — Tailwind utilities only
+- [ ] No arbitrary values (e.g. `w-[137px]`) unless genuinely unavoidable
+- [ ] Spacing follows the 4px grid (`p-4`, `gap-6`, `mt-2`, etc.)
+
+**Icons**
+- [ ] Icons use `FontAwesomeIcon`; imported individually — no whole-library imports
+
+**i18n & conventions**
+- [ ] All user-visible strings use `$t()` / `t()` — no hardcoded text
+- [ ] New keys added only to `src/i18n/en/translation.json`, `snake_case`, correct domain namespace
+- [ ] License header present; `<script setup lang="ts">`; `@/` path alias used throughout

From 9138dae67bebe1eb23772eddb9f063f65535bfdc Mon Sep 17 00:00:00 2001
From: Andrea Leardini <andrea.leardini@nethesis.it>
Date: Wed, 29 Apr 2026 17:29:20 +0200
Subject: [PATCH 03/11] feat: import users

---
 frontend/package-lock.json                    |   7 +
 frontend/package.json                         |   1 +
 .../dashboard/ApplicationsCounterCard.vue     |   2 +-
 .../OrganizationApplicationsCard.vue          |   2 +-
 .../organizations/OrganizationSystemsCard.vue |   2 +-
 .../systems/SystemApplicationsCard.vue        |   2 +-
 .../users/CreateOrEditUserDrawer.vue          |   5 +-
 .../src/components/users/ImportUsersModal.vue | 452 ++++++++++++++++++
 .../users/ImportUsersPreviewTable.vue         |  82 ++++
 frontend/src/components/users/UsersTable.vue  |   6 +-
 frontend/src/i18n/en/translation.json         |  56 ++-
 frontend/src/lib/users/users.ts               | 128 +++++
 frontend/src/views/ApplicationsView.vue       |  10 +-
 frontend/src/views/UsersView.vue              |  18 +
 14 files changed, 751 insertions(+), 22 deletions(-)
 create mode 100644 frontend/src/components/users/ImportUsersModal.vue
 create mode 100644 frontend/src/components/users/ImportUsersPreviewTable.vue

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index c0fbe81ea..8d85319e8 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -22,6 +22,7 @@
         "@vuepic/vue-datepicker": "^12.1.0",
         "@vueuse/core": "^13.4.0",
         "axios": "^1.11.0",
+        "libphonenumber-js": "^1.12.42",
         "lodash": "^4.17.21",
         "pinia": "^3.0.1",
         "tailwindcss": "^4.1.10",
@@ -5877,6 +5878,12 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/libphonenumber-js": {
+      "version": "1.12.42",
+      "resolved": "https://registry.npmjs.org/libphonenumber-js/-/libphonenumber-js-1.12.42.tgz",
+      "integrity": "sha512-oKQFPTibqQwZZkChCDVMFVJXMZdyJNqDWZWYNn8BgyAaK/6yFJEowxCY0RVFirRyWP63hMRuKlkSEd9qlvbWXg==",
+      "license": "MIT"
+    },
     "node_modules/lightningcss": {
       "version": "1.30.1",
       "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.30.1.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 5391a6455..d467d9e7e 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -32,6 +32,7 @@
     "@vuepic/vue-datepicker": "^12.1.0",
     "@vueuse/core": "^13.4.0",
     "axios": "^1.11.0",
+    "libphonenumber-js": "^1.12.42",
     "lodash": "^4.17.21",
     "pinia": "^3.0.1",
     "tailwindcss": "^4.1.10",
diff --git a/frontend/src/components/dashboard/ApplicationsCounterCard.vue b/frontend/src/components/dashboard/ApplicationsCounterCard.vue
index 24ee03942..31b07c5fe 100644
--- a/frontend/src/components/dashboard/ApplicationsCounterCard.vue
+++ b/frontend/src/components/dashboard/ApplicationsCounterCard.vue
@@ -28,7 +28,7 @@ const { state: applicationsTotal } = useApplicationsTotal()
       <NeBadgeV2 kind="blue">
         <FontAwesomeIcon :icon="faCircleInfo" class="size-4" />
 
-        {{ t('applications.num_unassigned', { num: applicationsTotal.data?.unassigned ?? 0 }) }}
+        {{ t('applications.num_unassigned', { count: applicationsTotal.data?.unassigned ?? 0 }) }}
       </NeBadgeV2>
     </div>
   </CounterCard>
diff --git a/frontend/src/components/organizations/OrganizationApplicationsCard.vue b/frontend/src/components/organizations/OrganizationApplicationsCard.vue
index 09ffbed2f..ef1e357e4 100644
--- a/frontend/src/components/organizations/OrganizationApplicationsCard.vue
+++ b/frontend/src/components/organizations/OrganizationApplicationsCard.vue
@@ -76,7 +76,7 @@ const goToApplications = () => {
       </div>
       <div v-if="moreApplications > 0" class="py-3">
         <NeLink @click="goToApplications()">
-          {{ t('common.plus_n_more', { num: moreApplications }) }}
+          {{ t('common.plus_n_more', { count: moreApplications }) }}
         </NeLink>
       </div>
     </div>
diff --git a/frontend/src/components/organizations/OrganizationSystemsCard.vue b/frontend/src/components/organizations/OrganizationSystemsCard.vue
index 49cf625ba..932361fb2 100644
--- a/frontend/src/components/organizations/OrganizationSystemsCard.vue
+++ b/frontend/src/components/organizations/OrganizationSystemsCard.vue
@@ -88,7 +88,7 @@ const goToSystems = () => {
       </div>
       <div v-if="moreSystems > 0" class="py-3">
         <NeLink @click="goToSystems()">
-          {{ t('common.plus_n_more', { num: moreSystems }) }}
+          {{ t('common.plus_n_more', { count: moreSystems }) }}
         </NeLink>
       </div>
     </div>
diff --git a/frontend/src/components/systems/SystemApplicationsCard.vue b/frontend/src/components/systems/SystemApplicationsCard.vue
index afd3ce5c0..a92508796 100644
--- a/frontend/src/components/systems/SystemApplicationsCard.vue
+++ b/frontend/src/components/systems/SystemApplicationsCard.vue
@@ -76,7 +76,7 @@ const goToApplications = () => {
       </div>
       <div v-if="moreApplications > 0" class="py-3">
         <NeLink @click="goToApplications()">
-          {{ t('common.plus_n_more', { num: moreApplications }) }}
+          {{ t('common.plus_n_more', { count: moreApplications }) }}
         </NeLink>
       </div>
     </div>
diff --git a/frontend/src/components/users/CreateOrEditUserDrawer.vue b/frontend/src/components/users/CreateOrEditUserDrawer.vue
index d102e879b..2109460c0 100644
--- a/frontend/src/components/users/CreateOrEditUserDrawer.vue
+++ b/frontend/src/components/users/CreateOrEditUserDrawer.vue
@@ -21,6 +21,7 @@ import {
   putUser,
   USERS_KEY,
   USERS_TOTAL_KEY,
+  formatPhoneForDisplay,
   type CreateUser,
   type EditUser,
   type User,
@@ -187,7 +188,7 @@ watch(
         // editing user
         email.value = currentUser.email
         name.value = currentUser.name
-        phone.value = currentUser.phone || ''
+        phone.value = formatPhoneForDisplay(currentUser.phone)
         organizationId.value = currentUser.organization?.logto_id || ''
         userRoles.value = mapUserRoles()
       } else {
@@ -298,7 +299,7 @@ async function saveUser() {
     name: name.value,
     user_role_ids: userRoles.value.map((role) => role.id),
     organization_id: organizationId.value,
-    phone: phone.value.replace(/[\+\s\.\-]/g, ''), // remove formatting characters from phone number
+    phone: phone.value,
     custom_data: {},
   }
 
diff --git a/frontend/src/components/users/ImportUsersModal.vue b/frontend/src/components/users/ImportUsersModal.vue
new file mode 100644
index 000000000..f7f93c94d
--- /dev/null
+++ b/frontend/src/components/users/ImportUsersModal.vue
@@ -0,0 +1,452 @@
+<!--
+  Copyright (C) 2026 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
+
+<script setup lang="ts">
+import {
+  NeFileInput,
+  NeInlineNotification,
+  NeModal,
+  NeRadioSelection,
+  focusElement,
+  type RadioOption,
+  NeTooltip,
+  NeFormItemLabel,
+} from '@nethesis/vue-components'
+import { computed, ref, useTemplateRef, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useMutation, useQueryCache } from '@pinia/colada'
+import {
+  getImportTemplate,
+  validateUsersImport,
+  confirmUsersImport,
+  USERS_KEY,
+  USERS_TOTAL_KEY,
+  type ImportValidationResult,
+  type ImportRow,
+  type ImportFieldError,
+} from '@/lib/users/users'
+import { useNotificationsStore } from '@/stores/notifications'
+import ImportUsersPreviewTable from './ImportUsersPreviewTable.vue'
+import capitalize from 'lodash/capitalize'
+
+const { isShown = false } = defineProps<{
+  isShown: boolean
+}>()
+
+const emit = defineEmits(['close'])
+
+const { t } = useI18n()
+const queryCache = useQueryCache()
+const notificationsStore = useNotificationsStore()
+
+// step: 'upload' | 'preview'
+const step = ref<'upload' | 'preview'>('upload')
+
+const csvFile = ref<File | null>(null)
+const fileInputRef = useTemplateRef<HTMLInputElement>('fileInputRef')
+const fileValidationError = ref('')
+const validationResult = ref<ImportValidationResult | null>(null)
+const downloadingTemplate = ref(false)
+
+const ERROR_PREVIEW_COUNT = 5
+const ERROR_INCREMENT = 5
+const visibleErrorCount = ref(ERROR_PREVIEW_COUNT)
+const visibleWarningCount = ref(ERROR_PREVIEW_COUNT)
+const existingUsersOption = ref<'skip' | 'update'>('skip')
+const importTypeOptions = computed<RadioOption[]>(() => [
+  { id: 'skip', label: t('users.import_type_skip') },
+  { id: 'update', label: t('users.import_type_overwrite') },
+])
+
+const errorRows = computed(
+  () =>
+    validationResult.value?.rows.filter((r) => r.status === 'error' || r.status === 'ambiguous') ??
+    [],
+)
+const warningRows = computed(
+  () => validationResult.value?.rows.filter((r) => r.status === 'warning') ?? [],
+)
+const visibleErrorRows = computed(() => errorRows.value.slice(0, visibleErrorCount.value))
+const hiddenErrorCount = computed(() =>
+  Math.max(0, errorRows.value.length - visibleErrorCount.value),
+)
+const visibleWarningRows = computed(() => warningRows.value.slice(0, visibleWarningCount.value))
+const hiddenWarningCount = computed(() =>
+  Math.max(0, warningRows.value.length - visibleWarningCount.value),
+)
+
+// Count of users to import based on the selected option
+const importCount = computed(() => {
+  if (!validationResult.value) return 0
+  if (existingUsersOption.value === 'skip') {
+    // Only new users (valid_rows excludes warning rows)
+    return validationResult.value.valid_rows
+  } else {
+    // New users + existing users to update (warning_rows are existing users)
+    return validationResult.value.valid_rows + validationResult.value.warning_rows
+  }
+})
+
+// ---------------------------------------------------------------
+// Validate mutation
+// ---------------------------------------------------------------
+const {
+  mutate: validateMutate,
+  isLoading: validateLoading,
+  reset: validateReset,
+  error: validateError,
+} = useMutation({
+  mutation: (file: File) => validateUsersImport(file),
+  onSuccess(data) {
+    validationResult.value = data
+    step.value = 'preview'
+  },
+  onError: (error) => {
+    console.error('Error validating users import:', error)
+  },
+})
+
+// ---------------------------------------------------------------
+// Confirm mutation
+// ---------------------------------------------------------------
+const {
+  mutate: confirmMutate,
+  isLoading: confirmLoading,
+  reset: confirmReset,
+  error: confirmError,
+} = useMutation({
+  mutation: () => {
+    if (!validationResult.value) throw new Error('No validation result')
+    const override = existingUsersOption.value === 'update'
+    return confirmUsersImport(validationResult.value.import_id, override)
+  },
+  onSuccess(data) {
+    emit('close')
+    setTimeout(() => {
+      const resultParts: string[] = []
+      if (data.created > 0)
+        resultParts.push(t('users.import_result_created', { count: data.created }))
+      if (data.updated > 0)
+        resultParts.push(t('users.import_result_updated', { count: data.updated }))
+      if (data.skipped > 0)
+        resultParts.push(t('users.import_result_skipped', { count: data.skipped }))
+      if (data.failed > 0) resultParts.push(t('users.import_result_failed', { count: data.failed }))
+
+      notificationsStore.createNotification({
+        kind: 'success',
+        title: t('users.users_imported'),
+        description: capitalize(resultParts.join(', ')),
+      })
+    }, 500)
+  },
+  onError: (error) => {
+    console.error('Error confirming users import:', error)
+  },
+  onSettled: () => {
+    queryCache.invalidateQueries({ key: [USERS_KEY] })
+    queryCache.invalidateQueries({ key: [USERS_TOTAL_KEY] })
+  },
+})
+
+// ---------------------------------------------------------------
+// Lifecycle
+// ---------------------------------------------------------------
+watch(
+  () => isShown,
+  () => {
+    if (isShown) {
+      reset()
+      focusElement(fileInputRef)
+    }
+  },
+)
+
+function reset() {
+  step.value = 'upload'
+  csvFile.value = null
+  fileValidationError.value = ''
+  validationResult.value = null
+  visibleErrorCount.value = ERROR_PREVIEW_COUNT
+  visibleWarningCount.value = ERROR_PREVIEW_COUNT
+  existingUsersOption.value = 'skip'
+  validateReset()
+  confirmReset()
+}
+
+function onClose() {
+  emit('close')
+}
+
+function onFileSelect() {
+  fileValidationError.value = ''
+  validateReset()
+}
+
+function goBack() {
+  step.value = 'upload'
+  validationResult.value = null
+  visibleErrorCount.value = ERROR_PREVIEW_COUNT
+  visibleWarningCount.value = ERROR_PREVIEW_COUNT
+  existingUsersOption.value = 'skip'
+  confirmReset()
+}
+
+function showMoreErrors() {
+  visibleErrorCount.value += ERROR_INCREMENT
+}
+
+function showMoreWarnings() {
+  visibleWarningCount.value += ERROR_INCREMENT
+}
+
+// ---------------------------------------------------------------
+// Template download
+// ---------------------------------------------------------------
+async function downloadTemplate() {
+  downloadingTemplate.value = true
+  try {
+    const blob = await getImportTemplate()
+    const url = URL.createObjectURL(blob)
+    const link = document.createElement('a')
+    link.href = url
+    link.download = 'users_import_template.csv'
+    link.click()
+    URL.revokeObjectURL(url)
+  } catch (error) {
+    console.error('Cannot download template:', error)
+  } finally {
+    downloadingTemplate.value = false
+  }
+}
+
+// ---------------------------------------------------------------
+// Validate
+// ---------------------------------------------------------------
+function onValidate() {
+  fileValidationError.value = ''
+
+  if (!csvFile.value) {
+    fileValidationError.value = t('users.import_no_file_selected')
+    return
+  }
+
+  if (!csvFile.value.name.endsWith('.csv') && csvFile.value.type !== 'text/csv') {
+    fileValidationError.value = t('users.import_file_must_be_csv')
+    return
+  }
+
+  validateMutate(csvFile.value)
+}
+
+// ---------------------------------------------------------------
+// Row helpers
+// ---------------------------------------------------------------
+function formatErrorParams(issue: ImportFieldError): string[] {
+  if (issue.candidates) {
+    const candidateLabels = issue.candidates.map((c) => t(`organizations.${c.type}`)).join(', ')
+    return [`${issue.values[0]} (${candidateLabels})`]
+  } else if (issue.field === 'roles' && issue.message === 'unknown') {
+    return [issue.values.join(', ')]
+  } else {
+    return issue.values
+  }
+}
+
+function errorSummaryText(row: ImportRow): string {
+  const name = String(row.data?.name || row.data?.email || '-')
+  const issue = row.errors?.[0]
+
+  if (!issue) {
+    return t('users.import_row_and_name', { row_number: row.row_number, name })
+  }
+  const params = formatErrorParams(issue)
+  const message = t(`users.import_error_${issue.field}_${issue.message}`, params)
+  return t('users.import_row_and_message', { row_number: row.row_number, name, message })
+}
+</script>
+
+<template>
+  <NeModal
+    :visible="isShown"
+    :size="step === 'preview' ? 'xxl' : 'md'"
+    :title="$t('users.import_users')"
+    :close-aria-label="$t('common.close')"
+    :cancel-label="$t('common.cancel')"
+    :primary-label="
+      step === 'upload'
+        ? $t('users.import_validate')
+        : $t('users.import_confirm', { count: importCount })
+    "
+    :primary-button-disabled="
+      step === 'upload' ? validateLoading : confirmLoading || importCount === 0
+    "
+    :primary-button-loading="step === 'upload' ? validateLoading : confirmLoading"
+    :secondary-label="step === 'preview' ? $t('common.back') : undefined"
+    :secondary-button-disabled="confirmLoading"
+    @close="onClose"
+    @primary-click="step === 'upload' ? onValidate() : confirmMutate()"
+    @secondary-click="goBack"
+  >
+    <!-- ===== STEP 1: UPLOAD ===== -->
+    <div v-if="step === 'upload'" class="space-y-6">
+      <p class="text-sm text-gray-500 dark:text-gray-400">{{ $t('users.import_description') }}</p>
+      <div class="space-y-1.5">
+        <NeFileInput
+          ref="fileInputRef"
+          v-model="csvFile"
+          :label="$t('users.import_file_label')"
+          :dropzone-label="$t('ne_file_input.drag_and_drop_or_click_to_upload')"
+          :invalid-message="fileValidationError"
+          accept=".csv,text/csv"
+          :disabled="validateLoading"
+          @select="onFileSelect"
+        />
+        <i18n-t
+          keypath="users.import_to_get_started"
+          tag="p"
+          class="text-gray-500 dark:text-gray-400"
+        >
+          <template #link>
+            <button
+              type="button"
+              class="text-primary-700 hover:text-primary-800 dark:text-primary-500 dark:hover:text-primary-400 font-medium hover:underline"
+              :disabled="downloadingTemplate"
+              @click="downloadTemplate"
+            >
+              {{ $t('users.download_the_template') }}
+            </button>
+          </template>
+        </i18n-t>
+      </div>
+      <NeInlineNotification
+        v-if="validateError"
+        kind="error"
+        :title="$t('users.import_validation_failed')"
+      >
+        <template #description>
+          <i18n-t keypath="users.import_validation_error_message" tag="p">
+            <template #link>
+              <button
+                type="button"
+                class="underline hover:text-rose-800 dark:hover:text-rose-50"
+                :disabled="downloadingTemplate"
+                @click="downloadTemplate"
+              >
+                {{ $t('users.download_the_template_lc') }}
+              </button>
+            </template>
+          </i18n-t>
+        </template>
+      </NeInlineNotification>
+    </div>
+
+    <!-- ===== STEP 2: PREVIEW ===== -->
+    <div v-else-if="step === 'preview' && validationResult" class="space-y-6">
+      <!-- file preview table -->
+      <ImportUsersPreviewTable :rows="validationResult.rows" />
+
+      <!-- existing users option -->
+      <NeRadioSelection
+        v-model="existingUsersOption"
+        :options="importTypeOptions"
+        :label="$t('users.import_existing_users_label')"
+      >
+        <template #tooltip>
+          <NeTooltip>
+            <template #content>
+              {{ $t('users.import_existing_users_tooltip') }}
+            </template>
+          </NeTooltip>
+        </template>
+      </NeRadioSelection>
+
+      <!-- summary -->
+      <div class="text-sm text-gray-600 dark:text-gray-300">
+        <NeFormItemLabel>{{ $t('users.import_summary') }}</NeFormItemLabel>
+        <p>{{ $t('users.import_summary_detected', { count: validationResult.total_rows }) }}</p>
+        <ul class="mt-1 ml-5 list-disc space-y-0.5">
+          <li>{{ $t('users.import_summary_valid', { count: validationResult.valid_rows }) }}</li>
+          <li
+            v-if="validationResult.error_rows + validationResult.ambiguous_rows > 0"
+            class="text-rose-700 dark:text-rose-500"
+          >
+            {{
+              $t('users.import_summary_errors', {
+                count: validationResult.error_rows + validationResult.ambiguous_rows,
+              })
+            }}
+          </li>
+          <li v-if="validationResult.warning_rows > 0" class="text-amber-700 dark:text-amber-500">
+            {{
+              existingUsersOption === 'skip'
+                ? $t('users.import_summary_warnings_skip', { count: validationResult.warning_rows })
+                : $t('users.import_summary_warnings_update', {
+                    count: validationResult.warning_rows,
+                  })
+            }}
+          </li>
+        </ul>
+      </div>
+
+      <!-- error rows (blocking + ambiguous) -->
+      <NeInlineNotification
+        v-if="errorRows.length > 0"
+        kind="error"
+        :title="$t('users.import_rows_with_errors', { count: errorRows.length })"
+      >
+        <template #description>
+          <ul class="ml-4 list-disc space-y-0.5">
+            <li v-for="row in visibleErrorRows" :key="row.row_number" class="text-sm">
+              {{ errorSummaryText(row) }}
+            </li>
+          </ul>
+          <button
+            v-if="hiddenErrorCount > 0"
+            type="button"
+            class="mt-1 underline hover:text-rose-800 dark:hover:text-rose-50"
+            @click="showMoreErrors()"
+          >
+            {{ $t('common.plus_n_more', { count: hiddenErrorCount }) }}
+          </button>
+        </template>
+      </NeInlineNotification>
+
+      <!-- warning rows (existing users) -->
+      <NeInlineNotification
+        v-if="warningRows.length > 0"
+        kind="warning"
+        :title="
+          existingUsersOption === 'skip'
+            ? $t('users.import_rows_with_warnings_skip', { count: warningRows.length })
+            : $t('users.import_rows_with_warnings_update', { count: warningRows.length })
+        "
+      >
+        <template #description>
+          <ul class="ml-4 list-disc space-y-0.5">
+            <li v-for="row in visibleWarningRows" :key="row.row_number" class="text-sm">
+              {{ errorSummaryText(row) }}
+            </li>
+          </ul>
+          <button
+            v-if="hiddenWarningCount > 0"
+            type="button"
+            class="mt-1 underline hover:text-amber-800 dark:hover:text-amber-50"
+            @click="showMoreWarnings()"
+          >
+            {{ $t('common.plus_n_more', { count: hiddenWarningCount }) }}
+          </button>
+        </template>
+      </NeInlineNotification>
+
+      <!-- confirm error -->
+      <NeInlineNotification
+        v-if="confirmError"
+        kind="error"
+        :title="$t('users.import_confirm_failed')"
+        :description="(confirmError as Error).message"
+      />
+    </div>
+  </NeModal>
+</template>
diff --git a/frontend/src/components/users/ImportUsersPreviewTable.vue b/frontend/src/components/users/ImportUsersPreviewTable.vue
new file mode 100644
index 000000000..2bca2a8ef
--- /dev/null
+++ b/frontend/src/components/users/ImportUsersPreviewTable.vue
@@ -0,0 +1,82 @@
+<!--
+  Copyright (C) 2026 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
+
+<script setup lang="ts">
+import {
+  NeTable,
+  NeTableHead,
+  NeTableHeadCell,
+  NeTableBody,
+  NeTableRow,
+  NeTableCell,
+} from '@nethesis/vue-components'
+import { computed } from 'vue'
+import type { ImportRow } from '@/lib/users/users'
+
+const PREVIEW_ROWS = 5
+
+const props = defineProps<{
+  rows: ImportRow[]
+}>()
+
+const previewRows = computed(() => props.rows.slice(0, PREVIEW_ROWS))
+
+function formatRoles(value: unknown): string {
+  if (!value) return '-'
+  const parts = String(value)
+    .split(';')
+    .map((p) => p.trim())
+    .filter(Boolean)
+  return parts.length ? parts.join(', ') : '-'
+}
+
+function rowField(row: ImportRow, field: string): string {
+  if (field === 'roles') return formatRoles(row.data?.roles)
+  return String(row.data?.[field] || '-')
+}
+</script>
+
+<template>
+  <div>
+    <div class="flex items-center justify-between">
+      <div
+        class="inline-block rounded-t-md bg-indigo-300 px-3 py-1 text-sm font-medium text-gray-900 dark:bg-indigo-900 dark:text-gray-50"
+      >
+        {{ $t('users.import_file_preview') }}
+      </div>
+      <div class="text-gray-500 dark:text-gray-400">
+        {{ $t('users.import_file_preview_description', { count: PREVIEW_ROWS }) }}
+      </div>
+    </div>
+    <NeTable :aria-label="$t('users.import_file_preview')" card-breakpoint="md">
+      <NeTableHead>
+        <NeTableHeadCell>{{ $t('users.email') }}</NeTableHeadCell>
+        <NeTableHeadCell>{{ $t('users.name') }}</NeTableHeadCell>
+        <NeTableHeadCell>{{ $t('users.phone_number') }}</NeTableHeadCell>
+        <NeTableHeadCell>{{ $t('users.organization') }}</NeTableHeadCell>
+        <NeTableHeadCell>{{ $t('users.roles') }}</NeTableHeadCell>
+      </NeTableHead>
+      <NeTableBody>
+        <NeTableRow v-for="row in previewRows" :key="row.row_number">
+          <NeTableCell :data-label="$t('users.email')">
+            {{ rowField(row, 'email') }}
+          </NeTableCell>
+          <NeTableCell :data-label="$t('users.name')">
+            {{ rowField(row, 'name') }}
+          </NeTableCell>
+          <NeTableCell :data-label="$t('users.phone_number')">
+            {{ rowField(row, 'phone') }}
+          </NeTableCell>
+          <NeTableCell :data-label="$t('users.organization')">
+            {{ rowField(row, 'organization') }}
+          </NeTableCell>
+          <NeTableCell :data-label="$t('users.roles')">
+            {{ rowField(row, 'roles') }}
+          </NeTableCell>
+        </NeTableRow>
+      </NeTableBody>
+    </NeTable>
+  </div>
+</template>
diff --git a/frontend/src/components/users/UsersTable.vue b/frontend/src/components/users/UsersTable.vue
index aa4eebe0f..7d10d773a 100644
--- a/frontend/src/components/users/UsersTable.vue
+++ b/frontend/src/components/users/UsersTable.vue
@@ -448,7 +448,7 @@ const onClosePasswordChangedModal = () => {
       :sort-key="sortBy"
       :sort-descending="sortDescending"
       :aria-label="$t('users.title')"
-      card-breakpoint="xl"
+      card-breakpoint="2xl"
       :loading="state.status === 'pending'"
       :skeleton-columns="5"
       :skeleton-rows="7"
@@ -486,7 +486,7 @@ const onClosePasswordChangedModal = () => {
           </NeTableCell>
           <NeTableCell
             :data-label="$t('users.email')"
-            class="break-all xl:break-normal"
+            class="break-all 2xl:break-normal"
             :class="{ 'opacity-50': item.deleted_at }"
           >
             {{ item.email }}
@@ -561,7 +561,7 @@ const onClosePasswordChangedModal = () => {
             </div>
           </NeTableCell>
           <NeTableCell :data-label="$t('common.actions')">
-            <div v-if="canManageUsers()" class="-ml-2.5 flex gap-2 xl:ml-0 xl:justify-end">
+            <div v-if="canManageUsers()" class="-ml-2.5 flex gap-2 2xl:ml-0 2xl:justify-end">
               <NeButton v-if="!item.deleted_at" kind="tertiary" @click="showEditUserDrawer(item)">
                 <template #prefix>
                   <FontAwesomeIcon :icon="faPenToSquare" class="h-4 w-4" aria-hidden="true" />
diff --git a/frontend/src/i18n/en/translation.json b/frontend/src/i18n/en/translation.json
index 6e94058d0..315111e92 100644
--- a/frontend/src/i18n/en/translation.json
+++ b/frontend/src/i18n/en/translation.json
@@ -50,8 +50,9 @@
     "reactivate": "Reactivate",
     "notes": "Notes",
     "show_notes": "Show notes",
-    "plus_n_more": "+{num} more",
-    "node_id": "Node {id}"
+    "plus_n_more": "+{count} more | +{count} more",
+    "node_id": "Node {id}",
+    "back": "Back"
   },
   "shell": {
     "open_sidebar": "Open sidebar",
@@ -305,7 +306,50 @@
     "restore_user_confirmation": "Are you sure you want to restore {name}?",
     "export_users_to_pdf": "Export users to PDF",
     "export_users_to_csv": "Export users to CSV",
-    "user_role_ids_at_least_one_role_is_required": "At least one role is required"
+    "user_role_ids_at_least_one_role_is_required": "At least one role is required",
+    "import_users": "Import users",
+    "import_description": "Upload a CSV file to create multiple users at once. Each row represents one user. Rows with errors will be skipped automatically.",
+    "download_the_template": "Download the template",
+    "download_the_template_lc": "download the template",
+    "import_to_get_started": "{link} to get started",
+    "import_file_label": "CSV file",
+    "import_no_file_selected": "Please select a CSV file",
+    "import_file_must_be_csv": "The file must be a CSV",
+    "import_validate": "Validate",
+    "import_validation_failed": "Validation failed",
+    "import_confirm_failed": "Cannot complete import",
+    "import_confirm": "Import {count} user | Import {count} users",
+    "users_imported": "Users imported",
+    "import_result_created": "created: {count} | created: {count}",
+    "import_result_updated": "updated: {count} | updated: {count}",
+    "import_result_skipped": "skipped: {count} | skipped: {count}",
+    "import_result_failed": "failed: {count} | failed: {count}",
+    "import_summary": "Import summary",
+    "import_summary_detected": "{count} user detected in the selected file: | {count} users detected in the selected file:",
+    "import_summary_valid": "{count} valid | {count} valid",
+    "import_summary_errors": "{count} with errors — will be skipped | {count} with errors — will be skipped",
+    "import_summary_warnings_skip": "{count} existing user — will be skipped | {count} existing users — will be skipped",
+    "import_summary_warnings_update": "{count} existing user —will be updated | {count} existing users — will be updated",
+    "import_rows_with_errors": "{count} row has errors — will be skipped: | {count} rows have errors — will be skipped:",
+    "import_file_preview": "File preview",
+    "import_type_overwrite": "Update existing users",
+    "import_type_skip": "Skip existing users",
+    "import_existing_users_label": "Existing users",
+    "import_existing_users_tooltip": "Existing users can be updated or skipped; users are matched by email",
+    "import_rows_with_warnings_skip": "{count} existing users — will be skipped",
+    "import_rows_with_warnings_update": "{count} existing user — will be updated | {count} existing users — will be updated",
+    "import_file_preview_description": "Only the first {count} rows are shown",
+    "import_validation_error_message": "Make sure the CSV file is correctly formatted or {link}.",
+    "import_row_and_name": "Row {row_number}: {name}",
+    "import_row_and_message": "Row {row_number} ({name}): {message}",
+    "import_error_email_required": "Email is required",
+    "import_error_email_invalid_format": "Invalid email format: {0}",
+    "import_error_email_duplicate_in_csv": "Duplicate email in CSV: {0}",
+    "import_error_phone_invalid_format": "Invalid phone number format: {0}. Make sure it contains the country code, e.g. +39 for Italy",
+    "import_error_phone_already_used": "Phone number {0} already used by another user: {1}",
+    "import_error_organization_ambiguous": "Ambiguous organization name: {0}",
+    "import_error_organization_not_found": "Organization not found: {0}",
+    "import_error_roles_unknown": "Unknown roles: {0}"
   },
   "third_party_apps": {
     "description_nethshop_nethesis_it": "Browse and order Nethesis products and services.",
@@ -621,8 +665,8 @@
     "organization_assigned_description": "The application {application} has been assigned to company {organization}",
     "cannot_assign_organization": "Cannot assign organization",
     "no_organization": "No organization",
-    "num_unassigned": "{num} unassigned",
-    "num_applications_not_assigned": "{num} application is not assigned to any organization. | {num} applications are not assigned to any organization.",
+    "num_unassigned": "{count} unassigned | {count} unassigned",
+    "num_applications_not_assigned": "{count} application is not assigned to any organization. | {count} applications are not assigned to any organization.",
     "show_unassigned": "Show unassigned",
     "dont_show_again": "Don't show again",
     "add_notes": "Add notes",
@@ -818,7 +862,7 @@
     "cannot_delete_silence": "Cannot delete silence",
     "disable_silence": "Disable silence",
     "disable_silence_confirmation": "Disable the silence for the alert {name}?",
-    "disable_silence_notice": "This removes {count} currently suppressing this alert.",
+    "disable_silence_notice": "This removes {count} silence currently suppressing this alert. | This removes {count} silences currently suppressing this alert.",
     "cannot_disable_silence": "Cannot disable silence",
     "silence_disabled": "Silence disabled",
     "silence_disabled_description": "The silence has been disabled for {name}.",
diff --git a/frontend/src/lib/users/users.ts b/frontend/src/lib/users/users.ts
index 840c9418f..6403a1ab7 100644
--- a/frontend/src/lib/users/users.ts
+++ b/frontend/src/lib/users/users.ts
@@ -6,6 +6,7 @@ import { API_URL } from '../config'
 import { useLoginStore } from '@/stores/login'
 import * as v from 'valibot'
 import { downloadFile, type Pagination } from '../common'
+import { parsePhoneNumberFromString } from 'libphonenumber-js'
 
 export const USERS_KEY = 'users'
 export const USERS_TOTAL_KEY = 'usersTotal'
@@ -318,3 +319,130 @@ export async function exportUser(user: User, format: 'pdf' | 'csv') {
     throw error
   }
 }
+
+// ============================================================
+// Import types
+// ============================================================
+
+export interface ImportFieldWarning {
+  field: string
+  message: string
+  value: string
+}
+
+export interface ImportFieldError {
+  field: string
+  message: string
+  values: string[]
+  candidates?: ImportOrgCandidate[]
+}
+
+export interface ImportOrgCandidate {
+  logto_id: string
+  name: string
+  type: string
+}
+
+export interface ImportRow {
+  row_number: number
+  status: 'valid' | 'error' | 'warning' | 'ambiguous'
+  data: Record<string, unknown>
+  errors?: ImportFieldError[]
+  warnings?: ImportFieldWarning[]
+}
+
+export interface ImportValidationResult {
+  import_id: string
+  total_rows: number
+  valid_rows: number
+  error_rows: number
+  warning_rows: number
+  ambiguous_rows: number
+  rows: ImportRow[]
+}
+
+export interface ImportResultRow {
+  row_number: number
+  status: 'created' | 'updated' | 'skipped' | 'failed'
+  id?: string
+  reason?: string
+  error?: string
+}
+
+export interface ImportConfirmResult {
+  created: number
+  updated: number
+  skipped: number
+  failed: number
+  results: ImportResultRow[]
+}
+
+// ============================================================
+// Import API functions
+// ============================================================
+
+export const getImportTemplate = () => {
+  const loginStore = useLoginStore()
+  return axios
+    .get<Blob>(`${API_URL}/users/import/template`, {
+      headers: { Authorization: `Bearer ${loginStore.jwtToken}` },
+      responseType: 'blob',
+    })
+    .then((res) => res.data)
+}
+
+export const validateUsersImport = (file: File) => {
+  const loginStore = useLoginStore()
+  const formData = new FormData()
+  formData.append('file', file)
+  return axios
+    .post<{ code: number; message: string; data: ImportValidationResult }>(
+      `${API_URL}/users/import/validate`,
+      formData,
+      {
+        headers: {
+          Authorization: `Bearer ${loginStore.jwtToken}`,
+          'Content-Type': null,
+        },
+      },
+    )
+    .then((res) => res.data.data)
+}
+
+export const confirmUsersImport = (
+  importId: string,
+  override: boolean,
+  resolutions?: Record<string, { organization_id: string }>,
+) => {
+  const loginStore = useLoginStore()
+  return axios
+    .post<{ code: number; message: string; data: ImportConfirmResult }>(
+      `${API_URL}/users/import/confirm`,
+      { import_id: importId, override, resolutions },
+      {
+        headers: { Authorization: `Bearer ${loginStore.jwtToken}` },
+      },
+    )
+    .then((res) => res.data.data)
+}
+
+// The backend stores phone numbers as digits-only (E.164 without the leading
+// `+`), e.g. "393330001113". This helper renders a human-readable version for
+// display, e.g. "+39 333 000 1113".
+//
+// Inputs we need to handle:
+// - "" / null / undefined → return ""
+// - "393330001113"        → "+39 333 000 1113"
+// - "+39 333 0001113"     → "+39 333 000 1113" (already-formatted legacy values
+//                           still in the DB get re-parsed and re-formatted)
+// - non-parseable values  → returned untouched as a fallback
+export function formatPhoneForDisplay(raw: string | null | undefined): string {
+  if (!raw) {
+    return ''
+  }
+  // libphonenumber-js needs a leading "+" to detect the country from the digits.
+  // If the raw value already has it, parse as-is; otherwise prepend.
+  const candidate = raw.startsWith('+') ? raw : `+${raw}`
+  const parsed = parsePhoneNumberFromString(candidate)
+  return parsed?.formatInternational() ?? raw
+}
diff --git a/frontend/src/views/ApplicationsView.vue b/frontend/src/views/ApplicationsView.vue
index 68eceee7b..8472b43d2 100644
--- a/frontend/src/views/ApplicationsView.vue
+++ b/frontend/src/views/ApplicationsView.vue
@@ -62,13 +62,9 @@ const dontShowUnassignedAppsNotificationAgain = () => {
       v-if="showUnassignedAppsNotification"
       kind="info"
       :description="
-        $t(
-          'applications.num_applications_not_assigned',
-          {
-            num: applicationsTotal.data?.unassigned,
-          },
-          applicationsTotal.data?.unassigned || 0,
-        )
+        $t('applications.num_applications_not_assigned', {
+          count: applicationsTotal.data?.unassigned,
+        })
       "
       :primary-button-label="t('applications.show_unassigned')"
       :secondary-button-label="t('applications.dont_show_again')"
diff --git a/frontend/src/views/UsersView.vue b/frontend/src/views/UsersView.vue
index 3e0bfa457..1e92302bf 100644
--- a/frontend/src/views/UsersView.vue
+++ b/frontend/src/views/UsersView.vue
@@ -6,12 +6,14 @@
 <script setup lang="ts">
 import { NeButton, NeDropdown, NeHeading } from '@nethesis/vue-components'
 import UsersTable from '@/components/users/UsersTable.vue'
+import ImportUsersModal from '@/components/users/ImportUsersModal.vue'
 import { ref } from 'vue'
 import {
   faChevronDown,
   faCirclePlus,
   faFileCsv,
   faFilePdf,
+  faCircleArrowUp,
 } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { PRODUCT_NAME } from '@/lib/config'
@@ -33,9 +35,20 @@ const {
 } = useUsers()
 
 const isShownCreateUserDrawer = ref(false)
+const isShownImportUsersModal = ref(false)
 
 function getBulkActionsMenuItems() {
   return [
+    ...(canManageUsers()
+      ? [
+          {
+            id: 'importUsers',
+            label: t('users.import_users'),
+            icon: faCircleArrowUp,
+            action: () => (isShownImportUsersModal.value = true),
+          },
+        ]
+      : []),
     {
       id: 'exportFilteredToPdf',
       label: t('users.export_users_to_pdf'),
@@ -114,5 +127,10 @@ async function exportUsers(format: 'pdf' | 'csv') {
       :isShownCreateUserDrawer="isShownCreateUserDrawer"
       @close-drawer="isShownCreateUserDrawer = false"
     />
+    <!-- import users drawer -->
+    <ImportUsersModal
+      :is-shown="isShownImportUsersModal"
+      @close="isShownImportUsersModal = false"
+    />
   </div>
 </template>

From e7cf505624a0f1c532d539d79558bcb71db9f089 Mon Sep 17 00:00:00 2001
From: Andrea Leardini <andrea.leardini@nethesis.it>
Date: Thu, 30 Apr 2026 15:54:49 +0200
Subject: [PATCH 04/11] feat: import organizations

---
 .../agents/frontend-accessibility.agent.md    |   1 +
 .../ImportOrganizationsModal.vue              | 481 ++++++++++++++++++
 .../ImportOrganizationsPreviewTable.vue       |  84 +++
 .../src/components/users/ImportUsersModal.vue |  85 ++--
 .../users/ImportUsersPreviewTable.vue         |   8 +-
 frontend/src/i18n/en/translation.json         | 157 +++---
 frontend/src/lib/organizations/customers.ts   |  46 ++
 .../src/lib/organizations/distributors.ts     |  46 ++
 .../src/lib/organizations/organizations.ts    |  50 ++
 frontend/src/lib/organizations/resellers.ts   |  46 ++
 frontend/src/views/CustomersView.vue          |  35 +-
 frontend/src/views/DistributorsView.vue       |  35 +-
 frontend/src/views/ResellersView.vue          |  35 +-
 frontend/src/views/UsersView.vue              |   2 +-
 14 files changed, 1009 insertions(+), 102 deletions(-)
 create mode 100644 frontend/src/components/organizations/ImportOrganizationsModal.vue
 create mode 100644 frontend/src/components/organizations/ImportOrganizationsPreviewTable.vue

diff --git a/.github/agents/frontend-accessibility.agent.md b/.github/agents/frontend-accessibility.agent.md
index e3766ed3e..c568da277 100644
--- a/.github/agents/frontend-accessibility.agent.md
+++ b/.github/agents/frontend-accessibility.agent.md
@@ -168,6 +168,7 @@ Use `canRead*()`, `canManage*()`, `canDestroy*()` from `@/lib/permissions` to gu
 - DO NOT bypass `@nethesis/vue-components` — always prefer its components over raw HTML when they meet the need. Check the Storybook if unsure.
 - DO NOT add inline styles; use Tailwind utility classes only.
 - DO NOT add i18n keys to Italian or other locale files unless explicitly asked.
+- NEVER use hardcoded strings in components — always use i18n keys, even for button labels, error messages, notification titles, etc.
 - ALWAYS preserve the license header on every file you edit or create.
 - ALWAYS use semantic HTML before reaching for ARIA roles.
 
diff --git a/frontend/src/components/organizations/ImportOrganizationsModal.vue b/frontend/src/components/organizations/ImportOrganizationsModal.vue
new file mode 100644
index 000000000..e3278f6c8
--- /dev/null
+++ b/frontend/src/components/organizations/ImportOrganizationsModal.vue
@@ -0,0 +1,481 @@
+<!--
+  Copyright (C) 2026 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
+
+<script setup lang="ts">
+import {
+  NeFileInput,
+  NeInlineNotification,
+  NeModal,
+  NeRadioSelection,
+  focusElement,
+  type RadioOption,
+  NeTooltip,
+  NeFormItemLabel,
+} from '@nethesis/vue-components'
+import { computed, ref, useTemplateRef, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useMutation, useQueryCache } from '@pinia/colada'
+import {
+  type ImportValidationResult,
+  type ImportConfirmResult,
+  type ImportRow,
+} from '@/lib/organizations/organizations'
+import { useNotificationsStore } from '@/stores/notifications'
+import ImportOrganizationsPreviewTable from './ImportOrganizationsPreviewTable.vue'
+import capitalize from 'lodash/capitalize'
+
+const props = defineProps<{
+  isShown: boolean
+  entityName: 'distributors' | 'resellers' | 'customers'
+  entityLabel: string
+  cacheKeys: {
+    main: string
+    total: string
+  }
+  api: {
+    getTemplate: () => Promise<Blob>
+    validate: (file: File) => Promise<ImportValidationResult>
+    confirm: (importId: string, override: boolean) => Promise<ImportConfirmResult>
+  }
+}>()
+
+const emit = defineEmits(['close'])
+
+const { t } = useI18n()
+const queryCache = useQueryCache()
+const notificationsStore = useNotificationsStore()
+
+// step: 'upload' | 'preview'
+const step = ref<'upload' | 'preview'>('upload')
+
+const csvFile = ref<File | null>(null)
+const fileInputRef = useTemplateRef<HTMLInputElement>('fileInputRef')
+const fileValidationError = ref('')
+const validationResult = ref<ImportValidationResult | null>(null)
+const downloadingTemplate = ref(false)
+
+const ERROR_PREVIEW_COUNT = 5
+const ERROR_INCREMENT = 5
+const visibleErrorCount = ref(ERROR_PREVIEW_COUNT)
+const visibleWarningCount = ref(ERROR_PREVIEW_COUNT)
+const existingOrgsOption = ref<'skip' | 'update'>('skip')
+const importTypeOptions = computed<RadioOption[]>(() => [
+  { id: 'skip', label: t('import.organizations.import_type_skip') },
+  { id: 'update', label: t('import.organizations.import_type_overwrite') },
+])
+
+const errorRows = computed(
+  () => validationResult.value?.rows.filter((r) => r.status === 'error') ?? [],
+)
+const warningRows = computed(
+  () => validationResult.value?.rows.filter((r) => r.status === 'warning') ?? [],
+)
+const visibleErrorRows = computed(() => errorRows.value.slice(0, visibleErrorCount.value))
+const hiddenErrorCount = computed(() =>
+  Math.max(0, errorRows.value.length - visibleErrorCount.value),
+)
+const visibleWarningRows = computed(() => warningRows.value.slice(0, visibleWarningCount.value))
+const hiddenWarningCount = computed(() =>
+  Math.max(0, warningRows.value.length - visibleWarningCount.value),
+)
+
+// Count of orgs to import based on the selected option
+const importCount = computed(() => {
+  if (!validationResult.value) return 0
+  if (existingOrgsOption.value === 'skip') {
+    return validationResult.value.valid_rows
+  } else {
+    return validationResult.value.valid_rows + validationResult.value.warning_rows
+  }
+})
+
+const singleEntity = computed(() => {
+  switch (props.entityName) {
+    case 'distributors':
+      return t('organizations.distributors_lc', { count: 1 })
+    case 'resellers':
+      return t('organizations.resellers_lc', { count: 1 })
+    case 'customers':
+      return t('organizations.customers_lc', { count: 1 })
+    default:
+      return props.entityLabel
+  }
+})
+
+// ---------------------------------------------------------------
+// Validate mutation
+// ---------------------------------------------------------------
+const {
+  mutate: validateMutate,
+  isLoading: validateLoading,
+  reset: validateReset,
+  error: validateError,
+} = useMutation({
+  mutation: (file: File) => props.api.validate(file),
+  onSuccess(data) {
+    validationResult.value = data
+    step.value = 'preview'
+  },
+  onError: (error) => {
+    console.error(`Error validating ${props.entityName} import:`, error)
+  },
+})
+
+// ---------------------------------------------------------------
+// Confirm mutation
+// ---------------------------------------------------------------
+const {
+  mutate: confirmMutate,
+  isLoading: confirmLoading,
+  reset: confirmReset,
+  error: confirmError,
+} = useMutation({
+  mutation: () => {
+    if (!validationResult.value) throw new Error('No validation result')
+    const override = existingOrgsOption.value === 'update'
+    return props.api.confirm(validationResult.value.import_id, override)
+  },
+  onSuccess(data) {
+    emit('close')
+    setTimeout(() => {
+      const resultParts: string[] = []
+      if (data.created > 0)
+        resultParts.push(t('import.import_result_created', { count: data.created }))
+      if (data.updated > 0)
+        resultParts.push(t('import.import_result_updated', { count: data.updated }))
+      if (data.skipped > 0)
+        resultParts.push(t('import.import_result_skipped', { count: data.skipped }))
+      if (data.failed > 0)
+        resultParts.push(t('import.import_result_failed', { count: data.failed }))
+
+      notificationsStore.createNotification({
+        kind: 'success',
+        title: t(`${props.entityName}.${props.entityName}_imported`),
+        description: capitalize(resultParts.join(', ')),
+      })
+    }, 500)
+  },
+  onError: (error) => {
+    console.error(`Error confirming ${props.entityName} import:`, error)
+  },
+  onSettled: () => {
+    queryCache.invalidateQueries({ key: [props.cacheKeys.main] })
+    queryCache.invalidateQueries({ key: [props.cacheKeys.total] })
+  },
+})
+
+// ---------------------------------------------------------------
+// Lifecycle
+// ---------------------------------------------------------------
+watch(
+  () => props.isShown,
+  () => {
+    if (props.isShown) {
+      reset()
+      focusElement(fileInputRef)
+    }
+  },
+)
+
+function reset() {
+  step.value = 'upload'
+  csvFile.value = null
+  fileValidationError.value = ''
+  validationResult.value = null
+  visibleErrorCount.value = ERROR_PREVIEW_COUNT
+  visibleWarningCount.value = ERROR_PREVIEW_COUNT
+  existingOrgsOption.value = 'skip'
+  validateReset()
+  confirmReset()
+}
+
+function onClose() {
+  emit('close')
+}
+
+function onFileSelect() {
+  fileValidationError.value = ''
+  validateReset()
+}
+
+function goBack() {
+  step.value = 'upload'
+  validationResult.value = null
+  visibleErrorCount.value = ERROR_PREVIEW_COUNT
+  visibleWarningCount.value = ERROR_PREVIEW_COUNT
+  existingOrgsOption.value = 'skip'
+  confirmReset()
+}
+
+function showMoreErrors() {
+  visibleErrorCount.value += ERROR_INCREMENT
+}
+
+function showMoreWarnings() {
+  visibleWarningCount.value += ERROR_INCREMENT
+}
+
+// ---------------------------------------------------------------
+// Template download
+// ---------------------------------------------------------------
+async function downloadTemplate() {
+  downloadingTemplate.value = true
+  try {
+    const blob = await props.api.getTemplate()
+    const url = URL.createObjectURL(blob)
+    const link = document.createElement('a')
+    link.href = url
+    link.download = `${props.entityName}_import_template.csv`
+    link.click()
+    URL.revokeObjectURL(url)
+  } catch (error) {
+    console.error('Cannot download template:', error)
+  } finally {
+    downloadingTemplate.value = false
+  }
+}
+
+// ---------------------------------------------------------------
+// Validate
+// ---------------------------------------------------------------
+function onValidate() {
+  fileValidationError.value = ''
+
+  if (!csvFile.value) {
+    fileValidationError.value = t('import.import_no_file_selected')
+    return
+  }
+
+  if (!csvFile.value.name.endsWith('.csv') && csvFile.value.type !== 'text/csv') {
+    fileValidationError.value = t('import.import_file_must_be_csv')
+    return
+  }
+
+  validateMutate(csvFile.value)
+}
+
+function errorSummaryText(row: ImportRow): string {
+  const name = String(row.data?.company_name || '-')
+  const issue = row.errors?.[0]
+
+  if (!issue) {
+    return t('import.import_row_and_name', { row_number: row.row_number, name })
+  }
+
+  const message = t(`import.import_error_${issue.field}_${issue.message}`, issue.values)
+  return t('import.import_row_and_message', {
+    row_number: row.row_number,
+    name,
+    message,
+  })
+}
+</script>
+
+<template>
+  <NeModal
+    :visible="isShown"
+    :size="step === 'preview' ? 'xxl' : 'md'"
+    :title="$t(`${entityName}.import_${entityName}`)"
+    :close-aria-label="$t('common.close')"
+    :cancel-label="$t('common.cancel')"
+    :primary-label="
+      step === 'upload'
+        ? $t('common.next')
+        : $t(`import.organizations.import_num_${entityName}`, { count: importCount })
+    "
+    :primary-button-disabled="
+      step === 'upload' ? validateLoading : confirmLoading || importCount === 0
+    "
+    :primary-button-loading="step === 'upload' ? validateLoading : confirmLoading"
+    :secondary-label="step === 'preview' ? $t('common.previous') : undefined"
+    secondary-button-kind="tertiary"
+    :secondary-button-disabled="confirmLoading"
+    @close="onClose"
+    @primary-click="step === 'upload' ? onValidate() : confirmMutate()"
+    @secondary-click="goBack"
+  >
+    <!-- ===== STEP 1: UPLOAD ===== -->
+    <div v-if="step === 'upload'" class="space-y-6">
+      <p class="text-sm text-gray-500 dark:text-gray-400">
+        {{
+          $t('import.organizations.import_description', {
+            entities: t(`organizations.${entityName}_lc`, { count: 2 }),
+            entity: singleEntity,
+          })
+        }}
+      </p>
+      <div class="space-y-1.5">
+        <NeFileInput
+          ref="fileInputRef"
+          v-model="csvFile"
+          :label="$t('import.import_file_label')"
+          :dropzone-label="$t('ne_file_input.drag_and_drop_or_click_to_upload')"
+          :invalid-message="fileValidationError"
+          accept=".csv,text/csv"
+          :disabled="validateLoading"
+          @select="onFileSelect"
+        />
+        <i18n-t
+          keypath="import.import_to_get_started"
+          tag="p"
+          class="text-gray-500 dark:text-gray-400"
+        >
+          <template #link>
+            <button
+              type="button"
+              class="text-primary-700 hover:text-primary-800 dark:text-primary-500 dark:hover:text-primary-400 font-medium hover:underline"
+              :disabled="downloadingTemplate"
+              @click="downloadTemplate"
+            >
+              {{ $t('import.download_the_template') }}
+            </button>
+          </template>
+        </i18n-t>
+      </div>
+      <NeInlineNotification
+        v-if="validateError"
+        kind="error"
+        :title="$t('import.import_validation_failed')"
+      >
+        <template #description>
+          <i18n-t keypath="import.import_validation_error_message" tag="p">
+            <template #link>
+              <button
+                type="button"
+                class="underline hover:text-rose-800 dark:hover:text-rose-50"
+                :disabled="downloadingTemplate"
+                @click="downloadTemplate"
+              >
+                {{ $t('import.download_the_template_lc') }}
+              </button>
+            </template>
+          </i18n-t>
+        </template>
+      </NeInlineNotification>
+    </div>
+
+    <!-- ===== STEP 2: PREVIEW ===== -->
+    <div v-else-if="step === 'preview' && validationResult" class="space-y-6">
+      <!-- file preview table -->
+      <ImportOrganizationsPreviewTable :rows="validationResult.rows" />
+
+      <!-- existing orgs option -->
+      <NeRadioSelection
+        v-model="existingOrgsOption"
+        :options="importTypeOptions"
+        :label="$t('import.organizations.import_existing_label')"
+      >
+        <template #tooltip>
+          <NeTooltip>
+            <template #content>
+              {{ $t('import.organizations.import_existing_tooltip') }}
+            </template>
+          </NeTooltip>
+        </template>
+      </NeRadioSelection>
+
+      <!-- summary -->
+      <div class="text-sm text-gray-600 dark:text-gray-300">
+        <NeFormItemLabel>{{ $t('import.import_summary') }}</NeFormItemLabel>
+        <p>
+          {{
+            $t('import.organizations.import_summary_detected', {
+              count: validationResult.total_rows,
+            })
+          }}
+        </p>
+        <ul class="mt-1 ml-5 list-disc space-y-0.5">
+          <li>
+            {{
+              $t('import.import_summary_valid', {
+                count: validationResult.valid_rows,
+              })
+            }}
+          </li>
+          <li v-if="validationResult.error_rows > 0" class="text-rose-700 dark:text-rose-500">
+            {{
+              $t('import.import_summary_errors', {
+                count: validationResult.error_rows,
+              })
+            }}
+          </li>
+          <li v-if="validationResult.warning_rows > 0" class="text-amber-700 dark:text-amber-500">
+            {{
+              existingOrgsOption === 'skip'
+                ? $t('import.organizations.import_summary_warnings_skip', {
+                    count: validationResult.warning_rows,
+                  })
+                : $t('import.organizations.import_summary_warnings_update', {
+                    count: validationResult.warning_rows,
+                  })
+            }}
+          </li>
+        </ul>
+      </div>
+
+      <!-- error rows -->
+      <NeInlineNotification
+        v-if="errorRows.length > 0"
+        kind="error"
+        :title="$t('import.import_rows_with_errors', { count: errorRows.length })"
+      >
+        <template #description>
+          <ul class="ml-4 list-disc space-y-0.5">
+            <li v-for="row in visibleErrorRows" :key="row.row_number" class="text-sm">
+              {{ errorSummaryText(row) }}
+            </li>
+          </ul>
+          <button
+            v-if="hiddenErrorCount > 0"
+            type="button"
+            class="mt-1 underline hover:text-rose-800 dark:hover:text-rose-50"
+            @click="showMoreErrors()"
+          >
+            {{ $t('common.plus_n_more', { count: hiddenErrorCount }) }}
+          </button>
+        </template>
+      </NeInlineNotification>
+
+      <!-- warning rows (existing orgs) -->
+      <NeInlineNotification
+        v-if="warningRows.length > 0"
+        kind="warning"
+        :title="
+          existingOrgsOption === 'skip'
+            ? $t('import.organizations.import_rows_with_warnings_skip', {
+                count: warningRows.length,
+              })
+            : $t('import.organizations.import_rows_with_warnings_update', {
+                count: warningRows.length,
+              })
+        "
+      >
+        <template #description>
+          <ul class="ml-4 list-disc space-y-0.5">
+            <li v-for="row in visibleWarningRows" :key="row.row_number" class="text-sm">
+              {{ errorSummaryText(row) }}
+            </li>
+          </ul>
+          <button
+            v-if="hiddenWarningCount > 0"
+            type="button"
+            class="mt-1 underline hover:text-amber-800 dark:hover:text-amber-50"
+            @click="showMoreWarnings()"
+          >
+            {{ $t('common.plus_n_more', { count: hiddenWarningCount }) }}
+          </button>
+        </template>
+      </NeInlineNotification>
+
+      <!-- confirm error -->
+      <NeInlineNotification
+        v-if="confirmError"
+        kind="error"
+        :title="$t('import.import_confirm_failed')"
+        :description="(confirmError as Error).message"
+      />
+    </div>
+  </NeModal>
+</template>
diff --git a/frontend/src/components/organizations/ImportOrganizationsPreviewTable.vue b/frontend/src/components/organizations/ImportOrganizationsPreviewTable.vue
new file mode 100644
index 000000000..7fd6fe9e1
--- /dev/null
+++ b/frontend/src/components/organizations/ImportOrganizationsPreviewTable.vue
@@ -0,0 +1,84 @@
+<!--
+  Copyright (C) 2026 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
+
+<script setup lang="ts">
+import {
+  NeTable,
+  NeTableHead,
+  NeTableHeadCell,
+  NeTableBody,
+  NeTableRow,
+  NeTableCell,
+} from '@nethesis/vue-components'
+import { computed } from 'vue'
+import type { ImportRow } from '@/lib/organizations/organizations'
+
+const PREVIEW_ROWS = 5
+
+const props = defineProps<{
+  rows: ImportRow[]
+}>()
+
+const previewRows = computed(() => props.rows.slice(0, PREVIEW_ROWS))
+
+function rowField(row: ImportRow, field: string): string {
+  return String(row.data?.[field] || '-')
+}
+</script>
+
+<template>
+  <div>
+    <div class="flex items-center justify-between">
+      <div
+        class="inline-block rounded-t-md bg-indigo-300 px-3 py-1 text-sm font-medium text-gray-900 dark:bg-indigo-900 dark:text-gray-50"
+      >
+        {{ $t('import.import_file_preview') }}
+      </div>
+      <div class="text-gray-500 dark:text-gray-400">
+        {{ $t('import.import_file_preview_description', { count: PREVIEW_ROWS }) }}
+      </div>
+    </div>
+    <NeTable :aria-label="$t('import.import_file_preview')" card-breakpoint="md">
+      <NeTableHead>
+        <NeTableHeadCell>{{ $t('organizations.name') }}</NeTableHeadCell>
+        <NeTableHeadCell>{{ $t('organizations.vat_number') }}</NeTableHeadCell>
+        <NeTableHeadCell>{{ $t('organizations.description') }}</NeTableHeadCell>
+        <NeTableHeadCell>{{ $t('organizations.address') }}</NeTableHeadCell>
+        <NeTableHeadCell>{{ $t('organizations.city') }}</NeTableHeadCell>
+        <NeTableHeadCell>{{ $t('organizations.main_contact') }}</NeTableHeadCell>
+        <NeTableHeadCell>{{ $t('organizations.email') }}</NeTableHeadCell>
+        <NeTableHeadCell>{{ $t('organizations.phone_number') }}</NeTableHeadCell>
+      </NeTableHead>
+      <NeTableBody>
+        <NeTableRow v-for="row in previewRows" :key="row.row_number">
+          <NeTableCell :data-label="$t('organizations.name')">
+            {{ rowField(row, 'company_name') }}
+          </NeTableCell>
+          <NeTableCell :data-label="$t('organizations.vat_number')">
+            {{ rowField(row, 'vat_number') }}
+          </NeTableCell>
+          <NeTableCell :data-label="$t('organizations.description')">
+            {{ rowField(row, 'description') }}
+          </NeTableCell>
+          <NeTableCell :data-label="$t('organizations.address')">
+            {{ rowField(row, 'address') }}
+          </NeTableCell>
+          <NeTableCell :data-label="$t('organizations.city')">
+            {{ rowField(row, 'city') }}
+          </NeTableCell>
+          <NeTableCell :data-label="$t('organizations.main_contact')">
+            {{ rowField(row, 'main_contact') }}
+          </NeTableCell>
+          <NeTableCell :data-label="$t('organizations.email')">
+            {{ rowField(row, 'email') }}
+          </NeTableCell>
+          <NeTableCell :data-label="$t('organizations.phone_number')">
+            {{ rowField(row, 'phone') }}
+          </NeTableCell>
+        </NeTableRow>
+      </NeTableBody>
+    </NeTable>
+  </div>
+</template>
diff --git a/frontend/src/components/users/ImportUsersModal.vue b/frontend/src/components/users/ImportUsersModal.vue
index f7f93c94d..3c6ae4138 100644
--- a/frontend/src/components/users/ImportUsersModal.vue
+++ b/frontend/src/components/users/ImportUsersModal.vue
@@ -56,8 +56,8 @@ const visibleErrorCount = ref(ERROR_PREVIEW_COUNT)
 const visibleWarningCount = ref(ERROR_PREVIEW_COUNT)
 const existingUsersOption = ref<'skip' | 'update'>('skip')
 const importTypeOptions = computed<RadioOption[]>(() => [
-  { id: 'skip', label: t('users.import_type_skip') },
-  { id: 'update', label: t('users.import_type_overwrite') },
+  { id: 'skip', label: t('import.users.import_type_skip') },
+  { id: 'update', label: t('import.users.import_type_overwrite') },
 ])
 
 const errorRows = computed(
@@ -127,16 +127,17 @@ const {
     setTimeout(() => {
       const resultParts: string[] = []
       if (data.created > 0)
-        resultParts.push(t('users.import_result_created', { count: data.created }))
+        resultParts.push(t('import.import_result_created', { count: data.created }))
       if (data.updated > 0)
-        resultParts.push(t('users.import_result_updated', { count: data.updated }))
+        resultParts.push(t('import.import_result_updated', { count: data.updated }))
       if (data.skipped > 0)
-        resultParts.push(t('users.import_result_skipped', { count: data.skipped }))
-      if (data.failed > 0) resultParts.push(t('users.import_result_failed', { count: data.failed }))
+        resultParts.push(t('import.import_result_skipped', { count: data.skipped }))
+      if (data.failed > 0)
+        resultParts.push(t('import.import_result_failed', { count: data.failed }))
 
       notificationsStore.createNotification({
         kind: 'success',
-        title: t('users.users_imported'),
+        title: t('import.users.users_imported'),
         description: capitalize(resultParts.join(', ')),
       })
     }, 500)
@@ -228,12 +229,12 @@ function onValidate() {
   fileValidationError.value = ''
 
   if (!csvFile.value) {
-    fileValidationError.value = t('users.import_no_file_selected')
+    fileValidationError.value = t('import.import_no_file_selected')
     return
   }
 
   if (!csvFile.value.name.endsWith('.csv') && csvFile.value.type !== 'text/csv') {
-    fileValidationError.value = t('users.import_file_must_be_csv')
+    fileValidationError.value = t('import.import_file_must_be_csv')
     return
   }
 
@@ -245,7 +246,12 @@ function onValidate() {
 // ---------------------------------------------------------------
 function formatErrorParams(issue: ImportFieldError): string[] {
   if (issue.candidates) {
-    const candidateLabels = issue.candidates.map((c) => t(`organizations.${c.type}`)).join(', ')
+    // Deduplicate translated organization labels from candidate matches
+    // before joining them into a comma-separated string.
+    // Using Set preserves first-seen order while removing duplicates.
+    const candidateLabels = Array.from(
+      new Set(issue.candidates.map((c) => t(`organizations.${c.type}`))),
+    ).join(', ')
     return [`${issue.values[0]} (${candidateLabels})`]
   } else if (issue.field === 'roles' && issue.message === 'unknown') {
     return [issue.values.join(', ')]
@@ -262,8 +268,8 @@ function errorSummaryText(row: ImportRow): string {
     return t('users.import_row_and_name', { row_number: row.row_number, name })
   }
   const params = formatErrorParams(issue)
-  const message = t(`users.import_error_${issue.field}_${issue.message}`, params)
-  return t('users.import_row_and_message', { row_number: row.row_number, name, message })
+  const message = t(`import.import_error_${issue.field}_${issue.message}`, params)
+  return t('import.import_row_and_message', { row_number: row.row_number, name, message })
 }
 </script>
 
@@ -271,19 +277,20 @@ function errorSummaryText(row: ImportRow): string {
   <NeModal
     :visible="isShown"
     :size="step === 'preview' ? 'xxl' : 'md'"
-    :title="$t('users.import_users')"
+    :title="$t('import.users.import_users')"
     :close-aria-label="$t('common.close')"
     :cancel-label="$t('common.cancel')"
     :primary-label="
       step === 'upload'
-        ? $t('users.import_validate')
-        : $t('users.import_confirm', { count: importCount })
+        ? $t('common.next')
+        : $t('import.users.import_confirm', { count: importCount })
     "
     :primary-button-disabled="
       step === 'upload' ? validateLoading : confirmLoading || importCount === 0
     "
     :primary-button-loading="step === 'upload' ? validateLoading : confirmLoading"
-    :secondary-label="step === 'preview' ? $t('common.back') : undefined"
+    :secondary-label="step === 'preview' ? $t('common.previous') : undefined"
+    secondary-button-kind="tertiary"
     :secondary-button-disabled="confirmLoading"
     @close="onClose"
     @primary-click="step === 'upload' ? onValidate() : confirmMutate()"
@@ -291,12 +298,14 @@ function errorSummaryText(row: ImportRow): string {
   >
     <!-- ===== STEP 1: UPLOAD ===== -->
     <div v-if="step === 'upload'" class="space-y-6">
-      <p class="text-sm text-gray-500 dark:text-gray-400">{{ $t('users.import_description') }}</p>
+      <p class="text-sm text-gray-500 dark:text-gray-400">
+        {{ $t('import.users.import_description') }}
+      </p>
       <div class="space-y-1.5">
         <NeFileInput
           ref="fileInputRef"
           v-model="csvFile"
-          :label="$t('users.import_file_label')"
+          :label="$t('import.import_file_label')"
           :dropzone-label="$t('ne_file_input.drag_and_drop_or_click_to_upload')"
           :invalid-message="fileValidationError"
           accept=".csv,text/csv"
@@ -304,7 +313,7 @@ function errorSummaryText(row: ImportRow): string {
           @select="onFileSelect"
         />
         <i18n-t
-          keypath="users.import_to_get_started"
+          keypath="import.import_to_get_started"
           tag="p"
           class="text-gray-500 dark:text-gray-400"
         >
@@ -315,7 +324,7 @@ function errorSummaryText(row: ImportRow): string {
               :disabled="downloadingTemplate"
               @click="downloadTemplate"
             >
-              {{ $t('users.download_the_template') }}
+              {{ $t('import.download_the_template') }}
             </button>
           </template>
         </i18n-t>
@@ -323,10 +332,10 @@ function errorSummaryText(row: ImportRow): string {
       <NeInlineNotification
         v-if="validateError"
         kind="error"
-        :title="$t('users.import_validation_failed')"
+        :title="$t('import.import_validation_failed')"
       >
         <template #description>
-          <i18n-t keypath="users.import_validation_error_message" tag="p">
+          <i18n-t keypath="import.import_validation_error_message" tag="p">
             <template #link>
               <button
                 type="button"
@@ -334,7 +343,7 @@ function errorSummaryText(row: ImportRow): string {
                 :disabled="downloadingTemplate"
                 @click="downloadTemplate"
               >
-                {{ $t('users.download_the_template_lc') }}
+                {{ $t('import.download_the_template_lc') }}
               </button>
             </template>
           </i18n-t>
@@ -351,12 +360,12 @@ function errorSummaryText(row: ImportRow): string {
       <NeRadioSelection
         v-model="existingUsersOption"
         :options="importTypeOptions"
-        :label="$t('users.import_existing_users_label')"
+        :label="$t('import.users.import_existing_users_label')"
       >
         <template #tooltip>
           <NeTooltip>
             <template #content>
-              {{ $t('users.import_existing_users_tooltip') }}
+              {{ $t('import.users.import_existing_users_tooltip') }}
             </template>
           </NeTooltip>
         </template>
@@ -364,16 +373,20 @@ function errorSummaryText(row: ImportRow): string {
 
       <!-- summary -->
       <div class="text-sm text-gray-600 dark:text-gray-300">
-        <NeFormItemLabel>{{ $t('users.import_summary') }}</NeFormItemLabel>
-        <p>{{ $t('users.import_summary_detected', { count: validationResult.total_rows }) }}</p>
+        <NeFormItemLabel>{{ $t('import.users.import_summary') }}</NeFormItemLabel>
+        <p>
+          {{ $t('import.users.import_summary_detected', { count: validationResult.total_rows }) }}
+        </p>
         <ul class="mt-1 ml-5 list-disc space-y-0.5">
-          <li>{{ $t('users.import_summary_valid', { count: validationResult.valid_rows }) }}</li>
+          <li>
+            {{ $t('import.import_summary_valid', { count: validationResult.valid_rows }) }}
+          </li>
           <li
             v-if="validationResult.error_rows + validationResult.ambiguous_rows > 0"
             class="text-rose-700 dark:text-rose-500"
           >
             {{
-              $t('users.import_summary_errors', {
+              $t('import.import_summary_errors', {
                 count: validationResult.error_rows + validationResult.ambiguous_rows,
               })
             }}
@@ -381,8 +394,10 @@ function errorSummaryText(row: ImportRow): string {
           <li v-if="validationResult.warning_rows > 0" class="text-amber-700 dark:text-amber-500">
             {{
               existingUsersOption === 'skip'
-                ? $t('users.import_summary_warnings_skip', { count: validationResult.warning_rows })
-                : $t('users.import_summary_warnings_update', {
+                ? $t('import.users.import_summary_warnings_skip', {
+                    count: validationResult.warning_rows,
+                  })
+                : $t('import.users.import_summary_warnings_update', {
                     count: validationResult.warning_rows,
                   })
             }}
@@ -394,7 +409,7 @@ function errorSummaryText(row: ImportRow): string {
       <NeInlineNotification
         v-if="errorRows.length > 0"
         kind="error"
-        :title="$t('users.import_rows_with_errors', { count: errorRows.length })"
+        :title="$t('import.import_rows_with_errors', { count: errorRows.length })"
       >
         <template #description>
           <ul class="ml-4 list-disc space-y-0.5">
@@ -419,8 +434,8 @@ function errorSummaryText(row: ImportRow): string {
         kind="warning"
         :title="
           existingUsersOption === 'skip'
-            ? $t('users.import_rows_with_warnings_skip', { count: warningRows.length })
-            : $t('users.import_rows_with_warnings_update', { count: warningRows.length })
+            ? $t('import.users.import_rows_with_warnings_skip', { count: warningRows.length })
+            : $t('import.users.import_rows_with_warnings_update', { count: warningRows.length })
         "
       >
         <template #description>
@@ -444,7 +459,7 @@ function errorSummaryText(row: ImportRow): string {
       <NeInlineNotification
         v-if="confirmError"
         kind="error"
-        :title="$t('users.import_confirm_failed')"
+        :title="$t('import.import_confirm_failed')"
         :description="(confirmError as Error).message"
       />
     </div>
diff --git a/frontend/src/components/users/ImportUsersPreviewTable.vue b/frontend/src/components/users/ImportUsersPreviewTable.vue
index 2bca2a8ef..679a5f676 100644
--- a/frontend/src/components/users/ImportUsersPreviewTable.vue
+++ b/frontend/src/components/users/ImportUsersPreviewTable.vue
@@ -44,13 +44,13 @@ function rowField(row: ImportRow, field: string): string {
       <div
         class="inline-block rounded-t-md bg-indigo-300 px-3 py-1 text-sm font-medium text-gray-900 dark:bg-indigo-900 dark:text-gray-50"
       >
-        {{ $t('users.import_file_preview') }}
+        {{ $t('import.import_file_preview') }}
       </div>
       <div class="text-gray-500 dark:text-gray-400">
-        {{ $t('users.import_file_preview_description', { count: PREVIEW_ROWS }) }}
+        {{ $t('import.import_file_preview_description', { count: PREVIEW_ROWS }) }}
       </div>
     </div>
-    <NeTable :aria-label="$t('users.import_file_preview')" card-breakpoint="md">
+    <NeTable :aria-label="$t('import.import_file_preview')" card-breakpoint="md">
       <NeTableHead>
         <NeTableHeadCell>{{ $t('users.email') }}</NeTableHeadCell>
         <NeTableHeadCell>{{ $t('users.name') }}</NeTableHeadCell>
@@ -70,7 +70,7 @@ function rowField(row: ImportRow, field: string): string {
             {{ rowField(row, 'phone') }}
           </NeTableCell>
           <NeTableCell :data-label="$t('users.organization')">
-            {{ rowField(row, 'organization') }}
+            {{ rowField(row, 'company_name') }}
           </NeTableCell>
           <NeTableCell :data-label="$t('users.roles')">
             {{ rowField(row, 'roles') }}
diff --git a/frontend/src/i18n/en/translation.json b/frontend/src/i18n/en/translation.json
index 315111e92..a3ea854d6 100644
--- a/frontend/src/i18n/en/translation.json
+++ b/frontend/src/i18n/en/translation.json
@@ -51,8 +51,7 @@
     "notes": "Notes",
     "show_notes": "Show notes",
     "plus_n_more": "+{count} more | +{count} more",
-    "node_id": "Node {id}",
-    "back": "Back"
+    "node_id": "Node {id}"
   },
   "shell": {
     "open_sidebar": "Open sidebar",
@@ -115,7 +114,9 @@
     "export_distributors_to_pdf": "Export distributors to PDF",
     "export_distributors_to_csv": "Export distributors to CSV",
     "total_customers": "Total Customers",
-    "total_systems": "Total Systems"
+    "total_systems": "Total Systems",
+    "import_distributors": "Import distributors",
+    "distributors_imported": "Distributors imported"
   },
   "distributor_detail": {
     "title": "Distributor detail",
@@ -151,6 +152,8 @@
     "no_reseller": "No resellers",
     "export_resellers_to_pdf": "Export resellers to PDF",
     "export_resellers_to_csv": "Export resellers to CSV",
+    "import_resellers": "Import resellers",
+    "resellers_imported": "Resellers imported",
     "total_systems": "Total Systems"
   },
   "customers": {
@@ -174,7 +177,10 @@
     "archive_customer_confirmation": "Are you sure you want to archive customer {name}? All users and systems associated with this company will also be archived.",
     "no_customer": "No customers",
     "export_customers_to_pdf": "Export customers to PDF",
-    "export_customers_to_csv": "Export customers to CSV"
+    "export_customers_to_csv": "Export customers to CSV",
+    "import_customers": "Import customers",
+    "customers_imported": "Customers imported",
+    "total_systems": "Total Systems"
   },
   "organizations": {
     "name": "Company name",
@@ -185,8 +191,11 @@
     "main_contact": "Main contact",
     "owner": "Owner",
     "distributor": "Distributor",
+    "distributors_lc": "distributor | distributors",
     "reseller": "Reseller",
+    "resellers_lc": "reseller | resellers",
     "customer": "Customer",
+    "customers_lc": "customer | customers",
     "name_cannot_be_empty": "Company name is required",
     "custom_data_vat_cannot_be_empty": "VAT number is required",
     "custom_data_vat_already_exists": "A company with this VAT number already exists",
@@ -216,6 +225,79 @@
     "organization_restored_successfully": "{name} restored successfully",
     "restore_organization_confirmation": "Are you sure you want to restore {name}?"
   },
+  "import": {
+    "download_the_template": "Download the template",
+    "download_the_template_lc": "download the template",
+    "import_to_get_started": "{link} to get started",
+    "import_file_label": "CSV file",
+    "import_no_file_selected": "Please select a CSV file",
+    "import_file_must_be_csv": "The file must be a CSV",
+    "import_validation_failed": "Validation failed",
+    "import_confirm_failed": "Cannot complete import",
+    "import_result_created": "created: {count} | created: {count}",
+    "import_result_updated": "updated: {count} | updated: {count}",
+    "import_result_skipped": "skipped: {count} | skipped: {count}",
+    "import_result_failed": "failed: {count} | failed: {count}",
+    "import_summary": "Import summary",
+    "import_summary_valid": "{count} valid | {count} valid",
+    "import_summary_errors": "{count} with errors, will be skipped | {count} with errors, will be skipped",
+    "import_rows_with_errors": "{count} row has errors, will be skipped: | {count} rows have errors, will be skipped:",
+    "import_file_preview": "File preview",
+    "import_file_preview_description": "Only the first {count} rows are shown",
+    "import_validation_error_message": "Make sure the CSV file is correctly formatted or {link}.",
+    "import_row_and_name": "Row {row_number}: {name}",
+    "import_row_and_message": "Row {row_number} ({name}): {message}",
+    "import_error_email_required": "Email is required",
+    "import_error_email_invalid_format": "Invalid email: {0}",
+    "import_error_email_duplicate_in_csv": "Duplicate email in CSV: {0}",
+    "import_error_email_archived": "User exists but is archived. You can resume it if necessary.",
+    "import_error_phone_invalid_format": "Invalid phone number: {0}. Make sure it contains the country code, e.g. +39 for Italy",
+    "import_error_company_name_ambiguous": "Ambiguous company name: {0}",
+    "import_error_company_name_not_found": "Company not found: {0}",
+    "import_error_phone_already_used": "Phone number {0} already used by another user: {1}",
+    "import_error_roles_unknown": "Unknown roles: {0}",
+    "import_error_name_required": "Name is required",
+    "import_error_name_too_long": "Name is too long: {0}",
+    "import_error_company_name_required": "Company name is required",
+    "import_error_company_name_too_long": "Company name is too long: {0}",
+    "import_error_name_duplicate_in_csv": "Duplicate in CSV at line {1}",
+    "import_error_vat_number_required": "VAT number is required",
+    "import_error_vat_number_invalid_format": "Invalid VAT number: {0}",
+    "import_error_vat_number_too_long": "VAT number is too long: {0}",
+    "import_error_language_invalid_value": "Invalid language: {0}",
+    "import_error_language_invalid_format": "Invalid language: {0}",
+    "import_error_vat_number_archived": "Company exists but is archived. You can resume it if necessary.",
+    "users": {
+      "import_users": "Import users",
+      "import_description": "Upload a CSV file to create multiple users at once. Each row represents one user. Rows with errors will be skipped automatically.",
+      "import_confirm": "Import {count} user | Import {count} users",
+      "users_imported": "Users imported",
+      "import_summary_detected": "{count} user detected in the selected file: | {count} users detected in the selected file:",
+      "import_summary_warnings_skip": "{count} existing user — will be skipped | {count} existing users — will be skipped",
+      "import_summary_warnings_update": "{count} existing user —will be updated | {count} existing users — will be updated",
+      "import_type_overwrite": "Update existing users",
+      "import_type_skip": "Skip existing users",
+      "import_existing_users_label": "Existing users",
+      "import_existing_users_tooltip": "Existing users can be updated or skipped; users are matched by email",
+      "import_rows_with_warnings_skip": "{count} existing users — will be skipped",
+      "import_rows_with_warnings_update": "{count} existing user — will be updated | {count} existing users — will be updated"
+    },
+    "organizations": {
+      "import_description": "Upload a CSV file to create multiple {entities} at once. Each row represents one {entity}. Rows with errors will be skipped automatically.",
+      "import_num_distributors": "Import {count} distributor | Import {count} distributors",
+      "import_num_resellers": "Import {count} reseller | Import {count} resellers",
+      "import_num_customers": "Import {count} customer | Import {count} customers",
+      "import_type_skip": "Skip existing companies",
+      "import_type_overwrite": "Update existing companies",
+      "import_existing_label": "Existing companies",
+      "import_existing_tooltip": "Existing companies can be updated or skipped; companies are matched by VAT number",
+      "import_summary_detected": "{count} company detected in the selected file: | {count} companies detected in the selected file:",
+      "import_summary_warnings_skip": "{count} existing company — will be skipped | {count} existing companies — will be skipped",
+      "import_summary_warnings_update": "{count} existing company — will be updated | {count} existing companies — will be updated",
+      "import_rows_with_warnings_skip": "{count} existing company — will be skipped | {count} existing companies — will be skipped",
+      "import_rows_with_warnings_update": "{count} existing company — will be updated | {count} existing companies — will be updated"
+    }
+  },
   "users": {
     "title": "Users",
     "page_description": "List of users authorized to access {productName}, with associated companies and assigned roles.",
@@ -306,50 +388,7 @@
     "restore_user_confirmation": "Are you sure you want to restore {name}?",
     "export_users_to_pdf": "Export users to PDF",
     "export_users_to_csv": "Export users to CSV",
-    "user_role_ids_at_least_one_role_is_required": "At least one role is required",
-    "import_users": "Import users",
-    "import_description": "Upload a CSV file to create multiple users at once. Each row represents one user. Rows with errors will be skipped automatically.",
-    "download_the_template": "Download the template",
-    "download_the_template_lc": "download the template",
-    "import_to_get_started": "{link} to get started",
-    "import_file_label": "CSV file",
-    "import_no_file_selected": "Please select a CSV file",
-    "import_file_must_be_csv": "The file must be a CSV",
-    "import_validate": "Validate",
-    "import_validation_failed": "Validation failed",
-    "import_confirm_failed": "Cannot complete import",
-    "import_confirm": "Import {count} user | Import {count} users",
-    "users_imported": "Users imported",
-    "import_result_created": "created: {count} | created: {count}",
-    "import_result_updated": "updated: {count} | updated: {count}",
-    "import_result_skipped": "skipped: {count} | skipped: {count}",
-    "import_result_failed": "failed: {count} | failed: {count}",
-    "import_summary": "Import summary",
-    "import_summary_detected": "{count} user detected in the selected file: | {count} users detected in the selected file:",
-    "import_summary_valid": "{count} valid | {count} valid",
-    "import_summary_errors": "{count} with errors — will be skipped | {count} with errors — will be skipped",
-    "import_summary_warnings_skip": "{count} existing user — will be skipped | {count} existing users — will be skipped",
-    "import_summary_warnings_update": "{count} existing user —will be updated | {count} existing users — will be updated",
-    "import_rows_with_errors": "{count} row has errors — will be skipped: | {count} rows have errors — will be skipped:",
-    "import_file_preview": "File preview",
-    "import_type_overwrite": "Update existing users",
-    "import_type_skip": "Skip existing users",
-    "import_existing_users_label": "Existing users",
-    "import_existing_users_tooltip": "Existing users can be updated or skipped; users are matched by email",
-    "import_rows_with_warnings_skip": "{count} existing users — will be skipped",
-    "import_rows_with_warnings_update": "{count} existing user — will be updated | {count} existing users — will be updated",
-    "import_file_preview_description": "Only the first {count} rows are shown",
-    "import_validation_error_message": "Make sure the CSV file is correctly formatted or {link}.",
-    "import_row_and_name": "Row {row_number}: {name}",
-    "import_row_and_message": "Row {row_number} ({name}): {message}",
-    "import_error_email_required": "Email is required",
-    "import_error_email_invalid_format": "Invalid email format: {0}",
-    "import_error_email_duplicate_in_csv": "Duplicate email in CSV: {0}",
-    "import_error_phone_invalid_format": "Invalid phone number format: {0}. Make sure it contains the country code, e.g. +39 for Italy",
-    "import_error_phone_already_used": "Phone number {0} already used by another user: {1}",
-    "import_error_organization_ambiguous": "Ambiguous organization name: {0}",
-    "import_error_organization_not_found": "Organization not found: {0}",
-    "import_error_roles_unknown": "Unknown roles: {0}"
+    "user_role_ids_at_least_one_role_is_required": "At least one role is required"
   },
   "third_party_apps": {
     "description_nethshop_nethesis_it": "Browse and order Nethesis products and services.",
@@ -512,7 +551,7 @@
     "cannot_create_system": "Cannot create system",
     "cannot_save_system": "Cannot save system",
     "save_system": "Save system",
-    "no_organizations": "No organizations",
+    "no_organizations": "No companies",
     "archive_system": "Archive system",
     "archive_system_confirmation": "Are you sure you want to archive system {name}? It will no longer receive updates and you will not be able to request support for it.",
     "system_archived": "System archived",
@@ -663,10 +702,10 @@
     "application": "Application",
     "organization_assigned": "Application assigned to company",
     "organization_assigned_description": "The application {application} has been assigned to company {organization}",
-    "cannot_assign_organization": "Cannot assign organization",
-    "no_organization": "No organization",
+    "cannot_assign_organization": "Cannot assign company",
+    "no_organization": "No company",
     "num_unassigned": "{count} unassigned | {count} unassigned",
-    "num_applications_not_assigned": "{count} application is not assigned to any organization. | {count} applications are not assigned to any organization.",
+    "num_applications_not_assigned": "{count} application is not assigned to any company. | {count} applications are not assigned to any company.",
     "show_unassigned": "Show unassigned",
     "dont_show_again": "Don't show again",
     "add_notes": "Add notes",
@@ -773,7 +812,7 @@
     "alpha_notice": "ALPHA \u2013 This section has no final design. UI may change.",
     "cannot_retrieve_alerts": "Cannot retrieve alerts",
     "no_alerts": "No alerts found",
-    "no_alerts_description": "There are currently no active alerts for this organization",
+    "no_alerts_description": "There are currently no active alerts for this company",
     "no_alerts_found": "No alerts match the current filters",
     "active_alerts": "Active Alerts",
     "alert_history": "Alert History",
@@ -802,7 +841,7 @@
     "no_alert_history": "No alert history",
     "no_alert_history_description": "No resolved alerts found for this system",
     "no_alert_history_found": "No alert history matches the current filters",
-    "config_page_description": "View and manage the alerting configuration for your organization",
+    "config_page_description": "View and manage the alerting configuration for your company",
     "cannot_retrieve_config": "Cannot retrieve alerting configuration",
     "config_json": "Configuration (JSON)",
     "config_yaml": "Configuration (YAML)",
@@ -816,7 +855,7 @@
     "per_severity_overrides": "Per-severity overrides",
     "per_system_overrides": "Per-system overrides",
     "no_config": "No configuration found",
-    "no_config_description": "Alerting is not configured for this organization",
+    "no_config_description": "Alerting is not configured for this company",
     "edit_config": "Edit configuration",
     "save_config": "Save configuration",
     "disable_alerts": "Disable all alerts",
@@ -868,11 +907,11 @@
     "silence_disabled_description": "The silence has been disabled for {name}.",
     "history_tab_description": "History of resolved alerts for this system",
     "cannot_retrieve_system_alerts": "Cannot retrieve active alerts for this system",
-    "cannot_retrieve_organizations": "Cannot retrieve organizations",
+    "cannot_retrieve_organizations": "Cannot retrieve companies",
     "alerting_title": "Alerting",
-    "alerting_page_description": "View active alerts and manage alerting configuration for any organization",
+    "alerting_page_description": "View active alerts and manage alerting configuration for any company",
     "view_alert_details": "View alert details",
-    "select_organization": "Organization",
-    "no_organizations_description": "There are no organizations available for alerting"
+    "select_organization": "Company",
+    "no_organizations_description": "There are no companies available for alerting"
   }
 }
diff --git a/frontend/src/lib/organizations/customers.ts b/frontend/src/lib/organizations/customers.ts
index 15b30d8e1..20219a324 100644
--- a/frontend/src/lib/organizations/customers.ts
+++ b/frontend/src/lib/organizations/customers.ts
@@ -6,6 +6,7 @@ import { API_URL } from '../config'
 import { useLoginStore } from '@/stores/login'
 import * as v from 'valibot'
 import { type Pagination } from '../common'
+import type { ImportValidationResult, ImportConfirmResult } from './organizations'
 
 export const CUSTOMERS_KEY = 'customers'
 export const CUSTOMERS_TOTAL_KEY = 'customersTotal'
@@ -250,3 +251,48 @@ export const getExport = (
     })
     .then((res) => res.data)
 }
+
+// ============================================================
+// Import API functions
+// ============================================================
+
+export const getImportTemplate = () => {
+  const loginStore = useLoginStore()
+  return axios
+    .get<Blob>(`${API_URL}/customers/import/template`, {
+      headers: { Authorization: `Bearer ${loginStore.jwtToken}` },
+      responseType: 'blob',
+    })
+    .then((res) => res.data)
+}
+
+export const validateCustomersImport = (file: File) => {
+  const loginStore = useLoginStore()
+  const formData = new FormData()
+  formData.append('file', file)
+  return axios
+    .post<{ code: number; message: string; data: ImportValidationResult }>(
+      `${API_URL}/customers/import/validate`,
+      formData,
+      {
+        headers: {
+          Authorization: `Bearer ${loginStore.jwtToken}`,
+          'Content-Type': null,
+        },
+      },
+    )
+    .then((res) => res.data.data)
+}
+
+export const confirmCustomersImport = (importId: string, override: boolean) => {
+  const loginStore = useLoginStore()
+  return axios
+    .post<{ code: number; message: string; data: ImportConfirmResult }>(
+      `${API_URL}/customers/import/confirm`,
+      { import_id: importId, override },
+      {
+        headers: { Authorization: `Bearer ${loginStore.jwtToken}` },
+      },
+    )
+    .then((res) => res.data.data)
+}
diff --git a/frontend/src/lib/organizations/distributors.ts b/frontend/src/lib/organizations/distributors.ts
index 43a89a111..2b34ab7d1 100644
--- a/frontend/src/lib/organizations/distributors.ts
+++ b/frontend/src/lib/organizations/distributors.ts
@@ -6,6 +6,7 @@ import { API_URL } from '../config'
 import { useLoginStore } from '@/stores/login'
 import * as v from 'valibot'
 import { type Pagination } from '../common'
+import type { ImportValidationResult, ImportConfirmResult } from './organizations'
 
 export const DISTRIBUTORS_KEY = 'distributors'
 export const DISTRIBUTORS_TOTAL_KEY = 'distributorsTotal'
@@ -250,3 +251,48 @@ export const getExport = (
     })
     .then((res) => res.data)
 }
+
+// ============================================================
+// Import API functions
+// ============================================================
+
+export const getImportTemplate = () => {
+  const loginStore = useLoginStore()
+  return axios
+    .get<Blob>(`${API_URL}/distributors/import/template`, {
+      headers: { Authorization: `Bearer ${loginStore.jwtToken}` },
+      responseType: 'blob',
+    })
+    .then((res) => res.data)
+}
+
+export const validateDistributorsImport = (file: File) => {
+  const loginStore = useLoginStore()
+  const formData = new FormData()
+  formData.append('file', file)
+  return axios
+    .post<{ code: number; message: string; data: ImportValidationResult }>(
+      `${API_URL}/distributors/import/validate`,
+      formData,
+      {
+        headers: {
+          Authorization: `Bearer ${loginStore.jwtToken}`,
+          'Content-Type': null,
+        },
+      },
+    )
+    .then((res) => res.data.data)
+}
+
+export const confirmDistributorsImport = (importId: string, override: boolean) => {
+  const loginStore = useLoginStore()
+  return axios
+    .post<{ code: number; message: string; data: ImportConfirmResult }>(
+      `${API_URL}/distributors/import/confirm`,
+      { import_id: importId, override },
+      {
+        headers: { Authorization: `Bearer ${loginStore.jwtToken}` },
+      },
+    )
+    .then((res) => res.data.data)
+}
diff --git a/frontend/src/lib/organizations/organizations.ts b/frontend/src/lib/organizations/organizations.ts
index 73e19d074..6c095f441 100644
--- a/frontend/src/lib/organizations/organizations.ts
+++ b/frontend/src/lib/organizations/organizations.ts
@@ -42,3 +42,53 @@ export function getOrganizationIcon(orgType: string) {
       return faQuestion
   }
 }
+
+// ============================================================
+// Common Import Types (used across all entities)
+// ============================================================
+
+export interface ImportFieldWarning {
+  field: string
+  message: string
+  value: string
+}
+
+export interface ImportFieldError {
+  field: string
+  message: string
+  values: string[]
+}
+
+export interface ImportRow {
+  row_number: number
+  status: 'valid' | 'error' | 'warning'
+  data: Record<string, unknown>
+  errors?: ImportFieldError[]
+  warnings?: ImportFieldWarning[]
+}
+
+export interface ImportValidationResult {
+  import_id: string
+  total_rows: number
+  valid_rows: number
+  error_rows: number
+  warning_rows: number
+  ambiguous_rows: number
+  rows: ImportRow[]
+}
+
+export interface ImportResultRow {
+  row_number: number
+  status: 'created' | 'updated' | 'skipped' | 'failed'
+  id?: string
+  reason?: string
+  error?: string
+}
+
+export interface ImportConfirmResult {
+  created: number
+  updated: number
+  skipped: number
+  failed: number
+  results: ImportResultRow[]
+}
diff --git a/frontend/src/lib/organizations/resellers.ts b/frontend/src/lib/organizations/resellers.ts
index 64f00a2cc..3d5f6a6fb 100644
--- a/frontend/src/lib/organizations/resellers.ts
+++ b/frontend/src/lib/organizations/resellers.ts
@@ -6,6 +6,7 @@ import { API_URL } from '../config'
 import { useLoginStore } from '@/stores/login'
 import * as v from 'valibot'
 import { type Pagination } from '../common'
+import type { ImportValidationResult, ImportConfirmResult } from './organizations'
 
 export const RESELLERS_KEY = 'resellers'
 export const RESELLERS_TOTAL_KEY = 'resellersTotal'
@@ -250,3 +251,48 @@ export const getExport = (
     })
     .then((res) => res.data)
 }
+
+// ============================================================
+// Import API functions
+// ============================================================
+
+export const getImportTemplate = () => {
+  const loginStore = useLoginStore()
+  return axios
+    .get<Blob>(`${API_URL}/resellers/import/template`, {
+      headers: { Authorization: `Bearer ${loginStore.jwtToken}` },
+      responseType: 'blob',
+    })
+    .then((res) => res.data)
+}
+
+export const validateResellersImport = (file: File) => {
+  const loginStore = useLoginStore()
+  const formData = new FormData()
+  formData.append('file', file)
+  return axios
+    .post<{ code: number; message: string; data: ImportValidationResult }>(
+      `${API_URL}/resellers/import/validate`,
+      formData,
+      {
+        headers: {
+          Authorization: `Bearer ${loginStore.jwtToken}`,
+          'Content-Type': null,
+        },
+      },
+    )
+    .then((res) => res.data.data)
+}
+
+export const confirmResellersImport = (importId: string, override: boolean) => {
+  const loginStore = useLoginStore()
+  return axios
+    .post<{ code: number; message: string; data: ImportConfirmResult }>(
+      `${API_URL}/resellers/import/confirm`,
+      { import_id: importId, override },
+      {
+        headers: { Authorization: `Bearer ${loginStore.jwtToken}` },
+      },
+    )
+    .then((res) => res.data.data)
+}
diff --git a/frontend/src/views/CustomersView.vue b/frontend/src/views/CustomersView.vue
index 8cc07b4bb..7fe73d2a3 100644
--- a/frontend/src/views/CustomersView.vue
+++ b/frontend/src/views/CustomersView.vue
@@ -6,9 +6,11 @@
 <script setup lang="ts">
 import { NeButton, NeDropdown, NeHeading } from '@nethesis/vue-components'
 import CustomersTable from '@/components/customers/CustomersTable.vue'
+import ImportOrganizationsModal from '@/components/organizations/ImportOrganizationsModal.vue'
 import { ref } from 'vue'
 import {
   faChevronDown,
+  faCircleArrowUp,
   faCirclePlus,
   faFileCsv,
   faFilePdf,
@@ -17,16 +19,34 @@ import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { canManageCustomers } from '@/lib/permissions'
 import { useCustomers } from '@/queries/organizations/customers'
 import { useI18n } from 'vue-i18n'
-import { getExport } from '@/lib/organizations/customers'
+import {
+  getExport,
+  getImportTemplate,
+  validateCustomersImport,
+  confirmCustomersImport,
+  CUSTOMERS_KEY,
+  CUSTOMERS_TOTAL_KEY,
+} from '@/lib/organizations/customers'
 import { downloadFile } from '@/lib/common'
 
 const { t } = useI18n()
 const { state, debouncedTextFilter, statusFilter, sortBy, sortDescending } = useCustomers()
 
 const isShownCreateCustomerDrawer = ref(false)
+const isShownImportCustomersModal = ref(false)
 
 function getBulkActionsMenuItems() {
   return [
+    ...(canManageCustomers()
+      ? [
+          {
+            id: 'importCustomers',
+            label: t('customers.import_customers'),
+            icon: faCircleArrowUp,
+            action: () => (isShownImportCustomersModal.value = true),
+          },
+        ]
+      : []),
     {
       id: 'exportFilteredToPdf',
       label: t('customers.export_customers_to_pdf'),
@@ -106,5 +126,18 @@ async function exportCustomers(format: 'pdf' | 'csv') {
       :isShownCreateCustomerDrawer="isShownCreateCustomerDrawer"
       @close-drawer="isShownCreateCustomerDrawer = false"
     />
+    <!-- import customers modal -->
+    <ImportOrganizationsModal
+      :is-shown="isShownImportCustomersModal"
+      entity-name="customers"
+      entity-label="customer"
+      :cache-keys="{ main: CUSTOMERS_KEY, total: CUSTOMERS_TOTAL_KEY }"
+      :api="{
+        getTemplate: getImportTemplate,
+        validate: validateCustomersImport,
+        confirm: confirmCustomersImport,
+      }"
+      @close="isShownImportCustomersModal = false"
+    />
   </div>
 </template>
diff --git a/frontend/src/views/DistributorsView.vue b/frontend/src/views/DistributorsView.vue
index fc0acbb35..54055bd08 100644
--- a/frontend/src/views/DistributorsView.vue
+++ b/frontend/src/views/DistributorsView.vue
@@ -6,9 +6,11 @@
 <script setup lang="ts">
 import { NeButton, NeDropdown, NeHeading } from '@nethesis/vue-components'
 import DistributorsTable from '@/components/distributors/DistributorsTable.vue'
+import ImportOrganizationsModal from '@/components/organizations/ImportOrganizationsModal.vue'
 import { ref } from 'vue'
 import {
   faChevronDown,
+  faCircleArrowUp,
   faCirclePlus,
   faFileCsv,
   faFilePdf,
@@ -17,16 +19,34 @@ import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { canManageDistributors } from '@/lib/permissions'
 import { useDistributors } from '@/queries/organizations/distributors'
 import { useI18n } from 'vue-i18n'
-import { getExport } from '@/lib/organizations/distributors'
+import {
+  getExport,
+  getImportTemplate,
+  validateDistributorsImport,
+  confirmDistributorsImport,
+  DISTRIBUTORS_KEY,
+  DISTRIBUTORS_TOTAL_KEY,
+} from '@/lib/organizations/distributors'
 import { downloadFile } from '@/lib/common'
 
 const { t } = useI18n()
 const { state, debouncedTextFilter, statusFilter, sortBy, sortDescending } = useDistributors()
 
 const isShownCreateDistributorDrawer = ref(false)
+const isShownImportDistributorsModal = ref(false)
 
 function getBulkActionsMenuItems() {
   return [
+    ...(canManageDistributors()
+      ? [
+          {
+            id: 'importDistributors',
+            label: t('distributors.import_distributors'),
+            icon: faCircleArrowUp,
+            action: () => (isShownImportDistributorsModal.value = true),
+          },
+        ]
+      : []),
     {
       id: 'exportFilteredToPdf',
       label: t('distributors.export_distributors_to_pdf'),
@@ -107,5 +127,18 @@ async function exportDistributors(format: 'pdf' | 'csv') {
       :isShownCreateDistributorDrawer="isShownCreateDistributorDrawer"
       @close-drawer="isShownCreateDistributorDrawer = false"
     />
+    <!-- import distributors modal -->
+    <ImportOrganizationsModal
+      :is-shown="isShownImportDistributorsModal"
+      entity-name="distributors"
+      entity-label="distributor"
+      :cache-keys="{ main: DISTRIBUTORS_KEY, total: DISTRIBUTORS_TOTAL_KEY }"
+      :api="{
+        getTemplate: getImportTemplate,
+        validate: validateDistributorsImport,
+        confirm: confirmDistributorsImport,
+      }"
+      @close="isShownImportDistributorsModal = false"
+    />
   </div>
 </template>
diff --git a/frontend/src/views/ResellersView.vue b/frontend/src/views/ResellersView.vue
index 127c98397..8f2858757 100644
--- a/frontend/src/views/ResellersView.vue
+++ b/frontend/src/views/ResellersView.vue
@@ -6,9 +6,11 @@
 <script setup lang="ts">
 import { NeButton, NeDropdown, NeHeading } from '@nethesis/vue-components'
 import ResellersTable from '@/components/resellers/ResellersTable.vue'
+import ImportOrganizationsModal from '@/components/organizations/ImportOrganizationsModal.vue'
 import { ref } from 'vue'
 import {
   faChevronDown,
+  faCircleArrowUp,
   faCirclePlus,
   faFileCsv,
   faFilePdf,
@@ -17,16 +19,34 @@ import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { canManageResellers } from '@/lib/permissions'
 import { useResellers } from '@/queries/organizations/resellers'
 import { useI18n } from 'vue-i18n'
-import { getExport } from '@/lib/organizations/resellers'
+import {
+  getExport,
+  getImportTemplate,
+  validateResellersImport,
+  confirmResellersImport,
+  RESELLERS_KEY,
+  RESELLERS_TOTAL_KEY,
+} from '@/lib/organizations/resellers'
 import { downloadFile } from '@/lib/common'
 
 const { t } = useI18n()
 const { state, debouncedTextFilter, statusFilter, sortBy, sortDescending } = useResellers()
 
 const isShownCreateResellerDrawer = ref(false)
+const isShownImportResellersModal = ref(false)
 
 function getBulkActionsMenuItems() {
   return [
+    ...(canManageResellers()
+      ? [
+          {
+            id: 'importResellers',
+            label: t('resellers.import_resellers'),
+            icon: faCircleArrowUp,
+            action: () => (isShownImportResellersModal.value = true),
+          },
+        ]
+      : []),
     {
       id: 'exportFilteredToPdf',
       label: t('resellers.export_resellers_to_pdf'),
@@ -106,5 +126,18 @@ async function exportResellers(format: 'pdf' | 'csv') {
       :isShownCreateResellerDrawer="isShownCreateResellerDrawer"
       @close-drawer="isShownCreateResellerDrawer = false"
     />
+    <!-- import resellers modal -->
+    <ImportOrganizationsModal
+      :is-shown="isShownImportResellersModal"
+      entity-name="resellers"
+      entity-label="reseller"
+      :cache-keys="{ main: RESELLERS_KEY, total: RESELLERS_TOTAL_KEY }"
+      :api="{
+        getTemplate: getImportTemplate,
+        validate: validateResellersImport,
+        confirm: confirmResellersImport,
+      }"
+      @close="isShownImportResellersModal = false"
+    />
   </div>
 </template>
diff --git a/frontend/src/views/UsersView.vue b/frontend/src/views/UsersView.vue
index 1e92302bf..1404d4ff1 100644
--- a/frontend/src/views/UsersView.vue
+++ b/frontend/src/views/UsersView.vue
@@ -43,7 +43,7 @@ function getBulkActionsMenuItems() {
       ? [
           {
             id: 'importUsers',
-            label: t('users.import_users'),
+            label: t('import.users.import_users'),
             icon: faCircleArrowUp,
             action: () => (isShownImportUsersModal.value = true),
           },

From fd43f8e4fbaca58c01884cb431bd5d784db39abf Mon Sep 17 00:00:00 2001
From: Andrea Leardini <andrea.leardini@nethesis.it>
Date: Thu, 7 May 2026 11:17:58 +0200
Subject: [PATCH 05/11] fix: improve management of phones numbers

---
 .../users/CreateOrEditUserDrawer.vue          |  70 +++-
 frontend/src/i18n/en/translation.json         |   1 +
 frontend/src/lib/phone.ts                     | 326 ++++++++++++++++++
 frontend/src/lib/users/users.ts               |  22 --
 4 files changed, 384 insertions(+), 35 deletions(-)
 create mode 100644 frontend/src/lib/phone.ts

diff --git a/frontend/src/components/users/CreateOrEditUserDrawer.vue b/frontend/src/components/users/CreateOrEditUserDrawer.vue
index 2109460c0..1b0c5e5a5 100644
--- a/frontend/src/components/users/CreateOrEditUserDrawer.vue
+++ b/frontend/src/components/users/CreateOrEditUserDrawer.vue
@@ -12,6 +12,7 @@ import {
   focusElement,
   NeCombobox,
   type NeComboboxOption,
+  NeFormItemLabel,
 } from '@nethesis/vue-components'
 import { computed, ref, useTemplateRef, watch, type Ref, type ShallowRef } from 'vue'
 import {
@@ -21,7 +22,6 @@ import {
   putUser,
   USERS_KEY,
   USERS_TOTAL_KEY,
-  formatPhoneForDisplay,
   type CreateUser,
   type EditUser,
   type User,
@@ -39,6 +39,7 @@ import { normalize } from '@/lib/common'
 import { organizationsQuery } from '@/queries/organizations/organizations'
 import { userRolesQuery } from '@/queries/users/userRoles'
 import { USER_FILTERS_KEY } from '@/lib/users/userFilters'
+import { countries, parsePhoneNumber, combinePhoneParts } from '@/lib/phone'
 
 const { isShown = false, currentUser = undefined } = defineProps<{
   isShown: boolean
@@ -139,6 +140,7 @@ const userRoles: Ref<NeComboboxOption[]> = ref([])
 const userRoleIdsRef = useTemplateRef<HTMLInputElement>('userRoleIdsRef')
 const phone = ref('')
 const phoneRef = useTemplateRef<HTMLInputElement>('phoneRef')
+const countryCode = ref('')
 const validationIssues = ref<Record<string, string[]>>({})
 
 const fieldRefs: Record<string, Readonly<ShallowRef<HTMLInputElement | null>>> = {
@@ -177,6 +179,12 @@ const userRoleOptions = computed(() => {
   }))
 })
 
+const countryCodeOptions: NeComboboxOption[] = countries.map((c) => ({
+  id: `${c.iso2}`,
+  label: `${c.country_name} (+${c.country_code})`,
+  description: c.flag,
+}))
+
 watch(
   () => isShown,
   () => {
@@ -188,15 +196,31 @@ watch(
         // editing user
         email.value = currentUser.email
         name.value = currentUser.name
-        phone.value = formatPhoneForDisplay(currentUser.phone)
         organizationId.value = currentUser.organization?.logto_id || ''
         userRoles.value = mapUserRoles()
+
+        // Parse phone number to extract country code and local part
+        if (currentUser.phone) {
+          const parsed = parsePhoneNumber(currentUser.phone)
+          if (parsed) {
+            countryCode.value = parsed.countryIso2
+            phone.value = parsed.localPart
+          } else {
+            // Fallback if parsing fails
+            countryCode.value = 'it'
+            phone.value = currentUser.phone
+          }
+        } else {
+          countryCode.value = 'it'
+          phone.value = ''
+        }
       } else {
         // creating user, reset form to defaults
         email.value = ''
         name.value = ''
         organizationId.value = ''
         userRoles.value = []
+        countryCode.value = 'it'
         phone.value = ''
       }
     }
@@ -299,7 +323,7 @@ async function saveUser() {
     name: name.value,
     user_role_ids: userRoles.value.map((role) => role.id),
     organization_id: organizationId.value,
-    phone: phone.value,
+    phone: combinePhoneParts(countryCode.value, phone.value),
     custom_data: {},
   }
 
@@ -417,16 +441,36 @@ function getEmailInvalidMessage(): string {
           :user-input-label="t('ne_combobox.user_input_label')"
         />
         <!-- phone -->
-        <NeTextInput
-          ref="phoneRef"
-          v-model="phone"
-          @blur="phone = phone.trim()"
-          :label="$t('users.phone_number')"
-          :invalid-message="validationIssues.phone?.[0] ? $t(validationIssues.phone[0]) : ''"
-          :disabled="saving"
-          :optional="true"
-          :optional-label="t('common.optional')"
-        />
+        <div>
+          <div class="flex items-center justify-between gap-4">
+            <NeFormItemLabel>{{ $t('users.phone_number') }}</NeFormItemLabel>
+            <NeFormItemLabel>{{ $t('common.optional') }}</NeFormItemLabel>
+          </div>
+          <div class="flex gap-4">
+            <!-- country code -->
+            <NeCombobox
+              v-model="countryCode"
+              :options="countryCodeOptions"
+              :disabled="saving"
+              :no-results-label="$t('ne_combobox.no_results')"
+              :limited-options-label="$t('ne_combobox.limited_options_label')"
+              :no-options-label="$t('ne_combobox.no_options_label')"
+              :selected-label="$t('ne_combobox.selected')"
+              :user-input-label="$t('ne_combobox.user_input_label')"
+              :optional-label="$t('common.optional')"
+            />
+            <!-- local part -->
+            <NeTextInput
+              ref="phoneRef"
+              v-model="phone"
+              @blur="phone = phone.trim()"
+              :invalid-message="validationIssues.phone?.[0] ? t(validationIssues.phone[0]) : ''"
+              :disabled="saving"
+              :optional="true"
+              :optional-label="t('common.optional')"
+            />
+          </div>
+        </div>
         <!-- new user info -->
         <NeInlineNotification
           v-if="!currentUser"
diff --git a/frontend/src/i18n/en/translation.json b/frontend/src/i18n/en/translation.json
index a3ea854d6..1f319255d 100644
--- a/frontend/src/i18n/en/translation.json
+++ b/frontend/src/i18n/en/translation.json
@@ -359,6 +359,7 @@
     "cannot_reset_password": "Cannot reset password",
     "phone_invalid_format": "Invalid phone number",
     "phone_already_exists": "A user with this phone number already exists",
+    "phone_plus_not_allowed": "Cannot contain '+'",
     "the_password_has_been_reset": "The password has been reset",
     "credentials_updated_description": "The credentials for user {name} have been updated",
     "copy_credentials": "Copy credentials",
diff --git a/frontend/src/lib/phone.ts b/frontend/src/lib/phone.ts
new file mode 100644
index 000000000..4affca58e
--- /dev/null
+++ b/frontend/src/lib/phone.ts
@@ -0,0 +1,326 @@
+//  Copyright (C) 2026 Nethesis S.r.l.
+//  SPDX-License-Identifier: GPL-3.0-or-later
+
+import { parsePhoneNumberFromString } from 'libphonenumber-js'
+
+// The backend stores phone numbers as digits-only (E.164 without the leading
+// `+`), e.g. "393330001113". This helper renders a human-readable version for
+// display, e.g. "+39 333 000 1113".
+//
+// Inputs we need to handle:
+// - "" / null / undefined → return ""
+// - "393330001113"        → "+39 333 000 1113"
+// - "+39 333 0001113"     → "+39 333 000 1113" (already-formatted legacy values
+//                           still in the DB get re-parsed and re-formatted)
+// - non-parseable values  → returned untouched as a fallback
+export function formatPhoneForDisplay(raw: string | null | undefined): string {
+  if (!raw) {
+    return ''
+  }
+  // libphonenumber-js needs a leading "+" to detect the country from the digits.
+  // If the raw value already has it, parse as-is; otherwise prepend.
+  const candidate = raw.startsWith('+') ? raw : `+${raw}`
+  const parsed = parsePhoneNumberFromString(candidate)
+  return parsed?.formatInternational() ?? raw
+}
+
+// Parse a phone number and extract the country code (iso2) and local part.
+// Returns { countryIso2, localPart } or null if parsing fails.
+// Inputs we handle:
+// - "" / null / undefined → return null
+// - "393330001113"        → { countryIso2: "it", localPart: "333 000 1113" }
+// - "+39 333 0001113"     → { countryIso2: "it", localPart: "333 000 1113" }
+export function parsePhoneNumber(
+  raw: string | null | undefined,
+): { countryIso2: string; localPart: string } | null {
+  if (!raw) {
+    return null
+  }
+
+  // libphonenumber-js needs a leading "+" to detect the country from the digits.
+  // If the raw value already has it, parse as-is; otherwise prepend.
+  const candidate = raw.startsWith('+') ? raw : `+${raw}`
+  const parsed = parsePhoneNumberFromString(candidate)
+
+  if (!parsed || !parsed.country) {
+    return null
+  }
+
+  // Get the country code in lowercase (e.g., "IT" → "it")
+  const countryIso2 = parsed.country.toLowerCase()
+  // Format the local part (e.g., "333 000 1113")
+  const localPart = parsed.formatNational()
+
+  return { countryIso2, localPart }
+}
+
+// Combine country code ISO2 and phone local part into a backend-compatible format.
+// Returns the phone number as digits-only (E.164 without the leading `+`),
+// e.g., "it" + "333 000 1113" → "393330001113"
+// If countryCode or localPart is empty, returns empty string.
+export function combinePhoneParts(countryIso2: string, localPart: string): string {
+  if (!countryIso2 || !localPart) {
+    return ''
+  }
+
+  // Find the country code from the countries array
+  const country = countries.find((c) => c.iso2 === countryIso2)
+  if (!country) {
+    return ''
+  }
+
+  // Remove all non-digit characters from the local part, but keep the leading "+"
+  // if present (which indicates the user incorrectly entered the country prefix).
+  // This lets us detect and warn about malformed input.
+  const digitsOnly = localPart.replace(/[^+\d]/g, '')
+
+  // Concatenate country code + local part digits
+  return `${country.country_code}${digitsOnly}`
+}
+
+export const countries = [
+  { iso2: 'af', country_name: 'Afghanistan', country_code: '93', flag: '🇦🇫' },
+  { iso2: 'ax', country_name: 'Åland Islands', country_code: '358', flag: '🇦🇽' },
+  { iso2: 'al', country_name: 'Albania', country_code: '355', flag: '🇦🇱' },
+  { iso2: 'dz', country_name: 'Algeria', country_code: '213', flag: '🇩🇿' },
+  { iso2: 'as', country_name: 'American Samoa', country_code: '1', flag: '🇦🇸' },
+  { iso2: 'ad', country_name: 'Andorra', country_code: '376', flag: '🇦🇩' },
+  { iso2: 'ao', country_name: 'Angola', country_code: '244', flag: '🇦🇴' },
+  { iso2: 'ai', country_name: 'Anguilla', country_code: '1', flag: '🇦🇮' },
+  { iso2: 'ag', country_name: 'Antigua and Barbuda', country_code: '1', flag: '🇦🇬' },
+  { iso2: 'ar', country_name: 'Argentina', country_code: '54', flag: '🇦🇷' },
+  { iso2: 'am', country_name: 'Armenia', country_code: '374', flag: '🇦🇲' },
+  { iso2: 'aw', country_name: 'Aruba', country_code: '297', flag: '🇦🇼' },
+  { iso2: 'ac', country_name: 'Ascension Island', country_code: '247', flag: '🇦🇨' },
+  { iso2: 'au', country_name: 'Australia', country_code: '61', flag: '🇦🇺' },
+  { iso2: 'at', country_name: 'Austria', country_code: '43', flag: '🇦🇹' },
+  { iso2: 'az', country_name: 'Azerbaijan', country_code: '994', flag: '🇦🇿' },
+  { iso2: 'bs', country_name: 'Bahamas', country_code: '1', flag: '🇧🇸' },
+  { iso2: 'bh', country_name: 'Bahrain', country_code: '973', flag: '🇧🇭' },
+  { iso2: 'bd', country_name: 'Bangladesh', country_code: '880', flag: '🇧🇩' },
+  { iso2: 'bb', country_name: 'Barbados', country_code: '1', flag: '🇧🇧' },
+  { iso2: 'by', country_name: 'Belarus', country_code: '375', flag: '🇧🇾' },
+  { iso2: 'be', country_name: 'Belgium', country_code: '32', flag: '🇧🇪' },
+  { iso2: 'bz', country_name: 'Belize', country_code: '501', flag: '🇧🇿' },
+  { iso2: 'bj', country_name: 'Benin', country_code: '229', flag: '🇧🇯' },
+  { iso2: 'bm', country_name: 'Bermuda', country_code: '1', flag: '🇧🇲' },
+  { iso2: 'bt', country_name: 'Bhutan', country_code: '975', flag: '🇧🇹' },
+  { iso2: 'bo', country_name: 'Bolivia', country_code: '591', flag: '🇧🇴' },
+  { iso2: 'ba', country_name: 'Bosnia and Herzegovina', country_code: '387', flag: '🇧🇦' },
+  { iso2: 'bw', country_name: 'Botswana', country_code: '267', flag: '🇧🇼' },
+  { iso2: 'br', country_name: 'Brazil', country_code: '55', flag: '🇧🇷' },
+  { iso2: 'io', country_name: 'British Indian Ocean Territory', country_code: '246', flag: '🇮🇴' },
+  { iso2: 'vg', country_name: 'British Virgin Islands', country_code: '1', flag: '🇻🇬' },
+  { iso2: 'bn', country_name: 'Brunei', country_code: '673', flag: '🇧🇳' },
+  { iso2: 'bg', country_name: 'Bulgaria', country_code: '359', flag: '🇧🇬' },
+  { iso2: 'bf', country_name: 'Burkina Faso', country_code: '226', flag: '🇧🇫' },
+  { iso2: 'bi', country_name: 'Burundi', country_code: '257', flag: '🇧🇮' },
+  { iso2: 'kh', country_name: 'Cambodia', country_code: '855', flag: '🇰🇭' },
+  { iso2: 'cm', country_name: 'Cameroon', country_code: '237', flag: '🇨🇲' },
+  { iso2: 'ca', country_name: 'Canada', country_code: '1', flag: '🇨🇦' },
+  { iso2: 'cv', country_name: 'Cape Verde', country_code: '238', flag: '🇨🇻' },
+  { iso2: 'bq', country_name: 'Caribbean Netherlands', country_code: '599', flag: '🇧🇶' },
+  { iso2: 'ky', country_name: 'Cayman Islands', country_code: '1', flag: '🇰🇾' },
+  { iso2: 'cf', country_name: 'Central African Republic', country_code: '236', flag: '🇨🇫' },
+  { iso2: 'td', country_name: 'Chad', country_code: '235', flag: '🇹🇩' },
+  { iso2: 'cl', country_name: 'Chile', country_code: '56', flag: '🇨🇱' },
+  { iso2: 'cn', country_name: 'China', country_code: '86', flag: '🇨🇳' },
+  { iso2: 'cx', country_name: 'Christmas Island', country_code: '61', flag: '🇨🇽' },
+  { iso2: 'cc', country_name: 'Cocos (Keeling) Islands', country_code: '61', flag: '🇨🇨' },
+  { iso2: 'co', country_name: 'Colombia', country_code: '57', flag: '🇨🇴' },
+  { iso2: 'km', country_name: 'Comoros', country_code: '269', flag: '🇰🇲' },
+  { iso2: 'cg', country_name: 'Congo (Brazzaville)', country_code: '242', flag: '🇨🇬' },
+  { iso2: 'cd', country_name: 'Congo (Kinshasa)', country_code: '243', flag: '🇨🇩' },
+  { iso2: 'ck', country_name: 'Cook Islands', country_code: '682', flag: '🇨🇰' },
+  { iso2: 'cr', country_name: 'Costa Rica', country_code: '506', flag: '🇨🇷' },
+  { iso2: 'ci', country_name: "Côte d'Ivoire", country_code: '225', flag: '🇨🇮' },
+  { iso2: 'hr', country_name: 'Croatia', country_code: '385', flag: '🇭🇷' },
+  { iso2: 'cu', country_name: 'Cuba', country_code: '53', flag: '🇨🇺' },
+  { iso2: 'cw', country_name: 'Curaçao', country_code: '599', flag: '🇨🇼' },
+  { iso2: 'cy', country_name: 'Cyprus', country_code: '357', flag: '🇨🇾' },
+  { iso2: 'cz', country_name: 'Czech Republic', country_code: '420', flag: '🇨🇿' },
+  { iso2: 'dk', country_name: 'Denmark', country_code: '45', flag: '🇩🇰' },
+  { iso2: 'dj', country_name: 'Djibouti', country_code: '253', flag: '🇩🇯' },
+  { iso2: 'dm', country_name: 'Dominica', country_code: '1', flag: '🇩🇲' },
+  { iso2: 'do', country_name: 'Dominican Republic', country_code: '1', flag: '🇩🇴' },
+  { iso2: 'ec', country_name: 'Ecuador', country_code: '593', flag: '🇪🇨' },
+  { iso2: 'eg', country_name: 'Egypt', country_code: '20', flag: '🇪🇬' },
+  { iso2: 'sv', country_name: 'El Salvador', country_code: '503', flag: '🇸🇻' },
+  { iso2: 'gq', country_name: 'Equatorial Guinea', country_code: '240', flag: '🇬🇶' },
+  { iso2: 'er', country_name: 'Eritrea', country_code: '291', flag: '🇪🇷' },
+  { iso2: 'ee', country_name: 'Estonia', country_code: '372', flag: '🇪🇪' },
+  { iso2: 'sz', country_name: 'Eswatini', country_code: '268', flag: '🇸🇿' },
+  { iso2: 'et', country_name: 'Ethiopia', country_code: '251', flag: '🇪🇹' },
+  { iso2: 'fk', country_name: 'Falkland Islands (Malvinas)', country_code: '500', flag: '🇫🇰' },
+  { iso2: 'fo', country_name: 'Faroe Islands', country_code: '298', flag: '🇫🇴' },
+  { iso2: 'fj', country_name: 'Fiji', country_code: '679', flag: '🇫🇯' },
+  { iso2: 'fi', country_name: 'Finland', country_code: '358', flag: '🇫🇮' },
+  { iso2: 'fr', country_name: 'France', country_code: '33', flag: '🇫🇷' },
+  { iso2: 'gf', country_name: 'French Guiana', country_code: '594', flag: '🇬🇫' },
+  { iso2: 'pf', country_name: 'French Polynesia', country_code: '689', flag: '🇵🇫' },
+  { iso2: 'ga', country_name: 'Gabon', country_code: '241', flag: '🇬🇦' },
+  { iso2: 'gm', country_name: 'Gambia', country_code: '220', flag: '🇬🇲' },
+  { iso2: 'ge', country_name: 'Georgia', country_code: '995', flag: '🇬🇪' },
+  { iso2: 'de', country_name: 'Germany', country_code: '49', flag: '🇩🇪' },
+  { iso2: 'gh', country_name: 'Ghana', country_code: '233', flag: '🇬🇭' },
+  { iso2: 'gi', country_name: 'Gibraltar', country_code: '350', flag: '🇬🇮' },
+  { iso2: 'gr', country_name: 'Greece', country_code: '30', flag: '🇬🇷' },
+  { iso2: 'gl', country_name: 'Greenland', country_code: '299', flag: '🇬🇱' },
+  { iso2: 'gd', country_name: 'Grenada', country_code: '1', flag: '🇬🇩' },
+  { iso2: 'gp', country_name: 'Guadeloupe', country_code: '590', flag: '🇬🇵' },
+  { iso2: 'gu', country_name: 'Guam', country_code: '1', flag: '🇬🇺' },
+  { iso2: 'gt', country_name: 'Guatemala', country_code: '502', flag: '🇬🇹' },
+  { iso2: 'gg', country_name: 'Guernsey', country_code: '44', flag: '🇬🇬' },
+  { iso2: 'gn', country_name: 'Guinea', country_code: '224', flag: '🇬🇳' },
+  { iso2: 'gw', country_name: 'Guinea-Bissau', country_code: '245', flag: '🇬🇼' },
+  { iso2: 'gy', country_name: 'Guyana', country_code: '592', flag: '🇬🇾' },
+  { iso2: 'ht', country_name: 'Haiti', country_code: '509', flag: '🇭🇹' },
+  { iso2: 'hn', country_name: 'Honduras', country_code: '504', flag: '🇭🇳' },
+  { iso2: 'hk', country_name: 'Hong Kong SAR China', country_code: '852', flag: '🇭🇰' },
+  { iso2: 'hu', country_name: 'Hungary', country_code: '36', flag: '🇭🇺' },
+  { iso2: 'is', country_name: 'Iceland', country_code: '354', flag: '🇮🇸' },
+  { iso2: 'in', country_name: 'India', country_code: '91', flag: '🇮🇳' },
+  { iso2: 'id', country_name: 'Indonesia', country_code: '62', flag: '🇮🇩' },
+  { iso2: 'ir', country_name: 'Iran', country_code: '98', flag: '🇮🇷' },
+  { iso2: 'iq', country_name: 'Iraq', country_code: '964', flag: '🇮🇶' },
+  { iso2: 'ie', country_name: 'Ireland', country_code: '353', flag: '🇮🇪' },
+  { iso2: 'im', country_name: 'Isle of Man', country_code: '44', flag: '🇮🇲' },
+  { iso2: 'il', country_name: 'Israel', country_code: '972', flag: '🇮🇱' },
+  { iso2: 'it', country_name: 'Italy', country_code: '39', flag: '🇮🇹' },
+  { iso2: 'jm', country_name: 'Jamaica', country_code: '1', flag: '🇯🇲' },
+  { iso2: 'jp', country_name: 'Japan', country_code: '81', flag: '🇯🇵' },
+  { iso2: 'je', country_name: 'Jersey', country_code: '44', flag: '🇯🇪' },
+  { iso2: 'jo', country_name: 'Jordan', country_code: '962', flag: '🇯🇴' },
+  { iso2: 'kz', country_name: 'Kazakhstan', country_code: '7', flag: '🇰🇿' },
+  { iso2: 'ke', country_name: 'Kenya', country_code: '254', flag: '🇰🇪' },
+  { iso2: 'ki', country_name: 'Kiribati', country_code: '686', flag: '🇰🇮' },
+  { iso2: 'xk', country_name: 'Kosovo', country_code: '383', flag: '🇽🇰' },
+  { iso2: 'kw', country_name: 'Kuwait', country_code: '965', flag: '🇰🇼' },
+  { iso2: 'kg', country_name: 'Kyrgyzstan', country_code: '996', flag: '🇰🇬' },
+  { iso2: 'la', country_name: 'Laos', country_code: '856', flag: '🇱🇦' },
+  { iso2: 'lv', country_name: 'Latvia', country_code: '371', flag: '🇱🇻' },
+  { iso2: 'lb', country_name: 'Lebanon', country_code: '961', flag: '🇱🇧' },
+  { iso2: 'ls', country_name: 'Lesotho', country_code: '266', flag: '🇱🇸' },
+  { iso2: 'lr', country_name: 'Liberia', country_code: '231', flag: '🇱🇷' },
+  { iso2: 'ly', country_name: 'Libya', country_code: '218', flag: '🇱🇾' },
+  { iso2: 'li', country_name: 'Liechtenstein', country_code: '423', flag: '🇱🇮' },
+  { iso2: 'lt', country_name: 'Lithuania', country_code: '370', flag: '🇱🇹' },
+  { iso2: 'lu', country_name: 'Luxembourg', country_code: '352', flag: '🇱🇺' },
+  { iso2: 'mo', country_name: 'Macao SAR China', country_code: '853', flag: '🇲🇴' },
+  { iso2: 'mg', country_name: 'Madagascar', country_code: '261', flag: '🇲🇬' },
+  { iso2: 'mw', country_name: 'Malawi', country_code: '265', flag: '🇲🇼' },
+  { iso2: 'my', country_name: 'Malaysia', country_code: '60', flag: '🇲🇾' },
+  { iso2: 'mv', country_name: 'Maldives', country_code: '960', flag: '🇲🇻' },
+  { iso2: 'ml', country_name: 'Mali', country_code: '223', flag: '🇲🇱' },
+  { iso2: 'mt', country_name: 'Malta', country_code: '356', flag: '🇲🇹' },
+  { iso2: 'mh', country_name: 'Marshall Islands', country_code: '692', flag: '🇲🇭' },
+  { iso2: 'mq', country_name: 'Martinique', country_code: '596', flag: '🇲🇶' },
+  { iso2: 'mr', country_name: 'Mauritania', country_code: '222', flag: '🇲🇷' },
+  { iso2: 'mu', country_name: 'Mauritius', country_code: '230', flag: '🇲🇺' },
+  { iso2: 'yt', country_name: 'Mayotte', country_code: '262', flag: '🇾🇹' },
+  { iso2: 'mx', country_name: 'Mexico', country_code: '52', flag: '🇲🇽' },
+  { iso2: 'fm', country_name: 'Micronesia', country_code: '691', flag: '🇫🇲' },
+  { iso2: 'md', country_name: 'Moldova', country_code: '373', flag: '🇲🇩' },
+  { iso2: 'mc', country_name: 'Monaco', country_code: '377', flag: '🇲🇨' },
+  { iso2: 'mn', country_name: 'Mongolia', country_code: '976', flag: '🇲🇳' },
+  { iso2: 'me', country_name: 'Montenegro', country_code: '382', flag: '🇲🇪' },
+  { iso2: 'ms', country_name: 'Montserrat', country_code: '1', flag: '🇲🇸' },
+  { iso2: 'ma', country_name: 'Morocco', country_code: '212', flag: '🇲🇦' },
+  { iso2: 'mz', country_name: 'Mozambique', country_code: '258', flag: '🇲🇿' },
+  { iso2: 'mm', country_name: 'Myanmar (Burma)', country_code: '95', flag: '🇲🇲' },
+  { iso2: 'na', country_name: 'Namibia', country_code: '264', flag: '🇳🇦' },
+  { iso2: 'nr', country_name: 'Nauru', country_code: '674', flag: '🇳🇷' },
+  { iso2: 'np', country_name: 'Nepal', country_code: '977', flag: '🇳🇵' },
+  { iso2: 'nl', country_name: 'Netherlands', country_code: '31', flag: '🇳🇱' },
+  { iso2: 'nc', country_name: 'New Caledonia', country_code: '687', flag: '🇳🇨' },
+  { iso2: 'nz', country_name: 'New Zealand', country_code: '64', flag: '🇳🇿' },
+  { iso2: 'ni', country_name: 'Nicaragua', country_code: '505', flag: '🇳🇮' },
+  { iso2: 'ne', country_name: 'Niger', country_code: '227', flag: '🇳🇪' },
+  { iso2: 'ng', country_name: 'Nigeria', country_code: '234', flag: '🇳🇬' },
+  { iso2: 'nu', country_name: 'Niue', country_code: '683', flag: '🇳🇺' },
+  { iso2: 'nf', country_name: 'Norfolk Island', country_code: '672', flag: '🇳🇫' },
+  { iso2: 'kp', country_name: 'North Korea', country_code: '850', flag: '🇰🇵' },
+  { iso2: 'mk', country_name: 'North Macedonia', country_code: '389', flag: '🇲🇰' },
+  { iso2: 'mp', country_name: 'Northern Mariana Islands', country_code: '1', flag: '🇲🇵' },
+  { iso2: 'no', country_name: 'Norway', country_code: '47', flag: '🇳🇴' },
+  { iso2: 'om', country_name: 'Oman', country_code: '968', flag: '🇴🇲' },
+  { iso2: 'pk', country_name: 'Pakistan', country_code: '92', flag: '🇵🇰' },
+  { iso2: 'pw', country_name: 'Palau', country_code: '680', flag: '🇵🇼' },
+  { iso2: 'ps', country_name: 'Palestinian Territories', country_code: '970', flag: '🇵🇸' },
+  { iso2: 'pa', country_name: 'Panama', country_code: '507', flag: '🇵🇦' },
+  { iso2: 'pg', country_name: 'Papua New Guinea', country_code: '675', flag: '🇵🇬' },
+  { iso2: 'py', country_name: 'Paraguay', country_code: '595', flag: '🇵🇾' },
+  { iso2: 'pe', country_name: 'Peru', country_code: '51', flag: '🇵🇪' },
+  { iso2: 'ph', country_name: 'Philippines', country_code: '63', flag: '🇵🇭' },
+  { iso2: 'pl', country_name: 'Poland', country_code: '48', flag: '🇵🇱' },
+  { iso2: 'pt', country_name: 'Portugal', country_code: '351', flag: '🇵🇹' },
+  { iso2: 'pr', country_name: 'Puerto Rico', country_code: '1', flag: '🇵🇷' },
+  { iso2: 'qa', country_name: 'Qatar', country_code: '974', flag: '🇶🇦' },
+  { iso2: 're', country_name: 'Réunion', country_code: '262', flag: '🇷🇪' },
+  { iso2: 'ro', country_name: 'Romania', country_code: '40', flag: '🇷🇴' },
+  { iso2: 'ru', country_name: 'Russia', country_code: '7', flag: '🇷🇺' },
+  { iso2: 'rw', country_name: 'Rwanda', country_code: '250', flag: '🇷🇼' },
+  { iso2: 'ws', country_name: 'Samoa', country_code: '685', flag: '🇼🇸' },
+  { iso2: 'sm', country_name: 'San Marino', country_code: '378', flag: '🇸🇲' },
+  { iso2: 'st', country_name: 'São Tomé & Príncipe', country_code: '239', flag: '🇸🇹' },
+  { iso2: 'sa', country_name: 'Saudi Arabia', country_code: '966', flag: '🇸🇦' },
+  { iso2: 'sn', country_name: 'Senegal', country_code: '221', flag: '🇸🇳' },
+  { iso2: 'rs', country_name: 'Serbia', country_code: '381', flag: '🇷🇸' },
+  { iso2: 'sc', country_name: 'Seychelles', country_code: '248', flag: '🇸🇨' },
+  { iso2: 'sl', country_name: 'Sierra Leone', country_code: '232', flag: '🇸🇱' },
+  { iso2: 'sg', country_name: 'Singapore', country_code: '65', flag: '🇸🇬' },
+  { iso2: 'sx', country_name: 'Sint Maarten', country_code: '1', flag: '🇸🇽' },
+  { iso2: 'sk', country_name: 'Slovakia', country_code: '421', flag: '🇸🇰' },
+  { iso2: 'si', country_name: 'Slovenia', country_code: '386', flag: '🇸🇮' },
+  { iso2: 'sb', country_name: 'Solomon Islands', country_code: '677', flag: '🇸🇧' },
+  { iso2: 'so', country_name: 'Somalia', country_code: '252', flag: '🇸🇴' },
+  { iso2: 'za', country_name: 'South Africa', country_code: '27', flag: '🇿🇦' },
+  { iso2: 'kr', country_name: 'South Korea', country_code: '82', flag: '🇰🇷' },
+  { iso2: 'ss', country_name: 'South Sudan', country_code: '211', flag: '🇸🇸' },
+  { iso2: 'es', country_name: 'Spain', country_code: '34', flag: '🇪🇸' },
+  { iso2: 'lk', country_name: 'Sri Lanka', country_code: '94', flag: '🇱🇰' },
+  { iso2: 'bl', country_name: 'St. Barthélemy', country_code: '590', flag: '🇧🇱' },
+  { iso2: 'sh', country_name: 'St. Helena', country_code: '290', flag: '🇸🇭' },
+  { iso2: 'kn', country_name: 'St. Kitts & Nevis', country_code: '1', flag: '🇰🇳' },
+  { iso2: 'lc', country_name: 'St. Lucia', country_code: '1', flag: '🇱🇨' },
+  { iso2: 'mf', country_name: 'St. Martin', country_code: '590', flag: '🇲🇫' },
+  { iso2: 'pm', country_name: 'St. Pierre & Miquelon', country_code: '508', flag: '🇵🇲' },
+  { iso2: 'vc', country_name: 'St. Vincent & Grenadines', country_code: '1', flag: '🇻🇨' },
+  { iso2: 'sd', country_name: 'Sudan', country_code: '249', flag: '🇸🇩' },
+  { iso2: 'sr', country_name: 'Suriname', country_code: '597', flag: '🇸🇷' },
+  { iso2: 'sj', country_name: 'Svalbard & Jan Mayen', country_code: '47', flag: '🇸🇯' },
+  { iso2: 'se', country_name: 'Sweden', country_code: '46', flag: '🇸🇪' },
+  { iso2: 'ch', country_name: 'Switzerland', country_code: '41', flag: '🇨🇭' },
+  { iso2: 'sy', country_name: 'Syria', country_code: '963', flag: '🇸🇾' },
+  { iso2: 'tw', country_name: 'Taiwan', country_code: '886', flag: '🇹🇼' },
+  { iso2: 'tj', country_name: 'Tajikistan', country_code: '992', flag: '🇹🇯' },
+  { iso2: 'tz', country_name: 'Tanzania', country_code: '255', flag: '🇹🇿' },
+  { iso2: 'th', country_name: 'Thailand', country_code: '66', flag: '🇹🇭' },
+  { iso2: 'tl', country_name: 'Timor-Leste', country_code: '670', flag: '🇹🇱' },
+  { iso2: 'tg', country_name: 'Togo', country_code: '228', flag: '🇹🇬' },
+  { iso2: 'tk', country_name: 'Tokelau', country_code: '690', flag: '🇹🇰' },
+  { iso2: 'to', country_name: 'Tonga', country_code: '676', flag: '🇹🇴' },
+  { iso2: 'tt', country_name: 'Trinidad & Tobago', country_code: '1', flag: '🇹🇹' },
+  { iso2: 'tn', country_name: 'Tunisia', country_code: '216', flag: '🇹🇳' },
+  { iso2: 'tr', country_name: 'Turkey', country_code: '90', flag: '🇹🇷' },
+  { iso2: 'tm', country_name: 'Turkmenistan', country_code: '993', flag: '🇹🇲' },
+  { iso2: 'tc', country_name: 'Turks & Caicos Islands', country_code: '1', flag: '🇹🇨' },
+  { iso2: 'tv', country_name: 'Tuvalu', country_code: '688', flag: '🇹🇻' },
+  { iso2: 'vi', country_name: 'U.S. Virgin Islands', country_code: '1', flag: '🇻🇮' },
+  { iso2: 'ug', country_name: 'Uganda', country_code: '256', flag: '🇺🇬' },
+  { iso2: 'ua', country_name: 'Ukraine', country_code: '380', flag: '🇺🇦' },
+  { iso2: 'ae', country_name: 'United Arab Emirates', country_code: '971', flag: '🇦🇪' },
+  { iso2: 'gb', country_name: 'United Kingdom', country_code: '44', flag: '🇬🇧' },
+  { iso2: 'us', country_name: 'United States', country_code: '1', flag: '🇺🇸' },
+  { iso2: 'uy', country_name: 'Uruguay', country_code: '598', flag: '🇺🇾' },
+  { iso2: 'uz', country_name: 'Uzbekistan', country_code: '998', flag: '🇺🇿' },
+  { iso2: 'vu', country_name: 'Vanuatu', country_code: '678', flag: '🇻🇺' },
+  { iso2: 'va', country_name: 'Vatican City', country_code: '39', flag: '🇻🇦' },
+  { iso2: 've', country_name: 'Venezuela', country_code: '58', flag: '🇻🇪' },
+  { iso2: 'vn', country_name: 'Vietnam', country_code: '84', flag: '🇻🇳' },
+  { iso2: 'wf', country_name: 'Wallis & Futuna', country_code: '681', flag: '🇼🇫' },
+  { iso2: 'eh', country_name: 'Western Sahara', country_code: '212', flag: '🇪🇭' },
+  { iso2: 'ye', country_name: 'Yemen', country_code: '967', flag: '🇾🇪' },
+  { iso2: 'zm', country_name: 'Zambia', country_code: '260', flag: '🇿🇲' },
+  { iso2: 'zw', country_name: 'Zimbabwe', country_code: '263', flag: '🇿🇼' },
+]
diff --git a/frontend/src/lib/users/users.ts b/frontend/src/lib/users/users.ts
index 6403a1ab7..70f3b38d8 100644
--- a/frontend/src/lib/users/users.ts
+++ b/frontend/src/lib/users/users.ts
@@ -6,7 +6,6 @@ import { API_URL } from '../config'
 import { useLoginStore } from '@/stores/login'
 import * as v from 'valibot'
 import { downloadFile, type Pagination } from '../common'
-import { parsePhoneNumberFromString } from 'libphonenumber-js'
 
 export const USERS_KEY = 'users'
 export const USERS_TOTAL_KEY = 'usersTotal'
@@ -425,24 +424,3 @@ export const confirmUsersImport = (
     )
     .then((res) => res.data.data)
 }
-
-// The backend stores phone numbers as digits-only (E.164 without the leading
-// `+`), e.g. "393330001113". This helper renders a human-readable version for
-// display, e.g. "+39 333 000 1113".
-//
-// Inputs we need to handle:
-// - "" / null / undefined → return ""
-// - "393330001113"        → "+39 333 000 1113"
-// - "+39 333 0001113"     → "+39 333 000 1113" (already-formatted legacy values
-//                           still in the DB get re-parsed and re-formatted)
-// - non-parseable values  → returned untouched as a fallback
-export function formatPhoneForDisplay(raw: string | null | undefined): string {
-  if (!raw) {
-    return ''
-  }
-  // libphonenumber-js needs a leading "+" to detect the country from the digits.
-  // If the raw value already has it, parse as-is; otherwise prepend.
-  const candidate = raw.startsWith('+') ? raw : `+${raw}`
-  const parsed = parsePhoneNumberFromString(candidate)
-  return parsed?.formatInternational() ?? raw
-}

From 50b3ad97104dfef91fd045681d1ab4ac265ff149 Mon Sep 17 00:00:00 2001
From: Andrea Leardini <andrea.leardini@nethesis.it>
Date: Fri, 8 May 2026 15:54:37 +0200
Subject: [PATCH 06/11] fix tertiary neutral color

---
 frontend/src/assets/main.css                  |  2 +-
 frontend/src/components/CounterCard.vue       |  4 +--
 frontend/src/components/DataItem.vue          |  2 +-
 .../ImportOrganizationsModal.vue              |  2 +-
 frontend/src/components/shell/SideMenu.vue    |  6 ++--
 frontend/src/components/shell/TopBar.vue      |  2 +-
 .../systems/AdditionalServicesCard.vue        |  4 ++-
 .../systems/SystemActiveAlertsCard.vue        |  4 +--
 .../components/systems/SystemBackupsPanel.vue |  2 +-
 .../systems/SystemChangesTimeline.vue         | 28 ++++++++++---------
 .../components/systems/SystemNetworkCard.vue  | 11 +++++---
 .../src/components/users/ImportUsersModal.vue |  2 +-
 12 files changed, 38 insertions(+), 31 deletions(-)

diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css
index 2209a65af..95de53456 100644
--- a/frontend/src/assets/main.css
+++ b/frontend/src/assets/main.css
@@ -172,7 +172,7 @@
   --primary-inverted-neutral: var(--color-gray-900);
   --secondary: var(--color-indigo-500);
   --secondary-neutral: var(--color-gray-200);
-  --tertiary-neutral: var(--color-gray-300);
+  --tertiary-neutral: var(--color-gray-400);
   --danger: var(--color-rose-500);
   --placeholder: var(--color-gray-500);
 
diff --git a/frontend/src/components/CounterCard.vue b/frontend/src/components/CounterCard.vue
index 56307c334..1c36b0054 100644
--- a/frontend/src/components/CounterCard.vue
+++ b/frontend/src/components/CounterCard.vue
@@ -43,9 +43,9 @@ const hasDefaultSlot = computed(() => !!slots.default)
           <FontAwesomeIcon
             v-if="icon"
             :icon="icon"
-            class="size-5 text-gray-600 dark:text-gray-300"
+            class="text-tertiary-neutral dark:text-tertiary-neutral size-5"
           />
-          <NeHeading tag="h6" class="text-gray-600 dark:text-gray-300">
+          <NeHeading tag="h6" class="text-tertiary-neutral dark:text-tertiary-neutral">
             {{ uppercaseTitle ? title.toUpperCase() : title }}
           </NeHeading>
         </div>
diff --git a/frontend/src/components/DataItem.vue b/frontend/src/components/DataItem.vue
index 6052048ba..3ba57bd3e 100644
--- a/frontend/src/components/DataItem.vue
+++ b/frontend/src/components/DataItem.vue
@@ -8,7 +8,7 @@
     <div class="font-medium">
       <slot name="label"></slot>
     </div>
-    <span class="text-end text-gray-600 dark:text-gray-300">
+    <span class="text-tertiary-neutral dark:text-tertiary-neutral text-end">
       <slot name="data"></slot>
     </span>
   </div>
diff --git a/frontend/src/components/organizations/ImportOrganizationsModal.vue b/frontend/src/components/organizations/ImportOrganizationsModal.vue
index e3278f6c8..1697fd293 100644
--- a/frontend/src/components/organizations/ImportOrganizationsModal.vue
+++ b/frontend/src/components/organizations/ImportOrganizationsModal.vue
@@ -377,7 +377,7 @@ function errorSummaryText(row: ImportRow): string {
       </NeRadioSelection>
 
       <!-- summary -->
-      <div class="text-sm text-gray-600 dark:text-gray-300">
+      <div class="text-tertiary-neutral dark:text-tertiary-neutral text-sm">
         <NeFormItemLabel>{{ $t('import.import_summary') }}</NeFormItemLabel>
         <p>
           {{
diff --git a/frontend/src/components/shell/SideMenu.vue b/frontend/src/components/shell/SideMenu.vue
index cffaa3a37..9bf6b7c7e 100644
--- a/frontend/src/components/shell/SideMenu.vue
+++ b/frontend/src/components/shell/SideMenu.vue
@@ -177,7 +177,7 @@ function loadMenuItemsExpanded() {
         :class="[
           isCurrentRoute(item.to)
             ? 'border-primary-700 dark:border-primary-500 bg-gray-100 text-gray-900 dark:bg-gray-800 dark:text-gray-50'
-            : 'border-transparent text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-50',
+            : 'text-tertiary-neutral dark:text-tertiary-neutral border-transparent hover:text-gray-900 dark:hover:text-gray-50',
           'group flex cursor-pointer items-center gap-x-3 rounded-md border-l-4 px-3 py-2 text-sm leading-6 font-semibold hover:bg-gray-100 dark:hover:bg-gray-800',
         ]"
       >
@@ -195,7 +195,7 @@ function loadMenuItemsExpanded() {
         :class="[
           isCurrentRoute(item.to)
             ? 'text-gray-900 dark:text-gray-50'
-            : 'text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-50',
+            : 'text-tertiary-neutral dark:text-tertiary-neutral hover:text-gray-900 dark:hover:text-gray-50',
           'group flex cursor-pointer items-center justify-between rounded-md border-l-4 border-transparent px-3 py-2 text-sm leading-6 font-semibold hover:bg-gray-100 dark:hover:bg-gray-800',
         ]"
         @click="toggleExpand(item)"
@@ -225,7 +225,7 @@ function loadMenuItemsExpanded() {
                 :class="[
                   isCurrentRoute(child.to)
                     ? 'border-primary-700 dark:border-primary-500 border-l-4 bg-gray-100 text-gray-900 dark:bg-gray-800 dark:text-gray-50'
-                    : 'text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-50',
+                    : 'text-tertiary-neutral dark:text-tertiary-neutral hover:text-gray-900 dark:hover:text-gray-50',
                   'group flex cursor-pointer items-center gap-x-3 rounded-md px-3 py-1 text-sm leading-6 font-semibold hover:bg-gray-100 dark:hover:bg-gray-800',
                 ]"
               >
diff --git a/frontend/src/components/shell/TopBar.vue b/frontend/src/components/shell/TopBar.vue
index 3ce788d42..c157d061a 100644
--- a/frontend/src/components/shell/TopBar.vue
+++ b/frontend/src/components/shell/TopBar.vue
@@ -84,7 +84,7 @@ function openNotificationsDrawer() {
   >
     <button
       type="button"
-      class="-m-2.5 p-2.5 text-gray-600 transition-colors duration-300 hover:text-gray-900 lg:hidden dark:text-gray-300 dark:hover:text-gray-50"
+      class="text-tertiary-neutral dark:text-tertiary-neutral -m-2.5 p-2.5 transition-colors duration-300 hover:text-gray-900 lg:hidden dark:hover:text-gray-50"
       @click="emit('openSidebar')"
     >
       <span class="sr-only">{{ $t('shell.open_sidebar') }}</span>
diff --git a/frontend/src/components/systems/AdditionalServicesCard.vue b/frontend/src/components/systems/AdditionalServicesCard.vue
index af6e0982f..c83501f49 100644
--- a/frontend/src/components/systems/AdditionalServicesCard.vue
+++ b/frontend/src/components/systems/AdditionalServicesCard.vue
@@ -92,7 +92,9 @@ const sortedServices = computed<ServiceItem[]>(() =>
         <span class="font-medium text-gray-900 dark:text-gray-50">
           {{ service.label }}
         </span>
-        <div class="flex items-center gap-2 text-end text-gray-600 dark:text-gray-300">
+        <div
+          class="text-tertiary-neutral dark:text-tertiary-neutral flex items-center gap-2 text-end"
+        >
           <FontAwesomeIcon
             :icon="service.enabled ? faCircleCheck : faCircleXmark"
             class="size-4"
diff --git a/frontend/src/components/systems/SystemActiveAlertsCard.vue b/frontend/src/components/systems/SystemActiveAlertsCard.vue
index e10faeba3..b2528cdb5 100644
--- a/frontend/src/components/systems/SystemActiveAlertsCard.vue
+++ b/frontend/src/components/systems/SystemActiveAlertsCard.vue
@@ -357,12 +357,12 @@ function formatAlertDetails(alert: Alert): string {
             <div class="space-y-1">
               <div class="flex items-start justify-between gap-2">
                 <div class="flex-1">
-                  <div class="font-medium text-gray-700 dark:text-gray-300">
+                  <div class="dark:text-tertiary-neutral font-medium text-gray-700">
                     {{ getAlertSummaryText(alert) || '-' }}
                   </div>
                   <div
                     v-if="getAlertDescriptionText(alert)"
-                    class="text-sm text-gray-600 dark:text-gray-400"
+                    class="text-tertiary-neutral text-sm dark:text-gray-400"
                   >
                     {{ getAlertDescriptionText(alert) }}
                   </div>
diff --git a/frontend/src/components/systems/SystemBackupsPanel.vue b/frontend/src/components/systems/SystemBackupsPanel.vue
index 3c58314ae..fd0c6f805 100644
--- a/frontend/src/components/systems/SystemBackupsPanel.vue
+++ b/frontend/src/components/systems/SystemBackupsPanel.vue
@@ -222,7 +222,7 @@ function getKebabMenuItems(backup: BackupMetadata): NeDropdownItem[] {
         <div class="text-xs text-gray-500 dark:text-gray-400">
           {{ $t('backups.retention_policy') }}
         </div>
-        <div class="mt-1 text-sm text-gray-600 dark:text-gray-300">
+        <div class="text-tertiary-neutral dark:text-tertiary-neutral mt-1 text-sm">
           {{
             $t('backups.retention_policy_description', {
               slots: maxSlotsLabel,
diff --git a/frontend/src/components/systems/SystemChangesTimeline.vue b/frontend/src/components/systems/SystemChangesTimeline.vue
index 53a385e01..64f08d963 100644
--- a/frontend/src/components/systems/SystemChangesTimeline.vue
+++ b/frontend/src/components/systems/SystemChangesTimeline.vue
@@ -525,7 +525,7 @@ const diffTypeFilterModel = computed<string[]>({
             :class="
               group.isToday
                 ? 'text-indigo-700 dark:text-indigo-500'
-                : 'text-gray-600 dark:text-gray-300'
+                : 'text-tertiary-neutral dark:text-tertiary-neutral'
             "
           >
             {{ group.isToday ? t('system_detail.today') : formatGroupDate(group.date) }}
@@ -553,7 +553,7 @@ const diffTypeFilterModel = computed<string[]>({
           <!-- Group with changes: toggle header -->
           <template v-else-if="group.change_count > 0">
             <button
-              class="flex items-center gap-2 text-sm font-medium text-gray-600 hover:text-gray-700 dark:text-gray-300 dark:hover:text-gray-200"
+              class="text-tertiary-neutral dark:text-tertiary-neutral flex items-center gap-2 text-sm font-medium hover:text-gray-700 dark:hover:text-gray-200"
               @click="toggleGroup(group.date)"
             >
               <FontAwesomeIcon
@@ -614,14 +614,16 @@ const diffTypeFilterModel = computed<string[]>({
                         {{ getSeverityLabel(diff.severity) }}
                       </NeBadgeV2>
                       <!-- Field path -->
-                      <span class="min-w-0 text-sm break-all text-gray-600 dark:text-gray-300">
+                      <span
+                        class="text-tertiary-neutral dark:text-tertiary-neutral min-w-0 text-sm break-all"
+                      >
                         {{ diff.field_path }}
                       </span>
                     </div>
                     <!-- Expand chevron -->
                     <FontAwesomeIcon
                       :icon="expandedDiffs.has(diff.id) ? faAngleUp : faAngleDown"
-                      class="size-4 flex-shrink-0 text-gray-600 dark:text-gray-300"
+                      class="text-tertiary-neutral dark:text-tertiary-neutral size-4 flex-shrink-0"
                     />
                   </div>
 
@@ -633,14 +635,14 @@ const diffTypeFilterModel = computed<string[]>({
                       class="flex items-center gap-4 rounded-sm bg-blue-50 px-1.5 py-0.5 dark:bg-blue-950"
                     >
                       <FontAwesomeIcon :icon="faPen" class="size-3 shrink-0" />
-                      <span class="font-mono text-sm text-gray-700 dark:text-gray-300">
+                      <span class="dark:text-tertiary-neutral font-mono text-sm text-gray-700">
                         {{ formatDiffValue(diff.previous_value) }}
                       </span>
                       <FontAwesomeIcon
                         :icon="faArrowRight"
                         class="size-4 shrink-0 text-gray-500 dark:text-gray-400"
                       />
-                      <span class="font-mono text-sm text-gray-700 dark:text-gray-300">
+                      <span class="dark:text-tertiary-neutral font-mono text-sm text-gray-700">
                         {{ formatDiffValue(diff.current_value) }}
                       </span>
                     </div>
@@ -655,7 +657,7 @@ const diffTypeFilterModel = computed<string[]>({
                         class="flex items-center gap-4"
                       >
                         <FontAwesomeIcon :icon="faPlus" class="size-3 shrink-0" />
-                        <span class="font-mono text-sm text-gray-700 dark:text-gray-300">{{
+                        <span class="dark:text-tertiary-neutral font-mono text-sm text-gray-700">{{
                           line
                         }}</span>
                       </div>
@@ -671,13 +673,13 @@ const diffTypeFilterModel = computed<string[]>({
                         class="flex items-center gap-4"
                       >
                         <FontAwesomeIcon :icon="faMinus" class="size-3 shrink-0" />
-                        <span class="font-mono text-sm text-gray-700 dark:text-gray-300">{{
+                        <span class="dark:text-tertiary-neutral font-mono text-sm text-gray-700">{{
                           line
                         }}</span>
                       </div>
                     </div>
                     <!-- Timestamp -->
-                    <p class="mt-4 text-xs text-gray-600 dark:text-gray-300">
+                    <p class="text-tertiary-neutral dark:text-tertiary-neutral mt-4 text-xs">
                       {{ formatDateTimeNoSeconds(new Date(diff.created_at), locale, 'UTC') }}
                     </p>
                   </div>
@@ -734,7 +736,7 @@ const diffTypeFilterModel = computed<string[]>({
       <!-- System registration -->
       <div v-if="systemDetailState.data.registered_at" class="relative mb-8 flex items-start">
         <div class="w-36 flex-shrink-0 pt-0.5 pr-6 text-right">
-          <span class="text-sm font-medium text-gray-600 dark:text-gray-300">
+          <span class="text-tertiary-neutral dark:text-tertiary-neutral text-sm font-medium">
             {{ formatGroupDate(systemDetailState.data.registered_at.slice(0, 10)) }}
           </span>
         </div>
@@ -743,7 +745,7 @@ const diffTypeFilterModel = computed<string[]>({
           style="left: 139px; top: 7px"
         ></div>
         <div class="flex-1 pl-10">
-          <span class="text-sm font-medium text-gray-600 dark:text-gray-300">
+          <span class="text-tertiary-neutral dark:text-tertiary-neutral text-sm font-medium">
             {{ t('system_detail.system_registered') }}
           </span>
           <p class="mt-0.5 text-xs text-gray-500 dark:text-gray-400">
@@ -755,7 +757,7 @@ const diffTypeFilterModel = computed<string[]>({
       <!-- System creation -->
       <div v-if="systemDetailState.data.created_at" class="relative mb-8 flex items-start">
         <div class="w-36 flex-shrink-0 pt-0.5 pr-6 text-right">
-          <span class="text-sm font-medium text-gray-600 dark:text-gray-300">
+          <span class="text-tertiary-neutral dark:text-tertiary-neutral text-sm font-medium">
             {{ formatGroupDate(systemDetailState.data.created_at.slice(0, 10)) }}
           </span>
         </div>
@@ -764,7 +766,7 @@ const diffTypeFilterModel = computed<string[]>({
           style="left: 139px; top: 7px"
         ></div>
         <div class="flex-1 pl-10">
-          <span class="text-sm font-medium text-gray-600 dark:text-gray-300">
+          <span class="text-tertiary-neutral dark:text-tertiary-neutral text-sm font-medium">
             {{ t('system_detail.system_created') }}
           </span>
           <p class="mt-0.5 text-xs text-gray-500 dark:text-gray-400">
diff --git a/frontend/src/components/systems/SystemNetworkCard.vue b/frontend/src/components/systems/SystemNetworkCard.vue
index 1152c345f..921e3703d 100644
--- a/frontend/src/components/systems/SystemNetworkCard.vue
+++ b/frontend/src/components/systems/SystemNetworkCard.vue
@@ -138,7 +138,7 @@ const getNetworkRoleForegroundStyle = (role: string | undefined) => {
             {{ iface.name }}
           </div>
           <!-- type and role -->
-          <div class="mt-1 text-gray-600 dark:text-gray-300">
+          <div class="text-tertiary-neutral dark:text-tertiary-neutral mt-1">
             {{ iface?.type || '-' }}
             <span
               >&bull;
@@ -146,11 +146,14 @@ const getNetworkRoleForegroundStyle = (role: string | undefined) => {
             </span>
           </div>
           <!-- ip address -->
-          <div class="text-gray-600 dark:text-gray-300">
+          <div class="text-tertiary-neutral dark:text-tertiary-neutral">
             {{ getIpAddressWithCidr(iface) }}
           </div>
           <!-- gateway -->
-          <div v-if="iface.props?.gateway" class="text-gray-600 uppercase dark:text-gray-300">
+          <div
+            v-if="iface.props?.gateway"
+            class="text-tertiary-neutral dark:text-tertiary-neutral uppercase"
+          >
             GW: {{ iface.props?.gateway }}
           </div>
         </div>
@@ -161,7 +164,7 @@ const getNetworkRoleForegroundStyle = (role: string | undefined) => {
           <span class="shrink-0 font-medium">
             {{ $t('system_detail.dns_servers') }}
           </span>
-          <span v-if="dnsServers.length" class="text-gray-600 dark:text-gray-300">
+          <span v-if="dnsServers.length" class="text-tertiary-neutral dark:text-tertiary-neutral">
             {{ dnsServers.join(', ') }}
           </span>
           <span v-else>-</span>
diff --git a/frontend/src/components/users/ImportUsersModal.vue b/frontend/src/components/users/ImportUsersModal.vue
index 3c6ae4138..c17a8379d 100644
--- a/frontend/src/components/users/ImportUsersModal.vue
+++ b/frontend/src/components/users/ImportUsersModal.vue
@@ -372,7 +372,7 @@ function errorSummaryText(row: ImportRow): string {
       </NeRadioSelection>
 
       <!-- summary -->
-      <div class="text-sm text-gray-600 dark:text-gray-300">
+      <div class="text-tertiary-neutral dark:text-tertiary-neutral text-sm">
         <NeFormItemLabel>{{ $t('import.users.import_summary') }}</NeFormItemLabel>
         <p>
           {{ $t('import.users.import_summary_detected', { count: validationResult.total_rows }) }}

From 433fb16926b315f4e37ab896ae27af8a200e43cb Mon Sep 17 00:00:00 2001
From: Andrea Leardini <andrea.leardini@nethesis.it>
Date: Fri, 8 May 2026 17:01:58 +0200
Subject: [PATCH 07/11] fix: existing users/orgs radio selection

---
 .../components/organizations/ImportOrganizationsModal.vue    | 1 +
 frontend/src/components/users/ImportUsersModal.vue           | 5 +++--
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/organizations/ImportOrganizationsModal.vue b/frontend/src/components/organizations/ImportOrganizationsModal.vue
index 1697fd293..80abcfd6e 100644
--- a/frontend/src/components/organizations/ImportOrganizationsModal.vue
+++ b/frontend/src/components/organizations/ImportOrganizationsModal.vue
@@ -363,6 +363,7 @@ function errorSummaryText(row: ImportRow): string {
 
       <!-- existing orgs option -->
       <NeRadioSelection
+        v-if="warningRows.length > 0"
         v-model="existingOrgsOption"
         :options="importTypeOptions"
         :label="$t('import.organizations.import_existing_label')"
diff --git a/frontend/src/components/users/ImportUsersModal.vue b/frontend/src/components/users/ImportUsersModal.vue
index c17a8379d..6294ad78e 100644
--- a/frontend/src/components/users/ImportUsersModal.vue
+++ b/frontend/src/components/users/ImportUsersModal.vue
@@ -265,7 +265,7 @@ function errorSummaryText(row: ImportRow): string {
   const issue = row.errors?.[0]
 
   if (!issue) {
-    return t('users.import_row_and_name', { row_number: row.row_number, name })
+    return t('import.import_row_and_name', { row_number: row.row_number, name })
   }
   const params = formatErrorParams(issue)
   const message = t(`import.import_error_${issue.field}_${issue.message}`, params)
@@ -358,6 +358,7 @@ function errorSummaryText(row: ImportRow): string {
 
       <!-- existing users option -->
       <NeRadioSelection
+        v-if="warningRows.length > 0"
         v-model="existingUsersOption"
         :options="importTypeOptions"
         :label="$t('import.users.import_existing_users_label')"
@@ -373,7 +374,7 @@ function errorSummaryText(row: ImportRow): string {
 
       <!-- summary -->
       <div class="text-tertiary-neutral dark:text-tertiary-neutral text-sm">
-        <NeFormItemLabel>{{ $t('import.users.import_summary') }}</NeFormItemLabel>
+        <NeFormItemLabel>{{ $t('import.import_summary') }}</NeFormItemLabel>
         <p>
           {{ $t('import.users.import_summary_detected', { count: validationResult.total_rows }) }}
         </p>

From c961c2dd6805d1b3efcf2959c391a74c6dc08a42 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]" <github-actions[bot]@users.noreply.github.com>
Date: Fri, 8 May 2026 15:02:49 +0000
Subject: [PATCH 08/11] chore: update build triggers for PR deployment
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Auto-updated .render-build-trigger files to ensure all services
are deployed in PR preview environments.

🤖 Generated by GitHub Actions
---
 backend/.render-build-trigger        | 4 ++--
 collect/.render-build-trigger        | 4 ++--
 frontend/.render-build-trigger       | 4 ++--
 proxy/.render-build-trigger          | 4 ++--
 services/mimir/.render-build-trigger | 2 +-
 5 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/backend/.render-build-trigger b/backend/.render-build-trigger
index 320733ced..79cf2226b 100644
--- a/backend/.render-build-trigger
+++ b/backend/.render-build-trigger
@@ -2,9 +2,9 @@
 # This file is used to force Docker service rebuilds in PR previews
 # Modify LAST_UPDATE to trigger rebuilds
 
-LAST_UPDATE=2026-04-22T07:15:29Z
+LAST_UPDATE=2026-05-08T15:02:49Z
 
 # Instructions:
 # 1. To force rebuild of Docker services in a PR, update LAST_UPDATE
-# 2. Run: perl -i -pe "s/LAST_UPDATE=2026-04-22T07:15:29Z
+# 2. Run: perl -i -pe "s/LAST_UPDATE=2026-05-08T15:02:49Z
 # 2. Commit and push changes to trigger Docker rebuilds
diff --git a/collect/.render-build-trigger b/collect/.render-build-trigger
index 320733ced..79cf2226b 100644
--- a/collect/.render-build-trigger
+++ b/collect/.render-build-trigger
@@ -2,9 +2,9 @@
 # This file is used to force Docker service rebuilds in PR previews
 # Modify LAST_UPDATE to trigger rebuilds
 
-LAST_UPDATE=2026-04-22T07:15:29Z
+LAST_UPDATE=2026-05-08T15:02:49Z
 
 # Instructions:
 # 1. To force rebuild of Docker services in a PR, update LAST_UPDATE
-# 2. Run: perl -i -pe "s/LAST_UPDATE=2026-04-22T07:15:29Z
+# 2. Run: perl -i -pe "s/LAST_UPDATE=2026-05-08T15:02:49Z
 # 2. Commit and push changes to trigger Docker rebuilds
diff --git a/frontend/.render-build-trigger b/frontend/.render-build-trigger
index 320733ced..79cf2226b 100644
--- a/frontend/.render-build-trigger
+++ b/frontend/.render-build-trigger
@@ -2,9 +2,9 @@
 # This file is used to force Docker service rebuilds in PR previews
 # Modify LAST_UPDATE to trigger rebuilds
 
-LAST_UPDATE=2026-04-22T07:15:29Z
+LAST_UPDATE=2026-05-08T15:02:49Z
 
 # Instructions:
 # 1. To force rebuild of Docker services in a PR, update LAST_UPDATE
-# 2. Run: perl -i -pe "s/LAST_UPDATE=2026-04-22T07:15:29Z
+# 2. Run: perl -i -pe "s/LAST_UPDATE=2026-05-08T15:02:49Z
 # 2. Commit and push changes to trigger Docker rebuilds
diff --git a/proxy/.render-build-trigger b/proxy/.render-build-trigger
index 320733ced..79cf2226b 100644
--- a/proxy/.render-build-trigger
+++ b/proxy/.render-build-trigger
@@ -2,9 +2,9 @@
 # This file is used to force Docker service rebuilds in PR previews
 # Modify LAST_UPDATE to trigger rebuilds
 
-LAST_UPDATE=2026-04-22T07:15:29Z
+LAST_UPDATE=2026-05-08T15:02:49Z
 
 # Instructions:
 # 1. To force rebuild of Docker services in a PR, update LAST_UPDATE
-# 2. Run: perl -i -pe "s/LAST_UPDATE=2026-04-22T07:15:29Z
+# 2. Run: perl -i -pe "s/LAST_UPDATE=2026-05-08T15:02:49Z
 # 2. Commit and push changes to trigger Docker rebuilds
diff --git a/services/mimir/.render-build-trigger b/services/mimir/.render-build-trigger
index f6a0c597a..c182a233e 100644
--- a/services/mimir/.render-build-trigger
+++ b/services/mimir/.render-build-trigger
@@ -2,7 +2,7 @@
 # This file is used to force Docker service rebuilds in PR previews
 # Modify LAST_UPDATE to trigger rebuilds
 
-LAST_UPDATE=2026-04-22T07:15:29Z
+LAST_UPDATE=2026-05-08T15:02:49Z
 
 # Instructions:
 # 1. To force rebuild of Docker services in a PR, update LAST_UPDATE

From 2308ae0b76e256160bfa377c468147fd403f951b Mon Sep 17 00:00:00 2001
From: Andrea Leardini <andrea.leardini@nethesis.it>
Date: Fri, 8 May 2026 17:51:35 +0200
Subject: [PATCH 09/11] fix: improve management of phones numbers

---
 .../customers/CreateOrEditCustomerDrawer.vue  | 64 +++++++++++++++----
 .../components/customers/CustomerInfoCard.vue |  3 +-
 .../CreateOrEditDistributorDrawer.vue         | 64 +++++++++++++++----
 .../distributors/DistributorInfoCard.vue      |  3 +-
 .../resellers/CreateOrEditResellerDrawer.vue  | 64 +++++++++++++++----
 .../components/resellers/ResellerInfoCard.vue |  3 +-
 .../users/CreateOrEditUserDrawer.vue          | 22 ++-----
 frontend/src/lib/phone.ts                     | 31 +++++++++
 8 files changed, 192 insertions(+), 62 deletions(-)

diff --git a/frontend/src/components/customers/CreateOrEditCustomerDrawer.vue b/frontend/src/components/customers/CreateOrEditCustomerDrawer.vue
index 341c7b60b..21703e19b 100644
--- a/frontend/src/components/customers/CreateOrEditCustomerDrawer.vue
+++ b/frontend/src/components/customers/CreateOrEditCustomerDrawer.vue
@@ -12,6 +12,7 @@ import {
   NeInlineNotification,
   NeTextArea,
   NeCombobox,
+  NeFormItemLabel,
   type NeComboboxOption,
   getPreference,
 } from '@nethesis/vue-components'
@@ -36,6 +37,7 @@ import type { AxiosError } from 'axios'
 import { getCommonLanguagesOptions } from '@/lib/locale'
 import { getBrowserLocale } from '@/i18n'
 import { useLoginStore } from '@/stores/login'
+import { combinePhoneParts, countryCodeComboOptions, parsePhoneForForm } from '@/lib/phone'
 
 const { isShown = false, currentCustomer = undefined } = defineProps<{
   isShown: boolean
@@ -123,6 +125,7 @@ const mainContact = ref('')
 const mainContactRef = useTemplateRef<HTMLInputElement>('mainContactRef')
 const email = ref('')
 const emailRef = useTemplateRef<HTMLInputElement>('emailRef')
+const countryCode = ref('')
 const phone = ref('')
 const phoneRef = useTemplateRef<HTMLInputElement>('phoneRef')
 const language = ref('it')
@@ -168,7 +171,17 @@ function onShow() {
     city.value = currentCustomer.custom_data?.city || ''
     mainContact.value = currentCustomer.custom_data?.main_contact || ''
     email.value = currentCustomer.custom_data?.email || ''
-    phone.value = currentCustomer.custom_data?.phone || ''
+
+    // Parse phone number to extract country code and local part
+    if (currentCustomer.custom_data?.phone) {
+      const parsed = parsePhoneForForm(currentCustomer.custom_data.phone)
+      countryCode.value = parsed.countryCode
+      phone.value = parsed.phone
+    } else {
+      countryCode.value = 'it'
+      phone.value = ''
+    }
+
     language.value = currentCustomer.custom_data?.language || ''
     notes.value = currentCustomer.custom_data?.notes || ''
   } else {
@@ -179,6 +192,7 @@ function onShow() {
     city.value = ''
     mainContact.value = ''
     email.value = ''
+    countryCode.value = 'it'
     phone.value = ''
     language.value = 'it'
     notes.value = ''
@@ -268,7 +282,7 @@ async function saveCustomer() {
       city: city.value,
       main_contact: mainContact.value,
       email: email.value,
-      phone: phone.value,
+      phone: combinePhoneParts(countryCode.value, phone.value),
       language: language.value,
       notes: notes.value,
     },
@@ -387,18 +401,40 @@ async function saveCustomer() {
           :optional-label="t('common.optional')"
         />
         <!-- phone -->
-        <NeTextInput
-          ref="phoneRef"
-          v-model="phone"
-          @blur="phone = phone.trim()"
-          :label="$t('organizations.phone_number')"
-          :invalid-message="
-            validationIssues.custom_data_phone?.[0] ? $t(validationIssues.custom_data_phone[0]) : ''
-          "
-          :disabled="saving"
-          :optional="true"
-          :optional-label="t('common.optional')"
-        />
+        <div>
+          <div class="flex items-center justify-between gap-4">
+            <NeFormItemLabel>{{ $t('organizations.phone_number') }}</NeFormItemLabel>
+            <NeFormItemLabel>{{ $t('common.optional') }}</NeFormItemLabel>
+          </div>
+          <div class="flex gap-4">
+            <!-- country code -->
+            <NeCombobox
+              v-model="countryCode"
+              :options="countryCodeComboOptions"
+              :disabled="saving"
+              :no-results-label="$t('ne_combobox.no_results')"
+              :limited-options-label="$t('ne_combobox.limited_options_label')"
+              :no-options-label="$t('ne_combobox.no_options_label')"
+              :selected-label="$t('ne_combobox.selected')"
+              :user-input-label="$t('ne_combobox.user_input_label')"
+              :optional-label="$t('common.optional')"
+            />
+            <!-- local part -->
+            <NeTextInput
+              ref="phoneRef"
+              v-model="phone"
+              @blur="phone = phone.trim()"
+              :invalid-message="
+                validationIssues.custom_data_phone?.[0]
+                  ? t(validationIssues.custom_data_phone[0])
+                  : ''
+              "
+              :disabled="saving"
+              :optional="true"
+              :optional-label="t('common.optional')"
+            />
+          </div>
+        </div>
         <!-- language -->
         <NeCombobox
           ref="languageRef"
diff --git a/frontend/src/components/customers/CustomerInfoCard.vue b/frontend/src/components/customers/CustomerInfoCard.vue
index 06c47687e..fdaf8ce8f 100644
--- a/frontend/src/components/customers/CustomerInfoCard.vue
+++ b/frontend/src/components/customers/CustomerInfoCard.vue
@@ -23,6 +23,7 @@ import { faPenToSquare } from '@fortawesome/free-solid-svg-icons'
 import { useI18n } from 'vue-i18n'
 import CreateOrEditCustomerDrawer from './CreateOrEditCustomerDrawer.vue'
 import { getLanguageLabel } from '@/lib/locale'
+import { formatPhoneForDisplay } from '@/lib/phone'
 
 const { t } = useI18n()
 const { state: customerDetail, asyncStatus } = useCustomerDetail()
@@ -130,7 +131,7 @@ function getKebabMenuItems() {
               v-if="customerDetail.data.custom_data.phone"
               :href="`tel:${customerDetail.data.custom_data.phone}`"
             >
-              {{ customerDetail.data.custom_data.phone }}
+              {{ formatPhoneForDisplay(customerDetail.data.custom_data.phone) }}
             </NeLink>
             <template v-else>-</template>
           </template>
diff --git a/frontend/src/components/distributors/CreateOrEditDistributorDrawer.vue b/frontend/src/components/distributors/CreateOrEditDistributorDrawer.vue
index 1078997d9..4e1a9e6ae 100644
--- a/frontend/src/components/distributors/CreateOrEditDistributorDrawer.vue
+++ b/frontend/src/components/distributors/CreateOrEditDistributorDrawer.vue
@@ -12,6 +12,7 @@ import {
   NeInlineNotification,
   NeTextArea,
   NeCombobox,
+  NeFormItemLabel,
   type NeComboboxOption,
   getPreference,
 } from '@nethesis/vue-components'
@@ -36,6 +37,7 @@ import type { AxiosError } from 'axios'
 import { getCommonLanguagesOptions } from '@/lib/locale'
 import { getBrowserLocale } from '@/i18n'
 import { useLoginStore } from '@/stores/login'
+import { combinePhoneParts, countryCodeComboOptions, parsePhoneForForm } from '@/lib/phone'
 
 const { isShown = false, currentDistributor = undefined } = defineProps<{
   isShown: boolean
@@ -125,6 +127,7 @@ const mainContact = ref('')
 const mainContactRef = useTemplateRef<HTMLInputElement>('mainContactRef')
 const email = ref('')
 const emailRef = useTemplateRef<HTMLInputElement>('emailRef')
+const countryCode = ref('')
 const phone = ref('')
 const phoneRef = useTemplateRef<HTMLInputElement>('phoneRef')
 const language = ref('it')
@@ -170,7 +173,17 @@ function onShow() {
     city.value = currentDistributor.custom_data?.city || ''
     mainContact.value = currentDistributor.custom_data?.main_contact || ''
     email.value = currentDistributor.custom_data?.email || ''
-    phone.value = currentDistributor.custom_data?.phone || ''
+
+    // Parse phone number to extract country code and local part
+    if (currentDistributor.custom_data?.phone) {
+      const parsed = parsePhoneForForm(currentDistributor.custom_data.phone)
+      countryCode.value = parsed.countryCode
+      phone.value = parsed.phone
+    } else {
+      countryCode.value = 'it'
+      phone.value = ''
+    }
+
     language.value = currentDistributor.custom_data?.language || ''
     notes.value = currentDistributor.custom_data?.notes || ''
   } else {
@@ -181,6 +194,7 @@ function onShow() {
     city.value = ''
     mainContact.value = ''
     email.value = ''
+    countryCode.value = 'it'
     phone.value = ''
     language.value = 'it'
     notes.value = ''
@@ -270,7 +284,7 @@ async function saveDistributor() {
       city: city.value,
       main_contact: mainContact.value,
       email: email.value,
-      phone: phone.value,
+      phone: combinePhoneParts(countryCode.value, phone.value),
       language: language.value,
       notes: notes.value,
     },
@@ -393,18 +407,40 @@ async function saveDistributor() {
           :optional-label="t('common.optional')"
         />
         <!-- phone -->
-        <NeTextInput
-          ref="phoneRef"
-          v-model="phone"
-          @blur="phone = phone.trim()"
-          :label="$t('organizations.phone_number')"
-          :invalid-message="
-            validationIssues.custom_data_phone?.[0] ? $t(validationIssues.custom_data_phone[0]) : ''
-          "
-          :disabled="saving"
-          :optional="true"
-          :optional-label="t('common.optional')"
-        />
+        <div>
+          <div class="flex items-center justify-between gap-4">
+            <NeFormItemLabel>{{ $t('organizations.phone_number') }}</NeFormItemLabel>
+            <NeFormItemLabel>{{ $t('common.optional') }}</NeFormItemLabel>
+          </div>
+          <div class="flex gap-4">
+            <!-- country code -->
+            <NeCombobox
+              v-model="countryCode"
+              :options="countryCodeComboOptions"
+              :disabled="saving"
+              :no-results-label="$t('ne_combobox.no_results')"
+              :limited-options-label="$t('ne_combobox.limited_options_label')"
+              :no-options-label="$t('ne_combobox.no_options_label')"
+              :selected-label="$t('ne_combobox.selected')"
+              :user-input-label="$t('ne_combobox.user_input_label')"
+              :optional-label="$t('common.optional')"
+            />
+            <!-- local part -->
+            <NeTextInput
+              ref="phoneRef"
+              v-model="phone"
+              @blur="phone = phone.trim()"
+              :invalid-message="
+                validationIssues.custom_data_phone?.[0]
+                  ? t(validationIssues.custom_data_phone[0])
+                  : ''
+              "
+              :disabled="saving"
+              :optional="true"
+              :optional-label="t('common.optional')"
+            />
+          </div>
+        </div>
         <!-- language -->
         <NeCombobox
           ref="languageRef"
diff --git a/frontend/src/components/distributors/DistributorInfoCard.vue b/frontend/src/components/distributors/DistributorInfoCard.vue
index dfcea909a..2db46d525 100644
--- a/frontend/src/components/distributors/DistributorInfoCard.vue
+++ b/frontend/src/components/distributors/DistributorInfoCard.vue
@@ -23,6 +23,7 @@ import { faPenToSquare } from '@fortawesome/free-solid-svg-icons'
 import { useI18n } from 'vue-i18n'
 import CreateOrEditDistributorDrawer from './CreateOrEditDistributorDrawer.vue'
 import { getLanguageLabel } from '@/lib/locale'
+import { formatPhoneForDisplay } from '@/lib/phone'
 
 const { t } = useI18n()
 const { state: distributorDetail, asyncStatus } = useDistributorDetail()
@@ -130,7 +131,7 @@ function getKebabMenuItems() {
               v-if="distributorDetail.data.custom_data.phone"
               :href="`tel:${distributorDetail.data.custom_data.phone}`"
             >
-              {{ distributorDetail.data.custom_data.phone }}
+              {{ formatPhoneForDisplay(distributorDetail.data.custom_data.phone) }}
             </NeLink>
             <template v-else>-</template>
           </template>
diff --git a/frontend/src/components/resellers/CreateOrEditResellerDrawer.vue b/frontend/src/components/resellers/CreateOrEditResellerDrawer.vue
index 46b825ee5..a8d9f3d78 100644
--- a/frontend/src/components/resellers/CreateOrEditResellerDrawer.vue
+++ b/frontend/src/components/resellers/CreateOrEditResellerDrawer.vue
@@ -12,6 +12,7 @@ import {
   NeInlineNotification,
   NeTextArea,
   NeCombobox,
+  NeFormItemLabel,
   type NeComboboxOption,
   getPreference,
 } from '@nethesis/vue-components'
@@ -36,6 +37,7 @@ import type { AxiosError } from 'axios'
 import { getCommonLanguagesOptions } from '@/lib/locale'
 import { getBrowserLocale } from '@/i18n'
 import { useLoginStore } from '@/stores/login'
+import { combinePhoneParts, countryCodeComboOptions, parsePhoneForForm } from '@/lib/phone'
 
 const { isShown = false, currentReseller = undefined } = defineProps<{
   isShown: boolean
@@ -123,6 +125,7 @@ const mainContact = ref('')
 const mainContactRef = useTemplateRef<HTMLInputElement>('mainContactRef')
 const email = ref('')
 const emailRef = useTemplateRef<HTMLInputElement>('emailRef')
+const countryCode = ref('')
 const phone = ref('')
 const phoneRef = useTemplateRef<HTMLInputElement>('phoneRef')
 const language = ref('it')
@@ -168,7 +171,17 @@ function onShow() {
     city.value = currentReseller.custom_data?.city || ''
     mainContact.value = currentReseller.custom_data?.main_contact || ''
     email.value = currentReseller.custom_data?.email || ''
-    phone.value = currentReseller.custom_data?.phone || ''
+
+    // Parse phone number to extract country code and local part
+    if (currentReseller.custom_data?.phone) {
+      const parsed = parsePhoneForForm(currentReseller.custom_data.phone)
+      countryCode.value = parsed.countryCode
+      phone.value = parsed.phone
+    } else {
+      countryCode.value = 'it'
+      phone.value = ''
+    }
+
     language.value = currentReseller.custom_data?.language || ''
     notes.value = currentReseller.custom_data?.notes || ''
   } else {
@@ -179,6 +192,7 @@ function onShow() {
     city.value = ''
     mainContact.value = ''
     email.value = ''
+    countryCode.value = 'it'
     phone.value = ''
     language.value = 'it'
     notes.value = ''
@@ -268,7 +282,7 @@ async function saveReseller() {
       city: city.value,
       main_contact: mainContact.value,
       email: email.value,
-      phone: phone.value,
+      phone: combinePhoneParts(countryCode.value, phone.value),
       language: language.value,
       notes: notes.value,
     },
@@ -387,18 +401,40 @@ async function saveReseller() {
           :optional-label="t('common.optional')"
         />
         <!-- phone -->
-        <NeTextInput
-          ref="phoneRef"
-          v-model="phone"
-          @blur="phone = phone.trim()"
-          :label="$t('organizations.phone_number')"
-          :invalid-message="
-            validationIssues.custom_data_phone?.[0] ? $t(validationIssues.custom_data_phone[0]) : ''
-          "
-          :disabled="saving"
-          :optional="true"
-          :optional-label="t('common.optional')"
-        />
+        <div>
+          <div class="flex items-center justify-between gap-4">
+            <NeFormItemLabel>{{ $t('organizations.phone_number') }}</NeFormItemLabel>
+            <NeFormItemLabel>{{ $t('common.optional') }}</NeFormItemLabel>
+          </div>
+          <div class="flex gap-4">
+            <!-- country code -->
+            <NeCombobox
+              v-model="countryCode"
+              :options="countryCodeComboOptions"
+              :disabled="saving"
+              :no-results-label="$t('ne_combobox.no_results')"
+              :limited-options-label="$t('ne_combobox.limited_options_label')"
+              :no-options-label="$t('ne_combobox.no_options_label')"
+              :selected-label="$t('ne_combobox.selected')"
+              :user-input-label="$t('ne_combobox.user_input_label')"
+              :optional-label="$t('common.optional')"
+            />
+            <!-- local part -->
+            <NeTextInput
+              ref="phoneRef"
+              v-model="phone"
+              @blur="phone = phone.trim()"
+              :invalid-message="
+                validationIssues.custom_data_phone?.[0]
+                  ? t(validationIssues.custom_data_phone[0])
+                  : ''
+              "
+              :disabled="saving"
+              :optional="true"
+              :optional-label="t('common.optional')"
+            />
+          </div>
+        </div>
         <!-- language -->
         <NeCombobox
           ref="languageRef"
diff --git a/frontend/src/components/resellers/ResellerInfoCard.vue b/frontend/src/components/resellers/ResellerInfoCard.vue
index 1099fe96d..86b7131c4 100644
--- a/frontend/src/components/resellers/ResellerInfoCard.vue
+++ b/frontend/src/components/resellers/ResellerInfoCard.vue
@@ -23,6 +23,7 @@ import { faPenToSquare } from '@fortawesome/free-solid-svg-icons'
 import { useI18n } from 'vue-i18n'
 import CreateOrEditResellerDrawer from './CreateOrEditResellerDrawer.vue'
 import { getLanguageLabel } from '@/lib/locale'
+import { formatPhoneForDisplay } from '@/lib/phone'
 
 const { t } = useI18n()
 const { state: resellerDetail, asyncStatus } = useResellerDetail()
@@ -130,7 +131,7 @@ function getKebabMenuItems() {
               v-if="resellerDetail.data.custom_data.phone"
               :href="`tel:${resellerDetail.data.custom_data.phone}`"
             >
-              {{ resellerDetail.data.custom_data.phone }}
+              {{ formatPhoneForDisplay(resellerDetail.data.custom_data.phone) }}
             </NeLink>
             <template v-else>-</template>
           </template>
diff --git a/frontend/src/components/users/CreateOrEditUserDrawer.vue b/frontend/src/components/users/CreateOrEditUserDrawer.vue
index 1b0c5e5a5..39aec3ee7 100644
--- a/frontend/src/components/users/CreateOrEditUserDrawer.vue
+++ b/frontend/src/components/users/CreateOrEditUserDrawer.vue
@@ -39,7 +39,7 @@ import { normalize } from '@/lib/common'
 import { organizationsQuery } from '@/queries/organizations/organizations'
 import { userRolesQuery } from '@/queries/users/userRoles'
 import { USER_FILTERS_KEY } from '@/lib/users/userFilters'
-import { countries, parsePhoneNumber, combinePhoneParts } from '@/lib/phone'
+import { combinePhoneParts, countryCodeComboOptions, parsePhoneForForm } from '@/lib/phone'
 
 const { isShown = false, currentUser = undefined } = defineProps<{
   isShown: boolean
@@ -179,12 +179,6 @@ const userRoleOptions = computed(() => {
   }))
 })
 
-const countryCodeOptions: NeComboboxOption[] = countries.map((c) => ({
-  id: `${c.iso2}`,
-  label: `${c.country_name} (+${c.country_code})`,
-  description: c.flag,
-}))
-
 watch(
   () => isShown,
   () => {
@@ -201,15 +195,9 @@ watch(
 
         // Parse phone number to extract country code and local part
         if (currentUser.phone) {
-          const parsed = parsePhoneNumber(currentUser.phone)
-          if (parsed) {
-            countryCode.value = parsed.countryIso2
-            phone.value = parsed.localPart
-          } else {
-            // Fallback if parsing fails
-            countryCode.value = 'it'
-            phone.value = currentUser.phone
-          }
+          const parsed = parsePhoneForForm(currentUser.phone)
+          countryCode.value = parsed.countryCode
+          phone.value = parsed.phone
         } else {
           countryCode.value = 'it'
           phone.value = ''
@@ -450,7 +438,7 @@ function getEmailInvalidMessage(): string {
             <!-- country code -->
             <NeCombobox
               v-model="countryCode"
-              :options="countryCodeOptions"
+              :options="countryCodeComboOptions"
               :disabled="saving"
               :no-results-label="$t('ne_combobox.no_results')"
               :limited-options-label="$t('ne_combobox.limited_options_label')"
diff --git a/frontend/src/lib/phone.ts b/frontend/src/lib/phone.ts
index 4affca58e..006da0545 100644
--- a/frontend/src/lib/phone.ts
+++ b/frontend/src/lib/phone.ts
@@ -2,6 +2,7 @@
 //  SPDX-License-Identifier: GPL-3.0-or-later
 
 import { parsePhoneNumberFromString } from 'libphonenumber-js'
+import type { NeComboboxOption } from '@nethesis/vue-components'
 
 // The backend stores phone numbers as digits-only (E.164 without the leading
 // `+`), e.g. "393330001113". This helper renders a human-readable version for
@@ -324,3 +325,33 @@ export const countries = [
   { iso2: 'zm', country_name: 'Zambia', country_code: '260', flag: '🇿🇲' },
   { iso2: 'zw', country_name: 'Zimbabwe', country_code: '263', flag: '🇿🇼' },
 ]
+
+// Pre-formatted options for NeCombobox component showing country name, code, and flag
+export const countryCodeComboOptions: NeComboboxOption[] = countries.map((c) => ({
+  id: `${c.iso2}`,
+  label: `${c.country_name} (+${c.country_code})`,
+  description: c.flag,
+}))
+
+// Parse a raw phone number string and return parts suitable for form fields.
+// Used by all phone input components to split phone into country code + local part.
+// Returns { countryCode, phone } where:
+// - countryCode is ISO2 code (e.g., "it")
+// - phone is formatted local part (e.g., "333 000 1113")
+// If parsing fails or input is empty, defaults to "it" + original value (or empty).
+export function parsePhoneForForm(raw: string | null | undefined): {
+  countryCode: string
+  phone: string
+} {
+  if (!raw) {
+    return { countryCode: 'it', phone: '' }
+  }
+
+  const parsed = parsePhoneNumber(raw)
+  if (parsed) {
+    return { countryCode: parsed.countryIso2, phone: parsed.localPart }
+  } else {
+    // Fallback if parsing fails
+    return { countryCode: 'it', phone: raw }
+  }
+}

From ba3ce211bb637a2627b380310220d7b7a5e3158d Mon Sep 17 00:00:00 2001
From: Andrea Leardini <andrea.leardini@nethesis.it>
Date: Mon, 11 May 2026 09:25:24 +0200
Subject: [PATCH 10/11] fix: data item component colors

---
 frontend/src/components/DataItem.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/DataItem.vue b/frontend/src/components/DataItem.vue
index 3ba57bd3e..e2801670b 100644
--- a/frontend/src/components/DataItem.vue
+++ b/frontend/src/components/DataItem.vue
@@ -5,10 +5,10 @@
 
 <template>
   <div class="flex justify-between gap-2 py-4">
-    <div class="font-medium">
+    <div class="text-tertiary-neutral dark:text-tertiary-neutral font-medium">
       <slot name="label"></slot>
     </div>
-    <span class="text-tertiary-neutral dark:text-tertiary-neutral text-end">
+    <span class="text-secondary-neutral dark:text-secondary-neutral text-end">
       <slot name="data"></slot>
     </span>
   </div>

From d145739d4f550caeab680af9c60067f18073e96b Mon Sep 17 00:00:00 2001
From: Andrea Leardini <andrea.leardini@nethesis.it>
Date: Mon, 11 May 2026 17:36:11 +0200
Subject: [PATCH 11/11] fix: width of country code fields

---
 frontend/package-lock.json                           | 12 ++++++------
 frontend/package.json                                |  2 +-
 .../customers/CreateOrEditCustomerDrawer.vue         |  1 +
 .../distributors/CreateOrEditDistributorDrawer.vue   |  1 +
 .../resellers/CreateOrEditResellerDrawer.vue         |  1 +
 .../src/components/users/CreateOrEditUserDrawer.vue  |  1 +
 6 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 8d85319e8..a6886a291 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "my-nethesis-ui",
-  "version": "0.5.0",
+  "version": "0.6.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "my-nethesis-ui",
-      "version": "0.5.0",
+      "version": "0.6.1",
       "dependencies": {
         "@fontsource/poppins": "^5.2.6",
         "@fortawesome/fontawesome-svg-core": "^6.7.2",
@@ -16,7 +16,7 @@
         "@logto/vue": "^3.0.8",
         "@nethesis/nethesis-light-svg-icons": "github:nethesis/Font-Awesome#ns-light",
         "@nethesis/nethesis-solid-svg-icons": "github:nethesis/Font-Awesome#ns-solid",
-        "@nethesis/vue-components": "^3.7.0",
+        "@nethesis/vue-components": "^3.8.0",
         "@pinia/colada": "^1.1.0",
         "@tailwindcss/vite": "^4.1.10",
         "@vuepic/vue-datepicker": "^12.1.0",
@@ -1731,9 +1731,9 @@
       }
     },
     "node_modules/@nethesis/vue-components": {
-      "version": "3.7.0",
-      "resolved": "https://registry.npmjs.org/@nethesis/vue-components/-/vue-components-3.7.0.tgz",
-      "integrity": "sha512-BXXjdyHfKf7vBJHzaAfoUaaMYJ+1a92+7f63OS8T/t9UNvGSb+jCCki6VndQrEkNbJ7SaLZYC7MPnbxK5n3L9A==",
+      "version": "3.8.0",
+      "resolved": "https://registry.npmjs.org/@nethesis/vue-components/-/vue-components-3.8.0.tgz",
+      "integrity": "sha512-z6+FH1C1/vJf498t/B8lGBpZcxLt/lwHNASiSn/xmtSE4P9pdKNL27jsrVJpokN+rlg7ctLXhm/kE/WMK8cZ4w==",
       "dependencies": {
         "@fontsource/poppins": "^5.2.6",
         "@fortawesome/fontawesome-svg-core": "^6.5.1",
diff --git a/frontend/package.json b/frontend/package.json
index d467d9e7e..eb7202bab 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -26,7 +26,7 @@
     "@logto/vue": "^3.0.8",
     "@nethesis/nethesis-light-svg-icons": "github:nethesis/Font-Awesome#ns-light",
     "@nethesis/nethesis-solid-svg-icons": "github:nethesis/Font-Awesome#ns-solid",
-    "@nethesis/vue-components": "^3.7.0",
+    "@nethesis/vue-components": "^3.8.0",
     "@pinia/colada": "^1.1.0",
     "@tailwindcss/vite": "^4.1.10",
     "@vuepic/vue-datepicker": "^12.1.0",
diff --git a/frontend/src/components/customers/CreateOrEditCustomerDrawer.vue b/frontend/src/components/customers/CreateOrEditCustomerDrawer.vue
index 21703e19b..349cf85a0 100644
--- a/frontend/src/components/customers/CreateOrEditCustomerDrawer.vue
+++ b/frontend/src/components/customers/CreateOrEditCustomerDrawer.vue
@@ -418,6 +418,7 @@ async function saveCustomer() {
               :selected-label="$t('ne_combobox.selected')"
               :user-input-label="$t('ne_combobox.user_input_label')"
               :optional-label="$t('common.optional')"
+              custom-options-width="17rem"
             />
             <!-- local part -->
             <NeTextInput
diff --git a/frontend/src/components/distributors/CreateOrEditDistributorDrawer.vue b/frontend/src/components/distributors/CreateOrEditDistributorDrawer.vue
index 4e1a9e6ae..068ff3833 100644
--- a/frontend/src/components/distributors/CreateOrEditDistributorDrawer.vue
+++ b/frontend/src/components/distributors/CreateOrEditDistributorDrawer.vue
@@ -424,6 +424,7 @@ async function saveDistributor() {
               :selected-label="$t('ne_combobox.selected')"
               :user-input-label="$t('ne_combobox.user_input_label')"
               :optional-label="$t('common.optional')"
+              custom-options-width="17rem"
             />
             <!-- local part -->
             <NeTextInput
diff --git a/frontend/src/components/resellers/CreateOrEditResellerDrawer.vue b/frontend/src/components/resellers/CreateOrEditResellerDrawer.vue
index a8d9f3d78..039f2150e 100644
--- a/frontend/src/components/resellers/CreateOrEditResellerDrawer.vue
+++ b/frontend/src/components/resellers/CreateOrEditResellerDrawer.vue
@@ -418,6 +418,7 @@ async function saveReseller() {
               :selected-label="$t('ne_combobox.selected')"
               :user-input-label="$t('ne_combobox.user_input_label')"
               :optional-label="$t('common.optional')"
+              custom-options-width="17rem"
             />
             <!-- local part -->
             <NeTextInput
diff --git a/frontend/src/components/users/CreateOrEditUserDrawer.vue b/frontend/src/components/users/CreateOrEditUserDrawer.vue
index 39aec3ee7..e9c0a7fba 100644
--- a/frontend/src/components/users/CreateOrEditUserDrawer.vue
+++ b/frontend/src/components/users/CreateOrEditUserDrawer.vue
@@ -446,6 +446,7 @@ function getEmailInvalidMessage(): string {
               :selected-label="$t('ne_combobox.selected')"
               :user-input-label="$t('ne_combobox.user_input_label')"
               :optional-label="$t('common.optional')"
+              custom-options-width="17rem"
             />
             <!-- local part -->
             <NeTextInput