Dyanmic tables for multiple clients

by joznox

JavaScript

const data = [
	{
  	start: "2022-04-3",
    hours: 1,
    client: {
    	id: "123",
      fullName: "Tom Tom"
    }
  },
  {
  	start: "2022-04-10",
    hours: 2,
    client: {
    	id: "123",
      fullName: "Tom Tom"
    }
  },
  {
  	start: "2022-04-10",
    hours: 3,
    client: {
    	id: "123",
      fullName: "Tom Tom"
    }
  },
  {
  	start: "2022-04-10",
    hours: 1,
    client: {
    	id: "123",
      fullName: "Tom Tom"
    }
  },
  {
  	start: "2022-04-13",
    hours: 1,
    client: {
    	id: "456",
      fullName: "Jack Jack"
    }
  },
  {
  	start: "2022-04-13",
    hours: 2,
    client: {
    	id: "123",
      fullName: "Tom Tom"
    }
  },
  {
  	start: "2022-04-15",
    hours: 1,
    client: {
    	id: "789",
      fullName: "Pete Pete"
    }
  },
  {
  	start: "2022-04-15",
    hours: 1,
    client: {
    	id: "789",
      fullName: "Pete Pete"
    }
  }
]

let collData = data.reduce((accumulator, currentValue) => { 
	let existing = accumulator.find((n) => n.client.id === currentValue.client.id && n.start === currentValue.start);
            if (existing) {
              existing.hours += currentValue.hours;
            } else {
              accumulator.push(currentValue);
            }
            return accumulator;
          }, []);
        console.log("step 1 ", collData);
        
        
let res = {};



collData.forEach((item) => {
    const splitDate = item.start.split("-");
    const day = splitDate[splitDate.length - 1];

    const newStat = { start: parseInt(day), hours: item.hours};
      
   if(res[item.client.id])
   {
       let stats = res[item.client.id].stats;
        stats = [...stats, newStat];
        res[item.client.id].stats = stats;
   }
   else{
      res[item.client.id] = {
        client: item.client,
        stats: [newStat]
      }
   }
    
  });


  let filtArr = [];
  
  const daysInMonth = 30;
 
    let dayInfo = [];
    for (let i = 1; i <= daysInMonth; i++) {
      dayInfo.push(i)
 
      // create an...