production/Vue/Tableauproduction/index.php

<?php $this->titre = "INTER SANTE - Tableau de bord de production"; ?>
<legend><?= _("Tableau de bord de production")?></legend>
<div class="container">
<div id="dashboardProductionVue">
    <div class="row">
        <div class="col-md-2">
            <label for="">Date debut</label>
        <input type="date" class="form-control" v-model="itemToSave.dateDebut">
        </div>
        <div class="col-md-2">
        <label for="">Date debut</label>
        <input type="date" class="form-control" v-model="itemToSave.dateFin">
        </div>
        <div class="col-md-2">
        <label for="">Garant</label>
        <select name="garant" class="form-select">
            <option v-for="(item, index) in items">{{item.libelle}}</option>
        </select>
        </div>
        <div class="col-md-1">
            <br>
        <button class="btn btn-info"> <i class="fa fa-search"></i></button>
        </div>
    </div>

  
    <div class="row">
        <div class="col-md-4 col-xl-3">
            <div class="card bg-c-blue order-card">
                <div class="card-block">
                    <h6 class="m-b-20">Bénéficiaire</h6>
                    <h2 class="text-right">
                        <i class="fa fa-user f-left"></i>
                        <span>0</span></h2>
                    <!-- <p class="m-b-0">Completed Orders<span class="f-right">351</span></p>
                    <p class="m-b-0">Completed Orders<span class="f-right">351</span></p> -->

                </div>
            </div>
        </div>
        
        <div class="col-md-4 col-xl-3">
            <div class="card bg-c-green order-card">
                <div class="card-block">
                    <h6 class="m-b-20">Conjoints</h6>
                    <h2 class="text-right"><i class="fa fa-rocket f-left"></i><span>0</span></h2>
                    <!-- <p class="m-b-0">Completed Orders<span class="f-right">351</span></p> -->
                </div>
            </div>
        </div>
        
        <div class="col-md-4 col-xl-3">
            <div class="card bg-c-yellow order-card">
                <div class="card-block">
                    <h6 class="m-b-20">Enfants</h6>
                    <h2 class="text-right"><i class="fa fa-refresh f-left"></i><span>0</span></h2>
                    <!-- <p class="m-b-0">Completed Orders<span class="f-right">351</span></p> -->
                </div>
            </div>
        </div>
        
        <div class="col-md-4 col-xl-3">
            <div class="card bg-c-pink order-card">
                <div class="card-block">
                    <h6 class="m-b-20">Garants</h6>
                    <h2 class="text-right"><i class="fa fa-credit-card f-left"></i><span>0</span></h2>
                    <!-- <p class="m-b-0">Completed Orders<span class="f-right">351</span></p> -->
                </div>
            </div>
        </div>
        <div class="col-md-4 col-xl-3">
            <div class="card bg-c-pink order-card">
                <div class="card-block">
                    <h6 class="m-b-20">Intermédiaires</h6>
                    <h2 class="text-right"><i class="fa fa-credit-card f-left"></i><span>0</span></h2>
                    <!-- <p class="m-b-0">Completed Orders<span class="f-right">351</span></p> -->
                </div>
            </div>
        </div>
        <div class="col-md-4 col-xl-3">
            <div class="card bg-c-blue order-card">
                <div class="card-block">
                    <h6 class="m-b-20">Polices</h6>
                    <h2 class="text-right">
                        <i class="fa fa-user f-left"></i>
                        <span>0</span></h2>
                    <!-- <p class="m-b-0">Completed Orders<span class="f-right">351</span></p>
                    <p class="m-b-0">Completed Orders<span class="f-right">351</span></p> -->

                </div>
            </div>
        </div>
        <div class="col-md-4 col-xl-3">
            <div class="card bg-c-yellow order-card">
                <div class="card-block">
                    <h6 class="m-b-20">Collèges</h6>
                    <h2 class="text-right"><i class="fa fa-refresh f-left"></i><span>0</span></h2>
                    <!-- <p class="m-b-0">Completed Orders<span class="f-right">351</span></p> -->
                </div>
            </div>
        </div>
        <div class="col-md-4 col-xl-3">
            <div class="card bg-c-yellow order-card">
                <div class="card-block">
                    <h6 class="m-b-20">Souscripteurs</h6>
                    <h2 class="text-right"><i class="fa fa-refresh f-left"></i><span>0</span></h2>
                    <!-- <p class="m-b-0">Completed Orders<span class="f-right">351</span></p> -->
                </div>
            </div>
        </div>
	</div>
</div>

    
    <!-- <div class="row">
        <div class="col-md-4">
        <canvas id="myChart"></canvas>
        </div>
        <div class="col-md-4">
        <canvas id="myChart2"></canvas>
        </div>
        <div class="col-md-4">
        <canvas id="myChart3"></canvas>
        </div>
    </div> -->
    
</div>