lizandrogd/soft_usite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
Lizandro Guarnizo
2025-02-06 14:22:29 -05:00
commit 6d8f1bcd6f
452 changed files with 250835 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/tramites.html
+303
View File
@@ -0,0 +1,303 @@
<!-- Container Principal -->
<div x-data="tramitesForm" class="bg-white rounded-lg shadow">
<div class="mx-auto py-8 px-4 sm:px-6 lg:px-8 max-w-5xl mb-8">
<div x-show="loading" class="fixed inset-0 bg-gray-800 bg-opacity-75 flex z-50 justify-center items-center">
<img src="../img/loading.gif" alt="Cargando..." class="w-16 h-16" />
</div>
<div class="section-title flex items-center mb-6">
<span class="w-1 h-10 bg-blue-800 mr-4"></span>
<h2 class="text-3xl font-bold ">
Gestión de Trámites
</h2>
</div>
<!-- Subtítulo -->
<h3 class="font-semibold text-xl mt-4">
PROCESO PARA ADQUIRIR EL SERVICIO DE GAS
</h3>
<p class="text-black mt-2">
Si a un no cuenta con el servicio de instalación del gas natural de Gases del Oriente ahora es más fácil. El
procedimiento a seguir es el siguiente:
</p>
<div class=" shadow-[0_5px_25px_rgba(0,0,0,0.1)] rounded-2xl p-6 mt-4">
<label class="block mb-2" for="desc_adquirir">Descripción de adquirir</label>
<textarea id="desc_adquirir" x-model="desc_adquirir" class="border border-gray-300 rounded w-full p-2 mb-4" required></textarea>
</div>
<!-- Section with 3 cards below the description -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-8">
<!-- Card 1 -->
<div class=" shadow-[0_5px_25px_rgba(0,0,0,0.1)] rounded-2xl p-4 flex items-center">
<img src="/img/img38.webp" alt="Phone Icon" class="w-16 h-16 mr-4">
<p class="text-black">
<label class="block mb-2" for="paso_1">Paso 1</label>
<textarea id="paso_1" x-model="paso_1" class="border border-gray-300 rounded w-full p-2 mb-4" required></textarea>
</p>
</div>
<!-- Card 2 -->
<div class=" shadow-[0_5px_25px_rgba(0,0,0,0.1)] rounded-2xl p-4 flex items-center">
<img src="/img/img37.webp" alt="Letter Icon" class="w-16 h-16 mr-4">
<p class="text-black">
<label class="block mb-2" for="paso_2">Paso 2</label>
<textarea id="paso_2" x-model="paso_2" class="border border-gray-300 rounded w-full p-2 mb-4" required></textarea>
</p>
</div>
<!-- Card 3 -->
<div class=" shadow-[0_5px_25px_rgba(0,0,0,0.1)] rounded-2xl p-4 flex items-center">
<img src="/img/img36.webp" alt="Building Icon" class="w-16 h-16 mr-4">
<p class="text-black">
<label class="block mb-2" for="paso_3">Paso 3</label>
<textarea id="paso_3" x-model="paso_3" class="border border-gray-300 rounded w-full p-2 mb-4" required></textarea>
</p>
</div>
</div>
<p class="text-black mt-8">
Cuando la solicitud de instalación es para servicio residencial, la empresa programará la visita al bien inmueble
indicado, dentro de los ocho (8) días siguientes a la recepción de la solicitud, con el fin de verificar la
disponibilidad de red, que la vivienda cumpla con las condiciones técnicas y físicas para la viabilidad del
servicio. Si el inmueble cumple con dichas especificaciones, el asesor comercial procede a solicitar la
documentación requerida para la suscripción del contrato:
</p>
<div class="mt-8 mb-8 p-6 rounded-2xl shadow-[0_5px_25px_rgba(0,0,0,0.1)]">
<label class="block mb-2" for="doc_res">Documento Residencial</label>
<textarea id="doc_res" x-model="doc_res" class="border border-gray-300 rounded w-full p-2 mb-4" required></textarea>
</div>
<p class="text-black mt-8">
Si el servicio a instalar corresponde a un Usuario potencial No Residencial, se emitirá un presupuesto dentro de
los ocho (8) días siguientes a la visita el cual contendrá el valor de la instalación, y posterior a la
aceptación, se recibirá la documentación solicitada con el cual se suscribirá el contrato. Si usted cuenta con la
instalación interna debidamente construida por una firma constructora y reparadora inscrita ante la
Superintendencia de Industria y Comercio y ante nuestra empresa, será necesario que la solicitud del servicio sea
realizada únicamente en el canal presencial de nuestras oficinas y dar cumplimiento a los requisitos especificados
a continuación:
</p>
<div class="mt-8 mb-8 p-6 rounded-2xl shadow-[0_5px_25px_rgba(0,0,0,0.1)]">
<label class="block mb-2" for="doc_nores">Documento No Residencial</label>
<textarea id="doc_nores" x-model="doc_nores" class="border border-gray-300 rounded w-full p-2 mb-4" required></textarea>
</div>
<p class="text-black font-semibold">
Nota: GASES DEL ORIENTE S.A. E.S.P. informa que ningún funcionario de la compañía está autorizado para recibir
dinero o solicitar dádiva alguna para la instalación del servicio.
</p>
<!-- Formulario de Archivos -->
<div class="p-6 rounded-lg border w-full shadow mt-6 mb-4">
<h2 class="text-xl font-bold mb-2">Archivos</h2>
<label class="block mb-2" for="arc_venta_comp">Archivo de Venta Completa</label>
<input type="file" id="arc_venta_comp" @change="handleFileChange($event, 'arc_venta_comp')" class="border border-gray-300 rounded w-full p-2 mb-2" accept=".jpg,.png,.pdf,.doc,.docx">
<p x-show="arc_venta_comp_path" class="mt-2 text-sm text-gray-600">
Archivo actual: <a :href="`${window.location.origin}/${arc_venta_comp_path}`" target="_blank" class="text-blue-500 underline" x-text="arc_venta_comp_path"></a>
</p>
<label class="block mb-2" for="arc_derecho">Archivo de Derecho</label>
<input type="file" id="arc_derecho" @change="handleFileChange($event, 'arc_derecho')" class="border border-gray-300 rounded w-full p-2 mb-2" accept=".jpg,.png,.pdf,.doc,.docx">
<p x-show="arc_derecho_path" class="mt-2 text-sm text-gray-600">
Archivo actual: <a :href="`${window.location.origin}/${arc_derecho_path}`" target="_blank" class="text-blue-500 underline" x-text="arc_derecho_path"></a>
</p>
</div>
<div class="section-title flex items-center mb-6">
<span class="w-1 h-10 bg-blue-800 mr-4"></span>
<h2 class="text-3xl font-bold ">
Instructivo y carta para el diligenciamiento de la solicitud de disponibilidad de servicio.
</h2>
</div>
<!-- Subtitle Section -->
<h2 class="font-semibold text-lg text-[#5082e6] mb-4">
INSTRUCTIVO SOLICITUD DE DISPONIBILIDAD DE SERVICIO CARTA SOLICITUD DE DISPONIBILIDAD DE SERVICIO
</h2>
<label class="block mb-2" for="arc_instruct">Archivo de Instructivo</label>
<input type="file" id="arc_instruct" @change="handleFileChange($event, 'arc_instruct')" class="border border-gray-300 rounded w-full p-2 mb-2" accept=".jpg,.png,.pdf,.doc,.docx">
<p x-show="arc_instruct_path" class="mt-2 text-sm text-gray-600">
Archivo actual: <a :href="`${window.location.origin}/${arc_instruct_path}`" target="_blank" class="text-blue-500 underline" x-text="arc_instruct_path"></a>
</p>
<!-- Requirements Title -->
<h3 class="font-semibold text-xl mt-4 mb-4">
REQUISITOS PARA TERMINACIÓN Y ANULACIÓN DEL SERVICIO
</h3>
<!-- Content Section -->
<div class="flex flex-col lg:flex-row items-center lg:items-start lg:space-x-8 mb-8">
<!-- Left Text Content -->
<div class="lg:w-3/5 mb-6 lg:mb-0">
<div class=" p-6 rounded-2xl shadow-[0_5px_25px_rgba(0,0,0,0.1)]">
<label class="block mb-2" for="anul_servicio">Anulación de Servicio</label>
<textarea id="anul_servicio" x-model="anul_servicio" class="border border-gray-300 rounded w-full p-2 mb-4" required></textarea>
</div>
</div>
<!-- Right Image Content -->
<div class="lg:w-2/5">
<img src="/img/img39.webp" alt="Person writing on paper" class="mx-auto lg:mx-0" />
</div>
</div>
<h3 class="font-semibold text-xl mt-4 mb-4">
EN CASO DE ANULACIÓN DE SERVICIO
</h3>
<!-- Content Section -->
<p class="text-black mt-4">
Para <strong>GASES DEL ORIENTE S.A. E.S.P.</strong>, anular el contrato de prestación del servicio de gas natural
del inmueble antes señalado, es necesario que el titular presente la solicitud por escrito acompañada de una
fotocopia de la cédula de ciudadanía. En caso de presentar la anulación una persona diferente al suscriptor del
servicio, se debe acreditar propiedad sobre el inmueble y presentar la siguiente información:
</p>
<!-- Information Box -->
<div class="mt-4 bg-white p-6 rounded-2xl shadow-[0_5px_25px_rgba(0,0,0,0.1)]">
<label class="block mb-2" for="act_suscriptor">Actualizar Suscriptor</label>
<textarea id="act_suscriptor" x-model="act_suscriptor" class="border border-gray-300 rounded w-full p-2 mb-4" required></textarea>
</div>
<!-- Title Section -->
<h3 class="font-semibold text-xl mt-4 mb-4">
ACTUALIZACIÓN DE SUSCRIPTOR, ESTRATO O DIRECCIÓN DEL SERVICIO
</h3>
<!-- Content Section -->
<p class="text-black mt-4">
Los usuarios interesados en realizar la actualización de suscriptor, estrato o dirección del servicio de gas
combustible deberán presentarse en las oficinas de Gases del Oriente S.A. E.S.P. o enviar solicitud escrita
firmada por el o los propietarios del inmueble y presentar los siguientes documentos:
</p>
<!-- Documents List -->
<h3 class="text-lg mt-4">Algunos de estos documentos:</h3>
<div class="mt-4 p-6 rounded-2xl shadow-[0_5px_25px_rgba(0,0,0,0.1)]">
<label class="block mb-2" for="act_est_res">Actualizar Estado Res</label>
<textarea id="act_est_res" x-model="act_est_res" class="border border-gray-300 rounded w-full p-2 mb-4" required></textarea>
</div>
<!-- Title Section -->
<h3 class="font-semibold text-xl mt-4 mb-4">
DOCUMENTACIÓN REQUERIDA PARA ACTUALIZACIÓN DE ESTRATO
</h3>
<div class="mt-4 p-6 rounded-2xl shadow-[0_5px_25px_rgba(0,0,0,0.1)]">
<div class="flex items-start mb-4">
<p class="font-semibold">Para usuarios residenciales</p>
</div>
<label class="block mb-2" for="act_est_nores">Actualizar Estado No Residencial</label>
<textarea id="act_est_nores" x-model="act_est_nores" class="border border-gray-300 rounded w-full p-2 mb-4" required></textarea>
<div class="flex items-start mb-4 mt-6">
<p class="font-semibold">Para usuarios no residenciales</p>
</div>
<label class="block mb-2" for="act_direccion">Actualizar Dirección</label>
<textarea id="act_direccion" x-model="act_direccion" class="border border-gray-300 rounded w-full p-2 mb-4" required></textarea>
</div>
<!-- Botón de Guardar -->
<div class="mt-6 text-right">
<button @click.prevent="submitUpdate" class="bg-[#8eb02f] text-white px-4 py-2 rounded">Guardar Cambios</button>
</div>
</div>
<!-- Alpine.js Script -->
<script>
document.addEventListener('alpine:init', () => {
Alpine.data('tramitesForm', () => ({
desc_adquirir: '',
paso_1: '',
paso_2: '',
paso_3: '',
doc_res: '',
doc_nores: '',
anul_servicio: '',
act_suscriptor: '',
act_est_res: '',
act_est_nores: '',
act_direccion: '',
arc_venta_comp: null,
arc_venta_comp_path: '',
arc_derecho: null,
arc_derecho_path: '',
arc_instruct: null,
arc_instruct_path: '',
loading: false,
id_dato : 0,
init() {
this.loadData();
},
loadData() {
this.loading = true;
fetch('/loadtramites') // Llama al endpoint que devuelve el registro de trámites
.then(response => response.json())
.then(data => {
if (data) {
this.id_dato = data.ID;
this.desc_adquirir = data.desc_adquirir;
this.paso_1 = data.paso_1;
this.paso_2 = data.paso_2;
this.paso_3 = data.paso_3;
this.doc_res = data.doc_res;
this.doc_nores = data.doc_nores;
this.anul_servicio = data.anul_servicio;
this.act_suscriptor = data.act_suscriptor;
this.act_est_res = data.act_est_res;
this.act_est_nores = data.act_est_nores;
this.act_direccion = data.act_direccion;
this.arc_venta_comp_path = data.arc_venta_comp;
this.arc_derecho_path = data.arc_derecho;
this.arc_instruct_path = data.arc_instruct;
}
})
.catch(error => console.error('Error:', error))
.finally(() => {
this.loading = false;
});
},
handleFileChange(event, field) {
if (field === 'arc_venta_comp') {
this.arc_venta_comp = event.target.files[0];
} else if (field === 'arc_derecho') {
this.arc_derecho = event.target.files[0];
} else if (field === 'arc_instruct') {
this.arc_instruct = event.target.files[0];
}
},
submitUpdate() {
this.loading = true;
const formData = new FormData();
formData.append('desc_adquirir', this.desc_adquirir);
formData.append('paso_1', this.paso_1);
formData.append('paso_2', this.paso_2);
formData.append('paso_3', this.paso_3);
formData.append('doc_res', this.doc_res);
formData.append('doc_nores', this.doc_nores);
formData.append('anul_servicio', this.anul_servicio);
formData.append('act_suscriptor', this.act_suscriptor);
formData.append('act_est_res', this.act_est_res);
formData.append('act_est_nores', this.act_est_nores);
formData.append('act_direccion', this.act_direccion);
if (this.arc_venta_comp) formData.append('arc_venta_comp', this.arc_venta_comp);
if (this.arc_derecho) formData.append('arc_derecho', this.arc_derecho);
if (this.arc_instruct) formData.append('arc_instruct', this.arc_instruct);
fetch('/app/tramites/'+this.id_dato, {
method: 'PUT',
body: formData
})
.then(response => response.json())
.then(() => {
this.loadData();
})
.catch(error => console.error('Error:', error))
.finally(() => {
this.loading = false;
});
}
}));
});
</script>
</div>