class Dashboard{
    constructor(){
      this.name = "dashboard";
    }  
  
    static isCustom(){
      return true;
    }
  
    static CreateCustom(data){
  
      let controlCenterBg = "";
      if(data.data.control_centre == ""){
        controlCenterBg = "error"
        data.data.control_centre = getTranslation("no_control_centre");
      }
      else{
        data.data.control_centre = System.buildEmployeeName(data.data.control_centre)
      }
  
      let stats = [];
  
      stats = [
        [
          {name:"files.overview", text : data.data.info[0].files, goto:"files.overview", "gotoAllowed":userrights.has("files.view")},
          {name:"regvehicle.overview", text : data.data.info[0].regvehicle},
          {name:"regvehicle_nomot.overview", text : data.data.info[0].regvehicle_no_mot},
        ],
        [
          {name:"control_centre", text : data.data.control_centre, bg:controlCenterBg, goto:"controlcentre.dataload", "gotoAllowed":userrights.has("controlcentre.view")},
          {name:"employees.overview", text : data.data.info[0].employees, goto:"employees.overview","gotoAllowed":userrights.has("employees.view")},
          {name:"count_employees_available", text : data.data.info[0].employees_available},
        ],
        [
          {name:"open_documents.overview", text : data.data.info[0].open_documents},
          {name:"declined_documents.overview", text : data.data.info[0].declined_documents},
          {name:"invoiced_documents.overview", text : data.data.info[0].invoiced_documents},
          {name:"done_documents.overview", text : data.data.info[0].done_documents},
        ],
        [
          {name:"vehicle_damages.overview", text : data.data.info[0].vehicle_damages},
          {name:"vehicle_damages_repaired.overview", text : data.data.info[0].vehicle_damages_repaired},
          {name:"partacceptance_pos.overview", text : data.data.info[0].partacceptance_pos},
        ],
      ];
  
      
  
      let statsHTML = ``;
      for(let i=0; i<stats.length; i++){
        statsHTML += `<div class="grid pt-8 md:grid-cols-${stats[i].length} grid-cols-1 gap-6">`
  
        for(let j=0; j<stats[i].length; j++){
          let btn = ``;
          let bgClasses = "";
          let txtclasses = null;
          let txtExtra = "";
          
          if(stats[i][j].goto !== undefined && stats[i][j].goto !== null && stats[i][j].goto != ""){
            let allowed = stats[i][j].gotoAllowed ?? true
  
            if(allowed){
              btn = `<button class="btn btn-xs" onclick="loadPage('${stats[i][j].goto}',-1)">${getTranslation("goto")} ${getTranslation(stats[i][j].goto)}</button>`
            }
  
            
          }
          if(stats[i][j].nameextra !== undefined && stats[i][j].nameextra !== null && stats[i][j].nameextra != ""){
            txtExtra = ` (${stats[i][j].nameextra})`
          }
          
          if(stats[i][j].bg !== undefined && stats[i][j].bg !== null && stats[i][j].bg != ""){
            bgClasses = `bg-${stats[i][j].bg}` 
            txtclasses = `text-${stats[i][j].bg}-content`
          }
  
          let textclass2="text-primary"
          textclass2 = "";
  
          statsHTML += `
            <div class="stats shadow ${bgClasses}">  
              <div class="stat">
                  <div class="stat-title ${txtclasses}">${getTranslation(stats[i][j].name)}${txtExtra}</div>
                  <div class="stat-value ${txtclasses ?? textclass2}">${stats[i][j].text}</div>
                  <div class="stat-actions">${btn}</div>                
              </div>
            </div>
          `
        }
        statsHTML += `</div>`
      }
      document.getElementById("currentpage-content").innerHTML = statsHTML;
    }
  }