<div class="o-tableBlocks -taskList">
<table class="table">
<thead>
<tr>
<th scope="col">
<div class="d-inline-flex align-items-center mb-2">
<div class="o-tableBlocks__collapse d-inline-flex align-items-center user-select-none" data-toggle="collapse" href="#collapseTasks51654" role="button" aria-expanded="true" aria-controls="collapseTasks51654">
<div class="mr-2">
<div class="a-circle -avatar -hover -border -pointer cursor-default">
<i class="icon-arrow-right-filled"></i>
</div>
</div>
<h3 class="a-tableHead d-inline-block font-weight-bold mb-0 mr-2 px-0">
Bestelling
</h3>
<span class="font-weight-normal text-muted">(0/3)</span>
</div>
<div class="o-tableBlocks__deadlines ml-3 text-danger d-flex align-items-center user-select-none" data-toggle="popover" data-trigger="hover" data-placement="top" data-html="true" data-content="<span class='text-danger'>3 verstreken deadlines</span>">
<i class="icon-calendar"></i>
<span class="ml-1 font-weight-normal line-height-1">3</span>
</div>
</div>
</th>
</tr>
</thead>
<tbody class="collapse show" id="collapseTasks51654">
<tr class="m-tableBlock">
<td width="100%">
<div class="d-flex align-items-center">
<div class="a-statusCircle">
<svg class="a-statusCircle__svg" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="15" cy="15" r="15" fill="#69D2C2" />
<path d="M18.7908 12.1395C18.5308 11.9031 18.1263 11.9216 17.8887 12.1829L13.9912 16.4745L12.1083 14.5604C11.8598 14.3086 11.456 14.3048 11.2049 14.5527C10.9532 14.7999 10.9493 15.2044 11.1972 15.4561L13.5542 17.8521C13.675 17.9747 13.8385 18.0431 14.0097 18.0431C14.0136 18.0431 14.018 18.0431 14.0219 18.0438C14.1982 18.0399 14.3643 17.9645 14.4825 17.8342L18.8342 13.0423C19.0713 12.7803 19.0521 12.3765 18.7908 12.1395Z" fill="white" />
</svg>
</div>
<strong class="h5 ml-3 mb-0 font-base">
Opdrachtgever en contactpersoon
</strong>
</div>
</td>
<td class="d-none d-lg-table-cell">
<div class="mr-2">
<div class="a-dateDisplay d-flex align-items-center">
<div class="a-circle -avatar bg-success -pointer cursor-default">
<i class="icon-calendar"></i>
</div>
<span class="pl-2 white-space-nowrap text-success">Vandaag</span>
</div>
</div>
</td>
<td>
<div class="h-100 d-flex align-items-center justify-content-center">
<div tabindex="0" class="a-avatar bg-brown rounded-circle d-inline-flex justify-content-center align-items-center" data-toggle="popover" data-placement="top" data-trigger="hover" data-html="true" title="" data-content="<small class='d-block text-center'><strong>Marcella Vonk</strong><br><span class='text-muted'>Accountmanager</span></small>">
MV
</div>
</div>
</td>
</tr>
<tr class="m-tableBlock -disabled">
<td width="100%">
<div class="d-flex align-items-center">
<div class="a-statusCircle">
<svg class="a-statusCircle__svg" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="16" cy="16" r="15.5" fill="white" stroke="black" stroke-opacity="0.15" />
<path d="M19.1687 15.5582C19.0693 15.4588 18.9486 15.4091 18.8065 15.4091H18.6361V14.3863C18.6361 13.7329 18.4018 13.1719 17.933 12.7032C17.4643 12.2344 16.9033 12 16.2498 12C15.5963 12 15.0352 12.2344 14.5665 12.7031C14.0977 13.1719 13.8634 13.7329 13.8634 14.3863V15.4091H13.693C13.551 15.4091 13.4302 15.4588 13.3308 15.5582C13.2313 15.6576 13.1816 15.7784 13.1816 15.9205V18.9887C13.1816 19.1307 13.2314 19.2515 13.3308 19.3509C13.4302 19.4503 13.551 19.5 13.693 19.5H18.8066C18.9487 19.5 19.0694 19.4503 19.1689 19.3509C19.2682 19.2515 19.318 19.1307 19.318 18.9887V15.9204C19.3181 15.7784 19.2682 15.6577 19.1687 15.5582ZM17.6134 15.4091H14.8862V14.3863C14.8862 14.0099 15.0194 13.6885 15.2857 13.4222C15.5521 13.1559 15.8734 13.0228 16.2499 13.0228C16.6263 13.0228 16.9476 13.1559 17.214 13.4222C17.4802 13.6885 17.6134 14.0099 17.6134 14.3863V15.4091Z" fill="black" fill-opacity="0.15" />
</svg>
</div>
<strong class="h5 ml-3 mb-0 font-base">
Opdrachtgever en contactpersoon
</strong>
</div>
</td>
<td class="d-none d-lg-table-cell">
<div class="mr-2">
<div class="a-dateDisplay d-flex align-items-center">
<div class="a-circle -avatar bg-danger -pointer cursor-default">
<i class="icon-calendar"></i>
</div>
<span class="pl-2 white-space-nowrap text-danger">Gisteren</span>
</div>
</div>
</td>
<td>
<div class="h-100 d-flex align-items-center justify-content-center">
<div class="a-circle -avatar -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="top" data-trigger="hover" data-html="true" title="" data-custom-class="">
<i class="icon-profile"></i>
</div>
<div class="popover-content">
Geen eigenaar
</div>
</div>
</td>
</tr>
<tr class="m-tableBlock -active">
<td width="100%">
<div class="d-flex align-items-center">
<div class="a-statusCircle">
<svg class="a-statusCircle__svg" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="16" cy="16" r="15.5" fill="white" stroke="black" stroke-opacity="0.15" />
<path d="M19.7908 13.1403C19.5308 12.9039 19.1263 12.9224 18.8887 13.1837L14.9912 17.4753L13.1083 15.5611C12.8598 15.3094 12.456 15.3056 12.2049 15.5535C11.9532 15.8007 11.9493 16.2052 12.1972 16.4569L14.5542 18.8529C14.675 18.9755 14.8385 19.0439 15.0097 19.0439C15.0136 19.0439 15.018 19.0439 15.0219 19.0445C15.1982 19.0407 15.3643 18.9653 15.4825 18.835L19.8342 14.0431C20.0713 13.7811 20.0521 13.3773 19.7908 13.1403Z" fill="black" />
</svg>
</div>
<strong class="h5 ml-3 mb-0 font-base">
Opdrachtgever en contactpersoon
<div class="mt-1">
<div class="a-dotTag font-weight-normal text-muted d-flex align-items-center">
<div class="a-dotTag__dot rounded-circle bg-blue"></div>
<div class="a-dotTag__text">Appartementen</div>
</div>
</div>
</strong>
</div>
</td>
<td class="d-none d-lg-table-cell">
<div class="mr-2">
<div class="a-dateDisplay d-flex align-items-center">
<div class="a-circle -avatar -border -pointer cursor-default">
<i class="icon-calendar"></i>
</div>
<span class="pl-2 white-space-nowrap ">10-01-2022</span>
</div>
</div>
</td>
<td>
<div class="h-100 d-flex align-items-center justify-content-center">
<div class="a-circle -avatar -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="top" data-trigger="hover" data-html="true" title="" data-custom-class="">
<i class="icon-profile"></i>
</div>
<div class="popover-content">
Geen eigenaar
</div>
</div>
</td>
</tr>
<tr class="m-tableBlock">
<td width="100%">
<div class="d-flex align-items-center">
<div class="a-statusCircle">
<svg class="a-statusCircle__svg" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="16" cy="16" r="15.5" fill="white" stroke="black" stroke-opacity="0.15" />
<path d="M19.7908 13.1403C19.5308 12.9039 19.1263 12.9224 18.8887 13.1837L14.9912 17.4753L13.1083 15.5611C12.8598 15.3094 12.456 15.3056 12.2049 15.5535C11.9532 15.8007 11.9493 16.2052 12.1972 16.4569L14.5542 18.8529C14.675 18.9755 14.8385 19.0439 15.0097 19.0439C15.0136 19.0439 15.018 19.0439 15.0219 19.0445C15.1982 19.0407 15.3643 18.9653 15.4825 18.835L19.8342 14.0431C20.0713 13.7811 20.0521 13.3773 19.7908 13.1403Z" fill="black" />
</svg>
</div>
<strong class="h5 ml-3 mb-0 font-base">
Opdrachtgever en contactpersoon
<div class="mt-1">
<div class="a-dotTag font-weight-normal text-muted d-flex align-items-center">
<div class="a-dotTag__dot rounded-circle bg-purple"></div>
<div class="a-dotTag__text">Grondgebonden woningen</div>
</div>
</div>
</strong>
</div>
</td>
<td class="d-none d-lg-table-cell">
<div class="mr-2">
<div class="a-dateDisplay d-flex align-items-center">
<div class="a-circle -avatar -border -pointer cursor-default">
<i class="icon-calendar"></i>
</div>
<span class="pl-2 white-space-nowrap ">10-01-2022</span>
</div>
</div>
</td>
<td>
<div class="h-100 d-flex align-items-center justify-content-center">
<div class="a-circle -avatar -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="top" data-trigger="hover" data-html="true" title="" data-custom-class="">
<i class="icon-profile"></i>
</div>
<div class="popover-content">
Geen eigenaar
</div>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table">
<thead>
<tr>
<th scope="col">
<div class="d-inline-flex align-items-center mb-2">
<div class="o-tableBlocks__collapse d-inline-flex align-items-center user-select-none" data-toggle="collapse" href="#collapseTasks43842" role="button" aria-expanded="true" aria-controls="collapseTasks43842">
<div class="mr-2">
<div class="a-circle -avatar -hover -border -pointer cursor-default">
<i class="icon-arrow-right-filled"></i>
</div>
</div>
<h3 class="a-tableHead d-inline-block font-weight-bold mb-0 mr-2 px-0">
Offerte
</h3>
<span class="font-weight-normal text-muted">(0/3)</span>
</div>
<div class="o-tableBlocks__deadlines ml-3 text-danger d-flex align-items-center user-select-none" data-toggle="popover" data-trigger="hover" data-placement="top" data-html="true" data-content="<span class='text-danger'>3 verstreken deadlines</span>">
<i class="icon-calendar"></i>
<span class="ml-1 font-weight-normal line-height-1">3</span>
</div>
</div>
</th>
</tr>
</thead>
<tbody class="collapse show" id="collapseTasks43842">
<tr class="m-tableBlock">
<td width="100%">
<div class="d-flex align-items-center">
<div class="a-statusCircle">
<svg class="a-statusCircle__svg" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="15" cy="15" r="15" fill="#69D2C2" />
<path d="M18.7908 12.1395C18.5308 11.9031 18.1263 11.9216 17.8887 12.1829L13.9912 16.4745L12.1083 14.5604C11.8598 14.3086 11.456 14.3048 11.2049 14.5527C10.9532 14.7999 10.9493 15.2044 11.1972 15.4561L13.5542 17.8521C13.675 17.9747 13.8385 18.0431 14.0097 18.0431C14.0136 18.0431 14.018 18.0431 14.0219 18.0438C14.1982 18.0399 14.3643 17.9645 14.4825 17.8342L18.8342 13.0423C19.0713 12.7803 19.0521 12.3765 18.7908 12.1395Z" fill="white" />
</svg>
</div>
<strong class="h5 ml-3 mb-0 font-base">
Opdrachtgever en contactpersoon
</strong>
</div>
</td>
<td class="d-none d-lg-table-cell">
<div class="mr-2">
<div class="a-dateDisplay d-flex align-items-center">
<div class="a-circle -avatar bg-success -pointer cursor-default">
<i class="icon-calendar"></i>
</div>
<span class="pl-2 white-space-nowrap text-success">Vandaag</span>
</div>
</div>
</td>
<td>
<div class="h-100 d-flex align-items-center justify-content-center">
<div tabindex="0" class="a-avatar bg-brown rounded-circle d-inline-flex justify-content-center align-items-center" data-toggle="popover" data-placement="top" data-trigger="hover" data-html="true" title="" data-content="<small class='d-block text-center'><strong>Marcella Vonk</strong><br><span class='text-muted'>Accountmanager</span></small>">
MV
</div>
</div>
</td>
</tr>
<tr class="m-tableBlock -disabled">
<td width="100%">
<div class="d-flex align-items-center">
<div class="a-statusCircle">
<svg class="a-statusCircle__svg" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="16" cy="16" r="15.5" fill="white" stroke="black" stroke-opacity="0.15" />
<path d="M19.1687 15.5582C19.0693 15.4588 18.9486 15.4091 18.8065 15.4091H18.6361V14.3863C18.6361 13.7329 18.4018 13.1719 17.933 12.7032C17.4643 12.2344 16.9033 12 16.2498 12C15.5963 12 15.0352 12.2344 14.5665 12.7031C14.0977 13.1719 13.8634 13.7329 13.8634 14.3863V15.4091H13.693C13.551 15.4091 13.4302 15.4588 13.3308 15.5582C13.2313 15.6576 13.1816 15.7784 13.1816 15.9205V18.9887C13.1816 19.1307 13.2314 19.2515 13.3308 19.3509C13.4302 19.4503 13.551 19.5 13.693 19.5H18.8066C18.9487 19.5 19.0694 19.4503 19.1689 19.3509C19.2682 19.2515 19.318 19.1307 19.318 18.9887V15.9204C19.3181 15.7784 19.2682 15.6577 19.1687 15.5582ZM17.6134 15.4091H14.8862V14.3863C14.8862 14.0099 15.0194 13.6885 15.2857 13.4222C15.5521 13.1559 15.8734 13.0228 16.2499 13.0228C16.6263 13.0228 16.9476 13.1559 17.214 13.4222C17.4802 13.6885 17.6134 14.0099 17.6134 14.3863V15.4091Z" fill="black" fill-opacity="0.15" />
</svg>
</div>
<strong class="h5 ml-3 mb-0 font-base">
Opdrachtgever en contactpersoon
</strong>
</div>
</td>
<td class="d-none d-lg-table-cell">
<div class="mr-2">
<div class="a-dateDisplay d-flex align-items-center">
<div class="a-circle -avatar bg-danger -pointer cursor-default">
<i class="icon-calendar"></i>
</div>
<span class="pl-2 white-space-nowrap text-danger">Gisteren</span>
</div>
</div>
</td>
<td>
<div class="h-100 d-flex align-items-center justify-content-center">
<div class="a-circle -avatar -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="top" data-trigger="hover" data-html="true" title="" data-custom-class="">
<i class="icon-profile"></i>
</div>
<div class="popover-content">
Geen eigenaar
</div>
</div>
</td>
</tr>
<tr class="m-tableBlock -active">
<td width="100%">
<div class="d-flex align-items-center">
<div class="a-statusCircle">
<svg class="a-statusCircle__svg" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="16" cy="16" r="15.5" fill="white" stroke="black" stroke-opacity="0.15" />
<path d="M19.7908 13.1403C19.5308 12.9039 19.1263 12.9224 18.8887 13.1837L14.9912 17.4753L13.1083 15.5611C12.8598 15.3094 12.456 15.3056 12.2049 15.5535C11.9532 15.8007 11.9493 16.2052 12.1972 16.4569L14.5542 18.8529C14.675 18.9755 14.8385 19.0439 15.0097 19.0439C15.0136 19.0439 15.018 19.0439 15.0219 19.0445C15.1982 19.0407 15.3643 18.9653 15.4825 18.835L19.8342 14.0431C20.0713 13.7811 20.0521 13.3773 19.7908 13.1403Z" fill="black" />
</svg>
</div>
<strong class="h5 ml-3 mb-0 font-base">
Opdrachtgever en contactpersoon
<div class="mt-1">
<div class="a-dotTag font-weight-normal text-muted d-flex align-items-center">
<div class="a-dotTag__dot rounded-circle bg-blue"></div>
<div class="a-dotTag__text">Appartementen</div>
</div>
</div>
</strong>
</div>
</td>
<td class="d-none d-lg-table-cell">
<div class="mr-2">
<div class="a-dateDisplay d-flex align-items-center">
<div class="a-circle -avatar -border -pointer cursor-default">
<i class="icon-calendar"></i>
</div>
<span class="pl-2 white-space-nowrap ">10-01-2022</span>
</div>
</div>
</td>
<td>
<div class="h-100 d-flex align-items-center justify-content-center">
<div class="a-circle -avatar -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="top" data-trigger="hover" data-html="true" title="" data-custom-class="">
<i class="icon-profile"></i>
</div>
<div class="popover-content">
Geen eigenaar
</div>
</div>
</td>
</tr>
<tr class="m-tableBlock">
<td width="100%">
<div class="d-flex align-items-center">
<div class="a-statusCircle">
<svg class="a-statusCircle__svg" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="16" cy="16" r="15.5" fill="white" stroke="black" stroke-opacity="0.15" />
<path d="M19.7908 13.1403C19.5308 12.9039 19.1263 12.9224 18.8887 13.1837L14.9912 17.4753L13.1083 15.5611C12.8598 15.3094 12.456 15.3056 12.2049 15.5535C11.9532 15.8007 11.9493 16.2052 12.1972 16.4569L14.5542 18.8529C14.675 18.9755 14.8385 19.0439 15.0097 19.0439C15.0136 19.0439 15.018 19.0439 15.0219 19.0445C15.1982 19.0407 15.3643 18.9653 15.4825 18.835L19.8342 14.0431C20.0713 13.7811 20.0521 13.3773 19.7908 13.1403Z" fill="black" />
</svg>
</div>
<strong class="h5 ml-3 mb-0 font-base">
Opdrachtgever en contactpersoon
<div class="mt-1">
<div class="a-dotTag font-weight-normal text-muted d-flex align-items-center">
<div class="a-dotTag__dot rounded-circle bg-purple"></div>
<div class="a-dotTag__text">Grondgebonden woningen</div>
</div>
</div>
</strong>
</div>
</td>
<td class="d-none d-lg-table-cell">
<div class="mr-2">
<div class="a-dateDisplay d-flex align-items-center">
<div class="a-circle -avatar -border -pointer cursor-default">
<i class="icon-calendar"></i>
</div>
<span class="pl-2 white-space-nowrap ">10-01-2022</span>
</div>
</div>
</td>
<td>
<div class="h-100 d-flex align-items-center justify-content-center">
<div class="a-circle -avatar -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="top" data-trigger="hover" data-html="true" title="" data-custom-class="">
<i class="icon-profile"></i>
</div>
<div class="popover-content">
Geen eigenaar
</div>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table">
<thead>
<tr>
<th scope="col">
<div class="d-inline-flex align-items-center mb-2">
<div class="o-tableBlocks__collapse d-inline-flex align-items-center user-select-none" data-toggle="collapse" href="#collapseTasks75879" role="button" aria-expanded="true" aria-controls="collapseTasks75879">
<div class="mr-2">
<div class="a-circle -avatar -hover -border -pointer cursor-default">
<i class="icon-arrow-right-filled"></i>
</div>
</div>
<h3 class="a-tableHead d-inline-block font-weight-bold mb-0 mr-2 px-0">
Bevestiging bestelling
</h3>
<span class="font-weight-normal text-muted">(0/3)</span>
</div>
<div class="o-tableBlocks__deadlines ml-3 text-danger d-flex align-items-center user-select-none" data-toggle="popover" data-trigger="hover" data-placement="top" data-html="true" data-content="<span class='text-danger'>3 verstreken deadlines</span>">
<i class="icon-calendar"></i>
<span class="ml-1 font-weight-normal line-height-1">3</span>
</div>
</div>
</th>
</tr>
</thead>
<tbody class="collapse show" id="collapseTasks75879">
<tr class="m-tableBlock">
<td width="100%">
<div class="d-flex align-items-center">
<div class="a-statusCircle">
<svg class="a-statusCircle__svg" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="15" cy="15" r="15" fill="#69D2C2" />
<path d="M18.7908 12.1395C18.5308 11.9031 18.1263 11.9216 17.8887 12.1829L13.9912 16.4745L12.1083 14.5604C11.8598 14.3086 11.456 14.3048 11.2049 14.5527C10.9532 14.7999 10.9493 15.2044 11.1972 15.4561L13.5542 17.8521C13.675 17.9747 13.8385 18.0431 14.0097 18.0431C14.0136 18.0431 14.018 18.0431 14.0219 18.0438C14.1982 18.0399 14.3643 17.9645 14.4825 17.8342L18.8342 13.0423C19.0713 12.7803 19.0521 12.3765 18.7908 12.1395Z" fill="white" />
</svg>
</div>
<strong class="h5 ml-3 mb-0 font-base">
Opdrachtgever en contactpersoon
</strong>
</div>
</td>
<td class="d-none d-lg-table-cell">
<div class="mr-2">
<div class="a-dateDisplay d-flex align-items-center">
<div class="a-circle -avatar bg-success -pointer cursor-default">
<i class="icon-calendar"></i>
</div>
<span class="pl-2 white-space-nowrap text-success">Vandaag</span>
</div>
</div>
</td>
<td>
<div class="h-100 d-flex align-items-center justify-content-center">
<div tabindex="0" class="a-avatar bg-brown rounded-circle d-inline-flex justify-content-center align-items-center" data-toggle="popover" data-placement="top" data-trigger="hover" data-html="true" title="" data-content="<small class='d-block text-center'><strong>Marcella Vonk</strong><br><span class='text-muted'>Accountmanager</span></small>">
MV
</div>
</div>
</td>
</tr>
<tr class="m-tableBlock -disabled">
<td width="100%">
<div class="d-flex align-items-center">
<div class="a-statusCircle">
<svg class="a-statusCircle__svg" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="16" cy="16" r="15.5" fill="white" stroke="black" stroke-opacity="0.15" />
<path d="M19.1687 15.5582C19.0693 15.4588 18.9486 15.4091 18.8065 15.4091H18.6361V14.3863C18.6361 13.7329 18.4018 13.1719 17.933 12.7032C17.4643 12.2344 16.9033 12 16.2498 12C15.5963 12 15.0352 12.2344 14.5665 12.7031C14.0977 13.1719 13.8634 13.7329 13.8634 14.3863V15.4091H13.693C13.551 15.4091 13.4302 15.4588 13.3308 15.5582C13.2313 15.6576 13.1816 15.7784 13.1816 15.9205V18.9887C13.1816 19.1307 13.2314 19.2515 13.3308 19.3509C13.4302 19.4503 13.551 19.5 13.693 19.5H18.8066C18.9487 19.5 19.0694 19.4503 19.1689 19.3509C19.2682 19.2515 19.318 19.1307 19.318 18.9887V15.9204C19.3181 15.7784 19.2682 15.6577 19.1687 15.5582ZM17.6134 15.4091H14.8862V14.3863C14.8862 14.0099 15.0194 13.6885 15.2857 13.4222C15.5521 13.1559 15.8734 13.0228 16.2499 13.0228C16.6263 13.0228 16.9476 13.1559 17.214 13.4222C17.4802 13.6885 17.6134 14.0099 17.6134 14.3863V15.4091Z" fill="black" fill-opacity="0.15" />
</svg>
</div>
<strong class="h5 ml-3 mb-0 font-base">
Opdrachtgever en contactpersoon
</strong>
</div>
</td>
<td class="d-none d-lg-table-cell">
<div class="mr-2">
<div class="a-dateDisplay d-flex align-items-center">
<div class="a-circle -avatar bg-danger -pointer cursor-default">
<i class="icon-calendar"></i>
</div>
<span class="pl-2 white-space-nowrap text-danger">Gisteren</span>
</div>
</div>
</td>
<td>
<div class="h-100 d-flex align-items-center justify-content-center">
<div class="a-circle -avatar -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="top" data-trigger="hover" data-html="true" title="" data-custom-class="">
<i class="icon-profile"></i>
</div>
<div class="popover-content">
Geen eigenaar
</div>
</div>
</td>
</tr>
<tr class="m-tableBlock -active">
<td width="100%">
<div class="d-flex align-items-center">
<div class="a-statusCircle">
<svg class="a-statusCircle__svg" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="16" cy="16" r="15.5" fill="white" stroke="black" stroke-opacity="0.15" />
<path d="M19.7908 13.1403C19.5308 12.9039 19.1263 12.9224 18.8887 13.1837L14.9912 17.4753L13.1083 15.5611C12.8598 15.3094 12.456 15.3056 12.2049 15.5535C11.9532 15.8007 11.9493 16.2052 12.1972 16.4569L14.5542 18.8529C14.675 18.9755 14.8385 19.0439 15.0097 19.0439C15.0136 19.0439 15.018 19.0439 15.0219 19.0445C15.1982 19.0407 15.3643 18.9653 15.4825 18.835L19.8342 14.0431C20.0713 13.7811 20.0521 13.3773 19.7908 13.1403Z" fill="black" />
</svg>
</div>
<strong class="h5 ml-3 mb-0 font-base">
Opdrachtgever en contactpersoon
<div class="mt-1">
<div class="a-dotTag font-weight-normal text-muted d-flex align-items-center">
<div class="a-dotTag__dot rounded-circle bg-blue"></div>
<div class="a-dotTag__text">Appartementen</div>
</div>
</div>
</strong>
</div>
</td>
<td class="d-none d-lg-table-cell">
<div class="mr-2">
<div class="a-dateDisplay d-flex align-items-center">
<div class="a-circle -avatar -border -pointer cursor-default">
<i class="icon-calendar"></i>
</div>
<span class="pl-2 white-space-nowrap ">10-01-2022</span>
</div>
</div>
</td>
<td>
<div class="h-100 d-flex align-items-center justify-content-center">
<div class="a-circle -avatar -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="top" data-trigger="hover" data-html="true" title="" data-custom-class="">
<i class="icon-profile"></i>
</div>
<div class="popover-content">
Geen eigenaar
</div>
</div>
</td>
</tr>
<tr class="m-tableBlock">
<td width="100%">
<div class="d-flex align-items-center">
<div class="a-statusCircle">
<svg class="a-statusCircle__svg" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="16" cy="16" r="15.5" fill="white" stroke="black" stroke-opacity="0.15" />
<path d="M19.7908 13.1403C19.5308 12.9039 19.1263 12.9224 18.8887 13.1837L14.9912 17.4753L13.1083 15.5611C12.8598 15.3094 12.456 15.3056 12.2049 15.5535C11.9532 15.8007 11.9493 16.2052 12.1972 16.4569L14.5542 18.8529C14.675 18.9755 14.8385 19.0439 15.0097 19.0439C15.0136 19.0439 15.018 19.0439 15.0219 19.0445C15.1982 19.0407 15.3643 18.9653 15.4825 18.835L19.8342 14.0431C20.0713 13.7811 20.0521 13.3773 19.7908 13.1403Z" fill="black" />
</svg>
</div>
<strong class="h5 ml-3 mb-0 font-base">
Opdrachtgever en contactpersoon
<div class="mt-1">
<div class="a-dotTag font-weight-normal text-muted d-flex align-items-center">
<div class="a-dotTag__dot rounded-circle bg-purple"></div>
<div class="a-dotTag__text">Grondgebonden woningen</div>
</div>
</div>
</strong>
</div>
</td>
<td class="d-none d-lg-table-cell">
<div class="mr-2">
<div class="a-dateDisplay d-flex align-items-center">
<div class="a-circle -avatar -border -pointer cursor-default">
<i class="icon-calendar"></i>
</div>
<span class="pl-2 white-space-nowrap ">10-01-2022</span>
</div>
</div>
</td>
<td>
<div class="h-100 d-flex align-items-center justify-content-center">
<div class="a-circle -avatar -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="top" data-trigger="hover" data-html="true" title="" data-custom-class="">
<i class="icon-profile"></i>
</div>
<div class="popover-content">
Geen eigenaar
</div>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table">
<thead>
<tr>
<th scope="col">
<div class="d-inline-flex align-items-center mb-2">
<div class="o-tableBlocks__collapse d-inline-flex align-items-center user-select-none" data-toggle="collapse" href="#collapseTasks41058" role="button" aria-expanded="true" aria-controls="collapseTasks41058">
<div class="mr-2">
<div class="a-circle -avatar -hover -border -pointer cursor-default">
<i class="icon-arrow-right-filled"></i>
</div>
</div>
<h3 class="a-tableHead d-inline-block font-weight-bold mb-0 mr-2 px-0">
Welstand
</h3>
<span class="font-weight-normal text-muted">(0/3)</span>
</div>
<div class="o-tableBlocks__deadlines ml-3 text-danger d-flex align-items-center user-select-none" data-toggle="popover" data-trigger="hover" data-placement="top" data-html="true" data-content="<span class='text-danger'>3 verstreken deadlines</span>">
<i class="icon-calendar"></i>
<span class="ml-1 font-weight-normal line-height-1">3</span>
</div>
</div>
</th>
</tr>
</thead>
<tbody class="collapse show" id="collapseTasks41058">
<tr class="m-tableBlock">
<td width="100%">
<div class="d-flex align-items-center">
<div class="a-statusCircle">
<svg class="a-statusCircle__svg" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="15" cy="15" r="15" fill="#69D2C2" />
<path d="M18.7908 12.1395C18.5308 11.9031 18.1263 11.9216 17.8887 12.1829L13.9912 16.4745L12.1083 14.5604C11.8598 14.3086 11.456 14.3048 11.2049 14.5527C10.9532 14.7999 10.9493 15.2044 11.1972 15.4561L13.5542 17.8521C13.675 17.9747 13.8385 18.0431 14.0097 18.0431C14.0136 18.0431 14.018 18.0431 14.0219 18.0438C14.1982 18.0399 14.3643 17.9645 14.4825 17.8342L18.8342 13.0423C19.0713 12.7803 19.0521 12.3765 18.7908 12.1395Z" fill="white" />
</svg>
</div>
<strong class="h5 ml-3 mb-0 font-base">
Opdrachtgever en contactpersoon
</strong>
</div>
</td>
<td class="d-none d-lg-table-cell">
<div class="mr-2">
<div class="a-dateDisplay d-flex align-items-center">
<div class="a-circle -avatar bg-success -pointer cursor-default">
<i class="icon-calendar"></i>
</div>
<span class="pl-2 white-space-nowrap text-success">Vandaag</span>
</div>
</div>
</td>
<td>
<div class="h-100 d-flex align-items-center justify-content-center">
<div tabindex="0" class="a-avatar bg-brown rounded-circle d-inline-flex justify-content-center align-items-center" data-toggle="popover" data-placement="top" data-trigger="hover" data-html="true" title="" data-content="<small class='d-block text-center'><strong>Marcella Vonk</strong><br><span class='text-muted'>Accountmanager</span></small>">
MV
</div>
</div>
</td>
</tr>
<tr class="m-tableBlock -disabled">
<td width="100%">
<div class="d-flex align-items-center">
<div class="a-statusCircle">
<svg class="a-statusCircle__svg" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="16" cy="16" r="15.5" fill="white" stroke="black" stroke-opacity="0.15" />
<path d="M19.1687 15.5582C19.0693 15.4588 18.9486 15.4091 18.8065 15.4091H18.6361V14.3863C18.6361 13.7329 18.4018 13.1719 17.933 12.7032C17.4643 12.2344 16.9033 12 16.2498 12C15.5963 12 15.0352 12.2344 14.5665 12.7031C14.0977 13.1719 13.8634 13.7329 13.8634 14.3863V15.4091H13.693C13.551 15.4091 13.4302 15.4588 13.3308 15.5582C13.2313 15.6576 13.1816 15.7784 13.1816 15.9205V18.9887C13.1816 19.1307 13.2314 19.2515 13.3308 19.3509C13.4302 19.4503 13.551 19.5 13.693 19.5H18.8066C18.9487 19.5 19.0694 19.4503 19.1689 19.3509C19.2682 19.2515 19.318 19.1307 19.318 18.9887V15.9204C19.3181 15.7784 19.2682 15.6577 19.1687 15.5582ZM17.6134 15.4091H14.8862V14.3863C14.8862 14.0099 15.0194 13.6885 15.2857 13.4222C15.5521 13.1559 15.8734 13.0228 16.2499 13.0228C16.6263 13.0228 16.9476 13.1559 17.214 13.4222C17.4802 13.6885 17.6134 14.0099 17.6134 14.3863V15.4091Z" fill="black" fill-opacity="0.15" />
</svg>
</div>
<strong class="h5 ml-3 mb-0 font-base">
Opdrachtgever en contactpersoon
</strong>
</div>
</td>
<td class="d-none d-lg-table-cell">
<div class="mr-2">
<div class="a-dateDisplay d-flex align-items-center">
<div class="a-circle -avatar bg-danger -pointer cursor-default">
<i class="icon-calendar"></i>
</div>
<span class="pl-2 white-space-nowrap text-danger">Gisteren</span>
</div>
</div>
</td>
<td>
<div class="h-100 d-flex align-items-center justify-content-center">
<div class="a-circle -avatar -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="top" data-trigger="hover" data-html="true" title="" data-custom-class="">
<i class="icon-profile"></i>
</div>
<div class="popover-content">
Geen eigenaar
</div>
</div>
</td>
</tr>
<tr class="m-tableBlock -active">
<td width="100%">
<div class="d-flex align-items-center">
<div class="a-statusCircle">
<svg class="a-statusCircle__svg" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="16" cy="16" r="15.5" fill="white" stroke="black" stroke-opacity="0.15" />
<path d="M19.7908 13.1403C19.5308 12.9039 19.1263 12.9224 18.8887 13.1837L14.9912 17.4753L13.1083 15.5611C12.8598 15.3094 12.456 15.3056 12.2049 15.5535C11.9532 15.8007 11.9493 16.2052 12.1972 16.4569L14.5542 18.8529C14.675 18.9755 14.8385 19.0439 15.0097 19.0439C15.0136 19.0439 15.018 19.0439 15.0219 19.0445C15.1982 19.0407 15.3643 18.9653 15.4825 18.835L19.8342 14.0431C20.0713 13.7811 20.0521 13.3773 19.7908 13.1403Z" fill="black" />
</svg>
</div>
<strong class="h5 ml-3 mb-0 font-base">
Opdrachtgever en contactpersoon
<div class="mt-1">
<div class="a-dotTag font-weight-normal text-muted d-flex align-items-center">
<div class="a-dotTag__dot rounded-circle bg-blue"></div>
<div class="a-dotTag__text">Appartementen</div>
</div>
</div>
</strong>
</div>
</td>
<td class="d-none d-lg-table-cell">
<div class="mr-2">
<div class="a-dateDisplay d-flex align-items-center">
<div class="a-circle -avatar -border -pointer cursor-default">
<i class="icon-calendar"></i>
</div>
<span class="pl-2 white-space-nowrap ">10-01-2022</span>
</div>
</div>
</td>
<td>
<div class="h-100 d-flex align-items-center justify-content-center">
<div class="a-circle -avatar -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="top" data-trigger="hover" data-html="true" title="" data-custom-class="">
<i class="icon-profile"></i>
</div>
<div class="popover-content">
Geen eigenaar
</div>
</div>
</td>
</tr>
<tr class="m-tableBlock">
<td width="100%">
<div class="d-flex align-items-center">
<div class="a-statusCircle">
<svg class="a-statusCircle__svg" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="16" cy="16" r="15.5" fill="white" stroke="black" stroke-opacity="0.15" />
<path d="M19.7908 13.1403C19.5308 12.9039 19.1263 12.9224 18.8887 13.1837L14.9912 17.4753L13.1083 15.5611C12.8598 15.3094 12.456 15.3056 12.2049 15.5535C11.9532 15.8007 11.9493 16.2052 12.1972 16.4569L14.5542 18.8529C14.675 18.9755 14.8385 19.0439 15.0097 19.0439C15.0136 19.0439 15.018 19.0439 15.0219 19.0445C15.1982 19.0407 15.3643 18.9653 15.4825 18.835L19.8342 14.0431C20.0713 13.7811 20.0521 13.3773 19.7908 13.1403Z" fill="black" />
</svg>
</div>
<strong class="h5 ml-3 mb-0 font-base">
Opdrachtgever en contactpersoon
<div class="mt-1">
<div class="a-dotTag font-weight-normal text-muted d-flex align-items-center">
<div class="a-dotTag__dot rounded-circle bg-purple"></div>
<div class="a-dotTag__text">Grondgebonden woningen</div>
</div>
</div>
</strong>
</div>
</td>
<td class="d-none d-lg-table-cell">
<div class="mr-2">
<div class="a-dateDisplay d-flex align-items-center">
<div class="a-circle -avatar -border -pointer cursor-default">
<i class="icon-calendar"></i>
</div>
<span class="pl-2 white-space-nowrap ">10-01-2022</span>
</div>
</div>
</td>
<td>
<div class="h-100 d-flex align-items-center justify-content-center">
<div class="a-circle -avatar -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="top" data-trigger="hover" data-html="true" title="" data-custom-class="">
<i class="icon-profile"></i>
</div>
<div class="popover-content">
Geen eigenaar
</div>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table">
<thead>
<tr>
<th scope="col">
<div class="d-inline-flex align-items-center mb-2">
<div class="o-tableBlocks__collapse d-inline-flex align-items-center user-select-none" data-toggle="collapse" href="#collapseTasks53642" role="button" aria-expanded="true" aria-controls="collapseTasks53642">
<div class="mr-2">
<div class="a-circle -avatar -hover -border -pointer cursor-default">
<i class="icon-arrow-right-filled"></i>
</div>
</div>
<h3 class="a-tableHead d-inline-block font-weight-bold mb-0 mr-2 px-0">
Contract
</h3>
<span class="font-weight-normal text-muted">(0/3)</span>
</div>
<div class="o-tableBlocks__deadlines ml-3 text-danger d-flex align-items-center user-select-none" data-toggle="popover" data-trigger="hover" data-placement="top" data-html="true" data-content="<span class='text-danger'>3 verstreken deadlines</span>">
<i class="icon-calendar"></i>
<span class="ml-1 font-weight-normal line-height-1">3</span>
</div>
</div>
</th>
</tr>
</thead>
<tbody class="collapse show" id="collapseTasks53642">
<tr class="m-tableBlock">
<td width="100%">
<div class="d-flex align-items-center">
<div class="a-statusCircle">
<svg class="a-statusCircle__svg" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="15" cy="15" r="15" fill="#69D2C2" />
<path d="M18.7908 12.1395C18.5308 11.9031 18.1263 11.9216 17.8887 12.1829L13.9912 16.4745L12.1083 14.5604C11.8598 14.3086 11.456 14.3048 11.2049 14.5527C10.9532 14.7999 10.9493 15.2044 11.1972 15.4561L13.5542 17.8521C13.675 17.9747 13.8385 18.0431 14.0097 18.0431C14.0136 18.0431 14.018 18.0431 14.0219 18.0438C14.1982 18.0399 14.3643 17.9645 14.4825 17.8342L18.8342 13.0423C19.0713 12.7803 19.0521 12.3765 18.7908 12.1395Z" fill="white" />
</svg>
</div>
<strong class="h5 ml-3 mb-0 font-base">
Opdrachtgever en contactpersoon
</strong>
</div>
</td>
<td class="d-none d-lg-table-cell">
<div class="mr-2">
<div class="a-dateDisplay d-flex align-items-center">
<div class="a-circle -avatar bg-success -pointer cursor-default">
<i class="icon-calendar"></i>
</div>
<span class="pl-2 white-space-nowrap text-success">Vandaag</span>
</div>
</div>
</td>
<td>
<div class="h-100 d-flex align-items-center justify-content-center">
<div tabindex="0" class="a-avatar bg-brown rounded-circle d-inline-flex justify-content-center align-items-center" data-toggle="popover" data-placement="top" data-trigger="hover" data-html="true" title="" data-content="<small class='d-block text-center'><strong>Marcella Vonk</strong><br><span class='text-muted'>Accountmanager</span></small>">
MV
</div>
</div>
</td>
</tr>
<tr class="m-tableBlock -disabled">
<td width="100%">
<div class="d-flex align-items-center">
<div class="a-statusCircle">
<svg class="a-statusCircle__svg" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="16" cy="16" r="15.5" fill="white" stroke="black" stroke-opacity="0.15" />
<path d="M19.1687 15.5582C19.0693 15.4588 18.9486 15.4091 18.8065 15.4091H18.6361V14.3863C18.6361 13.7329 18.4018 13.1719 17.933 12.7032C17.4643 12.2344 16.9033 12 16.2498 12C15.5963 12 15.0352 12.2344 14.5665 12.7031C14.0977 13.1719 13.8634 13.7329 13.8634 14.3863V15.4091H13.693C13.551 15.4091 13.4302 15.4588 13.3308 15.5582C13.2313 15.6576 13.1816 15.7784 13.1816 15.9205V18.9887C13.1816 19.1307 13.2314 19.2515 13.3308 19.3509C13.4302 19.4503 13.551 19.5 13.693 19.5H18.8066C18.9487 19.5 19.0694 19.4503 19.1689 19.3509C19.2682 19.2515 19.318 19.1307 19.318 18.9887V15.9204C19.3181 15.7784 19.2682 15.6577 19.1687 15.5582ZM17.6134 15.4091H14.8862V14.3863C14.8862 14.0099 15.0194 13.6885 15.2857 13.4222C15.5521 13.1559 15.8734 13.0228 16.2499 13.0228C16.6263 13.0228 16.9476 13.1559 17.214 13.4222C17.4802 13.6885 17.6134 14.0099 17.6134 14.3863V15.4091Z" fill="black" fill-opacity="0.15" />
</svg>
</div>
<strong class="h5 ml-3 mb-0 font-base">
Opdrachtgever en contactpersoon
</strong>
</div>
</td>
<td class="d-none d-lg-table-cell">
<div class="mr-2">
<div class="a-dateDisplay d-flex align-items-center">
<div class="a-circle -avatar bg-danger -pointer cursor-default">
<i class="icon-calendar"></i>
</div>
<span class="pl-2 white-space-nowrap text-danger">Gisteren</span>
</div>
</div>
</td>
<td>
<div class="h-100 d-flex align-items-center justify-content-center">
<div class="a-circle -avatar -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="top" data-trigger="hover" data-html="true" title="" data-custom-class="">
<i class="icon-profile"></i>
</div>
<div class="popover-content">
Geen eigenaar
</div>
</div>
</td>
</tr>
<tr class="m-tableBlock -active">
<td width="100%">
<div class="d-flex align-items-center">
<div class="a-statusCircle">
<svg class="a-statusCircle__svg" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="16" cy="16" r="15.5" fill="white" stroke="black" stroke-opacity="0.15" />
<path d="M19.7908 13.1403C19.5308 12.9039 19.1263 12.9224 18.8887 13.1837L14.9912 17.4753L13.1083 15.5611C12.8598 15.3094 12.456 15.3056 12.2049 15.5535C11.9532 15.8007 11.9493 16.2052 12.1972 16.4569L14.5542 18.8529C14.675 18.9755 14.8385 19.0439 15.0097 19.0439C15.0136 19.0439 15.018 19.0439 15.0219 19.0445C15.1982 19.0407 15.3643 18.9653 15.4825 18.835L19.8342 14.0431C20.0713 13.7811 20.0521 13.3773 19.7908 13.1403Z" fill="black" />
</svg>
</div>
<strong class="h5 ml-3 mb-0 font-base">
Opdrachtgever en contactpersoon
<div class="mt-1">
<div class="a-dotTag font-weight-normal text-muted d-flex align-items-center">
<div class="a-dotTag__dot rounded-circle bg-blue"></div>
<div class="a-dotTag__text">Appartementen</div>
</div>
</div>
</strong>
</div>
</td>
<td class="d-none d-lg-table-cell">
<div class="mr-2">
<div class="a-dateDisplay d-flex align-items-center">
<div class="a-circle -avatar -border -pointer cursor-default">
<i class="icon-calendar"></i>
</div>
<span class="pl-2 white-space-nowrap ">10-01-2022</span>
</div>
</div>
</td>
<td>
<div class="h-100 d-flex align-items-center justify-content-center">
<div class="a-circle -avatar -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="top" data-trigger="hover" data-html="true" title="" data-custom-class="">
<i class="icon-profile"></i>
</div>
<div class="popover-content">
Geen eigenaar
</div>
</div>
</td>
</tr>
<tr class="m-tableBlock">
<td width="100%">
<div class="d-flex align-items-center">
<div class="a-statusCircle">
<svg class="a-statusCircle__svg" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="16" cy="16" r="15.5" fill="white" stroke="black" stroke-opacity="0.15" />
<path d="M19.7908 13.1403C19.5308 12.9039 19.1263 12.9224 18.8887 13.1837L14.9912 17.4753L13.1083 15.5611C12.8598 15.3094 12.456 15.3056 12.2049 15.5535C11.9532 15.8007 11.9493 16.2052 12.1972 16.4569L14.5542 18.8529C14.675 18.9755 14.8385 19.0439 15.0097 19.0439C15.0136 19.0439 15.018 19.0439 15.0219 19.0445C15.1982 19.0407 15.3643 18.9653 15.4825 18.835L19.8342 14.0431C20.0713 13.7811 20.0521 13.3773 19.7908 13.1403Z" fill="black" />
</svg>
</div>
<strong class="h5 ml-3 mb-0 font-base">
Opdrachtgever en contactpersoon
<div class="mt-1">
<div class="a-dotTag font-weight-normal text-muted d-flex align-items-center">
<div class="a-dotTag__dot rounded-circle bg-purple"></div>
<div class="a-dotTag__text">Grondgebonden woningen</div>
</div>
</div>
</strong>
</div>
</td>
<td class="d-none d-lg-table-cell">
<div class="mr-2">
<div class="a-dateDisplay d-flex align-items-center">
<div class="a-circle -avatar -border -pointer cursor-default">
<i class="icon-calendar"></i>
</div>
<span class="pl-2 white-space-nowrap ">10-01-2022</span>
</div>
</div>
</td>
<td>
<div class="h-100 d-flex align-items-center justify-content-center">
<div class="a-circle -avatar -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="top" data-trigger="hover" data-html="true" title="" data-custom-class="">
<i class="icon-profile"></i>
</div>
<div class="popover-content">
Geen eigenaar
</div>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table">
<thead>
<tr>
<th scope="col">
<div class="d-inline-flex align-items-center mb-2">
<div class="o-tableBlocks__collapse d-inline-flex align-items-center user-select-none" data-toggle="collapse" href="#collapseTasks47362" role="button" aria-expanded="true" aria-controls="collapseTasks47362">
<div class="mr-2">
<div class="a-circle -avatar -hover -border -pointer cursor-default">
<i class="icon-arrow-right-filled"></i>
</div>
</div>
<h3 class="a-tableHead d-inline-block font-weight-bold mb-0 mr-2 px-0">
Vergunning
</h3>
<span class="font-weight-normal text-muted">(0/3)</span>
</div>
<div class="o-tableBlocks__deadlines ml-3 text-danger d-flex align-items-center user-select-none" data-toggle="popover" data-trigger="hover" data-placement="top" data-html="true" data-content="<span class='text-danger'>3 verstreken deadlines</span>">
<i class="icon-calendar"></i>
<span class="ml-1 font-weight-normal line-height-1">3</span>
</div>
</div>
</th>
</tr>
</thead>
<tbody class="collapse show" id="collapseTasks47362">
<tr class="m-tableBlock">
<td width="100%">
<div class="d-flex align-items-center">
<div class="a-statusCircle">
<svg class="a-statusCircle__svg" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="15" cy="15" r="15" fill="#69D2C2" />
<path d="M18.7908 12.1395C18.5308 11.9031 18.1263 11.9216 17.8887 12.1829L13.9912 16.4745L12.1083 14.5604C11.8598 14.3086 11.456 14.3048 11.2049 14.5527C10.9532 14.7999 10.9493 15.2044 11.1972 15.4561L13.5542 17.8521C13.675 17.9747 13.8385 18.0431 14.0097 18.0431C14.0136 18.0431 14.018 18.0431 14.0219 18.0438C14.1982 18.0399 14.3643 17.9645 14.4825 17.8342L18.8342 13.0423C19.0713 12.7803 19.0521 12.3765 18.7908 12.1395Z" fill="white" />
</svg>
</div>
<strong class="h5 ml-3 mb-0 font-base">
Opdrachtgever en contactpersoon
</strong>
</div>
</td>
<td class="d-none d-lg-table-cell">
<div class="mr-2">
<div class="a-dateDisplay d-flex align-items-center">
<div class="a-circle -avatar bg-success -pointer cursor-default">
<i class="icon-calendar"></i>
</div>
<span class="pl-2 white-space-nowrap text-success">Vandaag</span>
</div>
</div>
</td>
<td>
<div class="h-100 d-flex align-items-center justify-content-center">
<div tabindex="0" class="a-avatar bg-brown rounded-circle d-inline-flex justify-content-center align-items-center" data-toggle="popover" data-placement="top" data-trigger="hover" data-html="true" title="" data-content="<small class='d-block text-center'><strong>Marcella Vonk</strong><br><span class='text-muted'>Accountmanager</span></small>">
MV
</div>
</div>
</td>
</tr>
<tr class="m-tableBlock -disabled">
<td width="100%">
<div class="d-flex align-items-center">
<div class="a-statusCircle">
<svg class="a-statusCircle__svg" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="16" cy="16" r="15.5" fill="white" stroke="black" stroke-opacity="0.15" />
<path d="M19.1687 15.5582C19.0693 15.4588 18.9486 15.4091 18.8065 15.4091H18.6361V14.3863C18.6361 13.7329 18.4018 13.1719 17.933 12.7032C17.4643 12.2344 16.9033 12 16.2498 12C15.5963 12 15.0352 12.2344 14.5665 12.7031C14.0977 13.1719 13.8634 13.7329 13.8634 14.3863V15.4091H13.693C13.551 15.4091 13.4302 15.4588 13.3308 15.5582C13.2313 15.6576 13.1816 15.7784 13.1816 15.9205V18.9887C13.1816 19.1307 13.2314 19.2515 13.3308 19.3509C13.4302 19.4503 13.551 19.5 13.693 19.5H18.8066C18.9487 19.5 19.0694 19.4503 19.1689 19.3509C19.2682 19.2515 19.318 19.1307 19.318 18.9887V15.9204C19.3181 15.7784 19.2682 15.6577 19.1687 15.5582ZM17.6134 15.4091H14.8862V14.3863C14.8862 14.0099 15.0194 13.6885 15.2857 13.4222C15.5521 13.1559 15.8734 13.0228 16.2499 13.0228C16.6263 13.0228 16.9476 13.1559 17.214 13.4222C17.4802 13.6885 17.6134 14.0099 17.6134 14.3863V15.4091Z" fill="black" fill-opacity="0.15" />
</svg>
</div>
<strong class="h5 ml-3 mb-0 font-base">
Opdrachtgever en contactpersoon
</strong>
</div>
</td>
<td class="d-none d-lg-table-cell">
<div class="mr-2">
<div class="a-dateDisplay d-flex align-items-center">
<div class="a-circle -avatar bg-danger -pointer cursor-default">
<i class="icon-calendar"></i>
</div>
<span class="pl-2 white-space-nowrap text-danger">Gisteren</span>
</div>
</div>
</td>
<td>
<div class="h-100 d-flex align-items-center justify-content-center">
<div class="a-circle -avatar -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="top" data-trigger="hover" data-html="true" title="" data-custom-class="">
<i class="icon-profile"></i>
</div>
<div class="popover-content">
Geen eigenaar
</div>
</div>
</td>
</tr>
<tr class="m-tableBlock -active">
<td width="100%">
<div class="d-flex align-items-center">
<div class="a-statusCircle">
<svg class="a-statusCircle__svg" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="16" cy="16" r="15.5" fill="white" stroke="black" stroke-opacity="0.15" />
<path d="M19.7908 13.1403C19.5308 12.9039 19.1263 12.9224 18.8887 13.1837L14.9912 17.4753L13.1083 15.5611C12.8598 15.3094 12.456 15.3056 12.2049 15.5535C11.9532 15.8007 11.9493 16.2052 12.1972 16.4569L14.5542 18.8529C14.675 18.9755 14.8385 19.0439 15.0097 19.0439C15.0136 19.0439 15.018 19.0439 15.0219 19.0445C15.1982 19.0407 15.3643 18.9653 15.4825 18.835L19.8342 14.0431C20.0713 13.7811 20.0521 13.3773 19.7908 13.1403Z" fill="black" />
</svg>
</div>
<strong class="h5 ml-3 mb-0 font-base">
Opdrachtgever en contactpersoon
<div class="mt-1">
<div class="a-dotTag font-weight-normal text-muted d-flex align-items-center">
<div class="a-dotTag__dot rounded-circle bg-blue"></div>
<div class="a-dotTag__text">Appartementen</div>
</div>
</div>
</strong>
</div>
</td>
<td class="d-none d-lg-table-cell">
<div class="mr-2">
<div class="a-dateDisplay d-flex align-items-center">
<div class="a-circle -avatar -border -pointer cursor-default">
<i class="icon-calendar"></i>
</div>
<span class="pl-2 white-space-nowrap ">10-01-2022</span>
</div>
</div>
</td>
<td>
<div class="h-100 d-flex align-items-center justify-content-center">
<div class="a-circle -avatar -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="top" data-trigger="hover" data-html="true" title="" data-custom-class="">
<i class="icon-profile"></i>
</div>
<div class="popover-content">
Geen eigenaar
</div>
</div>
</td>
</tr>
<tr class="m-tableBlock">
<td width="100%">
<div class="d-flex align-items-center">
<div class="a-statusCircle">
<svg class="a-statusCircle__svg" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="16" cy="16" r="15.5" fill="white" stroke="black" stroke-opacity="0.15" />
<path d="M19.7908 13.1403C19.5308 12.9039 19.1263 12.9224 18.8887 13.1837L14.9912 17.4753L13.1083 15.5611C12.8598 15.3094 12.456 15.3056 12.2049 15.5535C11.9532 15.8007 11.9493 16.2052 12.1972 16.4569L14.5542 18.8529C14.675 18.9755 14.8385 19.0439 15.0097 19.0439C15.0136 19.0439 15.018 19.0439 15.0219 19.0445C15.1982 19.0407 15.3643 18.9653 15.4825 18.835L19.8342 14.0431C20.0713 13.7811 20.0521 13.3773 19.7908 13.1403Z" fill="black" />
</svg>
</div>
<strong class="h5 ml-3 mb-0 font-base">
Opdrachtgever en contactpersoon
<div class="mt-1">
<div class="a-dotTag font-weight-normal text-muted d-flex align-items-center">
<div class="a-dotTag__dot rounded-circle bg-purple"></div>
<div class="a-dotTag__text">Grondgebonden woningen</div>
</div>
</div>
</strong>
</div>
</td>
<td class="d-none d-lg-table-cell">
<div class="mr-2">
<div class="a-dateDisplay d-flex align-items-center">
<div class="a-circle -avatar -border -pointer cursor-default">
<i class="icon-calendar"></i>
</div>
<span class="pl-2 white-space-nowrap ">10-01-2022</span>
</div>
</div>
</td>
<td>
<div class="h-100 d-flex align-items-center justify-content-center">
<div class="a-circle -avatar -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="top" data-trigger="hover" data-html="true" title="" data-custom-class="">
<i class="icon-profile"></i>
</div>
<div class="popover-content">
Geen eigenaar
</div>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table">
<thead>
<tr>
<th scope="col">
<div class="d-inline-flex align-items-center mb-2">
<div class="o-tableBlocks__collapse d-inline-flex align-items-center user-select-none" data-toggle="collapse" href="#collapseTasks61060" role="button" aria-expanded="true" aria-controls="collapseTasks61060">
<div class="mr-2">
<div class="a-circle -avatar -hover -border -pointer cursor-default">
<i class="icon-arrow-right-filled"></i>
</div>
</div>
<h3 class="a-tableHead d-inline-block font-weight-bold mb-0 mr-2 px-0">
Verkoop
</h3>
<span class="font-weight-normal text-muted">(0/3)</span>
</div>
<div class="o-tableBlocks__deadlines ml-3 text-danger d-flex align-items-center user-select-none" data-toggle="popover" data-trigger="hover" data-placement="top" data-html="true" data-content="<span class='text-danger'>3 verstreken deadlines</span>">
<i class="icon-calendar"></i>
<span class="ml-1 font-weight-normal line-height-1">3</span>
</div>
</div>
</th>
</tr>
</thead>
<tbody class="collapse show" id="collapseTasks61060">
<tr class="m-tableBlock">
<td width="100%">
<div class="d-flex align-items-center">
<div class="a-statusCircle">
<svg class="a-statusCircle__svg" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="15" cy="15" r="15" fill="#69D2C2" />
<path d="M18.7908 12.1395C18.5308 11.9031 18.1263 11.9216 17.8887 12.1829L13.9912 16.4745L12.1083 14.5604C11.8598 14.3086 11.456 14.3048 11.2049 14.5527C10.9532 14.7999 10.9493 15.2044 11.1972 15.4561L13.5542 17.8521C13.675 17.9747 13.8385 18.0431 14.0097 18.0431C14.0136 18.0431 14.018 18.0431 14.0219 18.0438C14.1982 18.0399 14.3643 17.9645 14.4825 17.8342L18.8342 13.0423C19.0713 12.7803 19.0521 12.3765 18.7908 12.1395Z" fill="white" />
</svg>
</div>
<strong class="h5 ml-3 mb-0 font-base">
Opdrachtgever en contactpersoon
</strong>
</div>
</td>
<td class="d-none d-lg-table-cell">
<div class="mr-2">
<div class="a-dateDisplay d-flex align-items-center">
<div class="a-circle -avatar bg-success -pointer cursor-default">
<i class="icon-calendar"></i>
</div>
<span class="pl-2 white-space-nowrap text-success">Vandaag</span>
</div>
</div>
</td>
<td>
<div class="h-100 d-flex align-items-center justify-content-center">
<div tabindex="0" class="a-avatar bg-brown rounded-circle d-inline-flex justify-content-center align-items-center" data-toggle="popover" data-placement="top" data-trigger="hover" data-html="true" title="" data-content="<small class='d-block text-center'><strong>Marcella Vonk</strong><br><span class='text-muted'>Accountmanager</span></small>">
MV
</div>
</div>
</td>
</tr>
<tr class="m-tableBlock -disabled">
<td width="100%">
<div class="d-flex align-items-center">
<div class="a-statusCircle">
<svg class="a-statusCircle__svg" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="16" cy="16" r="15.5" fill="white" stroke="black" stroke-opacity="0.15" />
<path d="M19.1687 15.5582C19.0693 15.4588 18.9486 15.4091 18.8065 15.4091H18.6361V14.3863C18.6361 13.7329 18.4018 13.1719 17.933 12.7032C17.4643 12.2344 16.9033 12 16.2498 12C15.5963 12 15.0352 12.2344 14.5665 12.7031C14.0977 13.1719 13.8634 13.7329 13.8634 14.3863V15.4091H13.693C13.551 15.4091 13.4302 15.4588 13.3308 15.5582C13.2313 15.6576 13.1816 15.7784 13.1816 15.9205V18.9887C13.1816 19.1307 13.2314 19.2515 13.3308 19.3509C13.4302 19.4503 13.551 19.5 13.693 19.5H18.8066C18.9487 19.5 19.0694 19.4503 19.1689 19.3509C19.2682 19.2515 19.318 19.1307 19.318 18.9887V15.9204C19.3181 15.7784 19.2682 15.6577 19.1687 15.5582ZM17.6134 15.4091H14.8862V14.3863C14.8862 14.0099 15.0194 13.6885 15.2857 13.4222C15.5521 13.1559 15.8734 13.0228 16.2499 13.0228C16.6263 13.0228 16.9476 13.1559 17.214 13.4222C17.4802 13.6885 17.6134 14.0099 17.6134 14.3863V15.4091Z" fill="black" fill-opacity="0.15" />
</svg>
</div>
<strong class="h5 ml-3 mb-0 font-base">
Opdrachtgever en contactpersoon
</strong>
</div>
</td>
<td class="d-none d-lg-table-cell">
<div class="mr-2">
<div class="a-dateDisplay d-flex align-items-center">
<div class="a-circle -avatar bg-danger -pointer cursor-default">
<i class="icon-calendar"></i>
</div>
<span class="pl-2 white-space-nowrap text-danger">Gisteren</span>
</div>
</div>
</td>
<td>
<div class="h-100 d-flex align-items-center justify-content-center">
<div class="a-circle -avatar -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="top" data-trigger="hover" data-html="true" title="" data-custom-class="">
<i class="icon-profile"></i>
</div>
<div class="popover-content">
Geen eigenaar
</div>
</div>
</td>
</tr>
<tr class="m-tableBlock -active">
<td width="100%">
<div class="d-flex align-items-center">
<div class="a-statusCircle">
<svg class="a-statusCircle__svg" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="16" cy="16" r="15.5" fill="white" stroke="black" stroke-opacity="0.15" />
<path d="M19.7908 13.1403C19.5308 12.9039 19.1263 12.9224 18.8887 13.1837L14.9912 17.4753L13.1083 15.5611C12.8598 15.3094 12.456 15.3056 12.2049 15.5535C11.9532 15.8007 11.9493 16.2052 12.1972 16.4569L14.5542 18.8529C14.675 18.9755 14.8385 19.0439 15.0097 19.0439C15.0136 19.0439 15.018 19.0439 15.0219 19.0445C15.1982 19.0407 15.3643 18.9653 15.4825 18.835L19.8342 14.0431C20.0713 13.7811 20.0521 13.3773 19.7908 13.1403Z" fill="black" />
</svg>
</div>
<strong class="h5 ml-3 mb-0 font-base">
Opdrachtgever en contactpersoon
<div class="mt-1">
<div class="a-dotTag font-weight-normal text-muted d-flex align-items-center">
<div class="a-dotTag__dot rounded-circle bg-blue"></div>
<div class="a-dotTag__text">Appartementen</div>
</div>
</div>
</strong>
</div>
</td>
<td class="d-none d-lg-table-cell">
<div class="mr-2">
<div class="a-dateDisplay d-flex align-items-center">
<div class="a-circle -avatar -border -pointer cursor-default">
<i class="icon-calendar"></i>
</div>
<span class="pl-2 white-space-nowrap ">10-01-2022</span>
</div>
</div>
</td>
<td>
<div class="h-100 d-flex align-items-center justify-content-center">
<div class="a-circle -avatar -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="top" data-trigger="hover" data-html="true" title="" data-custom-class="">
<i class="icon-profile"></i>
</div>
<div class="popover-content">
Geen eigenaar
</div>
</div>
</td>
</tr>
<tr class="m-tableBlock">
<td width="100%">
<div class="d-flex align-items-center">
<div class="a-statusCircle">
<svg class="a-statusCircle__svg" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="16" cy="16" r="15.5" fill="white" stroke="black" stroke-opacity="0.15" />
<path d="M19.7908 13.1403C19.5308 12.9039 19.1263 12.9224 18.8887 13.1837L14.9912 17.4753L13.1083 15.5611C12.8598 15.3094 12.456 15.3056 12.2049 15.5535C11.9532 15.8007 11.9493 16.2052 12.1972 16.4569L14.5542 18.8529C14.675 18.9755 14.8385 19.0439 15.0097 19.0439C15.0136 19.0439 15.018 19.0439 15.0219 19.0445C15.1982 19.0407 15.3643 18.9653 15.4825 18.835L19.8342 14.0431C20.0713 13.7811 20.0521 13.3773 19.7908 13.1403Z" fill="black" />
</svg>
</div>
<strong class="h5 ml-3 mb-0 font-base">
Opdrachtgever en contactpersoon
<div class="mt-1">
<div class="a-dotTag font-weight-normal text-muted d-flex align-items-center">
<div class="a-dotTag__dot rounded-circle bg-purple"></div>
<div class="a-dotTag__text">Grondgebonden woningen</div>
</div>
</div>
</strong>
</div>
</td>
<td class="d-none d-lg-table-cell">
<div class="mr-2">
<div class="a-dateDisplay d-flex align-items-center">
<div class="a-circle -avatar -border -pointer cursor-default">
<i class="icon-calendar"></i>
</div>
<span class="pl-2 white-space-nowrap ">10-01-2022</span>
</div>
</div>
</td>
<td>
<div class="h-100 d-flex align-items-center justify-content-center">
<div class="a-circle -avatar -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="top" data-trigger="hover" data-html="true" title="" data-custom-class="">
<i class="icon-profile"></i>
</div>
<div class="popover-content">
Geen eigenaar
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="o-tableBlocks -taskList">
{% set tables = ["Bestelling", "Offerte", "Bevestiging bestelling", "Welstand", "Contract", "Vergunning", "Verkoop"] %}
{% for table in tables %}
{% set rand=range(1,99999)|random %}
<table class="table">
<thead>
<tr>
<th scope="col">
<div class="d-inline-flex align-items-center mb-2">
<div class="o-tableBlocks__collapse d-inline-flex align-items-center user-select-none" data-toggle="collapse" href="#collapseTasks{{rand}}" role="button" aria-expanded="true" aria-controls="collapseTasks{{rand}}">
<div class="mr-2">
{% render '@circle', {size:"avatar", icon:"arrow-right-filled"}, true %}
</div>
{% render '@table-head', {text:table, large:true}, true %}
</div>
<div class="o-tableBlocks__deadlines ml-3 text-danger d-flex align-items-center user-select-none" data-toggle="popover" data-trigger="hover" data-placement="top" data-html="true" data-content="<span class='text-danger'>3 verstreken deadlines</span>">
<i class="icon-calendar"></i>
<span class="ml-1 font-weight-normal line-height-1">3</span>
</div>
</div>
</th>
</tr>
</thead>
<tbody class="collapse show" id="collapseTasks{{rand}}">
{% for i in range(0, 4) -%}
<tr class="m-tableBlock{% if i == 1 %} -disabled{% elseif i == 2 %} -active{% endif %}">
<td width="100%">
<div class="d-flex align-items-center">
{% if i == 0 %}
{% render '@status-circle--done' %}
{% elif i == 1 %}
{% render '@status-circle--locked' %}
{% else %}
{% render '@status-circle' %}
{% endif %}
<strong class="h5 ml-3 mb-0 font-base">
Opdrachtgever en contactpersoon
{% if i == 2 %}
<div class="mt-1">
{% render '@dot-tag' %}
</div>
{% elif i == 3 %}
<div class="mt-1">
{% render '@dot-tag--purple' %}
</div>
{% endif %}
</strong>
</div>
</td>
<td class="d-none d-lg-table-cell">
{% if i == 0 %}
{% set color="success" %}
{% set date="Vandaag" %}
{% elif i == 1 %}
{% set color="danger" %}
{% set date="Gisteren" %}
{% else %}
{% set color="" %}
{% set date="10-01-2022" %}
{% endif %}
<div class="mr-2">
{% render '@date-display', {color:color, date:date}, true %}
</div>
</td>
<td>
<div class="h-100 d-flex align-items-center justify-content-center">
{% if i < 1 %}
{% render '@avatar--tooltip' %}
{% else %}
{% render '@circle--avatar', {icon:"profile", tooltip_html:"Geen eigenaar", placement:"top", trigger:"hover", custom_class:""}, true %}
{% endif %}
</div>
</td>
</tr>
{% endfor %}
</tbody>
</table>
{% endfor %}
</div>
{
"loading": false,
"loading_row": false
}
The task list displays all tasks that belong to the phases.
When a task is selected, the class .-active must be added to the <tr> tag.
When a task is completed, no additional class has to be added to the <tr> tag.
When a task is not available because other tasks have not yet been completed, the class .-disabled and .pointer-events-none must be added to the <tr> tag so the task cannot be selected.