radiantassure/Vue/Historiquecontestation/index.php

<?php 
    $this->titre = "Intersanté - Historique Dossiers Contestés"; 
?>
<input class="sr-only" id="nomForm" name="nomForm" value="histocontest">

<div class="card shadow-lg border-0 mb-4" style="border-radius: 15px;">
	<div class="card-header bg-primary text-white py-3" style="border-radius: 15px 15px 0 0;">
		<div class="row align-items-center">
			<div class="col-8 text-center">
				<h4 id="h4_titre" class="mb-2 text-center">
					<i class="fas fa-exclamation-triangle me-2"></i>
                <?= _("Dossiers contestés") ?>
				</h4>
			</div>
		</div>
	</div>
	
    <div class="row">
        <div class="col-12">
           <!-- Filtres de recherche -->
            <div class="card shadow-sm mb-8">
                <div class="card-body">
                    <div class="row g-3 align-items-end">
                        <!-- Période du -->
                        <div class="col-12 col-sm-6 col-md-4 col-lg-4">
                            <label class="form-label fw-bold"><?= _("Période du") ?></label>
                            <input class="form-control form-control-sm datepicker" type="text" 
                                   id="d1" name="d1" 
                                   value="<?= dateLang($_SESSION['debutExercice_C'], $_SESSION['lang']) ?>" required>
                        </div>
                        
                        <!-- Période au -->
                        <div class="col-12 col-sm-6 col-md-4 col-lg-4">
                            <label class="form-label fw-bold"><?= _("au") ?></label>
                            <input class="form-control form-control-sm datepicker" type="text" 
                                   id="d2" name="d2" 
                                   value="<?= dateCouranteLang($_SESSION['lang']) ?>" required>
                        </div>
                        
                        <!-- Bouton Actualiser -->
                        <div class="col-12 col-md-4 col-lg-4">
                            <button type="button" class="btn btn-primary w-100 btn_autre" 
                                    onclick="javascript:listerdossiercontestes();">
                                <i class="fas fa-sync-alt me-2"></i><?= _("Actualiser") ?>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Résultats -->
			<div id="div_dossiers" class="table-responsive">
				
            </div>
        </div>
    </div>
</div>

<style>
.legend-title {
    color: #2c3e50;
    font-weight: 600;
    padding-bottom: 10px;
    border-bottom: 2px solid #3498db;
}

.card {
    border: none;
    border-radius: 10px;
}

.form-label {
    font-size: 0.9rem;
}

.table th {
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
}

.table td {
    font-size: 0.85rem;
    vertical-align: middle;
}

/* Styles pour mobile */
@media (max-width: 768px) {
    .card-body {
        padding: 1rem;
    }
    
    .btn {
        padding: 0.35rem 0.5rem;
        font-size: 0.8rem;
    }
    
    .table-responsive {
        font-size: 0.8rem;
    }
    
    .badge {
        font-size: 0.75rem;
    }
}

/* Version ultra-mobile (petits écrans) */
@media (max-width: 576px) {
    .table th, .table td {
        padding: 0.4rem;
    }
    
    .btn-sm {
        padding: 0.25rem 0.4rem;
    }
}

/* Tooltip personnalisé */
[tooltip] {
    position: relative;
}

[tooltip]::before {
    content: attr(tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.25rem 0.5rem;
    background-color: #333;
    color: #fff;
    border-radius: 4px;
    font-size: 0.75rem;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease;
}

[tooltip]:hover::before {
    opacity: 1;
    visibility: visible;
}
</style>

<script>
// Script pour améliorer l'expérience mobile
document.addEventListener('DOMContentLoaded', function() {
    // Adapter la table sur mobile
    function adaptTableForMobile() {
        const table = document.getElementById('div_dossiers');
        if (window.innerWidth < 768) {
            // Ajouter des attributs tooltip pour les icônes
            document.querySelectorAll('.fa-check-circle, .fa-times-circle').forEach(icon => {
                icon.setAttribute('tooltip', icon.getAttribute('title'));
                icon.removeAttribute('title');
            });
        }
    }
    
    // Initial adaptation
    adaptTableForMobile();
    
    // Re-adapt on window resize
    window.addEventListener('resize', adaptTableForMobile);
});
</script>