[FEATURE]CAF-43 Package Control Interface

tests/cypress/e2e/dashboard.cy.js

@@ -32,7 +32,7 @@ describe("Role-based button functionality", () => {
       cy.visitWithToken("/dashboard");
 
       cy.get("#btnParcelControl").contains("Control de paquetería").click();
-      cy.url().should("include", "/parcelControl");
+      cy.url().should("include", "/packages");
       cy.visitWithToken("/dashboard");
     });
   });
@@ -62,7 +62,7 @@ describe("Role-based button functionality", () => {
       cy.visitWithToken("/dashboard");
 
       cy.get("#btnParcelControl").contains("Control de paquetería").click();
-      cy.url().should("include", "/parcelControl");
+      cy.url().should("include", "/packages");
     });
   });
 

tests/cypress/e2e/packages.cy.js

@@ -0,0 +1,51 @@
+describe("Packages Table", () => {
+  beforeEach(() => {
+    cy.intercept("GET", "/packages", {
+      statusCode: 200,
+      body: {
+        message: "OK",
+        packages: [
+          {
+            id: 1,
+            service: "Delivery",
+            receivedAt: "2023-12-20 14:00:00",
+            confirmedAt: null,
+            address: "Fake Street 123",
+            statusName: "confirmar",
+          },
+        ],
+      },
+    }).as("getPackages");
+
+    cy.visitWithToken("/packages");
+  });
+
+  it("should display the packages table with confirmation buttons", () => {
+    cy.wait("@getPackages");
+    cy.get("#packageTable").should("exist");
+    cy.get('[data-cy="btnConfirm"]').should("exist");
+    cy.get("#packageTable tr").then(($rows) => {
+      const numRows = $rows.length;
+      cy.get('[data-cy="btnConfirm"]').should("have.length", numRows);
+    });
+  });
+
+  it("should display an empty table with an error message when the API request fails", () => {
+    cy.intercept("GET", "/packages", {
+      statusCode: 500,
+      body: { message: "Internal Server Error" },
+    }).as("getPackagesError");
+
+    cy.visitWithToken("/packages");
+    cy.wait("@getPackagesError");
+
+    cy.get("#packageTable").should("exist");
+    cy.get("#packageTable tr").should("have.length", 0);
+  });
+
+  it("should display a confirmation button for each package", () => {
+    cy.wait("@getPackages");
+    cy.get("#packageTable").should("exist");
+    cy.get('[data-cy="btnConfirm"]').should("exist");
+  });
+});

views/dashboard/blocks/parcelControlbutton.html

@@ -4,7 +4,7 @@
   id="btnParcelControl"
   class="btn btn-primary btn-lg me-3"
   style="width: 150px; height: 150px"
-  onclick="navigateTo('/parcelControl')"
+  onclick="navigateTo('/packages')"
 >
   <span class="material-symbols-outlined">local_shipping</span><br />
   Control de paquetería

views/packages/assets/index.js

@@ -0,0 +1,101 @@
+async function fetchPackages() {
+  try {
+    return await apiRequest("GET", "packages");
+  } catch (error) {
+    console.error("Error al cargar paquetes:", error);
+    return null;
+  }
+}
+
+function createCell(textContent) {
+  const cell = document.createElement("td");
+  cell.textContent = textContent;
+  return cell;
+}
+
+function formatDate(dateString) {
+  const date = new Date(dateString);
+  return date.toLocaleString();
+}
+
+function createActionsCell(pkg) {
+  const actionsCell = document.createElement("td");
+
+  const confirmButton = createConfirmButton(pkg.id);
+  actionsCell.appendChild(confirmButton);
+
+  return actionsCell;
+}
+
+function createPackageRow(pkg) {
+  const row = document.createElement("tr");
+
+  const serviceCell = createCell(pkg.service);
+  const receivedCell = createCell(formatDate(pkg.receivedAt));
+  const confirmationCell = createCell(formatDate(pkg.confirmedAt));
+  const addressCell = createCell(pkg.address);
+  const statusCell = createCell(pkg.statusName);
+  const actionsCell = createActionsCell(pkg);
+
+  row.appendChild(serviceCell);
+  row.appendChild(receivedCell);
+  row.appendChild(confirmationCell);
+  row.appendChild(addressCell);
+  row.appendChild(statusCell);
+  row.appendChild(actionsCell);
+
+  return row;
+}
+
+function createConfirmButton(pkg) {
+  const confirmButton = document.createElement("button");
+  confirmButton.className = "btn btn-outline-success btn-sm";
+  confirmButton.title = "Confirmar Entrega";
+  confirmButton.setAttribute("data-cy", "btnConfirm");
+  confirmButton.setAttribute("data-package-id", pkg.id);
+
+  const confirmIcon = document.createElement("span");
+  confirmIcon.className = "material-symbols-outlined";
+  confirmIcon.textContent = "check_circle";
+  confirmButton.appendChild(confirmIcon);
+
+  confirmButton.onclick = async () => {
+    try {
+      const response = await apiRequest("POST", `packages/${pkg.id}/confirm`);
+      if (response.success) {
+        alert("Entrega confirmada.");
+        await loadPackagesTable();
+      } else {
+        alert("No se pudo confirmar la entrega.");
+      }
+    } catch (error) {
+      console.error("Error al confirmar entrega ", error);
+    }
+  };
+
+  return confirmButton;
+}
+
+async function loadPackagesTable() {
+  try {
+    const response = await fetchPackages();
+
+    const packageTable = document.getElementById("packageTable");
+    packageTable.innerHTML = "";
+
+    response.data.packages.forEach((pkg) => {
+      const row = createPackageRow(pkg);
+      packageTable.appendChild(row);
+    });
+  } catch (error) {
+    console.error("Error al cargar la tabla de paquetes ", error);
+  }
+}
+
+document.getElementById("registerPackage").addEventListener("click", () => {
+  window.location.href = "/packages/register.html";
+});
+
+window.addEventListener("load", async () => {
+  await loadPackagesTable();
+});

views/packages/index.html

@@ -0,0 +1,26 @@
+<div class="container mt-5">
+  <div class="row justify-content-center">
+    <div class="col-md-10">
+      <h3 class="text-center">Lista de Entregas</h3>
+
+      <button id="registerPackage" class="btn btn-primary mb-3">
+        Registrar Nueva Entrega
+      </button>
+
+      <table class="table table-bordered table-striped">
+        <thead class="table-white">
+          <tr>
+            <th>Servicio</th>
+            <th>Fecha y Hora de Recibido</th>
+            <th>Fecha y Hora de Confirmado</th>
+            <th>Dirección</th>
+            <th>Estatus</th>
+            <th>Acciones</th>
+          </tr>
+        </thead>
+        <tbody id="packageTable"></tbody>
+      </table>
+    </div>
+  </div>
+</div>
+<script src="/packages/assets/index.js"></script>