From 78d3e17d0232deebe32f8aea5928eb6c9ded4046 Mon Sep 17 00:00:00 2001
From: Simone Bierti <sbierti@MacBook-Pro-di-Simone.local>
Date: Tue, 7 Apr 2026 12:34:03 +0200
Subject: [PATCH] Implement role-based booking list views for ROLE_USER and
 ROLE_INCARICATO

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend-changes.md                           |  59 ++
 .../prenotazione/prenotazione.component.ts    |  74 ++-
 .../entities/prenotazione/prenotazione.vue    | 503 ++++++++++++------
 src/main/webapp/i18n/it/prenotazione.json     |  27 +-
 4 files changed, 491 insertions(+), 172 deletions(-)

diff --git a/frontend-changes.md b/frontend-changes.md
index a353c22..84c81c6 100644
--- a/frontend-changes.md
+++ b/frontend-changes.md
@@ -731,3 +731,62 @@ A profile completion check is shown on the home page to prompt users to complete
 - Bootstrap responsive design
 - Complete Italian translations
 - Security: users can only edit their own profile
+
+---
+
+# Frontend Changes: Gestione e Visualizzazione Prenotazioni per Ruolo
+
+## Date
+
+2026-04-07
+
+## Overview
+
+Implemented role-based booking management views as specified in `features/visualizzazione-prenotazioni.md`. The `prenotazione` list page now renders different UIs depending on the user's role:
+
+- **ROLE_USER**: sees their own bookings in a single table. Edit and Delete actions are hidden when a `Conferma` exists for that booking. A "Vedi conferma" button appears instead.
+- **ROLE_INCARICATO**: sees two separate tables — *Prenotazioni in attesa* (no `Conferma`) and *Prenotazioni gestite* (with `Conferma`). A "Prendi in carico" button opens a modal to create the `Conferma` record; after saving, the row moves reactively from the first table to the second without a page reload.
+
+## Files Modified
+
+### 1. Component Logic
+
+**File:** `src/main/webapp/app/entities/prenotazione/prenotazione.component.ts`
+
+- Imported `useAccountStore`, `Authority`, `TipoConferma`, `ConfermaService`
+- Added `isIncaricato` computed property (checks `account.authorities`)
+- Added `prenotazioniPendenti` and `prenotazioniCompletate` computed arrays (derived from `prenotaziones`)
+- Added modal state: `showPrendiInCaricoModal`, `selectedPrenotazione`, `confermaForm`, `isSubmittingConferma`
+- Added methods: `prendiInCarico()`, `closePrendiInCaricoModal()`, `submitConferma()`
+  - `submitConferma()` calls `ConfermaService.create()` with `id` set to the prenotazione id (shared PK), then refreshes the list reactively
+
+### 2. Vue Template
+
+**File:** `src/main/webapp/app/entities/prenotazione/prenotazione.vue`
+
+- Split into two `<template v-if>` blocks: one for `!isIncaricato`, one for `isIncaricato`
+- **ROLE_USER block**: simplified column set; Edit/Delete wrapped in `v-if="!prenotazione.conferma"`, "Vedi conferma" router-link shown when `conferma` exists
+- **ROLE_INCARICATO block**:
+  - Table 1 (pendenti): full user/struttura columns + "Prendi in carico" button
+  - Table 2 (completate): shows `TipoConferma` badge + "Vedi conferma" link
+  - `b-modal` for "Prendi in carico" with `tipoConferma` select (required) and `motivoConferma` textarea; submit button disabled until tipo selected; spinner during save
+
+### 3. Internationalization
+
+**File:** `src/main/webapp/i18n/it/prenotazione.json`
+
+New keys added:
+- `home.titleIncaricato` — page title for incaricato view
+- `viewConferma` — "Vedi conferma" button label
+- `pendenti.title` / `pendenti.notFound`
+- `completate.title` / `completate.notFound`
+- `prendiInCarico.button`, `.title`, `.subtitle`, `.selectTipo`, `.motivoPlaceholder`, `.submit`, `.success`
+
+Also improved existing Italian strings (`home.title`, `home.refreshListLabel`, `home.createLabel`, `home.notFound`).
+
+## Acceptance Criteria Status
+
+- [x] ROLE_USER cannot delete/edit a booking that has a conferma (buttons hidden in UI)
+- [x] ROLE_INCARICATO sees two tables with correct content split
+- [x] Saving a conferma moves the row reactively from Table 1 to Table 2 (via list refresh after create)
+- [x] Conferma is created with `id` matching the prenotazione id (shared PK per spec)
diff --git a/src/main/webapp/app/entities/prenotazione/prenotazione.component.ts b/src/main/webapp/app/entities/prenotazione/prenotazione.component.ts
index f08c9cb..79ddd09 100644
--- a/src/main/webapp/app/entities/prenotazione/prenotazione.component.ts
+++ b/src/main/webapp/app/entities/prenotazione/prenotazione.component.ts
@@ -1,10 +1,15 @@
-import { type Ref, defineComponent, inject, onMounted, ref, watch } from 'vue';
+import { type Ref, computed, defineComponent, inject, onMounted, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import { useAlertService } from '@/shared/alert/alert.service';
 import { useDateFormat } from '@/shared/composables';
+import { type IConferma } from '@/shared/model/conferma.model';
+import { TipoConferma } from '@/shared/model/enumerations/tipo-conferma.model';
 import { type IPrenotazione } from '@/shared/model/prenotazione.model';
+import { Authority } from '@/shared/security/authority';
+import { useAccountStore } from '@/shared/config/store/account-store';
 
+import ConfermaService from '../conferma/conferma.service';
 import PrenotazioneService from './prenotazione.service';
 
 export default defineComponent({
@@ -13,7 +18,9 @@ export default defineComponent({
     const { t: t$ } = useI18n();
     const dateFormat = useDateFormat();
     const prenotazioneService = inject('prenotazioneService', () => new PrenotazioneService());
+    const confermaService = inject('confermaService', () => new ConfermaService());
     const alertService = inject('alertService', () => useAlertService(), true);
+    const accountStore = useAccountStore();
 
     const itemsPerPage = ref(20);
     const queryCount: Ref<number> = ref(null);
@@ -23,9 +30,25 @@ export default defineComponent({
     const totalItems = ref(0);
 
     const prenotaziones: Ref<IPrenotazione[]> = ref([]);
-
     const isFetching = ref(false);
 
+    // Role-based helpers
+    const account = computed(() => accountStore.account);
+    const isIncaricato = computed(() => account.value?.authorities?.includes(Authority.INCARICATO) ?? false);
+
+    // ROLE_INCARICATO: split list into pending (no conferma) and completed (with conferma)
+    const prenotazioniPendenti = computed(() => prenotaziones.value.filter(p => !p.conferma));
+    const prenotazioniCompletate = computed(() => prenotaziones.value.filter(p => !!p.conferma));
+
+    // "Prendi in carico" modal state
+    const showPrendiInCaricoModal = ref(false);
+    const selectedPrenotazione: Ref<IPrenotazione | null> = ref(null);
+    const confermaForm = ref<{ tipoConferma: string; motivoConferma: string }>({
+      tipoConferma: '',
+      motivoConferma: '',
+    });
+    const isSubmittingConferma = ref(false);
+
     const clear = () => {
       page.value = 1;
     };
@@ -87,6 +110,37 @@ export default defineComponent({
       }
     };
 
+    const prendiInCarico = (prenotazione: IPrenotazione) => {
+      selectedPrenotazione.value = prenotazione;
+      confermaForm.value = { tipoConferma: '', motivoConferma: '' };
+      showPrendiInCaricoModal.value = true;
+    };
+
+    const closePrendiInCaricoModal = () => {
+      showPrendiInCaricoModal.value = false;
+      selectedPrenotazione.value = null;
+    };
+
+    const submitConferma = async () => {
+      if (!selectedPrenotazione.value || !confermaForm.value.tipoConferma) return;
+      isSubmittingConferma.value = true;
+      try {
+        const newConferma: IConferma = {
+          id: selectedPrenotazione.value.id,
+          tipoConferma: confermaForm.value.tipoConferma as keyof typeof TipoConferma,
+          motivoConferma: confermaForm.value.motivoConferma || null,
+        };
+        await confermaService().create(newConferma);
+        alertService.showInfo(t$('smartbookingApp.prenotazione.prendiInCarico.success').toString());
+        closePrendiInCaricoModal();
+        await retrievePrenotaziones();
+      } catch (error) {
+        alertService.showHttpError(error.response);
+      } finally {
+        isSubmittingConferma.value = false;
+      }
+    };
+
     const changeOrder = (newOrder: string) => {
       if (propOrder.value === newOrder) {
         reverse.value = !reverse.value;
@@ -96,18 +150,14 @@ export default defineComponent({
       propOrder.value = newOrder;
     };
 
-    // Whenever order changes, reset the pagination
     watch([propOrder, reverse], async () => {
       if (page.value === 1) {
-        // first page, retrieve new data
         await retrievePrenotaziones();
       } else {
-        // reset the pagination
         clear();
       }
     });
 
-    // Whenever page changes, switch to the new page.
     watch(page, async () => {
       await retrievePrenotaziones();
     });
@@ -132,6 +182,18 @@ export default defineComponent({
       totalItems,
       changeOrder,
       t$,
+      // Role-based
+      isIncaricato,
+      prenotazioniPendenti,
+      prenotazioniCompletate,
+      // Prendi in carico modal
+      showPrendiInCaricoModal,
+      selectedPrenotazione,
+      confermaForm,
+      isSubmittingConferma,
+      prendiInCarico,
+      closePrendiInCaricoModal,
+      submitConferma,
     };
   },
 });
diff --git a/src/main/webapp/app/entities/prenotazione/prenotazione.vue b/src/main/webapp/app/entities/prenotazione/prenotazione.vue
index 966438d..b6b22ee 100644
--- a/src/main/webapp/app/entities/prenotazione/prenotazione.vue
+++ b/src/main/webapp/app/entities/prenotazione/prenotazione.vue
@@ -1,176 +1,355 @@
 <template>
   <div>
-    <h2 id="page-heading" data-cy="PrenotazioneHeading">
-      <span id="prenotazione">{{ t$('smartbookingApp.prenotazione.home.title') }}</span>
-      <div class="d-flex justify-content-end">
-        <button class="btn btn-info me-2" @click="handleSyncList" :disabled="isFetching">
-          <font-awesome-icon icon="sync" :spin="isFetching"></font-awesome-icon>
-          <span>{{ t$('smartbookingApp.prenotazione.home.refreshListLabel') }}</span>
-        </button>
-        <router-link :to="{ name: 'PrenotazioneCreate' }" custom v-slot="{ navigate }">
-          <button
-            @click="navigate"
-            id="jh-create-entity"
-            data-cy="entityCreateButton"
-            class="btn btn-primary jh-create-entity create-prenotazione"
-          >
-            <font-awesome-icon icon="plus"></font-awesome-icon>
-            <span>{{ t$('smartbookingApp.prenotazione.home.createLabel') }}</span>
+    <!-- ============================= ROLE_USER VIEW ============================= -->
+    <template v-if="!isIncaricato">
+      <h2 id="page-heading" data-cy="PrenotazioneHeading">
+        <span id="prenotazione">{{ t$('smartbookingApp.prenotazione.home.title') }}</span>
+        <div class="d-flex justify-content-end">
+          <button class="btn btn-info me-2" @click="handleSyncList" :disabled="isFetching">
+            <font-awesome-icon icon="sync" :spin="isFetching"></font-awesome-icon>
+            <span>{{ t$('smartbookingApp.prenotazione.home.refreshListLabel') }}</span>
           </button>
-        </router-link>
+          <router-link :to="{ name: 'PrenotazioneNuova' }" custom v-slot="{ navigate }">
+            <button
+              @click="navigate"
+              id="jh-create-entity"
+              data-cy="entityCreateButton"
+              class="btn btn-primary jh-create-entity create-prenotazione"
+            >
+              <font-awesome-icon icon="plus"></font-awesome-icon>
+              <span>{{ t$('smartbookingApp.prenotazione.home.createLabel') }}</span>
+            </button>
+          </router-link>
+        </div>
+      </h2>
+      <br />
+      <div class="alert alert-warning" v-if="!isFetching && prenotaziones?.length === 0">
+        <span>{{ t$('smartbookingApp.prenotazione.home.notFound') }}</span>
       </div>
-    </h2>
-    <br />
-    <div class="alert alert-warning" v-if="!isFetching && prenotaziones?.length === 0">
-      <span>{{ t$('smartbookingApp.prenotazione.home.notFound') }}</span>
-    </div>
-    <div class="table-responsive" v-if="prenotaziones?.length > 0">
-      <table class="table table-striped" aria-describedby="prenotaziones">
-        <thead>
-          <tr>
-            <th scope="col" @click="changeOrder('id')">
-              <span>{{ t$('global.field.id') }}</span>
-              <jhi-sort-indicator :current-order="propOrder" :reverse="reverse" :field-name="'id'"></jhi-sort-indicator>
-            </th>
-            <th scope="col" @click="changeOrder('oraInizio')">
-              <span>{{ t$('smartbookingApp.prenotazione.oraInizio') }}</span>
-              <jhi-sort-indicator :current-order="propOrder" :reverse="reverse" :field-name="'oraInizio'"></jhi-sort-indicator>
-            </th>
-            <th scope="col" @click="changeOrder('oraFine')">
-              <span>{{ t$('smartbookingApp.prenotazione.oraFine') }}</span>
-              <jhi-sort-indicator :current-order="propOrder" :reverse="reverse" :field-name="'oraFine'"></jhi-sort-indicator>
-            </th>
-            <th scope="col" @click="changeOrder('stato')">
-              <span>{{ t$('smartbookingApp.prenotazione.stato') }}</span>
-              <jhi-sort-indicator :current-order="propOrder" :reverse="reverse" :field-name="'stato'"></jhi-sort-indicator>
-            </th>
-            <th scope="col" @click="changeOrder('motivoEvento')">
-              <span>{{ t$('smartbookingApp.prenotazione.motivoEvento') }}</span>
-              <jhi-sort-indicator :current-order="propOrder" :reverse="reverse" :field-name="'motivoEvento'"></jhi-sort-indicator>
-            </th>
-            <th scope="col" @click="changeOrder('numeroPartecipanti')">
-              <span>{{ t$('smartbookingApp.prenotazione.numeroPartecipanti') }}</span>
-              <jhi-sort-indicator :current-order="propOrder" :reverse="reverse" :field-name="'numeroPartecipanti'"></jhi-sort-indicator>
-            </th>
-            <th scope="col" @click="changeOrder('noteUtente')">
-              <span>{{ t$('smartbookingApp.prenotazione.noteUtente') }}</span>
-              <jhi-sort-indicator :current-order="propOrder" :reverse="reverse" :field-name="'noteUtente'"></jhi-sort-indicator>
-            </th>
-            <th scope="col" @click="changeOrder('conferma.id')">
-              <span>{{ t$('smartbookingApp.prenotazione.conferma') }}</span>
-              <jhi-sort-indicator :current-order="propOrder" :reverse="reverse" :field-name="'conferma.id'"></jhi-sort-indicator>
-            </th>
-            <th scope="col" @click="changeOrder('utente.username')">
-              <span>{{ t$('smartbookingApp.prenotazione.utente') }}</span>
-              <jhi-sort-indicator :current-order="propOrder" :reverse="reverse" :field-name="'utente.username'"></jhi-sort-indicator>
-            </th>
-            <th scope="col" @click="changeOrder('struttura.nome')">
-              <span>{{ t$('smartbookingApp.prenotazione.struttura') }}</span>
-              <jhi-sort-indicator :current-order="propOrder" :reverse="reverse" :field-name="'struttura.nome'"></jhi-sort-indicator>
-            </th>
-            <th scope="col"></th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr v-for="prenotazione in prenotaziones" :key="prenotazione.id" data-cy="entityTable">
-            <td>
-              <router-link :to="{ name: 'PrenotazioneView', params: { prenotazioneId: prenotazione.id } }">{{
-                prenotazione.id
-              }}</router-link>
-            </td>
-            <td>{{ formatDateShort(prenotazione.oraInizio) || '' }}</td>
-            <td>{{ formatDateShort(prenotazione.oraFine) || '' }}</td>
-            <td>{{ t$('smartbookingApp.StatoPrenotazione.' + prenotazione.stato) }}</td>
-            <td>{{ prenotazione.motivoEvento }}</td>
-            <td>{{ prenotazione.numeroPartecipanti }}</td>
-            <td>{{ prenotazione.noteUtente }}</td>
-            <td>
-              <div v-if="prenotazione.conferma">
-                <router-link :to="{ name: 'ConfermaView', params: { confermaId: prenotazione.conferma.id } }">{{
-                  prenotazione.conferma.id
+      <div class="table-responsive" v-if="prenotaziones?.length > 0">
+        <table class="table table-striped" aria-describedby="prenotaziones">
+          <thead>
+            <tr>
+              <th scope="col" @click="changeOrder('id')">
+                <span>{{ t$('global.field.id') }}</span>
+                <jhi-sort-indicator :current-order="propOrder" :reverse="reverse" :field-name="'id'"></jhi-sort-indicator>
+              </th>
+              <th scope="col" @click="changeOrder('oraInizio')">
+                <span>{{ t$('smartbookingApp.prenotazione.oraInizio') }}</span>
+                <jhi-sort-indicator :current-order="propOrder" :reverse="reverse" :field-name="'oraInizio'"></jhi-sort-indicator>
+              </th>
+              <th scope="col" @click="changeOrder('oraFine')">
+                <span>{{ t$('smartbookingApp.prenotazione.oraFine') }}</span>
+                <jhi-sort-indicator :current-order="propOrder" :reverse="reverse" :field-name="'oraFine'"></jhi-sort-indicator>
+              </th>
+              <th scope="col" @click="changeOrder('stato')">
+                <span>{{ t$('smartbookingApp.prenotazione.stato') }}</span>
+                <jhi-sort-indicator :current-order="propOrder" :reverse="reverse" :field-name="'stato'"></jhi-sort-indicator>
+              </th>
+              <th scope="col" @click="changeOrder('struttura.nome')">
+                <span>{{ t$('smartbookingApp.prenotazione.struttura') }}</span>
+                <jhi-sort-indicator :current-order="propOrder" :reverse="reverse" :field-name="'struttura.nome'"></jhi-sort-indicator>
+              </th>
+              <th scope="col" @click="changeOrder('motivoEvento')">
+                <span>{{ t$('smartbookingApp.prenotazione.motivoEvento') }}</span>
+                <jhi-sort-indicator :current-order="propOrder" :reverse="reverse" :field-name="'motivoEvento'"></jhi-sort-indicator>
+              </th>
+              <th scope="col"></th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="prenotazione in prenotaziones" :key="prenotazione.id" data-cy="entityTable">
+              <td>
+                <router-link :to="{ name: 'PrenotazioneView', params: { prenotazioneId: prenotazione.id } }">{{
+                  prenotazione.id
                 }}</router-link>
-              </div>
-            </td>
-            <td>
-              <div v-if="prenotazione.utente">
-                <router-link :to="{ name: 'UtenteAppView', params: { utenteAppId: prenotazione.utente.id } }">{{
-                  prenotazione.utente.username
-                }}</router-link>
-              </div>
-            </td>
-            <td>
-              <div v-if="prenotazione.struttura">
-                <router-link :to="{ name: 'StrutturaView', params: { strutturaId: prenotazione.struttura.id } }">{{
-                  prenotazione.struttura.nome
-                }}</router-link>
-              </div>
-            </td>
-            <td class="text-end">
-              <div class="btn-group">
-                <router-link
-                  :to="{ name: 'PrenotazioneView', params: { prenotazioneId: prenotazione.id } }"
-                  class="btn btn-info btn-sm details"
-                  data-cy="entityDetailsButton"
-                >
-                  <font-awesome-icon icon="eye"></font-awesome-icon>
-                  <span class="d-none d-md-inline">{{ t$('entity.action.view') }}</span>
-                </router-link>
-                <router-link
-                  :to="{ name: 'PrenotazioneEdit', params: { prenotazioneId: prenotazione.id } }"
-                  class="btn btn-primary btn-sm edit"
-                  data-cy="entityEditButton"
-                >
-                  <font-awesome-icon icon="pencil-alt"></font-awesome-icon>
-                  <span class="d-none d-md-inline">{{ t$('entity.action.edit') }}</span>
-                </router-link>
-                <b-button
-                  @click="prepareRemove(prenotazione)"
-                  variant="danger"
-                  class="btn btn-sm"
-                  data-cy="entityDeleteButton"
-                  v-b-modal.removeEntity
-                >
-                  <font-awesome-icon icon="times"></font-awesome-icon>
-                  <span class="d-none d-md-inline">{{ t$('entity.action.delete') }}</span>
-                </b-button>
-              </div>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-    <b-modal ref="removeEntity" id="removeEntity">
-      <template #title>
-        <span id="smartbookingApp.prenotazione.delete.question" data-cy="prenotazioneDeleteDialogHeading">{{
-          t$('entity.delete.title')
-        }}</span>
-      </template>
-      <div class="modal-body">
-        <p id="jhi-delete-prenotazione-heading">{{ t$('smartbookingApp.prenotazione.delete.question', { id: removeId }) }}</p>
+              </td>
+              <td>{{ formatDateShort(prenotazione.oraInizio) || '' }}</td>
+              <td>{{ formatDateShort(prenotazione.oraFine) || '' }}</td>
+              <td>{{ t$('smartbookingApp.StatoPrenotazione.' + prenotazione.stato) }}</td>
+              <td>
+                <div v-if="prenotazione.struttura">{{ prenotazione.struttura.nome }}</div>
+              </td>
+              <td>{{ prenotazione.motivoEvento }}</td>
+              <td class="text-end">
+                <div class="btn-group">
+                  <router-link
+                    :to="{ name: 'PrenotazioneView', params: { prenotazioneId: prenotazione.id } }"
+                    class="btn btn-info btn-sm details"
+                    data-cy="entityDetailsButton"
+                  >
+                    <font-awesome-icon icon="eye"></font-awesome-icon>
+                    <span class="d-none d-md-inline">{{ t$('entity.action.view') }}</span>
+                  </router-link>
+                  <!-- Show conferma link when conferma exists -->
+                  <router-link
+                    v-if="prenotazione.conferma"
+                    :to="{ name: 'ConfermaView', params: { confermaId: prenotazione.conferma.id } }"
+                    class="btn btn-secondary btn-sm"
+                    data-cy="entityConfermaButton"
+                  >
+                    <font-awesome-icon icon="file-alt"></font-awesome-icon>
+                    <span class="d-none d-md-inline">{{ t$('smartbookingApp.prenotazione.viewConferma') }}</span>
+                  </router-link>
+                  <!-- Edit and Delete only when no conferma -->
+                  <template v-if="!prenotazione.conferma">
+                    <router-link
+                      :to="{ name: 'PrenotazioneEdit', params: { prenotazioneId: prenotazione.id } }"
+                      class="btn btn-primary btn-sm edit"
+                      data-cy="entityEditButton"
+                    >
+                      <font-awesome-icon icon="pencil-alt"></font-awesome-icon>
+                      <span class="d-none d-md-inline">{{ t$('entity.action.edit') }}</span>
+                    </router-link>
+                    <b-button
+                      @click="prepareRemove(prenotazione)"
+                      variant="danger"
+                      class="btn btn-sm"
+                      data-cy="entityDeleteButton"
+                      v-b-modal.removeEntity
+                    >
+                      <font-awesome-icon icon="times"></font-awesome-icon>
+                      <span class="d-none d-md-inline">{{ t$('entity.action.delete') }}</span>
+                    </b-button>
+                  </template>
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
       </div>
-      <template #footer>
-        <div>
-          <button type="button" class="btn btn-secondary" @click="closeDialog()">{{ t$('entity.action.cancel') }}</button>
+      <b-modal ref="removeEntity" id="removeEntity">
+        <template #title>
+          <span id="smartbookingApp.prenotazione.delete.question" data-cy="prenotazioneDeleteDialogHeading">{{
+            t$('entity.delete.title')
+          }}</span>
+        </template>
+        <div class="modal-body">
+          <p id="jhi-delete-prenotazione-heading">{{ t$('smartbookingApp.prenotazione.delete.question', { id: removeId }) }}</p>
+        </div>
+        <template #footer>
+          <div>
+            <button type="button" class="btn btn-secondary" @click="closeDialog()">{{ t$('entity.action.cancel') }}</button>
+            <button
+              type="button"
+              class="btn btn-primary"
+              id="jhi-confirm-delete-prenotazione"
+              data-cy="entityConfirmDeleteButton"
+              @click="removePrenotazione"
+            >
+              {{ t$('entity.action.delete') }}
+            </button>
+          </div>
+        </template>
+      </b-modal>
+      <div v-show="prenotaziones?.length > 0">
+        <div class="d-flex justify-content-center">
+          <jhi-item-count :page="page" :total="queryCount" :items-per-page="itemsPerPage"></jhi-item-count>
+        </div>
+        <div class="d-flex justify-content-center">
+          <b-pagination size="md" :total-rows="totalItems" v-model="page" :per-page="itemsPerPage"></b-pagination>
+        </div>
+      </div>
+    </template>
+
+    <!-- ============================= ROLE_INCARICATO VIEW ============================= -->
+    <template v-if="isIncaricato">
+      <h2 id="page-heading" data-cy="PrenotazioneHeading">
+        <span>{{ t$('smartbookingApp.prenotazione.home.titleIncaricato') }}</span>
+        <div class="d-flex justify-content-end">
+          <button class="btn btn-info" @click="handleSyncList" :disabled="isFetching">
+            <font-awesome-icon icon="sync" :spin="isFetching"></font-awesome-icon>
+            <span>{{ t$('smartbookingApp.prenotazione.home.refreshListLabel') }}</span>
+          </button>
+        </div>
+      </h2>
+      <br />
+
+      <!-- Table 1: Pending (no conferma) -->
+      <h4>{{ t$('smartbookingApp.prenotazione.pendenti.title') }}</h4>
+      <div class="alert alert-warning" v-if="!isFetching && prenotazioniPendenti.length === 0">
+        <span>{{ t$('smartbookingApp.prenotazione.pendenti.notFound') }}</span>
+      </div>
+      <div class="table-responsive" v-if="prenotazioniPendenti.length > 0">
+        <table class="table table-striped" aria-describedby="prenotazioni-pendenti">
+          <thead>
+            <tr>
+              <th scope="col">{{ t$('global.field.id') }}</th>
+              <th scope="col">{{ t$('smartbookingApp.prenotazione.oraInizio') }}</th>
+              <th scope="col">{{ t$('smartbookingApp.prenotazione.oraFine') }}</th>
+              <th scope="col">{{ t$('smartbookingApp.prenotazione.stato') }}</th>
+              <th scope="col">{{ t$('smartbookingApp.prenotazione.utente') }}</th>
+              <th scope="col">{{ t$('smartbookingApp.prenotazione.struttura') }}</th>
+              <th scope="col">{{ t$('smartbookingApp.prenotazione.motivoEvento') }}</th>
+              <th scope="col"></th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="prenotazione in prenotazioniPendenti" :key="prenotazione.id" data-cy="entityTablePendenti">
+              <td>
+                <router-link :to="{ name: 'PrenotazioneView', params: { prenotazioneId: prenotazione.id } }">{{
+                  prenotazione.id
+                }}</router-link>
+              </td>
+              <td>{{ formatDateShort(prenotazione.oraInizio) || '' }}</td>
+              <td>{{ formatDateShort(prenotazione.oraFine) || '' }}</td>
+              <td>{{ t$('smartbookingApp.StatoPrenotazione.' + prenotazione.stato) }}</td>
+              <td>
+                <div v-if="prenotazione.utente">{{ prenotazione.utente.username }}</div>
+              </td>
+              <td>
+                <div v-if="prenotazione.struttura">{{ prenotazione.struttura.nome }}</div>
+              </td>
+              <td>{{ prenotazione.motivoEvento }}</td>
+              <td class="text-end">
+                <div class="btn-group">
+                  <router-link
+                    :to="{ name: 'PrenotazioneView', params: { prenotazioneId: prenotazione.id } }"
+                    class="btn btn-info btn-sm details"
+                    data-cy="entityDetailsButton"
+                  >
+                    <font-awesome-icon icon="eye"></font-awesome-icon>
+                    <span class="d-none d-md-inline">{{ t$('entity.action.view') }}</span>
+                  </router-link>
+                  <button
+                    class="btn btn-success btn-sm"
+                    data-cy="prendiInCaricoButton"
+                    @click="prendiInCarico(prenotazione)"
+                  >
+                    <font-awesome-icon icon="check"></font-awesome-icon>
+                    <span class="d-none d-md-inline">{{ t$('smartbookingApp.prenotazione.prendiInCarico.button') }}</span>
+                  </button>
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <br />
+
+      <!-- Table 2: Completed (with conferma) -->
+      <h4>{{ t$('smartbookingApp.prenotazione.completate.title') }}</h4>
+      <div class="alert alert-warning" v-if="!isFetching && prenotazioniCompletate.length === 0">
+        <span>{{ t$('smartbookingApp.prenotazione.completate.notFound') }}</span>
+      </div>
+      <div class="table-responsive" v-if="prenotazioniCompletate.length > 0">
+        <table class="table table-striped" aria-describedby="prenotazioni-completate">
+          <thead>
+            <tr>
+              <th scope="col">{{ t$('global.field.id') }}</th>
+              <th scope="col">{{ t$('smartbookingApp.prenotazione.oraInizio') }}</th>
+              <th scope="col">{{ t$('smartbookingApp.prenotazione.oraFine') }}</th>
+              <th scope="col">{{ t$('smartbookingApp.prenotazione.stato') }}</th>
+              <th scope="col">{{ t$('smartbookingApp.prenotazione.utente') }}</th>
+              <th scope="col">{{ t$('smartbookingApp.prenotazione.struttura') }}</th>
+              <th scope="col">{{ t$('smartbookingApp.prenotazione.conferma') }}</th>
+              <th scope="col"></th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="prenotazione in prenotazioniCompletate" :key="prenotazione.id" data-cy="entityTableCompletate">
+              <td>
+                <router-link :to="{ name: 'PrenotazioneView', params: { prenotazioneId: prenotazione.id } }">{{
+                  prenotazione.id
+                }}</router-link>
+              </td>
+              <td>{{ formatDateShort(prenotazione.oraInizio) || '' }}</td>
+              <td>{{ formatDateShort(prenotazione.oraFine) || '' }}</td>
+              <td>{{ t$('smartbookingApp.StatoPrenotazione.' + prenotazione.stato) }}</td>
+              <td>
+                <div v-if="prenotazione.utente">{{ prenotazione.utente.username }}</div>
+              </td>
+              <td>
+                <div v-if="prenotazione.struttura">{{ prenotazione.struttura.nome }}</div>
+              </td>
+              <td>
+                <span class="badge bg-success">
+                  {{ t$('smartbookingApp.TipoConferma.' + prenotazione.conferma?.tipoConferma) }}
+                </span>
+              </td>
+              <td class="text-end">
+                <div class="btn-group">
+                  <router-link
+                    :to="{ name: 'PrenotazioneView', params: { prenotazioneId: prenotazione.id } }"
+                    class="btn btn-info btn-sm details"
+                    data-cy="entityDetailsButton"
+                  >
+                    <font-awesome-icon icon="eye"></font-awesome-icon>
+                    <span class="d-none d-md-inline">{{ t$('entity.action.view') }}</span>
+                  </router-link>
+                  <router-link
+                    :to="{ name: 'ConfermaView', params: { confermaId: prenotazione.conferma.id } }"
+                    class="btn btn-secondary btn-sm"
+                    data-cy="entityConfermaButton"
+                  >
+                    <font-awesome-icon icon="file-alt"></font-awesome-icon>
+                    <span class="d-none d-md-inline">{{ t$('smartbookingApp.prenotazione.viewConferma') }}</span>
+                  </router-link>
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <!-- Pagination (shared) -->
+      <div v-show="prenotaziones?.length > 0">
+        <div class="d-flex justify-content-center">
+          <jhi-item-count :page="page" :total="queryCount" :items-per-page="itemsPerPage"></jhi-item-count>
+        </div>
+        <div class="d-flex justify-content-center">
+          <b-pagination size="md" :total-rows="totalItems" v-model="page" :per-page="itemsPerPage"></b-pagination>
+        </div>
+      </div>
+
+      <!-- "Prendi in carico" modal -->
+      <b-modal v-model="showPrendiInCaricoModal" :title="t$('smartbookingApp.prenotazione.prendiInCarico.title')" @hidden="closePrendiInCaricoModal">
+        <div v-if="selectedPrenotazione">
+          <p class="text-muted mb-3">
+            {{ t$('smartbookingApp.prenotazione.prendiInCarico.subtitle', { id: selectedPrenotazione.id }) }}
+          </p>
+          <div class="mb-3">
+            <label for="tipoConfermaSelect" class="form-label fw-bold">
+              {{ t$('smartbookingApp.conferma.tipoConferma') }} <span class="text-danger">*</span>
+            </label>
+            <select id="tipoConfermaSelect" class="form-select" v-model="confermaForm.tipoConferma">
+              <option value="">{{ t$('smartbookingApp.prenotazione.prendiInCarico.selectTipo') }}</option>
+              <option value="CONFERMATA">{{ t$('smartbookingApp.TipoConferma.CONFERMATA') }}</option>
+              <option value="RIFIUTATA">{{ t$('smartbookingApp.TipoConferma.RIFIUTATA') }}</option>
+            </select>
+          </div>
+          <div class="mb-3">
+            <label for="motivoConfermaInput" class="form-label fw-bold">
+              {{ t$('smartbookingApp.conferma.motivoConferma') }}
+            </label>
+            <textarea
+              id="motivoConfermaInput"
+              class="form-control"
+              rows="4"
+              v-model="confermaForm.motivoConferma"
+              :placeholder="t$('smartbookingApp.prenotazione.prendiInCarico.motivoPlaceholder')"
+            ></textarea>
+          </div>
+        </div>
+        <template #footer>
+          <button type="button" class="btn btn-secondary" @click="closePrendiInCaricoModal">
+            {{ t$('entity.action.cancel') }}
+          </button>
           <button
             type="button"
             class="btn btn-primary"
-            id="jhi-confirm-delete-prenotazione"
-            data-cy="entityConfirmDeleteButton"
-            @click="removePrenotazione"
+            :disabled="!confermaForm.tipoConferma || isSubmittingConferma"
+            @click="submitConferma"
           >
-            {{ t$('entity.action.delete') }}
+            <span v-if="isSubmittingConferma">
+              <b-spinner small></b-spinner>
+            </span>
+            {{ t$('smartbookingApp.prenotazione.prendiInCarico.submit') }}
           </button>
-        </div>
-      </template>
-    </b-modal>
-    <div v-show="prenotaziones?.length > 0">
-      <div class="d-flex justify-content-center">
-        <jhi-item-count :page="page" :total="queryCount" :items-per-page="itemsPerPage"></jhi-item-count>
-      </div>
-      <div class="d-flex justify-content-center">
-        <b-pagination size="md" :total-rows="totalItems" v-model="page" :per-page="itemsPerPage"></b-pagination>
-      </div>
-    </div>
+        </template>
+      </b-modal>
+    </template>
   </div>
 </template>
 
diff --git a/src/main/webapp/i18n/it/prenotazione.json b/src/main/webapp/i18n/it/prenotazione.json
index 8175f55..a49bca3 100644
--- a/src/main/webapp/i18n/it/prenotazione.json
+++ b/src/main/webapp/i18n/it/prenotazione.json
@@ -2,11 +2,12 @@
   "smartbookingApp": {
     "prenotazione": {
       "home": {
-        "title": "Prenotaziones",
-        "refreshListLabel": "Refresh list",
-        "createLabel": "Genera un nuovo Prenotazione",
+        "title": "Le mie prenotazioni",
+        "titleIncaricato": "Gestione prenotazioni",
+        "refreshListLabel": "Aggiorna lista",
+        "createLabel": "Nuova prenotazione",
         "createOrEditLabel": "Genera o modifica un Prenotazione",
-        "notFound": "No Prenotaziones found"
+        "notFound": "Nessuna prenotazione trovata"
       },
       "created": "&Egrave; stato generato un nuovo Prenotazione con identificatore {{ param }}",
       "updated": "&Egrave; stato aggiornato Prenotazione identificato da {{ param }}",
@@ -27,6 +28,24 @@
       "conferma": "Conferma",
       "utente": "Utente",
       "struttura": "Struttura",
+      "viewConferma": "Vedi conferma",
+      "pendenti": {
+        "title": "Prenotazioni in attesa",
+        "notFound": "Nessuna prenotazione in attesa"
+      },
+      "completate": {
+        "title": "Prenotazioni gestite",
+        "notFound": "Nessuna prenotazione gestita"
+      },
+      "prendiInCarico": {
+        "button": "Prendi in carico",
+        "title": "Prendi in carico la prenotazione",
+        "subtitle": "Prenotazione #{id}",
+        "selectTipo": "-- Seleziona esito --",
+        "motivoPlaceholder": "Inserisci il motivo o le note relative alla decisione...",
+        "submit": "Conferma",
+        "success": "Prenotazione presa in carico con successo"
+      },
       "userForm": {
         "title": "Nuova Prenotazione",
         "bookingDetails": "Dettagli",