Finished js and css status and second row

css/style.css

@@ -11,6 +11,8 @@ body {
 
 table {
 	width: 100%;
+	border-collapse: collapse;
+	border-spacing: 0;
 }
 
 tr {
@@ -56,6 +58,10 @@ td {
 	display: none;
 }
 
+.main-row td {
+	border-top: 2px solid #000;
+}
+
 #loader {
 	text-align: center;
 }

js/index.js

@@ -161,6 +161,7 @@ const getAllLeads = async () => {
 				console.log(lead)
 				const row = document.getElementById('table').insertRow()
 				row.id = `lead-${lead.lead.id}`
+				row.classList.add('main-row')
 				row.onclick = async () => await getLeadInfo(lead.lead.id)
 
 				const cell1 = row.insertCell()
@@ -189,20 +190,50 @@ const getAllLeads = async () => {
 
 const getLeadInfo = async id => {
 	const leadDiv = document.getElementById(`lead-${id}`)
+	const leadDivInfo = document.getElementById(`leadinfo-${id}`)
+
+	if (leadDivInfo) {
+		leadDivInfo.remove()
+		return
+	}
+
 	leadDiv.classList.add('loading')
 
 	const lead = await getLead(id)
-	console.log(lead)
 
-	if (lead.closest_task_at == null || lead.closest_task_at < time())
-		leadDiv.style.background = '#f00'
-	else if (isToday(lead.closest_task_at))
-		leadDiv.style.background = '#0f0'
-	else
-		leadDiv.style.background = '#ff0'
+	const row = document.getElementById('table').insertRow(leadDiv.rowIndex + 1)
+	row.id = `leadinfo-${id}`
+	row.onclick = async () => await getLeadInfo(id)
+
+	const cell0 = row.insertCell()
+	const cell1 = row.insertCell()
+	const cell2 = row.insertCell()
 
 	const date = getDdMmYyyy(lead.closest_task_at)
-	console.log(date)
+	cell1.textContent = `Дата: ${date}`
+	cell1.colSpan = 2
+
+	const status = lead.closest_task_at === null || lead.closest_task_at < time()
+		? '#f00'
+		: isToday(lead.closest_task_at)
+			? '#0f0'
+			: '#ff0'
+	const svgns = "http://www.w3.org/2000/svg"
+	const svg = document.createElementNS(svgns, "svg")
+	svg.setAttribute("width", "16")
+	svg.setAttribute("height", "16")
+
+	const circle = document.createElementNS(svgns, "circle")
+	circle.setAttribute("cx", "8")
+	circle.setAttribute("cy", "8")
+	circle.setAttribute("r", "8")
+	circle.setAttribute("fill", status)
+
+	svg.appendChild(circle)
+
+	cell2.textContent = 'Статус: '
+	cell2.append(svg)
+	cell2.colSpan = 2
 
 	leadDiv.classList.remove('loading')
 }