añadido frontend base

81419169 · Diego F. Ticona Ramos · d675617d · a6a5237e · 81419169 · 81419169
Commit 81419169 authored Oct 08, 2021 by Diego F. Ticona Ramos
--- a/frontend @ a6a5237e
+++ b/frontend @ a6a5237e
-Subproject commit a6a5237eb0e3cc31f668fdcd2bc6925272e8d85a
--- a/frontend-cliente/README.md
+++ b/frontend-cliente/README.md
+# Vue 3 + Vite
+
+This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+
+## Recommended IDE Setup
+
+- [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar)
--- a/frontend-cliente/ejemplo_ppe-deuda.json
+++ b/frontend-cliente/ejemplo_ppe-deuda.json
+{
+  "descripcion": "Pago de tramites de la agitec - CLIENTE 1",
+  "datosSesion": null,
+  "metaDatosTransaccion": "Informacion extra...",
+  "codigoOrden": "AR-1D-AA-11-9Z",
+  "datosPago": {
+    "nombresCliente": "Alan",
+    "apellidosCliente": "Brito",
+    "numeroDocumentoCliente": "6058904",
+    "fechaNacimientoCliente": "1996-09-19",
+    "cuentaBancaria": "111000034567",
+    "montoTotal": 20
+  },
+  "productos": [
+    {
+      "codigo": "1AB222",
+      "descripcion": "Chamarra de cuero agitec",
+      "codigoSin": "20201",
+      "precioUnitario": 10,
+      "cantidad": 1,
+      "subTotal": 10,
+      "unidadMedida": 58
+    },
+		{
+      "codigo": "1BB222",
+      "descripcion": "Gorro de lana Agitec",
+      "codigoSin": "30201",
+      "precioUnitario": 10,
+      "cantidad": 1,
+      "subTotal": 10,
+      "unidadMedida": 58
+    }
+  ],
+  "facturacion": {
+    "razonSocialCliente": "TICONA",
+    "nitCliente": "7058903",
+    "emailCliente": "yeyo@mail.com"
+  }
+}
\ No newline at end of file
--- a/frontend-cliente/index.html
+++ b/frontend-cliente/index.html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Cliente QA-PPE</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
--- a/frontend-cliente/package-lock.json
+++ b/frontend-cliente/package-lock.json
--- a/frontend-cliente/package.json
+++ b/frontend-cliente/package.json
+{
+  "name": "vite-vuejs-starter",
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "serve": "vite preview"
+  },
+  "dependencies": {
+    "vue": "^3.2.16",
+    "vue-router": "^4.0.11"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^1.9.2",
+    "autoprefixer": "^10.3.6",
+    "eslint": "^7.32.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-vue": "^7.18.0",
+    "postcss": "^8.3.8",
+    "prettier": "^2.4.1",
+    "tailwindcss": "^2.2.16",
+    "vite": "^2.6.0"
+  }
+}
--- a/frontend-cliente/postcss.config.js
+++ b/frontend-cliente/postcss.config.js
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
--- a/frontend-cliente/public/favicon.ico
+++ b/frontend-cliente/public/favicon.ico
--- a/frontend-cliente/src/App.vue
+++ b/frontend-cliente/src/App.vue
+<template>
+  <div class="flex">
+    <div class="flex fixed flex-col w-36 h-screen px-4 py-8 bg-gray-100 border-r dark:bg-gray-800 dark:border-gray-600">
+      <h2 class="text-3xl font-semibold text-gray-800 dark:text-white">QA</h2>
+      <hr class="my-6 dark:border-gray-600" />
+      <div class="flex flex-col justify-between flex-1 mt-6">
+        <nav class="space-y-4">
+          <router-link
+            to="/"
+            active-class="bg-gray-300 hover:bg-gray-300 text-primary"
+            class="flex flex-col py-2 items-center hover:bg-gray-200 text-gray-700 rounded-md dark:bg-gray-700 dark:text-gray-200"
+          >
+            <svg width="36" height="36" viewBox="0 0 24 24" class="fill-current" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <g clip-path="url(#clip0)">
+              <path d="M4.99934 7.02538C5.31483 6.92815 5.66339 7.03968 5.86229 7.31317C6.08329 7.61704 6.05714 8.03509 5.8 8.30906L5.09565 8.8308C4.76191 9.10807 4.56776 9.51866 4.56522 9.95254V17.9091C4.57474 19.2052 5.62562 20.2522 6.92174 20.2569H10.9217V20.2743C11.354 20.2743 11.7043 20.6247 11.7043 21.0569C11.7043 21.4891 11.354 21.8395 10.9217 21.8395H6.92174C4.75781 21.8347 3.00478 20.0817 3 17.9178V9.95254C3.01384 9.03212 3.44588 8.16804 4.17391 7.60471L4.89565 7.06558L4.99934 7.02538ZM10.1217 2.79602C11.4421 1.73466 13.3231 1.73466 14.6435 2.79602L20.6522 7.58732C21.3642 8.15997 21.7822 9.02148 21.7913 9.93515L21.7826 17.9091C21.7826 20.075 20.0268 21.8308 17.8609 21.8308H16.1217C15.0734 21.8308 14.2222 20.9835 14.2174 19.9351V16.3351L14.2093 16.2445C14.1666 16.0092 13.9606 15.8308 13.713 15.8308H11.1043C10.9691 15.8308 10.8394 15.8851 10.7446 15.9816C10.6498 16.0781 10.5977 16.2086 10.6 16.3438V17.7178C10.6 18.15 10.2496 18.5004 9.81739 18.5004C9.38517 18.5004 9.03478 18.15 9.03478 17.7178V16.3438C9.03478 15.7927 9.25374 15.264 9.64349 14.8743C10.0332 14.4845 10.5619 14.2656 11.113 14.2656H13.7217C14.8661 14.2704 15.7913 15.1994 15.7913 16.3438V19.9351C15.7913 20.1176 15.9392 20.2656 16.1217 20.2656H17.9043C19.201 20.2656 20.2522 19.2144 20.2522 17.9178V9.95254C20.2458 9.51128 20.0415 9.09624 19.6957 8.82211L13.687 4.0308C12.9293 3.40701 11.836 3.40701 11.0783 4.0308L9.14783 5.47428C8.79004 5.73121 8.29171 5.64946 8.03478 5.29167C7.77785 4.93389 7.85961 4.43556 8.21739 4.17863L10.1217 2.79602Z" fill="#323232"/>
+              </g>
+              <defs>
+              <clipPath id="clip0">
+              <rect width="24" height="24" fill="white"/>
+              </clipPath>
+              </defs>
+            </svg>
+
+            <span class="font-medium">Inicio</span>
+          </router-link>
+
+          <router-link
+            to="/parametro"
+            active-class="bg-gray-300 hover:bg-gray-300 text-primary"
+            class="flex flex-col py-2 items-center hover:bg-gray-200 text-gray-700 rounded-md dark:bg-gray-700 dark:text-gray-200"
+          >
+            <svg width="36" height="36" viewBox="0 0 24 24" class="fill-current" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <g clip-path="url(#clip0)">
+              <path d="M2.8731 8.16335C3.07736 8.12379 3.28936 8.16536 3.46215 8.27888C3.80347 8.50552 3.90243 8.95394 3.68701 9.29776L3.6305 9.40887C3.41692 9.89799 3.60769 10.4766 4.09177 10.747C4.48345 10.9814 4.80585 11.3114 5.02722 11.7044C5.71653 12.9409 5.28874 14.4882 4.05579 15.2178C3.53447 15.5091 3.35333 16.1577 3.65103 16.6671L4.27167 17.7123C4.41288 17.9614 4.65203 18.1435 4.93385 18.2164C5.21567 18.2894 5.51576 18.2469 5.76478 18.0988C6.16629 17.8714 6.62284 17.7531 7.08699 17.7563C8.57728 17.7563 9.78539 18.936 9.78539 20.3913C9.79033 20.9797 10.2802 21.4541 10.8827 21.4541L10.8737 21.4717C11.1533 21.4717 11.4117 21.6173 11.5514 21.8538C11.6912 22.0902 11.6912 22.3815 11.5514 22.6179C11.4117 22.8544 11.1533 23 10.8737 23C9.38346 23 8.17535 21.8202 8.17535 20.365C8.17777 20.1797 8.12799 19.9974 8.03143 19.8379C7.72964 19.3278 7.06266 19.1512 6.53832 19.4427L6.37847 19.5212C5.14151 20.0796 3.65654 19.6479 2.94046 18.4941L2.32882 17.4488C1.6395 16.2123 2.0673 14.6651 3.30024 13.9354C3.46366 13.8416 3.59987 13.7085 3.69601 13.549C3.8764 13.3034 3.94123 12.9945 3.87428 12.6995C3.80733 12.4045 3.61494 12.1512 3.34522 12.0031L3.19531 11.9077C2.07856 11.145 1.7132 9.67466 2.37379 8.48968L2.4504 8.39452C2.56199 8.2765 2.70968 8.195 2.8731 8.16335ZM19.0016 10.7019C19.3562 10.5777 19.7597 10.7124 19.9584 11.0369C20.1782 11.3985 20.0576 11.8656 19.6885 12.0821C19.5251 12.176 19.3889 12.309 19.2927 12.4686C19.1462 12.713 19.1055 13.0043 19.1798 13.2781C19.2541 13.5518 19.4372 13.7853 19.6885 13.9267C20.9613 14.6717 21.3792 16.2805 20.624 17.5279L20.0123 18.5731L19.9146 18.7195C19.1336 19.81 17.6279 20.1668 16.4145 19.5217C16.078 19.3234 15.6577 19.3193 15.3172 19.5111C14.9768 19.7029 14.77 20.0603 14.7774 20.444C14.7344 20.8368 14.3949 21.1347 13.9904 21.1347C13.5859 21.1347 13.2464 20.8368 13.2034 20.444C13.2227 19.5231 13.733 18.6789 14.5494 18.2174C15.3658 17.756 16.3696 17.7443 17.197 18.1866C17.4456 18.3326 17.7442 18.3738 18.0245 18.3008C18.3043 18.2242 18.5428 18.0448 18.6901 17.8002L19.3017 16.7549C19.4479 16.5119 19.4883 16.2219 19.414 15.9496C19.3396 15.6772 19.1566 15.4453 18.906 15.3057C18.4845 15.0549 18.1445 14.6924 17.9256 14.2604C17.2362 13.0239 17.664 11.4767 18.897 10.747L19.0016 10.7019ZM11.4944 9.70179C12.3905 9.69947 13.2508 10.0455 13.8853 10.6634C14.5198 11.2814 14.8764 12.1205 14.8764 12.9956L14.8708 13.1951C14.7967 14.4511 13.9952 15.5648 12.7949 16.0531C11.5314 16.567 10.0753 16.2866 9.10615 15.3428C8.13704 14.3989 7.84604 12.9778 8.36897 11.7426C8.89191 10.5074 10.1257 9.70179 11.4944 9.70179ZM11.4944 11.2477C10.5009 11.2477 9.69545 12.0342 9.69545 13.0044C9.69545 13.9746 10.5009 14.7611 11.4944 14.7611C12.4879 14.7611 13.2933 13.9746 13.2933 13.0044L13.2873 12.8603C13.2123 11.9575 12.4382 11.2477 11.4944 11.2477ZM12.115 3C13.6053 3 14.8134 4.17975 14.8134 5.63505C14.811 5.82028 14.8608 6.0026 14.9573 6.16206C15.1006 6.40892 15.339 6.5896 15.6194 6.66384C15.8999 6.73808 16.1991 6.69972 16.4504 6.55731C17.7167 5.88418 19.3011 6.30193 20.0483 7.50593C20.2548 7.87335 20.1278 8.33444 19.7605 8.55116C19.3872 8.75928 18.912 8.6384 18.6901 8.27888L18.6194 8.1754C18.2908 7.74961 17.6817 7.62035 17.197 7.8924C16.371 8.33407 15.369 8.32329 14.5532 7.86395C13.7373 7.40461 13.2258 6.56317 13.2034 5.64383C13.2131 5.35592 13.1028 5.07648 12.8976 4.8695C12.6924 4.66252 12.41 4.54574 12.115 4.54589H10.8827C10.587 4.54581 10.3037 4.66232 10.0971 4.86901C9.89051 5.07571 9.77812 5.35509 9.78539 5.64383C9.77705 6.56818 9.26507 7.41819 8.44182 7.87447C7.61856 8.33075 6.60873 8.3242 5.79176 7.85727L5.75578 7.82213L5.66924 7.76137C5.37176 7.52112 5.29447 7.09717 5.50393 6.76812C5.73244 6.40914 6.21569 6.29903 6.58329 6.52218C6.74738 6.61568 6.93305 6.66705 7.12297 6.6715C7.41407 6.68339 7.69806 6.58174 7.91235 6.38897C8.12663 6.19619 8.25361 5.92811 8.26529 5.64383C8.25976 4.21545 9.42066 3.04284 10.8827 3H12.115Z" fill="#323232"/>
+              </g>
+              <defs>
+              <clipPath id="clip0">
+              <rect  width="24" height="24" fill="white"/>
+              </clipPath>
+              </defs>
+            </svg>
+
+            <span class="font-medium">Parametros</span>
+
+          </router-link>
+
+          <router-link
+            to="/pago"
+            active-class="bg-gray-300 hover:bg-gray-300 text-primary"
+            class="flex flex-col py-2 items-center hover:bg-gray-200 text-gray-700 rounded-md dark:bg-gray-700 dark:text-gray-200"
+          >
+            <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24">
+              <g fill="none" fill-rule="evenodd" class="stroke-current" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" transform="translate(2.5 3)"><path d="M19.1389383,11.3957621 L15.0906357,11.3957621 C13.6041923,11.3948508 12.399362,10.1909319 12.3984507,8.70448849 C12.3984507,7.21804511 13.6041923,6.01412622 15.0906357,6.01321486 L19.1389383,6.01321486"/><line x1="15.549" x2="15.237" y1="8.643" y2="8.643"/><path d="M5.24766462,1.52259158e-14 L13.8910914,1.52259158e-14 C16.7892458,1.52259158e-14 19.138756,2.34951014 19.138756,5.24766462 L19.138756,12.4246981 C19.138756,15.3228526 16.7892458,17.6723627 13.8910914,17.6723627 L5.24766462,17.6723627 C2.34951014,17.6723627 1.69176842e-15,15.3228526 1.69176842e-15,12.4246981 L1.69176842e-15,5.24766462 C1.69176842e-15,2.34951014 2.34951014,1.52259158e-14 5.24766462,1.52259158e-14 Z"/><line x1="4.536" x2="9.935" y1="4.538" y2="4.538"/></g>
+            </svg>
+
+            <span class="font-medium">Pagos</span>
+          </router-link>
+
+          <router-link
+            to="/factura"
+            active-class="bg-gray-300 hover:bg-gray-300 text-primary"
+            class="flex flex-col py-2 items-center hover:bg-gray-200 text-gray-700 rounded-md dark:bg-gray-700 dark:text-gray-200"
+          >
+            <svg width="36" height="36" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path d="M15.8534 2C19.0668 2 20.9913 3.95143 21 7.20971V16.7903C21 20.0486 19.0842 22 15.8621 22H13.0058C12.6395 21.959 12.3622 21.6452 12.3622 21.2715C12.3622 20.8978 12.6395 20.584 13.0058 20.543H15.8534C18.3091 20.543 19.5457 19.2804 19.5457 16.7903V7.20971C19.5457 4.71965 18.3091 3.45695 15.8534 3.45695H8.13788C5.68215 3.45695 4.43686 4.71965 4.43686 7.20971V16.7903C4.43686 19.2804 5.68215 20.543 8.13788 20.543C8.50419 20.584 8.78145 20.8978 8.78145 21.2715C8.78145 21.6452 8.50419 21.959 8.13788 22C4.92453 22 3 20.0486 3 16.7903V7.20971C3 3.9426 4.92453 2 8.13788 2H15.8534ZM15.5922 15.5099C15.9865 15.5099 16.3062 15.8341 16.3062 16.234C16.3062 16.6339 15.9865 16.9581 15.5922 16.9581H8.38171C7.98734 16.9581 7.66763 16.6339 7.66763 16.234C7.66763 15.8341 7.98734 15.5099 8.38171 15.5099H15.5922ZM15.5922 11.2715C15.8677 11.2407 16.1364 11.3724 16.2837 11.6106C16.431 11.8487 16.431 12.1513 16.2837 12.3894C16.1364 12.6276 15.8677 12.7593 15.5922 12.7285H8.38171C8.01541 12.6875 7.73814 12.3737 7.73814 12C7.73814 11.6263 8.01541 11.3125 8.38171 11.2715H15.5922ZM11.1335 7.04194C11.4998 7.0829 11.7771 7.39674 11.7771 7.77042C11.7771 8.1441 11.4998 8.45794 11.1335 8.4989H8.39042C8.02411 8.45794 7.74685 8.1441 7.74685 7.77042C7.74685 7.39674 8.02411 7.0829 8.39042 7.04194H11.1335Z" fill="#200E32"/>
+            </svg>
+
+            <span class="font-medium">Facturas</span>
+          </router-link>
+
+          <router-link
+            to="/carrito"
+            active-class="bg-gray-300 hover:bg-gray-300 text-primary"
+            class="flex flex-col py-2 items-center hover:bg-gray-200 text-gray-700 rounded-md dark:bg-gray-700 dark:text-gray-200"
+          >
+            <span class="relative inline-block">
+              <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" />
+              </svg>
+              <span v-if="store.state.products.length > 0" class="absolute top-0 right-0 inline-flex items-center justify-center px-2 py-1 text-sm font-bold leading-none text-white transform translate-x-1/2 -translate-y-1/2 bg-secondary rounded-full">
+                {{ store.state.products.length > 9 ? '+9' : store.state.products.length }}
+              </span>
+            </span>
+
+            <span class="font-medium">Carrito</span>
+          </router-link>
+
+        </nav>
+
+        <div class="flex items-center px-2">
+          <h4 class="font-thin text-xs text-gray-800 dark:text-gray-200 hover:underline">©AAGCS 2021</h4>
+        </div>
+      </div>
+    </div>
+    <div class="ml-36 flex-1 px-10 pt-10">
+      <router-view />
+    </div>
+  </div>
+
+</template>
+
+<script>
+import { provide } from 'vue'
+import store from './store'
+
+export default {
+  setup() {
+    provide('store', store)
+    return {
+      store
+    }
+  }
+}
+</script>
\ No newline at end of file
--- a/frontend-cliente/src/assets/docs.svg
+++ b/frontend-cliente/src/assets/docs.svg
+<svg id="ac4a3ed3-ee4a-4ac5-ab20-65db2909d7ee" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="767" height="683" viewBox="0 0 767 683"><path d="M768.38272,721.626H392.132A48.17953,48.17953,0,0,1,344.007,673.5009V231.62509A48.17954,48.17954,0,0,1,392.132,183.5h350.0398l74.336,59.2506V673.5009A48.17953,48.17953,0,0,1,768.38272,721.626Z" transform="translate(-216.5 -108.5)" fill="#e6e6e6"/><path d="M392.13188,197.35419a34.30959,34.30959,0,0,0-34.27089,34.2709V673.5009a34.30958,34.30958,0,0,0,34.27089,34.27089H768.38257a34.30959,34.30959,0,0,0,34.2709-34.27089V249.4249l-65.32783-52.07071Z" transform="translate(-216.5 -108.5)" fill="#fff"/><path d="M689.879,325.83982H437.57728a8.01412,8.01412,0,1,1,0-16.02823H689.879a8.01411,8.01411,0,0,1,0,16.02823Z" transform="translate(-216.5 -108.5)" fill="#ccc"/><path d="M722.93717,352.88745H437.57728a8.01411,8.01411,0,1,1,0-16.02822H722.93717a8.01411,8.01411,0,1,1,0,16.02822Z" transform="translate(-216.5 -108.5)" fill="#ccc"/><path d="M689.879,447.05329H437.57728a8.01412,8.01412,0,1,1,0-16.02823H689.879a8.01411,8.01411,0,0,1,0,16.02823Z" transform="translate(-216.5 -108.5)" fill="#4c0139"/><path d="M722.93717,474.10092H437.57728a8.01411,8.01411,0,1,1,0-16.02822H722.93717a8.01411,8.01411,0,1,1,0,16.02822Z" transform="translate(-216.5 -108.5)" fill="#ccc"/><path d="M689.879,568.26676H437.57728a8.01411,8.01411,0,1,1,0-16.02823H689.879a8.01411,8.01411,0,0,1,0,16.02823Z" transform="translate(-216.5 -108.5)" fill="#ccc"/><path d="M722.93717,595.31439H437.57728a8.01412,8.01412,0,1,1,0-16.02823H722.93717a8.01411,8.01411,0,1,1,0,16.02823Z" transform="translate(-216.5 -108.5)" fill="#ccc"/><path d="M815.06081,244.65744H756.831a16.02823,16.02823,0,0,1-16.02823-16.02823V185.62145a1.00177,1.00177,0,0,1,1.62383-.78522l73.25631,58.03422A1.00177,1.00177,0,0,1,815.06081,244.65744Z" transform="translate(-216.5 -108.5)" fill="#e6e6e6"/><path d="M449.5,221.5a110,110,0,1,1-110-110A110.03473,110.03473,0,0,1,449.5,221.5Z" transform="translate(-216.5 -108.5)" fill="#fff"/><path d="M390.34005,240.32207c-1.20146,70.35087-105.847,70.33985-107.03822-.00226C284.50321,169.9712,389.14878,169.98222,390.34005,240.32207Z" transform="translate(-216.5 -108.5)" fill="#4c0139"/><path d="M334.69646,262.15806l-.05567-2c13.78448,1.84042,16.75313-15.24334,2.85156-8.85645l3.17334-23.19042,1.98145.27148-2.69922,19.72656C354.58511,245.93044,349.171,264.15688,334.69646,262.15806Z" transform="translate(-216.5 -108.5)" fill="#2f2e41"/><rect x="135.94646" y="121.58384" width="10.77148" height="2" fill="#2f2e41"/><rect x="101.94646" y="121.58384" width="10.77148" height="2" fill="#2f2e41"/><path d="M354.16992,315.15c2.1001-14.17-14.48974-11.37-23.27-11.51a9.518,9.518,0,0,0-9.27978,11.5,52.03823,52.03823,0,0,0-18.49024,10.2,110.47619,110.47619,0,0,0,70.43018.78A51.77077,51.77077,0,0,0,354.16992,315.15Z" transform="translate(-216.5 -108.5)" fill="#2f2e41"/><path d="M311.65924,215.00889c9.91839-5.73222,21.94644-1.33459,32.19176,1.06974,19.43829,5.97549,46.69691-1.50709,49.06067-24.66246,2.45988-21.53491-26.99911-33.53711-36.41493-12.10366l2.74162-.35832c-30.53675-45.38215-83.65461-43.661-83.30532,18.73141-.11322,1.92749,2.88716,1.921,2.99939-.00115-1.12422-36.76687,23.20863-61.89966,57.60511-38.27163,7.87161,5.7434,14.24117,13.35026,20.11041,21.05553,3.58222,4.01446,4.36067-13.27438,21.50583-8.746,18.86877,7.31,12.712,34.32849-4.15335,40.2598-20.83848,10.64622-43.40723-9.9954-63.8555.435a1.50174,1.50174,0,0,0,1.51431,2.59172Z" transform="translate(-216.5 -108.5)" fill="#2f2e41"/><path d="M339.5,334.5a112.90492,112.90492,0,1,1,34.98755-5.52686A112.72659,112.72659,0,0,1,339.5,334.5Zm0-220a107.01519,107.01519,0,1,0,107,107A107.12118,107.12118,0,0,0,339.5,114.5Z" transform="translate(-216.5 -108.5)" fill="#ccc"/><path d="M980.5,447.5a110.03473,110.03473,0,0,1-75.93994,104.62c-.66016.21-1.31983.42-1.99024.62-2.85986.88-5.75976,1.63-8.71,2.27a108.13332,108.13332,0,0,1-16.21,2.25q-3.55445.24-7.1499.24a109.80845,109.80845,0,0,1-36.37012-6.16c-.33984-.12006-.67968-.24-1.00976-.36005A110.01069,110.01069,0,1,1,980.5,447.5Z" transform="translate(-216.5 -108.5)" fill="#fff"/><circle cx="651.36456" cy="358.36027" r="53.51916" fill="#4c0139"/><path d="M870.989,495.69626l.05566-2c-3.7207-.10351-7.001-.33691-9.46582-2.13769a6.148,6.148,0,0,1-2.38135-4.52832,3.51435,3.51435,0,0,1,1.15284-2.89453c1.63623-1.38184,4.269-.93457,6.188-.05469l1.65479.75879-3.17334-23.19043-1.98145.27148,2.69922,19.72657c-2.60742-.76661-5.02343-.43653-6.67822.96093a5.471,5.471,0,0,0-1.86035,4.49219,8.13266,8.13266,0,0,0,3.20019,6.07324C863.56616,495.48826,867.68188,495.60349,870.989,495.69626Z" transform="translate(-216.5 -108.5)" fill="#2f2e41"/><rect x="625.96752" y="355.12204" width="10.77148" height="2" fill="#2f2e41"/><rect x="659.96752" y="355.12204" width="10.77148" height="2" fill="#2f2e41"/><path d="M883.06982,541.68a9.78916,9.78916,0,0,0,.22022-2,9.515,9.515,0,0,0-9.5-9.5h-14a9.50845,9.50845,0,0,0-9.5,9.5,9.23864,9.23864,0,0,0,.21973,2.01,53.738,53.738,0,0,0-14.80957,7.33c-.88038.61-1.75,1.27-2.58008,1.96.33008.12.66992.24,1.00976.36005A109.80845,109.80845,0,0,0,870.5,557.5q3.59985,0,7.1499-.24a108.13332,108.13332,0,0,0,16.21-2.25c2.9502-.64,5.8501-1.39,8.71-2.27A54.19775,54.19775,0,0,0,883.06982,541.68Z" transform="translate(-216.5 -108.5)" fill="#2f2e41"/><path d="M881.27,555.99a7.35862,7.35862,0,0,0-3.62012,1.27,108.13332,108.13332,0,0,0,16.21-2.25Z" transform="translate(-216.5 -108.5)" fill="#2f2e41"/><path d="M916.40315,454.14664,823.42927,420.134a4,4,0,0,1-2.38227-5.13077l.31452-1.487c7.26107-19.84821,31.328-32.33974,51.17618-25.07868L901.14789,398.904c19.84821,7.26106,28.4747,30.764,21.21363,50.61221l-.8276,2.24813A4,4,0,0,1,916.40315,454.14664Z" transform="translate(-216.5 -108.5)" fill="#2f2e41"/><path d="M921.41132,456.03393c-129.5874,4.78153-140.91064-11.50085-101.42627-37.10467l8.37647-15.413,96,35Z" transform="translate(-216.5 -108.5)" fill="#2f2e41"/><ellipse cx="887.86152" cy="394.01623" rx="4.5" ry="8.5" transform="translate(38.43569 1022.36884) rotate(-73.26954)" fill="#2f2e41"/><path d="M870.5,560.5a112.72659,112.72659,0,0,1-37.36206-6.32861l-1.0437-.37207a113,113,0,1,1,73.39331,1.17382c-.71069.22608-1.37964.43848-2.05933.64161-2.84033.874-5.85376,1.65918-8.93261,2.32666a111.36948,111.36948,0,0,1-16.66138,2.3125C875.42651,560.417,872.95288,560.5,870.5,560.5Zm0-220a107.01518,107.01518,0,0,0-36.36108,207.6582l.99072.353A106.71428,106.71428,0,0,0,870.5,554.5c2.3186,0,4.656-.07861,6.94751-.2334a105.48571,105.48571,0,0,0,15.77808-2.189c2.91211-.63135,5.75952-1.37354,8.46215-2.20459.66919-.2002,1.30445-.40235,1.94-.6045A107.015,107.015,0,0,0,870.5,340.5Z" transform="translate(-216.5 -108.5)" fill="#ccc"/><path d="M219.5,678.5a109.66673,109.66673,0,0,0,32.33984,77.91c.86036.85,1.74024,1.7,2.62989,2.53a109.84769,109.84769,0,0,0,17.46045,13.31c1.1997.74,2.3999,1.45,3.62988,2.14a109.37915,109.37915,0,0,0,19.87988,8.73c1.18994.39,2.3999.76,3.60986,1.1A110.45367,110.45367,0,0,0,365.87012,782.34c.41992-.15.83984-.3,1.25-.45A110.0095,110.0095,0,1,0,219.5,678.5Z" transform="translate(-216.5 -108.5)" fill="#fff"/><path d="M306.27014,732.41564a34.0869,34.0869,0,0,1-8.804,23.076c-5.656,6.20712-14.07618,10.32359-22.57327,8.62042-7.82416-1.56828-14.18219-8.4067-13.389-16.67949a12.356,12.356,0,0,1,15.2668-11.09515c7.43265,1.92885,10.39415,12.64094,4.20051,17.66895-1.4862,1.20651-3.62136-.90358-2.12132-2.12132,4.0944-3.32384,2.8295-10.59539-2.11244-12.419-5.75371-2.12311-11.84978,2.44323-12.26355,8.32553-.49058,6.97428,4.8522,12.22647,11.40422,13.463,7.08789,1.3377,14.11532-2.29,18.91808-7.29717a30.955,30.955,0,0,0,8.474-21.54183,1.5009,1.5009,0,0,1,3,0Z" transform="translate(-216.5 -108.5)" fill="#2f2e41"/><circle cx="119.06404" cy="589.46769" r="53.51916" fill="#4c0139"/><path d="M332.8259,720.80368l-.05567-2c3.72071-.10351,7.001-.33691,9.46583-2.13769a6.148,6.148,0,0,0,2.38134-4.52832,3.51431,3.51431,0,0,0-1.15283-2.89453c-1.63623-1.38184-4.269-.93457-6.188-.05469l-1.65478.75879,3.17334-23.19043,1.98144.27148-2.69922,19.72657c2.60743-.76661,5.02344-.43653,6.67823.96093a5.471,5.471,0,0,1,1.86035,4.49219,8.13264,8.13264,0,0,1-3.2002,6.07324C340.24875,720.59568,336.133,720.71091,332.8259,720.80368Z" transform="translate(-216.5 -108.5)" fill="#2f2e41"/><rect x="134.0759" y="580.22946" width="10.77148" height="2" fill="#2f2e41"/><rect x="100.0759" y="580.22946" width="10.77148" height="2" fill="#2f2e41"/><path d="M299.0498,784.22A110.45367,110.45367,0,0,0,365.87012,782.34c.41992-.15.83984-.3,1.25-.45a53.27215,53.27215,0,0,0-16.9502-8.76,8.52762,8.52762,0,0,0-.02-4.7A9.45851,9.45851,0,0,0,341,761.79H327.96a9.42565,9.42565,0,0,0-9.12988,6.63,8.5633,8.5633,0,0,0-.02,4.71,53.32673,53.32673,0,0,0-15.12012,7.41q-1.39525.975-2.69971,2.04C300.33008,783.11,299.68018,783.66,299.0498,784.22Z" transform="translate(-216.5 -108.5)" fill="#2f2e41"/><path d="M377.49023,692.29c0,9.02,4.44,16.5,10.21,17.8a8.25353,8.25353,0,0,0,1.79.2c6.60987,0,12-8.07,12-18,0-5.76-1.81-10.89-4.62011-14.18a11.579,11.579,0,0,0-3.53028-2.87,8.367,8.367,0,0,0-3.84961-.95,8.77375,8.77375,0,0,0-5.11035,1.72C380.31006,678.89,377.49023,685.1,377.49023,692.29Z" transform="translate(-216.5 -108.5)" fill="#3f3d56"/><path d="M270.49023,692.29c0,7.76,3.27979,14.38,7.87989,16.91a8.54032,8.54032,0,0,0,4.12011,1.09,7.7302,7.7302,0,0,0,.96-.06c6.15966-.73,11.04-8.49,11.04-17.94,0-7.57-3.13037-14.06-7.55029-16.71a8.57535,8.57535,0,0,0-4.44971-1.29,8.3675,8.3675,0,0,0-3.85009.95,11.6442,11.6442,0,0,0-3.54,2.88C272.2998,681.41,270.49023,686.54,270.49023,692.29Z" transform="translate(-216.5 -108.5)" fill="#3f3d56"/><path d="M279.11851,707.47448a1.50127,1.50127,0,0,0,1.42151-1.98,58.49865,58.49865,0,1,1,112.68726-6.57471,1.50006,1.50006,0,0,0,2.93554.61914,61.50091,61.50091,0,1,0-118.46557,6.91455A1.50077,1.50077,0,0,0,279.11851,707.47448Z" transform="translate(-216.5 -108.5)" fill="#3f3d56"/><path d="M362.44932,663.292c2.11925,2.89278,1.07448,6.79121-1.15836,9.28528-2.90548,3.2454-7.53877,3.45016-11.5618,2.8478-4.51431-.67592-9.30261-2.79091-13.87293-1.36561-3.89537,1.21481-6.67418,4.74794-10.7211,5.63537-3.589.787-7.88081-.25477-9.139-4.08015-.60459-1.83824,2.29142-2.62611,2.89284-.79752.814,2.47478,4.32865,2.42543,6.34145,1.74013,3.22689-1.09868,5.71374-3.771,8.8854-5.0475,3.73933-1.50491,7.79621-.82548,11.60323.03181,3.58831.808,7.718,2.006,11.29267.49666,2.64515-1.11691,4.74985-4.635,2.84717-7.23211-1.1422-1.55911,1.45985-3.05739,2.59041-1.51416Z" transform="translate(-216.5 -108.5)" fill="#2f2e41"/><path d="M329.5,791.5a112.79187,112.79187,0,0,1-31.28186-4.398c-1.195-.33545-2.45056-.71777-3.71179-1.13086a112.69725,112.69725,0,0,1-20.418-8.9668c-1.21777-.6831-2.44019-1.4038-3.73279-2.20068a113.09455,113.09455,0,0,1-17.93433-13.67187c-.90856-.84766-1.809-1.71778-2.68933-2.58692a112.99057,112.99057,0,1,1,118.41358,26.16455c-.41272.15088-.83972.30323-1.26685.45557A112.73884,112.73884,0,0,1,329.5,791.5Zm0-220a107.00492,107.00492,0,0,0-75.542,182.78564c.83008.81983,1.68945,1.64991,2.55835,2.46094a107.10806,107.10806,0,0,0,16.98535,12.94824c1.22461.75489,2.377,1.43409,3.526,2.07862a106.65788,106.65788,0,0,0,19.33887,8.49316c1.1875.38916,2.36084.74658,3.4945,1.06494a107.4525,107.4525,0,0,0,65.01722-1.82275l1.212-.43652A107.01355,107.01355,0,0,0,329.5,571.5Z" transform="translate(-216.5 -108.5)" fill="#ccc"/></svg>
\ No newline at end of file
--- a/frontend-cliente/src/assets/logo.png
+++ b/frontend-cliente/src/assets/logo.png
--- a/frontend-cliente/src/assets/tramite.svg
+++ b/frontend-cliente/src/assets/tramite.svg
+<svg xmlns="http://www.w3.org/2000/svg" width="63.182" height="73.401" viewBox="0 0 63.182 73.401">
+  <path style="fill:#dadee0;" d="M137.437,61.895a5.591,5.591,0,0,0-5.575-5.575H90.05a5.591,5.591,0,0,0-5.575,5.575v52.031A5.591,5.591,0,0,0,90.05,119.5h31.588l15.8-14.866Z" transform="translate(-74.255 -46.1)"/>
+  <path style="fill:#622c8b;" d="M38.375,15.8A5.591,5.591,0,0,1,43.95,10.22H81.117V5.575A5.591,5.591,0,0,0,75.542,0H33.73a5.591,5.591,0,0,0-5.575,5.575V57.606a5.591,5.591,0,0,0,5.575,5.575h4.646Z" transform="translate(-28.155)"/>
+  <path style="fill:#f2f2f2;" d="M294.84,322.56h10.22l-15.8,14.866v-9.291A5.591,5.591,0,0,1,294.84,322.56Z" transform="translate(-241.881 -264.025)"/><g transform="translate(22.764 22.764)">
+  <path style="fill:#434345;" d="M154.989,179.427h25.086a1.394,1.394,0,1,0,0-2.787H154.989a1.394,1.394,0,0,0,0,2.787" transform="translate(-153.595 -167.349)"/><path class="d" d="M154.989,128.227h25.086a1.394,1.394,0,1,0,0-2.787H154.989a1.394,1.394,0,0,0,0,2.787" transform="translate(-153.595 -125.44)"/><path class="d" d="M154.989,230.627h25.086a1.394,1.394,0,1,0,0-2.787H154.989a1.394,1.394,0,0,0,0,2.787" transform="translate(-153.595 -209.257)"/><path class="d" d="M154.989,281.827h13.937a1.394,1.394,0,1,0,0-2.787H154.989a1.394,1.394,0,1,0,0,2.787" transform="translate(-153.595 -251.166)"/></g>
+</svg>
\ No newline at end of file
--- a/frontend-cliente/src/components/Carrito.vue
+++ b/frontend-cliente/src/components/Carrito.vue
+<template>
+  <!-- <h1 class="text-2xl">Número de productos a comprar</h1>
+  <div class="flex items-center space-x-4 my-4">
+    <span class="text-3xl font-bold">{{ store.state.products.length }}</span>
+  </div> -->
+  <!-- <div class="container mx-auto mt-10">
+  </div> -->
+  <div v-if="store.state.products.length > 0" class="flex">
+    <div class="w-4/6 bg-white px-10 py-10">
+      <div class="flex justify-between border-b pb-8">
+        <h1 class="font-semibold text-2xl">Carrito de compra</h1>
+        <h2 class="font-semibold text-2xl">{{productos.length}} Item{{productos.length !== 1 ? 's' : ''}}</h2>
+      </div>
+      <div class="flex mt-10 mb-5">
+        <h3 class="font-semibold text-gray-600 text-xs uppercase w-2/5">Descripción</h3>
+        <h3 class="font-semibold text-center text-gray-600 text-xs uppercase w-1/5">Cantidad</h3>
+        <h3 class="font-semibold text-center text-gray-600 text-xs uppercase w-1/5">Precio</h3>
+        <h3 class="font-semibold text-center text-gray-600 text-xs uppercase w-1/5">Total</h3>
+      </div>
+
+      <!-- inicio -->
+      <div v-for="(producto, index) in productos" :key="index" class="flex items-center hover:bg-gray-100 -mx-8 px-6 py-5 border-b">
+        <div class="flex w-2/5">
+          <div class="flex items-center">
+            <!-- <svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+            </svg> -->
+            <span class="text-md font-medium w-auto">
+              {{ producto.descripcion }}
+            </span>
+          </div>
+        </div>
+        <div class="flex justify-center w-1/5">
+          <button @click="descontarCantidadProducto(index, producto.precioUnitario)" :disabled="producto.cantidad === 1" :class="{ 'text-gray-300': producto.cantidad === 1, 'text-gray-600': producto.cantidad > 1 }">
+            <svg class="fill-current w-3" viewBox="0 0 448 512"><path d="M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"/>
+            </svg>
+          </button>
+
+          <!-- <input class="mx-2 border text-center w-8" type="text" :value="producto.cantidad"> -->
+          <span class="mx-2 border text-center w-8">{{ producto.cantidad }}</span>
+
+          <button @click="aumentarCantidadProducto(index, producto.precioUnitario)">
+            <svg class="fill-current text-gray-600 w-3" viewBox="0 0 448 512">
+              <path d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"/>
+            </svg>
+          </button>
+        </div>
+        <span class="text-center w-1/5 font-semibold text-sm">Bs {{ producto.precioUnitario }}</span>
+        <span class="text-center w-1/5 font-semibold text-sm">Bs {{ producto.subTotal }}</span>
+        <!-- <span class="text-center w-1/5 font-semibold text-sm"></span> -->
+      </div>
+      <!-- fin -->
+
+      <!-- <a href="#" class="flex font-semibold text-indigo-600 text-sm mt-10">
+
+        <svg class="fill-current mr-2 text-indigo-600 w-4" viewBox="0 0 448 512"><path d="M134.059 296H436c6.627 0 12-5.373 12-12v-56c0-6.627-5.373-12-12-12H134.059v-46.059c0-21.382-25.851-32.09-40.971-16.971L7.029 239.029c-9.373 9.373-9.373 24.569 0 33.941l86.059 86.059c15.119 15.119 40.971 4.411 40.971-16.971V296z"/></svg>
+        Continue Shopping
+      </a> -->
+    </div>
+
+    <div id="summary" class="w-2/6 px-8 py-10 bg-gray-100 rounded-md">
+      <div class="border-b border-gray-300 py-5">
+        <h1 class="font-semibold text-2xl border-b pb-8">Datos de facturación</h1>
+        <div class="my-2">
+          <label class="font-medium uppercase mb-2" for="razonSocial">Razon social</label>
+          <input
+            class="w-full p-2 my-2 rounded-md focus:ring-1 focus:ring-primary focus:outline-none"
+            type="text"
+            name="razonSocial"
+            id="razonSocial"
+            v-model="datosFacturacion.razonSocialCliente"
+          >
+        </div>
+        <div class="my-2">
+          <label class="font-medium uppercase mb-2" for="nit">Nit</label>
+          <input
+            class="w-full p-2 my-2 rounded-md focus:ring-1 focus:ring-primary focus:outline-none"
+            type="text"
+            name="nit"
+            id="nit"
+            v-model="datosFacturacion.nitCliente"
+          >
+        </div>
+        <div class="my-2">
+          <label class="font-medium uppercase mb-2" for="correo">Correo electrónico</label>
+          <input
+            class="w-full p-2 my-2 rounded-md focus:ring-1 focus:ring-primary focus:outline-none"
+            type="text"
+            name="correo"
+            id="correo"
+            v-model="datosFacturacion.emailCliente"
+          >
+        </div>
+      </div>
+      <div class="my-5">
+        <h1 class="font-semibold text-2xl border-b pb-8">Detalle de compra</h1>
+        <div class="flex justify-between mt-5 mb-5 text-gray-500">
+          <span class="font-medium text-sm">Subtotal</span>
+          <span class="font-medium text-sm">Bs. {{ costoTotal }}</span>
+        </div>
+        <div class="border-t mt-5">
+          <div class="flex font-bold justify-between py-6 text-lg">
+            <span>Costo total</span>
+            <span>Bs. {{ costoTotal.toFixed(2) }}</span>
+          </div>
+          <button @click="efectuarCompra()" class="bg-primary font-semibold hover:bg-opacity-70 py-3 text-sm text-white uppercase w-full border-0 rounded-md focus:outline-none focus:ring-4 focus:ring-primary">
+            PAGAR
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div v-else class="text-center pt-28">
+    <h1 class="text-5xl text-gray-700">El carrito de compras esta vacío</h1>
+  </div>
+
+</template>
+
+<script>
+import imgTramite from '/src/assets/tramite.svg'
+import { inject, onMounted, ref, watchEffect } from 'vue'
+
+export default {
+  setup() {
+    const store = inject('store')
+    const productos = ref([])
+    const costoTotal = ref(0)
+    const datosFacturacion = ref({
+      razonSocialCliente: 'MENDY',
+      nitCliente: '777666555',
+      emailCliente: 'ferlandmendy@mail.com'
+    })
+
+    onMounted(async () => {
+      console.log('carrito mounted!')
+      procesarCarrito()
+    })
+
+    // watchEffect(() => {})
+
+    const procesarCarrito = () => {
+      console.log('store.state.products :: ', store.state.products);
+      const tmpProducts = [ ...store.state.products ];
+      let contadorProductos = [];
+      // tmpProducts.findIndex()
+      console.log('tmpProducts :: ', tmpProducts);
+      let _costoTotal = 0;
+      tmpProducts.forEach((producto) => {
+        _costoTotal += producto.precioUnitario;
+        const idxProducto = contadorProductos.findIndex((el) => el.codigo === producto.codigo);
+        // console.log('existe producto ? ', idxProducto !== -1);
+        if (idxProducto !== -1) {
+          // el producto ya esta en el carrito
+          const productTmp = {...contadorProductos[idxProducto]}
+          productTmp.cantidad += 1;
+          productTmp.subTotal += parseFloat(producto.precioUnitario.toFixed(2));
+          contadorProductos[idxProducto] = {...productTmp}
+        } else {
+          // insertamos la primera vez el producto en el carrito
+          contadorProductos.push({
+            ...producto,
+            cantidad: 1,
+            subTotal: parseFloat(producto.precioUnitario.toFixed(2))
+          })
+        }
+      })
+
+      console.log('CARRITO PROCESADO > ', contadorProductos);
+      productos.value = contadorProductos;
+      costoTotal.value = _costoTotal;
+    }
+
+    const aumentarCantidadProducto = (idxProducto, precioUnitario) => {
+      const tmpProductos = [...productos.value];
+      tmpProductos[idxProducto].cantidad += 1;
+      tmpProductos[idxProducto].subTotal += parseFloat(precioUnitario.toFixed(2));
+      productos.value = tmpProductos;
+      costoTotal.value += parseFloat(precioUnitario.toFixed(2));
+    }
+
+    const descontarCantidadProducto = (idxProducto, precioUnitario) => {
+      const tmpProductos = [...productos.value];
+      tmpProductos[idxProducto].cantidad -= 1;
+      tmpProductos[idxProducto].subTotal -= parseFloat(precioUnitario.toFixed(2));
+      productos.value = tmpProductos;
+      costoTotal.value -= parseFloat(precioUnitario.toFixed(2));
+    }
+
+    const generarCodigoOrden = () => {
+      return 'Ar-1D-AA-11-9Z'
+    }
+
+    const efectuarCompra = async () => {
+      const _codigoOrden = generarCodigoOrden();
+      const _costoTotal = costoTotal.value;
+
+      const _prods = [...productos.value];
+      _prods.map((prod) => {
+        delete(prod.id);
+        return prod
+      })
+
+      console.log(_prods);
+
+      const data = {
+        descripcion: "Pago de trámites QA",
+        datosSesion: null, // no se emula ciudadania
+        metaDatosTransaccion: "informacion extra para pago de tramites qa",
+        codigoOrden: _codigoOrden,
+        datosPago: {
+          nombresCliente: 'Ferland',
+          apellidosCliente: 'Mendy',
+          numeroDocumentoCliente: '6058904',
+          fechaNacimientoCliente: '1996-09-19',
+          cuentaBancaria: '111000034567',
+          montoTotal: parseFloat(_costoTotal.toFixed(2))
+        },
+        productos: _prods,
+        facturacion: datosFacturacion.value,
+      };
+
+      console.log('Data para pasarela  ::: ', data);
+      console.log('Data para pasarela  ::: ', JSON.stringify(data));
+
+      const response = await fetch('http://localhost:8081/api/admin/pago/solicitud', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(data)
+      }).then(r => r.json());
+
+      console.log('RESPONSE PASARELA :: ', response);
+
+      // const a = document.createElement('a');
+      // a.title = 'link redireccion para pasarela'
+      // a.href = ;
+
+      // {
+      //   "finalizado": true,
+      //   "mensaje": "Registro creado con exito!",
+      //   "datos": {
+      //     "idTransaccion": "878a046b-73de-4f22-95c4-946313ebf2d6",
+      //     "urlRedireccion": "https://pre-ppe.agetic.gob.bo/transaccion/?id=878a046b-73de-4f22-95c4-946313ebf2d6"
+      //   }
+      // }
+      console.log('redireccion pasarela :: ', response.datos.urlRedireccion);
+
+      // const url = window.URL.createObjectURL(this.b64toBlob(response.data, 'application/pdf'));
+      const link = document.createElement('a');
+      link.href = response.datos.urlRedireccion;
+      // const d = new Date();
+      // link.setAttribute('target', '_blank');
+      // document.body.appendChild(link);
+      link.click();
+
+      // a.click();
+      // console.log('Parametros obtenidos de servicio :: ', parametros);
+
+
+
+    }
+
+    return {
+      // Variables
+      imgTramite,
+      store,
+      productos,
+      datosFacturacion,
+      costoTotal,
+      // Methods
+      aumentarCantidadProducto,
+      descontarCantidadProducto,
+      efectuarCompra,
+    }
+  },
+}
+</script>
\ No newline at end of file
--- a/frontend-cliente/src/components/Factura.vue
+++ b/frontend-cliente/src/components/Factura.vue
+<template>
+  <h1 class="text-4xl mb-4">Facturas</h1>
+  <!-- <button class="p-2 bg-indigo-500 rounded text-white">Nueva factura</button> -->
+</template>
\ No newline at end of file
--- a/frontend-cliente/src/components/HelloWorld.vue
+++ b/frontend-cliente/src/components/HelloWorld.vue
+<script setup>
+import { ref } from 'vue'
+
+defineProps({
+  msg: String
+})
+
+const count = ref(0)
+</script>
+
+<template>
+  <h1 class="mb-6 font-bold text-4xl">{{ msg }}</h1>
+
+  <p>
+    Recommended IDE setup:
+    <a href="https://code.visualstudio.com/" target="_blank">VSCode</a>
+    +
+    <a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
+  </p>
+
+  <p>
+    <a href="https://vitejs.dev/guide/features.html" target="_blank">
+      Vite Documentation
+    </a>
+    |
+    <a href="https://v3.vuejs.org/" target="_blank">Vue 3 Documentation</a>
+  </p>
+
+  <button type="button" @click="count++">count is: {{ count }}</button>
+  <p>
+    Edit
+    <code>components/HelloWorld.vue</code> to test hot module replacement.
+  </p>
+</template>
+
+<style scoped>
+a {
+  color: #42b983;
+}
+</style>
--- a/frontend-cliente/src/components/Home.vue
+++ b/frontend-cliente/src/components/Home.vue
+<template>
+  <div class="sticky top-0 bg-white p-3 border-b border-gray-200">
+    <h1 class="text-4xl mb-4">Bienvenido al sistema cliente - QA</h1>
+    <div class="flex justify-between">
+      <p>
+        Puedes realizar el pago de servicios mediante tarjeta de crédito o CPT
+      </p>
+      <router-link to="/carrito" class="bg-primary inline-flex space-x-2 bg-opacity-90 hover:bg-opacity-100 text-white p-2 rounded-md focus:outline-none focus:ring focus:ring-primary focus:ring-opacity-75">
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" />
+        </svg>
+        <span class="font-semibold">Ver Carrito</span>
+      </router-link>
+    </div>
+  </div>
+
+  <div class="my-10 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4 justify-around items-stretch">
+
+    <div v-for="tramite in tramites" :key="tramite.id"  class="flex flex-col border-b space-y-3 p-4 justify-between">
+      <img class="w-16" :src=imgTramite alt="img-tramite">
+      <h1 class="flex-1 text-base">{{ tramite.descripcion }}</h1>
+      <div class="flex space-x-3 items-center text-secondary bg-gray-100 bg-opacity-70 rounded-lg p-1">
+        <span class="text-lg font-semibold flex-1">Bs. {{ tramite.precioUnitario }}</span>