feat: implement Bari bounds validation and update UI components for admin panel

app/pages/open-data.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue'
+import { isWithinBariBounds } from '~/utils/bari'
 
 // 1. API Fetching Logic
 const { getOpenDataReports } = usePublic()
@@ -15,6 +16,10 @@ const { data: openDataResponse, pending } = await useAsyncData(
     { watch: [currentPage] } // Nuxt will re-fetch when currentPage changes
 )
 
+const visibleReports = computed(() =>
+  (openDataResponse.value?.reports || []).filter((report) => isWithinBariBounds(report.latitude, report.longitude))
+)
+
 // Pagination logic: If we receive less items than `perPage`, we are on the last page.
 const isLastPage = computed(() => {
   if (!openDataResponse.value?.reports) return true
@@ -102,7 +107,7 @@ const getStatusBadge = (status: string) => {
       <!-- GRID VIEW -->
       <div v-else-if="currentView === 'grid'">
         <div class="row" v-if="openDataResponse?.reports && openDataResponse.reports.length > 0">
-          <div class="col-12 col-md-6 col-lg-4 mb-4" v-for="report in openDataResponse.reports" :key="report.id">
+          <div class="col-12 col-md-6 col-lg-4 mb-4" v-for="report in visibleReports" :key="report.id">
             <!-- Strict BI Card -->
             <div class="card-wrapper card-space h-100">
               <div class="card card-bg h-100 shadow-sm">
@@ -179,7 +184,7 @@ const getStatusBadge = (status: string) => {
           <div class="text-center text-muted">
             <BIIcon name="it-map" size="xl" class="mb-3 opacity-50" />
             <h4 class="h5">Mappa Interattiva</h4>
-            <p>Caricamento dei {{ openDataResponse?.reports?.length || 0 }} punti geografici in corso...</p>
+            <p>Caricamento dei {{ visibleReports.length || 0 }} punti geografici in corso...</p>
           </div>
         </div>
       </div>