Complaint Management System Issue

[Bafana Kgotlello]

Greetings, I hope everyone is okay. I have a problem with the complaint management system I am trying to create. I have a public dashboard with button "Submit new complaint" and "View Recent Complaints" when i click submit new complaint I am supposed to be taken to the complaint form, and then after the complaint form is submitted, the google sheet attached to the script should update the information. but the button "Submit New Complaint" just wont take me to the form. I believe I have tried all I can, I am new to google apps script and Javascript, html,css

g.s code

function doGet(e) {

  return HtmlService.createHtmlOutputFromFile('PublicDashboard');

}

function loadComplaintForm() {

  return HtmlService.createHtmlOutputFromFile('submit_complaint');

}

function loadComplaintsPage() {

  return HtmlService.createHtmlOutputFromFile('view_complaints');

}

function submitComplaint(formData) {

  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Complaintsheet');

  var refNumber = 'CMP-' + new Date().getTime();

  var newRow = [

    new Date(),

    formData.name,

    formData.surname,

    formData.phone,

    formData.location,

    '', // Placeholder for Image URL

    formData.category,

    formData.description,

    'Open',

    refNumber,

    ''

  ];

  var row = sheet.appendRow(newRow);

 

  // Handle image upload

  var file = formData.image;

  if (file && file.getContentType) {

    var folder = DriveApp.getFolderById('https://drive.google.com/drive/folders/1sD2WdjThb0TlzWkmjaty_C0PDBJQG3fq?usp=sharing'); // Replace with your folder ID

    var blob = Utilities.newBlob(file.getBytes(), file.getContentType(), file.getName());

    var uploadedFile = folder.createFile(blob);

    sheet.getRange(row.getRow(), 6).setValue(uploadedFile.getUrl());

  }

  // Send SMS (implement SMS sending logic here)

  var phone = formData.phone;

  sendSMS(phone, 'Your complaint has been received. Reference Number: ' + refNumber);

 

  return refNumber;

}

function sendSMS(phone, message) {

  // Implement SMS sending logic here using a service like Twilio

}

function getRecentComplaints() {

  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Complaintsheet');

  var data = sheet.getDataRange().getValues();

  return data.slice(1); // Exclude headers

}

function updateComplaintStatus(refNumber, status) {

  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Complaintsheet');

  var data = sheet.getDataRange().getValues();

  for (var i = 1; i < data.length; i++) {

    if (data[i][9] === refNumber) {

      sheet.getRange(i + 1, 9).setValue(status);

      break;

    }

  }

}

function assignDepartment(refNumber, department) {

  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Complaintsheet');

  var data = sheet.getDataRange().getValues();

  for (var i = 1; i < data.length; i++) {

    if (data[i][9] === refNumber) {

      sheet.getRange(i + 1, 11).setValue(department);

      break;

    }

  }

}

The PublicDashboard c

<script>

    function submitComplaint() {

      google.script.run.withSuccessHandler(function(html) {

        document.open();

        document.write(html);

        document.close();

      }).loadComplaintForm();

    }

    function viewComplaints() {

      google.script.run.withSuccessHandler(function(html) {

        document.open();

        document.write(html);

        document.close();

      }).loadComplaintsPage();

    }

  </script>

submit complaint script code:

<script>

    document.getElementById('complaintForm').addEventListener('submit', function(e) {

      e.preventDefault();

      var formData = new FormData(this);

      var formObject = {};

      formData.forEach(function(value, key){

        formObject[key] = value;

      });

      google.script.run.withSuccessHandler(function(response) {

        alert('Complaint submitted successfully. Your reference number is ' + response);

        window.location.href = '/view_complaints.html';

      }).submitComplaint(formObject);

    });

  </script>

View Complaint script

<script>

    function loadComplaints() {

      google.script.run.withSuccessHandler(function(complaints) {

        var container = document.getElementById('complaints');

        complaints.forEach(function(complaint) {

          var div = document.createElement('div');

          div.className = 'complaint';

          div.textContent = `Reference Number: ${complaint[9]}, Status: ${complaint[8]}, Description: ${complaint[7]}`;

          container.appendChild(div);

        });

      }).getRecentComplaints();

    }

    loadComplaints();

  </script>