fixed reports list sorting

src/pages/ListIncidents.vue

@@ -2,8 +2,8 @@
   <div>
     <h1>Incident Reports</h1>
     <div v-if="isLoading">Loading...</div>
-        <div v-else-if="incidentReports.length">
-            <div v-for="report in incidentReports" :key="report._id">
+    <div v-else-if="filteredReports.length">
+      <div v-for="report in filteredReports" :key="report._id" class="big-padding">
 
         <h3>{{ formatDate(report._createdDate) }}</h3>
         <hr>
@@ -17,7 +17,6 @@
   </div>
 </template>
 
-
 <script>
 export default {
   data() {
@@ -37,22 +36,24 @@ export default {
         const response = await fetch("/api/incident-reports"); // Replace with your API endpoint
         const data = await response.json();
         this.incidentReports = data;
-                console.log(data);
       } catch (error) {
         this.error = error;
         console.error("Error fetching incident reports:", error);
       } finally {
         this.isLoading = false;
-                this.filteredReports = this.incidentReports.slice(-25); // Get the last 25 reports
       }
     },
-        formatDate(dateString) { const date = new Date(dateString); return date.toLocaleDateString('en-US', { year: 'numeric',month: 'long',day: 'numeric' });
+    formatDate(dateString) {
+      const date = new Date(dateString);
+      return date.toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' });
     },
   },
   computed: {
     filteredReports() {
-            // You can implement additional filtering/sorting logic here
-            return this.incidentReports.slice(-25);
+      return this.incidentReports
+        .slice() // Create a copy to avoid mutating the original array
+        .sort((a, b) => new Date(b._createdDate) - new Date(a._createdDate))
+        .slice(-25); // Get the last 25 sorted reports
     },
   },
 };