lucas me pidio las lineas de codigo

Front/src/App.svelte

@@ -24,6 +24,7 @@
   import Informes from "./paginas/Informes.svelte";
   import CompraYVentas from "./paginas/CompraYVenta.svelte";
   import Ventas from "./paginas/Ventas.svelte";
+    import VerLogs from "./paginas/VerLogs.svelte";
 </script>
 
 <Router>
@@ -72,6 +73,11 @@
     <ProteRoute componente={Informes}/>
   </Route>
 
+  <!--Ver Logs-->
+  <Route path="/accion/7">
+    <ProteRoute componente={VerLogs}/>
+  </Route>
+
   <!--Administrar Propiedades Dadas de Baja-->
   <Route path="/accion/8">
     <ProteRoute componente={MisPropiedadesDeBaja}/>

Front/src/Componentes/ModalLogs.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+    import { onMount } from "svelte";
+    import { urlG } from "../stores/urlStore";
+    import type { LogDetalleDto, LogDto } from "../types";
+
+    let {onClose, log}: {onClose: ()=>boolean, log:LogDto} = $props();
+    let token:string = sessionStorage.getItem("token")||"";
+
+    let detalles: LogDetalleDto[] = $state([]);
+    async function obtenerDetalles() {
+        try{
+            const r = await fetch($urlG+"/api/Logs/detalle?fecha="+log.fecha+"&idusuario="+log.dniusuario, {
+                method:"GET",
+                headers: {
+                    "Auth": token,
+                }
+            });
+            let data = await r.json();
+            if (r.ok) {
+                detalles = data;
+                return;
+            }
+        }catch{}
+    }
+    onMount(()=>{
+        obtenerDetalles();
+    });
+</script>
+
+<div class="modal fade show" tabindex="-1" role="dialog" style="display: block; background-color: rgba(0, 0, 0, 0.5);">
+    <div class="modal-dialog modal-lg" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h1 class="modal-title fs-5" id="exampleModalLabel">Detalles Log</h1>
+                <button class="btn-close" onclick={onClose} aria-label="Close"></button>
+            </div>
+            <div class="modal-body">
+                <table class="table table-striped" style="table-layout: fixed; width: 100%;">
+                    <thead>
+                        <tr>
+                            <th style="word-wrap: break-word;">Fecha</th>
+                            <th style="word-wrap: break-word;">Tabla</th>
+                            <th style="word-wrap: break-word;">Columna</th>
+                            <th style="word-wrap: break-word;">Valor Viejo</th>
+                            <th style="word-wrap: break-word;">Valor Nuevo</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                    {#each detalles as d}
+                        <tr>
+                            <td style="word-wrap: break-word;">{d.fecha}</td>
+                            <td style="word-wrap: break-word;">{d.nombreTabla}</td>
+                            <td style="word-wrap: break-word;">{d.columna}</td>
+                            <td style="word-wrap: break-word;">{d.valorAnterior}</td>
+                            <td style="word-wrap: break-word;">{d.valorNuevo}</td>
+                        </tr>
+                    {/each}
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </div>
+</div>

Front/src/Componentes/PaginacionStepper.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
     import { onMount } from "svelte";   
-    import {urlG} from "../stores/urlStore";
 
     let {currentPag,
          cantpag,
@@ -10,13 +9,6 @@
          cantpag: number,
          queryPag: (a:number) => void} = $props();
     
-    
-    const token = sessionStorage.getItem("token");
-
-    onMount(async () => {
-
-    });
-    
     let array = $derived.by(()=> Array.from({ length: cantpag }, (_, i) => i + 1));
 </script>
 

Front/src/paginas/VerLogs.svelte

@@ -0,0 +1,109 @@
+<script lang="ts">
+    import BarraHorizontalConTexto from "../Componentes/BarraHorizontalConTexto.svelte";
+    import NavBarAutocompletable from "../Componentes/NavBarAutocompletable.svelte";
+    import type { LogDetalleDto, LogDto } from "../types";
+    import { onMount } from "svelte";
+    import { urlG } from "../stores/urlStore";
+    import ModalEstatico from "../Componentes/ModalEstatico.svelte";
+    import ModalLogs from "../Componentes/ModalLogs.svelte";
+    import PaginacionStepper from "../Componentes/PaginacionStepper.svelte";
+
+    let Logs: LogDto[] = $state([]);
+    let pagina:number = $state(1);
+    let token:string = sessionStorage.getItem("token")||"";
+    let modaldata:string = $state("");
+    let showmodal:boolean =$state(false);
+    let ll:LogDto|any = $state({});
+    let cantpag:number = $state(100);
+
+    onMount(()=>{
+        obtenerLogs();
+        obtenerPaginas();
+    });
+
+    async function obtenerPaginas() {
+        try{
+            const r = await fetch($urlG+"/api/Logs/cantPag", {
+                method: "GET",
+                headers: {
+                    "Auth": token,
+                }
+            });
+            let data = await r.json();
+            if (r.ok) {
+                cantpag = data;
+                return;
+            }
+            modaldata = data.message;
+        } catch {
+            modaldata = "no se pudo hacer la request";
+        }
+    }
+
+    async function obtenerLogs() {
+        try{
+            const r = await fetch($urlG+"/api/Logs?pag="+pagina, {
+                method: "GET",
+                headers: {
+                    "Auth": token,
+                }
+            });
+            let data = await r.json();
+            if (r.ok) {
+                Logs = data;
+                return;
+            }
+            modaldata = data.message;
+        } catch {
+            modaldata = "no se pudo hacer la request";
+        }
+    }
+
+    function prepararModal(l: LogDto) {
+        ll = l;
+        showmodal = true;
+    }
+    function queryPag(a:number) {
+        pagina = a;
+        obtenerLogs();
+    }
+</script>
+
+<NavBarAutocompletable/>
+
+{#if modaldata}
+    <ModalEstatico payload={modaldata} close={()=>!!(modaldata = "")}/>
+{/if}
+
+{#if showmodal}
+    <ModalLogs onClose={()=>!!(showmodal=!showmodal)} log={ll}/>
+{/if}
+
+<div class="container-fluid mt-2">
+    <BarraHorizontalConTexto text={"Logs"}/>
+    <table class="table table-responsive table-hover table-striped">
+        <thead>
+            <tr>
+                <th>Fecha</th>
+                <th>Id Usuario</th>
+                <th>Accion</th>
+                <th></th>
+            </tr>
+        </thead>
+        <tbody>
+        {#each Logs as l}
+            <tr>
+                <td>{l.fecha}</td>
+                <td>{l.dniusuario}</td>
+                <td>{l.accion}</td>
+                <td>
+                    <button class="btn btn-primary" onclick={()=>prepararModal(l)}>
+                        Ver
+                    </button>
+                </td>
+            </tr>
+        {/each}
+        </tbody>
+    </table>
+    <PaginacionStepper currentPag={pagina} {cantpag} {queryPag}/>
+</div>

Front/src/types.d.ts

@@ -164,4 +164,19 @@ export type VentasDto = {
   nombreComprador:string,
   idComprador:number,
   estado:string,
+}
+
+export type LogDto = {
+  fecha:Date,
+  dniusuario:number,
+  accion:string
+}
+
+export type LogDetalleDto = {
+  fecha:Date,
+  dniusuario:number,
+  nombreTabla:string, 
+  columna:string, 
+  valorAnterior:string, 
+  valorNuevo:string
 }