matsen-tool-fe/matsen-tool/src/app/home/home.component.html

<div class="home-container pb-5">
    <div class="pt-4">
        <div class="container">
            <h1>Hi {{ user?.firstName }}!</h1>
            <p><a routerLink="/users">Manage Users</a></p>
        </div>
    </div>

    <div class="container">
        <div class="row pt-4 pb-4 d-flex">
            <div class="col d-flex">
                <a class="card" routerLink="/customer" routerLinkActive="active">
                    <div class="card-body position-relative bi bi-emoji-heart-eyes">
                        <h3 class="position-absolute m-0">Kunden</h3>
                    </div>
                </a>
            </div>
            <div class="col d-flex">
                <a class="card" routerLink="/supplier" routerLinkActive="active">
                    <div class="card-body position-relative bi bi-emoji-kiss">
                        <h3 class="position-absolute m-0">Dienstleister</h3>
                    </div>
                </a>
            </div>
            <div class="col d-flex">
                <a class="card" routerLink="/service" routerLinkActive="active">
                    <div class="card-body position-relative bi bi-emoji-smile">
                        <h3 class="position-absolute m-0">Lieferanten</h3>
                    </div>
                </a>
            </div>
        </div>
    </div>

    <div class="container">
        <div class="row pt-4 pb-4 d-flex">
            <div class="col d-flex">
                <a class="card" routerLink="/products" routerLinkActive="active">
                    <div class="card-body position-relative bi bi-droplet-fill">
                        <h3 class="position-absolute m-0">Produkte</h3>
                    </div>
                </a>
            </div>
            <div class="col d-flex">
                <a class="card" routerLink="/tasks" routerLinkActive="active">
                    <div class="card-body position-relative bi bi-list-check">
                        <h3 class="position-absolute m-0">Aufgaben</h3>
                    </div>
                </a>
            </div>
            <div class="col d-flex">
                <a class="card" routerLink="/documents" routerLinkActive="active">
                    <div class="card-body position-relative bi bi-journals">
                        <h3 class="position-absolute m-0">Dokumente</h3>
                    </div>
                </a>
            </div>
        </div>
    </div>

    <div class="container spt-accordion">

        <h2>Meine Aufgaben</h2>

        <div class="card mb-3 p-3">
            <div class="position-relative" data-bs-toggle="collapse" data-bs-target="#collapseExample"
                 aria-expanded="false" aria-controls="collapseExample">
                <h3 class="m-0">Matsen AG</h3>
                <span class="info d-flex position-absolute">
                    <span class="due-date">01.10.2023</span>
                    <span class="importance" data-importance="1"></span>
                </span>
                <h2 class="m-0">Wichtige Info: Unbedingt melden!</h2>
            </div>
            <div class="collapse" id="collapseExample">
                <div class="pt-3 pe-5 position-relative">
                    <p class="m-0">Some placeholder content for the collapse component. This panel is hidden by default
                        but revealed when the user activates the relevant trigger.</p>
                    <span class="position-absolute bi bi-pencil p-2" data-type="user-tool" data-action="edit"></span>
                </div>
            </div>
        </div>

        <div class="card mb-3 p-3">
            <div class="position-relative" data-bs-toggle="collapse" data-bs-target="#collapseExample2"
                 aria-expanded="false" aria-controls="collapseExample2">
                <h3 class="m-0">Matsen AG</h3>
                <span class="info d-flex position-absolute">
                    <span class="due-date">01.10.2023</span>
                    <span class="importance" data-importance="1"></span>
                </span>
                <h2 class="m-0">Wichtige Info: Unbedingt melden!</h2>
            </div>
            <div class="collapse" id="collapseExample2">
                <div class="pt-3 pe-5 position-relative">
                    <p class="m-0">Some placeholder content for the collapse component. This panel is hidden by default
                        but revealed when the user activates the relevant trigger.</p>
                    <span class="position-absolute bi bi-pencil p-2" data-type="user-tool" data-action="edit"></span>
                </div>
            </div>
        </div>

    </div>

</div>
<ul>
    <li *ngFor="let user of users">
        <h2>{{ user.id }} - {{ user.lastName }}</h2>
        <p>{{ user.email }}</p>
    </li>
</ul>
<ul>
    <li *ngFor="let post of posts">
        <h2>{{ post.id }} - {{ post.owner }}</h2>
        <p>{{ post.message }}</p>
    </li>
</ul>