A
Anonymous

Metrics Dashboard Display - Copy this Html, Tailwind Component to your project

<div-style={{-padding:-'20px-10px',-margin:-'0-auto',-maxWidth:-'793px',-fontFamily:-'Arial,-sans-serif'-}}>-<Title-align="center"-order={2}-style={{-marginBottom:-'10px'-}}>Metrics</Title>-<Text-align="center"-style={{-marginBottom:-'5px'-}}>Dealer:-Training-Dealership-USA</Text>-<Text-align="center"-style={{-marginBottom:-'20px'-}}>01/09/2025</Text>-<Text-weight={700}-style={{-marginBottom:-'10px'-}}>Bureaus-Run</Text>-<Table-withBorder-style={{-borderCollapse:-'collapse',-width:-'100%',-fontSize:-'12px'-}}>-<thead>-<tr>-<th-style={{-textAlign:-'left',-padding:-'5px'-}}>Name</th>-<th-style={{-textAlign:-'center',-borderBottom:-'1px-solid-black',-padding:-'5px'-}}>Yesterday</th>-<th-style={{-textAlign:-'center',-borderBottom:-'1px-solid-black',-padding:-'5px'-}}>Last-7-Days</th>-<th-style={{-textAlign:-'center',-borderBottom:-'1px-solid-black',-padding:-'5px'-}}>Last-30-Days</th>-<th-style={{-textAlign:-'center',-borderBottom:-'1px-solid-black',-padding:-'5px'-}}>Monthly-Avg.</th>-<th-style={{-textAlign:-'center',-borderBottom:-'1px-solid-black',-padding:-'5px'-}}>Last-120</th>-</tr>-</thead>-<tbody>-<tr>-<td-style={{-textAlign:-'left',-padding:-'3px'-}}>Banage,-Pooja</td>-<td-style={{-textAlign:-'center',-padding:-'3px'-}}>0</td>-<td-style={{-textAlign:-'center',-padding:-'3px'-}}>0</td>-<td-style={{-textAlign:-'center',-padding:-'3px'-}}>3</td>-<td-style={{-textAlign:-'center',-padding:-'3px'-}}>3</td>-<td-style={{-textAlign:-'center',-padding:-'3px'-}}>15</td>-</tr>-<tr>-<td-style={{-textAlign:-'left',-padding:-'3px'-}}>Pise,-Sapna</td>-<td-style={{-textAlign:-'center',-padding:-'3px'-}}>26</td>-<td-style={{-textAlign:-'center',-padding:-'3px'-}}>30</td>-<td-style={{-textAlign:-'center',-padding:-'3px'-}}>40</td>-<td-style={{-textAlign:-'center',-padding:-'3px'-}}>11</td>-<td-style={{-textAlign:-'center',-padding:-'3px'-}}>45</td>-</tr>-<tr>-<td-style={{-textAlign:-'left',-padding:-'10px-3px-3px-3px',-borderTop:-'1px-solid-black'-}}>Totals</td>-<td-style={{-textAlign:-'center',-padding:-'3px',-borderTop:-'1px-solid-black'-}}>35</td>-<td-style={{-textAlign:-'center',-padding:-'3px',-borderTop:-'1px-solid-black'-}}>74</td>-<td-style={{-textAlign:-'center',-padding:-'3px',-borderTop:-'1px-solid-black'-}}>123</td>-<td-style={{-textAlign:-'center',-padding:-'3px',-borderTop:-'1px-solid-black'-}}>201</td>-<td-style={{-textAlign:-'center',-padding:-'3px',-borderTop:-'1px-solid-black'-}}>828</td>-</tr>-</tbody>-</Table>-<Text-weight={700}-style={{-marginTop:-'20px',-marginBottom:-'10px'-}}>Credit-Summary</Text>-<Table-withBorder-style={{-borderCollapse:-'collapse',-width:-'100%',-fontSize:-'12px'-}}>-<thead>-<tr>-<th-style={{-textAlign:-'left',-padding:-'5px'-}}>Range</th>-<th-colSpan={3}-style={{-textAlign:-'center',-padding:-'5px'-}}>Last-7-Days</th>-<th-colSpan={3}-style={{-textAlign:-'center',-padding:-'5px'-}}>Last-30-Days</th>-<th-colSpan={3}-style={{-textAlign:-'center',-padding:-'5px'-}}>Monthly-Avg.</th>-<th-colSpan={3}-style={{-textAlign:-'center',-padding:-'5px'-}}>Last-120</th>-<th-colSpan={3}-style={{-textAlign:-'center',-padding:-'5px'-}}>%-of-Total</th>-</tr>-<tr>-<th-style={{-textAlign:-'left',-padding:-'5px'-}}></th>-<th-style={{-textAlign:-'center',-padding:-'5px'-}}>TRU</th>-<th-style={{-textAlign:-'center',-padding:-'5px'-}}>EXP</th>-<th-style={{-textAlign:-'center',-padding:-'5px'-}}>EQX</th>-<th-style={{-textAlign:-'center',-padding:-'5px'-}}>TRU</th>-<th-style={{-textAlign:-'center',-padding:-'5px'-}}>EXP</th>-<th-style={{-textAlign:-'center',-padding:-'5px'-}}>EQX</th>-<th-style={{-textAlign:-'center',-padding:-'5px'-}}>TRU</th>-<th-style={{-textAlign:-'center',-padding:-'5px'-}}>EXP</th>-<th-style={{-textAlign:-'center',-padding:-'5px'-}}>EQX</th>-<th-style={{-textAlign:-'center',-padding:-'5px'-}}>TRU</th>-<th-style={{-textAlign:-'center',-padding:-'5px'-}}>EXP</th>-<th-style={{-textAlign:-'center',-padding:-'5px'-}}>EQX</th>-<th-style={{-textAlign:-'center',-padding:-'5px'-}}>TRU</th>-<th-style={{-textAlign:-'center',-padding:-'5px'-}}>EXP</th>-<th-style={{-textAlign:-'center',-padding:-'5px'-}}>EQX</th>-</tr>-</thead>-<tbody>-<tr>-<td-style={{-textAlign:-'left',-padding:-'3px'-}}>->720-</td>-<td-style={{-textAlign:-'center',-padding:-'3px'-}}>9</td>-<td-style={{-textAlign:-'center',-padding:-'3px'-}}>14</td>-<td-style={{-textAlign:-'center',-padding:-'3px'-}}>0</td>-<td-style={{-textAlign:-'center',-padding:-'3px'-}}>16</td>-<td-style={{-textAlign:-'center',-padding:-'3px'-}}>20</td>-<td-style={{-textAlign:-'center',-padding:-'3px'-}}>0</td>-<td-style={{-textAlign:-'center',-padding:-'3px'-}}>44</td>-<td-style={{-textAlign:-'center',-padding:-'3px'-}}>21</td>-<td-style={{-textAlign:-'center',-padding:-'3px'-}}>0</td>-<td-style={{-textAlign:-'center',-padding:-'3px'-}}>179</td>-<td-style={{-textAlign:-'center',-padding:-'3px'-}}>86</td>-<td-style={{-textAlign:-'center',-padding:-'3px'-}}>0</td>-<td-style={{-textAlign:-'center',-padding:-'3px'-}}>27</td>-<td-style={{-textAlign:-'center',-padding:-'3px'-}}>25</td>-<td-style={{-textAlign:-'center',-padding:-'3px'-}}>0</td>-</tr>-<tr>-<td-style={{-textAlign:-'left',-padding:-'3px'-}}>620-720</td>-<td-style={{-textAlign:-'center',-padding:-'3px'-}}>0</td>-<td-style={{-textAlign:-'center',-padding:-'3px'-}}>8</td>-<td-style={{-textAlign:-'center',-padding:-'3px'-}}>0</td>-<td-style={{-textAlign:-'center',-padding:-'3px'-}}>9</td>-<td-style={{-textAlign:-'center',-padding:-'3px'-}}>3</td>-<td-style={{-textAlign:-'center',-padding:-'3px'-}}>0</td>-<td-style={{-textAlign:-'center',-padding:-'3px'-}}>7</td>-<td-style={{-textAlign:-'center',-padding:-'3px'-}}>12</td>-<td-style={{-textAlign:-'center',-padding:-'3px'-}}>0</td>-<td-style={{-textAlign:-'center',-padding:-'3px'-}}>30</td>-<td-style={{-textAlign:-'center',-padding:-'3px'-}}>49</td>-<td-style={{-textAlign:-'center',-padding:-'3px'-}}>0</td>-<td-style={{-textAlign:-'center',-padding:-'3px'-}}>9</td>-<td-style={{-textAlign:-'center',-padding:-'3px'-}}>20</td>-<td-style={{-textAlign:-'center',-padding:-'3px'-}}>0</td>-</tr>-<tr>-<td-style={{-textAlign:-'left',-padding:-'10px-3px-3px-3px',-borderTop:-'1px-solid-black'-}}>Totals</td>-<td-style={{-textAlign:-'center',-padding:-'3px',-borderTop:-'1px-solid-black'-}}>21</td>-<td-style={{-textAlign:-'center',-padding:-'3px',-borderTop:-'1px-solid-black'-}}>5</td>-<td-style={{-textAlign:-'center',-padding:-'3px',-borderTop:-'1px-solid-black'-}}>5</td>-<td-style={{-textAlign:-'center',-padding:-'3px',-borderTop:-'1px-solid-black'-}}>25</td>-<td-style={{-textAlign:-'center',-padding:-'3px',-borderTop:-'1px-solid-black'-}}>6</td>-<td-style={{-textAlign:-'center',-padding:-'3px',-borderTop:-'1px-solid-black'-}}>13</td>-<td-style={{-textAlign:-'center',-padding:-'3px',-borderTop:-'1px-solid-black'-}}>40</td>-<td-style={{-textAlign:-'center',-padding:-'3px',-borderTop:-'1px-solid-black'-}}>9</td>-<td-style={{-textAlign:-'center',-padding:-'3px',-borderTop:-'1px-solid-black'-}}>27</td>-<td-style={{-textAlign:-'center',-padding:-'3px',-borderTop:-'1px-solid-black'-}}>161</td>-<td-style={{-textAlign:-'center',-padding:-'3px',-borderTop:-'1px-solid-black'-}}>38</td>-<td-style={{-textAlign:-'center',-padding:-'3px',-borderTop:-'1px-solid-black'-}}>110</td>-<td-style={{-textAlign:-'center',-padding:-'3px',-borderTop:-'1px-solid-black'-}}>24</td>-<td-style={{-textAlign:-'center',-padding:-'3px',-borderTop:-'1px-solid-black'-}}>11</td>-<td-style={{-textAlign:-'center',-padding:-'3px',-borderTop:-'1px-solid-black'-}}>45</td>-</tr>-</tbody>-</Table>-</div>

Prompt
Component Preview

About

Metrics Dashboard Display - View dealer metrics with a clean layout, including tables for daily, weekly, and monthly stats, built with ht. Copy code today!

Share

Last updated 1 month ago