Embed

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=3, user-scalable=yes, viewport-fit=cover">
  <title>Enviar Nota Fiscal</title>

  <style>
    :root {
      --bg:#F1F8F4; --card:#ffffff; --muted:#6b7368; --text:#3F473C;
      --accent:#567861; --accent-2:#619B75; --danger:#c14254; --ok:#2e8053;
      --ink-weak:#3F473C22; --ring:#619B7533;
    }

    * { box-sizing:border-box; margin:0; padding:0; }

    body {
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
      color:var(--text);
      background:var(--bg);
    }

    main {
      min-width:50%;
      max-width:900px;
      margin:0 auto;
      padding:20px;
    }

    h1 {
      text-align:center;
      margin-bottom:20px;
    }

    .card {
      background:var(--card);
      border:1px solid var(--ink-weak);
      border-radius:16px;
      padding:20px;
      margin-bottom:20px;
      box-shadow:0 6px 22px rgba(63,71,60,.08);
    }

    .card h2 {
      font-size:18px;
      margin-bottom:12px;
    }

    .card p {
      color:var(--muted);
      line-height:1.6;
      margin-bottom:12px;
    }

    .btn {
      width:100%;
      padding:14px;
      font-size:16px;
      font-weight:700;
      border:0;
      border-radius:12px;
      cursor:pointer;
      color:#fff;
      background:linear-gradient(135deg, var(--accent), var(--accent-2));
      margin-top:10px;
    }

    .btn-link {
      display:inline-flex;
      align-items:center;
      justify-content:center;
      text-decoration:none;
    }

    .status {
      margin-top:10px;
      font-size:14px;
      text-align:center;
    }

    .status.error { color:var(--danger); }
    .status.ok { color:var(--ok); }

    input[type="tel"],
    input[type="file"] {
      width:100%;
      padding:12px;
      font-size:15px;
      margin-top:6px;
      margin-bottom:12px;
      border:1px solid var(--ink-weak);
      border-radius:12px;
      background:#fff;
      color:var(--text);
      outline:none;
      transition:border .2s ease, box-shadow .2s ease;
    }

    input:focus {
      border-color:var(--accent-2);
      box-shadow:0 0 0 3px var(--ring);
    }

    .hint {
      font-size:12px;
      color:var(--muted);
      margin-bottom:8px;
    }

    progress {
      width:100%;
      height:10px;
      margin-top:10px;
    }
  </style>
</head>
<body>
  <main>
    <h1>Enviar Nota Fiscal</h1>

    <div class="card">
      <h2>Envio da nota do plantão</h2>
      <p>Envie a nota fiscal referente ao plantão realizado pelo cuidador para que a equipe possa seguir com a conferência e o pagamento.</p>
      <p>Preencha o telefone cadastrado e anexe o arquivo da nota fiscal.</p>
    </div>

    <div class="card">
      <h2>Dados para envio</h2>

      <label for="phone">Telefone do cuidador</label>
      <input id="phone" type="tel" placeholder="27999998888" />

      <label for="invoiceFile">Arquivo da nota fiscal</label>
      <input id="invoiceFile" type="file" accept=".pdf,.jpg,.jpeg,.png,application/pdf,image/jpeg,image/png" />
      <div class="hint">Formatos aceitos: PDF, JPG, JPEG e PNG.</div>

      <button class="btn" id="uploadInvoice">Enviar nota fiscal</button>
      <progress id="uploadProgress" value="0" max="100" style="display:none;"></progress>
      <div class="status" id="uploadStatus"></div>
    </div>

    <a class="btn btn-link" id="backToDashboard" href="/caregivers/dashboard">Voltar ao dashboard</a>
  </main>

  <script>
    const BASE = "https://api.vitalassisthomecare.com.br/lifeassist/v1";
    const DASHBOARD_URL = "/caregivers/dashboard";
    const ALLOWED_TYPES = ["application/pdf", "image/jpeg", "image/png"];

    const phoneEl = document.getElementById("phone");
    const invoiceInput = document.getElementById("invoiceFile");
    const progressEl = document.getElementById("uploadProgress");
    const statusEl = document.getElementById("uploadStatus");
    const backToDashboardEl = document.getElementById("backToDashboard");

    document.addEventListener("DOMContentLoaded", init);

    function init() {
      const token = getTokenFromUrl();

      if (token) {
        backToDashboardEl.href = `${DASHBOARD_URL}?token=${encodeURIComponent(token)}`;
      }
    }

    function getTokenFromUrl() {
      const params = new URLSearchParams(window.location.search);
      return params.get("token");
    }

    function getPhone() {
      return phoneEl.value.replace(/\D/g, "");
    }

    function showError(message) {
      statusEl.textContent = message;
      statusEl.className = "status error";
    }

    function showSuccess(message) {
      statusEl.textContent = message;
      statusEl.className = "status ok";
    }

    function resetStatus() {
      statusEl.textContent = "";
      statusEl.className = "status";
      progressEl.value = 0;
      progressEl.style.display = "none";
    }

    function validateInvoiceFile(file) {
      if (!file) return "Selecione a nota fiscal.";
      if (!ALLOWED_TYPES.includes(file.type)) {
        return "Formato nao aceito. Envie PDF, JPG, JPEG ou PNG.";
      }
      return null;
    }

    async function uploadFileToS3(url, file, progressBar) {
      return new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest();
        xhr.open("PUT", url, true);
        xhr.setRequestHeader("Content-Type", file.type);
        progressBar.style.display = "block";
        xhr.upload.onprogress = event => {
          if (event.lengthComputable) {
            progressBar.value = Math.round((event.loaded / event.total) * 100);
          }
        };
        xhr.onload = () => xhr.status === 200 ? resolve(true) : reject("Falha no upload");
        xhr.onerror = () => reject("Erro de conexão");
        xhr.send(file);
      });
    }

    async function getPresignedUrl(phone, contentType, extension) {
      const res = await fetch(`${BASE}/caregiver/profile/presignedURL`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ phone, contentType, extension })
      });

      if (!res.ok) throw new Error("Falha ao obter URL de upload");

      const data = await res.json();
      return data.url;
    }

    invoiceInput.addEventListener("change", () => {
      resetStatus();

      if (!invoiceInput.files.length) return;

      const validationError = validateInvoiceFile(invoiceInput.files[0]);
      if (validationError) {
        invoiceInput.value = "";
        showError(validationError);
      }
    });

    document.getElementById("uploadInvoice").addEventListener("click", async () => {
      resetStatus();

      const phone = getPhone();
      if (!phone) return showError("Informe o telefone do cuidador.");
      if (!invoiceInput.files.length) return showError("Selecione a nota fiscal.");

      const file = invoiceInput.files[0];
      const validationError = validateInvoiceFile(file);
      if (validationError) return showError(validationError);

      try {
        const extension = file.name.includes(".")
          ? file.name.split(".").pop().toLowerCase()
          : file.type.split("/")[1];

        const url = await getPresignedUrl(phone, file.type, extension);
        await uploadFileToS3(url, file, progressEl);
        showSuccess("Nota fiscal enviada com sucesso!");
      } catch (error) {
        showError(error.message || error);
      }
    });
  </script>
</body>
</html>


Vital Assist - Home Care

We offer a new standard in care: we find, train, and empower the best caregivers, supported by a system that records all tasks in real time and generates transparent reports.

All to provide comfort, care, and safety for those receiving care—and peace of mind for those accompanying care.