From 6e487639474851f4321d03db6c43145c8e9a9375 Mon Sep 17 00:00:00 2001
From: Pau Costa <paucostaferrer@gmail.com>
Date: Sat, 28 Mar 2026 18:14:51 +0100
Subject: [PATCH] Add filtering for past and upcoming bookings in "My Bookings"
 page

- Enhance UI to separate upcoming and past bookings with collapsible sections.
- Add new i18n keys for handling booking filters (`en.json`, `es-ES.json`).
- Update booking component logic to filter reservations based on time.
- Introduce "Show/Hide Past Bookings" toggle for improved user experience.
---
 .idea/workspace.xml                           |  21 ++-
 apps/web/src/lib/i18n/locales/en.json         |   6 +-
 apps/web/src/lib/i18n/locales/es-ES.json      |   6 +-
 .../routes/dashboard/my-bookings/+page.svelte | 168 +++++++++++++-----
 4 files changed, 145 insertions(+), 56 deletions(-)

diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index f2538d6..28b394f 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -4,8 +4,10 @@
     <option name="autoReloadType" value="SELECTIVE" />
   </component>
   <component name="ChangeListManager">
-    <list default="true" id="6c8b3c54-eabb-40e5-967f-c7b594c750bc" name="Changes" comment="Add seed service to initialize default admin and organization&#10;&#10;- Implement `SeedService` to create a default admin account and organization on app startup.&#10;- Update `PrismaModule` to include `SeedService` as a provider.&#10;- Remove seeded credentials display from login page.&#10;- Refactor existing seed script for consistency with the new service.">
-      <change beforePath="$PROJECT_DIR$/apps/web/src/lib/components/FloorplanViewer.svelte" beforeDir="false" afterPath="$PROJECT_DIR$/apps/web/src/lib/components/FloorplanViewer.svelte" afterDir="false" />
+    <list default="true" id="6c8b3c54-eabb-40e5-967f-c7b594c750bc" name="Changes" comment="Improve real-time space status handling and date-based resets&#10;&#10;- Add logic to clear real-time updates when the selected date changes.&#10;- Enhance space status updates to consider reservation time ranges for relevance.&#10;- Update relevant Svelte components (`SpaceCard`, `FloorplanViewer`) to handle date-sensitive real-time updates.&#10;- Update API to include reservation details in `space_status_changed` events for improved update precision.">
+      <change beforePath="$PROJECT_DIR$/apps/web/src/lib/i18n/locales/en.json" beforeDir="false" afterPath="$PROJECT_DIR$/apps/web/src/lib/i18n/locales/en.json" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/apps/web/src/lib/i18n/locales/es-ES.json" beforeDir="false" afterPath="$PROJECT_DIR$/apps/web/src/lib/i18n/locales/es-ES.json" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/apps/web/src/routes/dashboard/my-bookings/+page.svelte" beforeDir="false" afterPath="$PROJECT_DIR$/apps/web/src/routes/dashboard/my-bookings/+page.svelte" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -127,7 +129,7 @@
       <updated>1774643312599</updated>
       <workItem from="1774643313611" duration="74000" />
       <workItem from="1774643422240" duration="5278000" />
-      <workItem from="1774706361502" duration="11346000" />
+      <workItem from="1774706361502" duration="11708000" />
     </task>
     <task id="LOCAL-00001" summary="Initialize Hot Desking app with web and API services  &#10;&#10;- Set up SvelteKit for the web interface with Tailwind CSS.  &#10;- Build the API using NestJS with Prisma ORM for database interaction.  &#10;- Add environment variable management and docker-compose for PostgreSQL and PgAdmin instances.  &#10;- Create shared data models for consistent typing across services.  &#10;- Establish basic routing and layouts for web and API services.">
       <option name="closed" value="true" />
@@ -305,7 +307,15 @@
       <option name="project" value="LOCAL" />
       <updated>1774717642991</updated>
     </task>
-    <option name="localTasksCounter" value="23" />
+    <task id="LOCAL-00023" summary="Improve real-time space status handling and date-based resets&#10;&#10;- Add logic to clear real-time updates when the selected date changes.&#10;- Enhance space status updates to consider reservation time ranges for relevance.&#10;- Update relevant Svelte components (`SpaceCard`, `FloorplanViewer`) to handle date-sensitive real-time updates.&#10;- Update API to include reservation details in `space_status_changed` events for improved update precision.">
+      <option name="closed" value="true" />
+      <created>1774717937214</created>
+      <option name="number" value="00023" />
+      <option name="presentableId" value="LOCAL-00023" />
+      <option name="project" value="LOCAL" />
+      <updated>1774717937214</updated>
+    </task>
+    <option name="localTasksCounter" value="24" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -336,6 +346,7 @@
     <MESSAGE value="Add rotation support for spaces in floorplan editor  &#10;&#10;- Extend `Space` model and Prisma schema to include `rotation` property.  &#10;- Update API services and DTOs to handle rotation data.  &#10;- Add UI controls in `FloorplanEditor.svelte` for rotating spaces.  &#10;- Refactor space rendering logic in both editor and viewer to support rotation." />
     <MESSAGE value="Add i18n integration and translations for improved localization&#10;&#10;- Extend English (`en.json`) and Spanish (`es-ES.json`) locale files with additional keys for buildings, bookings, reports, and user management.  &#10;- Update Svelte components and pages to use `svelte-i18n` for dynamic translations across the app.  &#10;- Refactor labels, titles, and error messages for multilingual support.  &#10;- Improve date formatting based on locale preferences." />
     <MESSAGE value="Add seed service to initialize default admin and organization&#10;&#10;- Implement `SeedService` to create a default admin account and organization on app startup.&#10;- Update `PrismaModule` to include `SeedService` as a provider.&#10;- Remove seeded credentials display from login page.&#10;- Refactor existing seed script for consistency with the new service." />
-    <option name="LAST_COMMIT_MESSAGE" value="Add seed service to initialize default admin and organization&#10;&#10;- Implement `SeedService` to create a default admin account and organization on app startup.&#10;- Update `PrismaModule` to include `SeedService` as a provider.&#10;- Remove seeded credentials display from login page.&#10;- Refactor existing seed script for consistency with the new service." />
+    <MESSAGE value="Improve real-time space status handling and date-based resets&#10;&#10;- Add logic to clear real-time updates when the selected date changes.&#10;- Enhance space status updates to consider reservation time ranges for relevance.&#10;- Update relevant Svelte components (`SpaceCard`, `FloorplanViewer`) to handle date-sensitive real-time updates.&#10;- Update API to include reservation details in `space_status_changed` events for improved update precision." />
+    <option name="LAST_COMMIT_MESSAGE" value="Improve real-time space status handling and date-based resets&#10;&#10;- Add logic to clear real-time updates when the selected date changes.&#10;- Enhance space status updates to consider reservation time ranges for relevance.&#10;- Update relevant Svelte components (`SpaceCard`, `FloorplanViewer`) to handle date-sensitive real-time updates.&#10;- Update API to include reservation details in `space_status_changed` events for improved update precision." />
   </component>
 </project>
\ No newline at end of file
diff --git a/apps/web/src/lib/i18n/locales/en.json b/apps/web/src/lib/i18n/locales/en.json
index 9b500f5..20dd97c 100644
--- a/apps/web/src/lib/i18n/locales/en.json
+++ b/apps/web/src/lib/i18n/locales/en.json
@@ -99,7 +99,11 @@
     "deskNote": "Note: Desk bookings are full-day. Times will be automatically adjusted to encompass the entire day.",
     "saving": "Saving...",
     "editBookingTitle": "Edit Booking",
-    "saveChanges": "Save Changes"
+    "saveChanges": "Save Changes",
+    "upcoming": "Upcoming Bookings",
+    "past": "Past Bookings",
+    "showPast": "Show past bookings",
+    "hidePast": "Hide past bookings"
   },
   "reports": {
     "title": "Admin Reporting Dashboard",
diff --git a/apps/web/src/lib/i18n/locales/es-ES.json b/apps/web/src/lib/i18n/locales/es-ES.json
index ae16fb2..cc08f65 100644
--- a/apps/web/src/lib/i18n/locales/es-ES.json
+++ b/apps/web/src/lib/i18n/locales/es-ES.json
@@ -99,7 +99,11 @@
     "deskNote": "Nota: Las reservas de puestos son para todo el día. Las horas se ajustarán automáticamente para abarcar el día completo.",
     "saving": "Guardando...",
     "editBookingTitle": "Editar reserva",
-    "saveChanges": "Guardar cambios"
+    "saveChanges": "Guardar cambios",
+    "upcoming": "Próximas reservas",
+    "past": "Reservas pasadas",
+    "showPast": "Mostrar reservas pasadas",
+    "hidePast": "Ocultar reservas pasadas"
   },
   "reports": {
     "title": "Panel de Control de Informes",
diff --git a/apps/web/src/routes/dashboard/my-bookings/+page.svelte b/apps/web/src/routes/dashboard/my-bookings/+page.svelte
index 3ffcfb3..11e0997 100644
--- a/apps/web/src/routes/dashboard/my-bookings/+page.svelte
+++ b/apps/web/src/routes/dashboard/my-bookings/+page.svelte
@@ -2,8 +2,8 @@
   import { onMount } from "svelte";
   import { token } from "$lib/stores/auth";
   import { apiFetch } from "$lib/api/client";
-  import { Calendar, Clock, MapPin, Trash2, Edit2, ChevronRight, X } from "lucide-svelte";
-  import { format } from "date-fns";
+  import { Calendar, Clock, MapPin, Trash2, Edit2, ChevronRight, X, ChevronDown, ChevronUp } from "lucide-svelte";
+  import { format, isPast } from "date-fns";
   import { es, enUS } from 'date-fns/locale';
   import { t, locale } from "svelte-i18n";
 
@@ -17,10 +17,14 @@
   let editEndTimeDate = "";
   let editEndTimeTime = "";
   let saving = false;
+  let showPast = false;
 
   $: dateLocale = $locale === 'es-ES' ? es : enUS;
   $: dateFormat = $locale === 'es-ES' ? 'dd/MM/yyyy' : 'PPP';
 
+  $: upcomingReservations = reservations.filter(r => !isPast(new Date(r.endTime)));
+  $: pastReservations = reservations.filter(r => isPast(new Date(r.endTime)));
+
   onMount(async () => {
     await fetchReservations();
   });
@@ -117,56 +121,122 @@
       </a>
     </div>
   {:else}
-    <div class="space-y-4">
-      {#each reservations as res}
-        <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden hover:border-indigo-300 transition-colors">
-          <div class="p-6 flex flex-col md:flex-row md:items-center justify-between gap-4">
-            <div class="flex items-start gap-4">
-              <div class="w-12 h-12 {res.space.type === 'DESK' ? 'bg-blue-50 text-blue-600' : 'bg-purple-50 text-purple-600'} rounded-lg flex items-center justify-center flex-shrink-0">
-                {#if res.space.type === 'DESK'}
-                  <MapPin size={24} />
-                {:else}
-                  <Clock size={24} />
-                {/if}
-              </div>
-              <div>
-                <h3 class="text-lg font-bold text-gray-900">{res.space.name}</h3>
-                <div class="flex flex-wrap items-center gap-x-4 gap-y-1 mt-1 text-sm text-gray-500">
-                  <span class="flex items-center gap-1">
-                    <MapPin size={14} />
-                    {res.space.floor.building.name}, {$t('myBookings.floor', { values: { number: res.space.floor.number } })}
-                  </span>
-                  <span class="flex items-center gap-1">
-                    <Calendar size={14} />
-                    {format(new Date(res.startTime), dateFormat, { locale: dateLocale })}
-                  </span>
-                  <span class="flex items-center gap-1">
-                    <Clock size={14} />
-                    {format(new Date(res.startTime), "HH:mm")} - {format(new Date(res.endTime), "HH:mm")}
-                  </span>
+    <div class="space-y-8">
+      {#if upcomingReservations.length > 0}
+        <section>
+          <h2 class="text-xl font-semibold text-gray-900 mb-4">{$t('myBookings.upcoming')}</h2>
+          <div class="space-y-4">
+            {#each upcomingReservations as res}
+              <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden hover:border-indigo-300 transition-colors">
+                <div class="p-6 flex flex-col md:flex-row md:items-center justify-between gap-4">
+                  <div class="flex items-start gap-4">
+                    <div class="w-12 h-12 {res.space.type === 'DESK' ? 'bg-blue-50 text-blue-600' : 'bg-purple-50 text-purple-600'} rounded-lg flex items-center justify-center flex-shrink-0">
+                      {#if res.space.type === 'DESK'}
+                        <MapPin size={24} />
+                      {:else}
+                        <Clock size={24} />
+                      {/if}
+                    </div>
+                    <div>
+                      <h3 class="text-lg font-bold text-gray-900">{res.space.name}</h3>
+                      <div class="flex flex-wrap items-center gap-x-4 gap-y-1 mt-1 text-sm text-gray-500">
+                        <span class="flex items-center gap-1">
+                          <MapPin size={14} />
+                          {res.space.floor.building.name}, {$t('myBookings.floor', { values: { number: res.space.floor.number } })}
+                        </span>
+                        <span class="flex items-center gap-1">
+                          <Calendar size={14} />
+                          {format(new Date(res.startTime), dateFormat, { locale: dateLocale })}
+                        </span>
+                        <span class="flex items-center gap-1">
+                          <Clock size={14} />
+                          {format(new Date(res.startTime), "HH:mm")} - {format(new Date(res.endTime), "HH:mm")}
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+                  
+                  <div class="flex items-center gap-2 border-t md:border-t-0 pt-4 md:pt-0">
+                    <button 
+                      on:click={() => openEditModal(res)}
+                      class="p-2 text-gray-400 hover:text-indigo-600 hover:bg-indigo-50 rounded-lg transition-colors"
+                      title={$t('common.edit')}
+                    >
+                      <Edit2 size={20} />
+                    </button>
+                    <button 
+                      on:click={() => deleteReservation(res.id)}
+                      class="p-2 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-lg transition-colors"
+                      title={$t('common.delete')}
+                    >
+                      <Trash2 size={20} />
+                    </button>
+                  </div>
                 </div>
               </div>
-            </div>
-            
-            <div class="flex items-center gap-2 border-t md:border-t-0 pt-4 md:pt-0">
-              <button 
-                on:click={() => openEditModal(res)}
-                class="p-2 text-gray-400 hover:text-indigo-600 hover:bg-indigo-50 rounded-lg transition-colors"
-                title={$t('common.edit')}
-              >
-                <Edit2 size={20} />
-              </button>
-              <button 
-                on:click={() => deleteReservation(res.id)}
-                class="p-2 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-lg transition-colors"
-                title={$t('common.delete')}
-              >
-                <Trash2 size={20} />
-              </button>
-            </div>
+            {/each}
           </div>
-        </div>
-      {/each}
+        </section>
+      {/if}
+
+      {#if pastReservations.length > 0}
+        <section>
+          <button 
+            on:click={() => showPast = !showPast}
+            class="flex items-center justify-between w-full text-left mb-4 group"
+          >
+            <h2 class="text-xl font-semibold text-gray-900">
+              {$t('myBookings.past')} 
+              <span class="text-sm font-normal text-gray-500 ml-2">({pastReservations.length})</span>
+            </h2>
+            <div class="flex items-center text-indigo-600 text-sm font-medium">
+              {showPast ? $t('myBookings.hidePast') : $t('myBookings.showPast')}
+              {#if showPast}
+                <ChevronUp size={20} class="ml-1" />
+              {:else}
+                <ChevronDown size={20} class="ml-1" />
+              {/if}
+            </div>
+          </button>
+
+          {#if showPast}
+            <div class="space-y-4">
+              {#each pastReservations as res}
+                <div class="bg-gray-50 rounded-xl border border-gray-200 overflow-hidden opacity-75">
+                  <div class="p-6 flex flex-col md:flex-row md:items-center justify-between gap-4">
+                    <div class="flex items-start gap-4">
+                      <div class="w-12 h-12 {res.space.type === 'DESK' ? 'bg-gray-200 text-gray-500' : 'bg-gray-200 text-gray-500'} rounded-lg flex items-center justify-center flex-shrink-0">
+                        {#if res.space.type === 'DESK'}
+                          <MapPin size={24} />
+                        {:else}
+                          <Clock size={24} />
+                        {/if}
+                      </div>
+                      <div>
+                        <h3 class="text-lg font-bold text-gray-500">{res.space.name}</h3>
+                        <div class="flex flex-wrap items-center gap-x-4 gap-y-1 mt-1 text-sm text-gray-400">
+                          <span class="flex items-center gap-1">
+                            <MapPin size={14} />
+                            {res.space.floor.building.name}, {$t('myBookings.floor', { values: { number: res.space.floor.number } })}
+                          </span>
+                          <span class="flex items-center gap-1">
+                            <Calendar size={14} />
+                            {format(new Date(res.startTime), dateFormat, { locale: dateLocale })}
+                          </span>
+                          <span class="flex items-center gap-1">
+                            <Clock size={14} />
+                            {format(new Date(res.startTime), "HH:mm")} - {format(new Date(res.endTime), "HH:mm")}
+                          </span>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              {/each}
+            </div>
+          {/if}
+        </section>
+      {/if}
     </div>
   {/if}
 </div>