un corte que hago a las 19hs

Front/src/Componentes/ModalCheckYContrato.svelte

@@ -1,21 +1,63 @@
 <script lang="ts">
-    import type { MensajeDto } from "../types";
-    import { urlG } from "../stores/urlStore";
+    import type { GaranteDto, MensajeDto } from "../types";
 
-    let {men, onCancel, onConfirm, putErrorModal}: {men: MensajeDto, 
-                                                    onCancel:()=>void, 
-                                                    onConfirm:()=>void,
-                                                    putErrorModal:(txt:string)=>void} = $props();
+    let {men, garantes , onCancel, onConfirm, onClose
+        } : {
+            men: MensajeDto, 
+            garantes: GaranteDto[],
+            onCancel:()=>void, 
+            onClose:()=>void,
+            onConfirm:()=>void } = $props();
+    
+    let confirmaGarantes: boolean = $state(false);
 
-    async function getGaranteData() {
-        try {
-            const responce = await fetch($urlG+"". {
-                method: "GET",
-                headers: {
-                    "Auth": String(sessionStorage.getItem("token")),
-                }
-            })
-        }
-    }
 </script>
+<div class="modal show d-block" tabindex="-1" role="dialog" aria-labelledby="staticModalLabel" aria-hidden="true" style="background-color: rgba(0,0,0,0.5);">
+    <div class="modal-dialog modal-xl" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="staticModalLabel">Lista de Garantes y subir Contrato</h5>
+                <button type="button" class="btn-close" aria-label="Close" onclick={onClose}></button>
+            </div>
+            <div class="modal-body">
+                <div class="table-responsive">
+                    <table class="table table-striped">
+                        <thead>
+                            <tr>
+                                <th>#</th>
+                                <th>DNI</th>
+                                <th>Nombre</th>
+                                <th>Apellido</th>
+                                <th>Domicilio</th>
+                                <th>Celular</th>
+                                <th>Domicilio Laboral</th>
+                                <th>Acciones</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {#each garantes as garante, index}
+                            <tr>
+                                <td>{index + 1}</td>
+                                <td>{garante.Dni}</td>
+                                <td>{garante.Nombre}</td>
+                                <td>{garante.Apellido}</td>
+                                <td>{garante.Domicilio}</td>
+                                <td>{garante.Celular}</td>
+                                <td>{garante.Domiciliolaboral}</td>
+                            </tr>
+                            {/each}
+                            </tbody>
+                    </table>
+                    <input type="checkbox" bind:checked={confirmaGarantes} disabled={confirmaGarantes}>
 
+                </div>
+            </div>
+            <div class="modal-footer d-flex justify-content-between">        
+                <button class="btn btn-primary" disabled={!confirmaGarantes} onclick={() => onConfirm()} >
+                    Subir
+                </button>
+                <button type="button" class="btn btn-danger" onclick={onCancel}>Cancelar Contrato</button>
+            </div>
+        </div>
+    </div>
+</div>