Show code
<div class="whiteContainer -current -noBackground mt-3 -active listToggle" id="missingDocuments"
data-trigger-content="listToggle">
<div class="whiteContainer__title text-on-bg wrap">
<span class="pt-1 pb-1">Documents manquants
<span class="badge -theme-2 ml-1">2</span>
</span>
<span class="ml-auto flex grid--align--center g-0-5"></span>
<span class="ml-auto flex grid--align--end g-0-5">
<button type="button" data-trigger="">
<span class="icon-arrow icon--size-4"><x class="path1"></x><x class="path2"></x><x
class="path3"></x></span>
</button>
</span>
</div>
<div class="whiteContainer__container" data-content-card-toggle="default">
<div id="results">
<div class="cardMultitasks">
<div class="cardMultitasks__left">
<a class="card-detail multiline-responsive">
<div class="card-detail__icon icon sm-hide">
<span class="icon-attachment icon--size-4"><x class="path1"></x><x
class="path2"></x>
</span>
</div>
<div class="card-detail__content ml-0-5">
<span class="font-bold">Catégorie manquante</span>
</div>
<div class="card-detail__right">
<span class="badge -red font-bold"> Manquant</span>
</div>
</a>
</div>
<div class="cardMultitasks__right">
<a href="#"><span class="icon-contract-template -border"><x
class="path1"></x><x class="path2"></x><x class="path3"></x><x
class="path4"></x><x class="path5"></x><x class="path6"></x></span>
</a>
<form method="POST" action="#" x-data="{ uploading: false }"
x-ref="uploadForm" enctype="multipart/form-data">
<input type="hidden" name="_token"
value="UxZ0MWPIJ1fuVXQPFuu0e6UzLeujVpnPi55v7Rq6"
autocomplete="off"> <input name="type" type="hidden" value="454">
<input class="hidden" name="file" type="file"
@change="$refs.uploadForm.submit()" @cancel="uploading = false"
x-ref="uploadInput">
<button type="button" x-show="!uploading"
@click="$refs.uploadInput.click(); uploading = true;"><span
class="icon-add -border"><x class="path1"></x><x
class="path2"></x><x class="path3"></x></span>
</button>
<div x-show="uploading" style="display: none;">
<div class="text-center" style="width: 50px; height: 50px;">
<img src="/images/loader.gif"
style="border-radius:16px; height: 50px;">
</div>
</div>
</form>
</div>
</div>
<div class="cardMultitasks">
<div class="cardMultitasks__left">
<a class="card-detail multiline-responsive">
<div class="card-detail__icon icon sm-hide">
<span class="icon-attachment icon--size-4 sm-hide"><x class="path1"></x><x
class="path2"></x></span>
</div>
<div class="card-detail__content ml-0-5">
<span class="font-bold">Catégorie expire bientôt</span>
</div>
<div class="card-detail__right">
<span class="badge -yellow font-bold"> Expire bientôt</span>
</div>
</a>
</div>
<div class="cardMultitasks__right">
<a href="#"><span class="icon-contract-template -border sm-hide"><x
class="path1"></x><x class="path2"></x><x class="path3"></x><x
class="path4"></x><x class="path5"></x><x class="path6"></x></span>
</a>
<form method="POST" action="#" x-data="{ uploading: false }"
x-ref="uploadForm" enctype="multipart/form-data">
<input type="hidden" name="_token"
value="UxZ0MWPIJ1fuVXQPFuu0e6UzLeujVpnPi55v7Rq6"
autocomplete="off"> <input name="type" type="hidden" value="480">
<input class="hidden" name="file" type="file"
@change="$refs.uploadForm.submit()" @cancel="uploading = false"
x-ref="uploadInput">
<button type="button" x-show="!uploading"
@click="$refs.uploadInput.click(); uploading = true;"><span
class="icon-add -border sm-hide"><x class="path1"></x><x
class="path2"></x><x class="path3"></x></span>
</button>
<div x-show="uploading" style="display: none;">
<div class="text-center" style="width: 50px; height: 50px;">
<img src="/images/loader.gif"
style="border-radius:16px; height: 50px;">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="whiteContainer -current -noBackground mt-3">
<div class="whiteContainer__title text-on-bg wrap">
<span class="pt-1 pb-1">Documents envoyés</span>
<span class="ml-auto flex grid--align--center g-0-5"></span>
</div>
<div class="whiteContainer__container" data-content-card-toggle="default">
<div id="results">
<div class="cardToggle">
<div class="cardToggle__header cursor-pointer">
<div class="header__title" data-trigger="">
<a class="card-detail multiline-responsive">
<div class="card-detail__content">
<span>Catégorie document envoyé Catégorie document envoyé</span>
<span class="font-normal">document_envoyé.jpeg</span>
</div>
<div class="card-detail__right g-0-5">
<span class="badge -blue sm-hide">Reçu le 10/02/2026</span>
<span class="badge -yellow">En attente de validation</span>
</div>
</a>
</div>
<div class="header__buttons">
<button type="button" data-trigger="" class="">
<span class="icon-arrow -border sm-hide"><x class="path1"></x><x
class="path2"></x><x class="path3"></x></span>
</button>
</div>
</div>
<div class="cardToggle__content pb-0 ">
<div class="whiteContainer">
<div class="whiteContainer__container">
<img src="#" alt="" loading="lazy" width="100%">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="whiteContainer -current -noBackground mt-3 -active listToggle"
data-trigger-content="listToggle">
<div class="whiteContainer__title text-on-bg wrap">
<span class="pt-1 pb-1">En attente de signature
<span class="badge -theme-2 ml-1">1</span>
</span>
<span class="ml-auto flex grid--align--center g-0-5"></span>
<span class="ml-auto flex grid--align--end g-0-5">
<button type="button" data-trigger="">
<span class="icon-arrow icon--size-4 sm-hide"><x class="path1"></x><x class="path2"></x><x
class="path3"></x></span>
</button>
</span>
</div>
<div class="whiteContainer__container" data-content-card-toggle="default">
<div id="results">
<div class="cardMultitasks">
<div class="cardMultitasks__left">
<a class="card-detail multiline-responsive" href="#" target="_blank">
<div class="card-detail__icon icon sm-hide">
<span class="icon-attachment icon--size-4"><x class="path1"></x><x
class="path2"></x></span>
</div>
<div class="card-detail__content ml-0-5">
<span class="font-bold">document_en_attente.pdf</span>
</div>
<div class="card-detail__right g-0-5">
<span class="badge -yellow">En attente de signature</span>
</div>
</a>
</div>
<div class="cardMultitasks__right">
<div class="cardMultitasks__right">
<a href="#"><span class="icon-sign -border sm-hide"><x class="path1"></x><x
class="path2"></x><x class="path3"></x><x class="path4"></x><x
class="path5"></x><x class="path6"></x></span>
</a>
</div>
<a href="#" download="2026-01-20_12-48-02.pdf" target="_blank"><span
class="icon-download -border"><x class="path1"></x><x
class="path2"></x><x class="path3"></x><x class="path4"></x></span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="whiteContainer -current -noBackground mt-3">
<div class="whiteContainer__title text-on-bg wrap">
<span class="pt-1 pb-1">Documents
<span class="badge -theme-2 ml-1">5</span>
</span>
<span class="ml-auto flex grid--align--center g-0-5"></span>
</div>
<div class="whiteContainer__container" data-content-card-toggle="default">
<div id="results">
<div class="cardToggle">
<div class="cardToggle__header cursor-pointer">
<div class="header__title" data-trigger="">
<a class="card-detail multiline-responsive">
<div class="card-detail__icon icon sm-hide">
<span class="icon-folder icon--size-4"><x class="path1"></x><x
class="path2"></x><x class="path3"></x><x
class="path4"></x><x class="path5"></x><x
class="path6"></x>
</span>
</div>
<div class="card-detail__content ml-0-5">
<span>Catégorie incomplet</span>
</div>
<div class="card-detail__right g-0-5">
<span class="badge -yellow">Incomplet</span>
</div>
</a>
</div>
<div class="header__buttons">
<a href="#" download="2022-08-26_16-55-00.png" target="_blank"><span
class="icon-contract-template -border"><x class="path1"></x><x
class="path2"></x><x class="path3"></x><x class="path4"></x><x
class="path5"></x><x class="path6"></x></span>
</a>
<button type="button" data-trigger="" class="">
<span class="icon-arrow -border"><x class="path1"></x><x
class="path2"></x><x class="path3"></x>
</span>
</button>
</div>
</div>
<div class="cardToggle__content pb-0 ">
<div class="cardMultitasks pl-2">Pas de document</div>
</div>
</div>
<div class="cardToggle">
<div class="cardToggle__header cursor-pointer">
<div class="header__title" data-trigger="">
<a class="card-detail multiline-responsive">
<div class="card-detail__icon icon sm-hide">
<span class="icon-folder icon--size-4"><x class="path1"></x><x
class="path2"></x><x class="path3"></x><x
class="path4"></x><x class="path5"></x><x
class="path6"></x>
</span>
</div>
<div class="card-detail__content ml-0-5">
Catégorie complet
</div>
<div class="card-detail__right g-0-5">
<span class="badge -green">Complet</span>
</div>
</a>
</div>
<div class="header__buttons">
<a href="#" download="2022-10-28_10-34-38.jpg" target="_blank">
<span class="icon-contract-template -border"><x class="path1"></x><x
class="path2"></x><x class="path3"></x><x class="path4"></x><x
class="path5"></x><x class="path6"></x>
</span>
</a>
<button type="button" data-trigger="" class="">
<span class="icon-arrow -border"><x class="path1"></x><x
class="path2"></x><x class="path3"></x>
</span>
</button>
</div>
</div>
<div class="cardToggle__content pb-0 ">
<div class="cardMultitasks">
<div class="cardMultitasks__left">
<a class="card-detail multiline-responsive" href="#" target="_blank">
<div class="card-detail__icon icon">
<span class="icon-attachment icon--size-4 sm-hide"><x
class="path1"></x><x class="path2"></x>
</span>
</div>
<div class="card-detail__content ml-0-5">
<span class="font-bold">document_categorie_complet.png</span>
<span>5.74 Ko</span>
</div>
<div class="card-detail__right g-0-5"></div>
</a>
</div>
<div class="cardMultitasks__right">
<a href="#" download="2026-01-20_14-49-06.png" target="_blank">
<span class="icon-download -border sm-hide"><x class="path1"></x><x
class="path2"></x><x class="path3"></x><x class="path4"></x>
</span>
</a>
</div>
</div>
</div>
</div>
<div class="cardToggle">
<div class="cardToggle__header cursor-pointer">
<div class="header__title" data-trigger="">
<a class="card-detail multiline-responsive">
<div class="card-detail__icon icon sm-hide">
<span class="icon-folder icon--size-4"><x class="path1"></x><x
class="path2"></x><x class="path3"></x><x
class="path4"></x><x class="path5"></x><x
class="path6"></x>
</span>
</div>
<div class="card-detail__content ml-0-5">
<span>Catégorie expire bientôt</span>
</div>
<div class="card-detail__right g-0-5">
<span class="badge -green">Complet</span>
</div>
</a>
</div>
<div class="header__buttons">
<button type="button" data-trigger="" class="">
<span class="icon-arrow -border"><x class="path1"></x><x
class="path2"></x><x class="path3"></x>
</span>
</button>
</div>
</div>
<div class="cardToggle__content pb-0 ">
<div class="cardMultitasks">
<div class="cardMultitasks__left">
<a class="card-detail multiline-responsive" href="#" target="_blank">
<div class="card-detail__icon icon">
<span class="icon-attachment icon--size-4 sm-hide"><x
class="path1"></x><x class="path2"></x>
</span>
</div>
<div class="card-detail__content ml-0-5">
<span class="font-bold">document_expire_bientôt.pdf</span>
<span>277.37 Ko</span>
</div>
<div class="card-detail__right g-0-5">
<span class="badge -outlined -red">Expiring Soon</span>
</div>
</a>
</div>
<div class="cardMultitasks__right">
<a href="#" download="2026-01-19_11-02-02.pdf" target="_blank">
<span class="icon-download -border sm-hide"><x class="path1"></x><x
class="path2"></x><x class="path3"></x><x class="path4"></x>
</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="whiteContainer -current -noBackground mt-3">
<div class="whiteContainer__title text-on-bg wrap">
<span class="pt-1 pb-1">Autres documents
<span class="badge -theme-2 ml-1">2</span>
</span>
<span class="ml-auto flex grid--align--center g-0-5"></span>
</div>
<div class="whiteContainer__container" data-content-card-toggle="default">
<div id="results2">
<div class="cardMultitasks">
<div class="cardMultitasks__left">
<a class="card-detail multiline-responsive" href="#" target="_blank">
<div class="card-detail__icon icon sm-hide">
<span class="icon-attachment icon--size-4"><x class="path1"></x><x
class="path2"></x>
</span>
</div>
<div class="card-detail__content ml-0-5">
<span class="font-bold">en_attente_signature.pdf</span>
</div>
<div class="card-detail__right g-0-5">
<span class="badge -yellow">En attente de signature</span>
</div>
</a>
</div>
<div class="cardMultitasks__right">
<div class="cardMultitasks__right">
<a href="#">
<span class="icon-sign -border"><x class="path1"></x><x
class="path2"></x><x class="path3"></x><x class="path4"></x><x
class="path5"></x><x class="path6"></x>
</span>
</a>
</div>
<a href="#" download="2026-01-20_12-48-02.pdf" target="_blank">
<span class="icon-download -border"><x class="path1"></x><x
class="path2"></x><x class="path3"></x><x class="path4"></x>
</span>
</a>
</div>
</div>
<div class="cardMultitasks">
<div class="cardMultitasks__left">
<a class="card-detail multiline-responsive" href="#" target="_blank">
<div class="card-detail__icon icon sm-hide">
<span class="icon-attachment icon--size-4"><x class="path1"></x><x
class="path2"></x>
</span>
</div>
<div class="card-detail__content ml-0-5">
<span class="font-bold">document_signé.pdf</span>
</div>
<div class="card-detail__right g-0-5">
<span class="badge -green">Signé</span>
</div>
</a>
</div>
<div class="cardMultitasks__right">
<a href="#" download="2026-01-19_11-05-45.pdf" target="_blank">
<span class="icon-download -border"><x class="path1"></x><x
class="path2"></x><x class="path3"></x><x class="path4"></x>
</span>
</a>
</div>
</div>
</div>
</div>
</div>
