Inicio del desarrollo del sistema de notificaciones

Front/src/paginas/Notificaciones.svelte

@@ -1,7 +1,75 @@
 <script lang="ts">
+    import { onMount } from "svelte";
     import NavBarAutocompletable from "../Componentes/NavBarAutocompletable.svelte";
+    import type { MensajeDto } from "../types";
+    import ModalEstatico from "../Componentes/ModalEstatico.svelte";
 
+    const token = sessionStorage.getItem("token");
+    let mensajes: MensajeDto[] = $state([]);
+    let showspinner:boolean =$state(false);
+    let mostrarleidos: boolean = $state(false);
+    let modaldata:string =$state("");
 
+    onMount(async () => {
+        showspinner = true;
+        SinLeer();
+    })
+    
+    async function SinLeer() {
+        mostrarleidos = false;
+
+    }
+
+    async function Leidos() {
+        mostrarleidos = true;
+    }
 </script>
 
-<NavBarAutocompletable/>
+<NavBarAutocompletable/>
+
+{#if modaldata}
+    <ModalEstatico payload={modaldata} close={()=>!!(modaldata = "")} />
+{/if}
+
+<div class="container">
+    <br>
+
+    <div class="btn-group">
+        <button class="btn btn-primary" class:active={mostrarleidos==false} onclick={SinLeer} >Sin Leer</button>
+        <button class="btn btn-primary" class:active={mostrarleidos==true} onclick={Leidos} >Leidos</button>
+    </div>
+    <br>
+    <div class="container-fluid" style="margin-top: 1cm;">
+        {#if showspinner}
+        <div class=" justify-content-center position-absolute top-50 start-50">
+            <div class="spinner-border" role="status"></div>
+            Cargando...
+
+        </div>
+        {:else}
+        <table class="table table-responsive table-striped table-hover">
+            <thead>
+                <tr>
+                    <th>Remitente</th>
+                    <th>Accion</th>
+                    <th>Mensaje</th>
+                    <th>Fecha</th>
+                    <th>Propiedad</th>
+                </tr>
+            </thead>
+            
+            <tbody>
+                {#each mensajes as men }
+                <tr>
+                    <td>men.remitente</td>
+                    <td>men.accion</td>
+                    <td>men.mensaje</td>
+                    <td>men.fecha</td>
+                    <td>men.propiedad</td>
+                </tr>
+                {/each}                
+            </tbody>
+        </table>
+        {/if}
+    </div>
+</div>

Front/src/types.d.ts

@@ -54,3 +54,12 @@ export type Propiedad = {
     idtipropiedad: number,
     monto: number
 };
+
+export type MensajeDto = {
+  remitente: string,
+  accion: string,
+  mensaje: string,
+  fecha: Date,
+  propiedad: string,
+  
+}