Optimization on Calendar Page
This commit is contained in:
@@ -145,7 +145,7 @@ export default function BudgetContent() {
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="bg-white rounded-lg shadow-sm p-8">
|
||||
<div className="bg-white rounded-lg shadow-sm p-4 sm:p-6 md:p-8">
|
||||
<div className="text-center text-sm text-gray-500">Chargement...</div>
|
||||
</div>
|
||||
);
|
||||
@@ -153,15 +153,15 @@ export default function BudgetContent() {
|
||||
|
||||
if (!data || data.prescripteurs.length === 0) {
|
||||
return (
|
||||
<div className="bg-white rounded-lg shadow-sm p-8">
|
||||
<div className="bg-white rounded-lg shadow-sm p-4 sm:p-6 md:p-8">
|
||||
<div className="text-center text-gray-500">
|
||||
<p className="mb-4">Aucun prescripteur configuré.</p>
|
||||
<p className="text-sm mb-6">
|
||||
<p className="mb-3 sm:mb-4 text-sm sm:text-base">Aucun prescripteur configuré.</p>
|
||||
<p className="text-xs sm:text-sm mb-4 sm:mb-6 px-2">
|
||||
Ajoutez des prescripteurs dans la configuration pour pouvoir définir leurs budgets.
|
||||
</p>
|
||||
<Link
|
||||
href="/dashboard/parametres/configuration"
|
||||
className="inline-flex items-center gap-2 px-4 py-2 bg-lblue text-white rounded-lg hover:bg-dblue transition-colors text-sm font-medium"
|
||||
className="inline-flex items-center justify-center gap-2 px-4 py-2.5 sm:py-2 bg-lblue text-white rounded-lg hover:bg-dblue transition-colors text-sm font-medium w-full sm:w-auto"
|
||||
>
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
|
||||
@@ -177,7 +177,7 @@ export default function BudgetContent() {
|
||||
const { global, prescripteurs } = data;
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="space-y-4 sm:space-y-6">
|
||||
{/* Blocs budget global - style dashboard */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-3 gap-4 sm:gap-5">
|
||||
<div className="bg-white rounded-xl shadow-sm p-4 sm:p-6 border border-gray-100 hover:shadow-lg hover:border-dyellow/30 transition-all duration-300 group">
|
||||
@@ -225,26 +225,28 @@ export default function BudgetContent() {
|
||||
|
||||
{/* Liste des budgets par prescripteur */}
|
||||
<div className="bg-white rounded-lg shadow-sm overflow-hidden">
|
||||
<div className="px-6 py-4 border-b border-gray-200">
|
||||
<h2 className="text-lg font-semibold text-gray-900">Budget par prescripteur</h2>
|
||||
<p className="text-sm text-gray-500 mt-1">
|
||||
Cliquez sur un prescripteur pour voir l'historique des participations. Utilisez « Ajouter » pour créditer le budget.
|
||||
<div className="px-4 sm:px-6 py-3 sm:py-4 border-b border-gray-200">
|
||||
<h2 className="text-base sm:text-lg font-semibold text-gray-900">Budget par prescripteur</h2>
|
||||
<p className="text-xs sm:text-sm text-gray-500 mt-1">
|
||||
Cliquez sur un prescripteur pour voir l'historique. Utilisez « Ajouter » pour créditer le budget.
|
||||
</p>
|
||||
</div>
|
||||
<div className="overflow-x-auto">
|
||||
|
||||
{/* Vue desktop - Tableau */}
|
||||
<div className="hidden md:block overflow-x-auto">
|
||||
<table className="min-w-full divide-y divide-gray-200">
|
||||
<thead className="bg-gray-50">
|
||||
<tr>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
<th className="px-4 sm:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
Prescripteur
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
<th className="px-4 sm:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
Consommé
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
<th className="px-4 sm:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
Restant
|
||||
</th>
|
||||
<th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider w-56">
|
||||
<th className="px-4 sm:px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider min-w-[180px]">
|
||||
Actions
|
||||
</th>
|
||||
</tr>
|
||||
@@ -257,7 +259,7 @@ export default function BudgetContent() {
|
||||
className="hover:bg-gray-50 cursor-pointer"
|
||||
onClick={() => setExpandedPrescripteur(expandedPrescripteur === item.value ? null : item.value)}
|
||||
>
|
||||
<td className="px-6 py-4 whitespace-nowrap">
|
||||
<td className="px-4 sm:px-6 py-3 sm:py-4 whitespace-nowrap">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm font-medium text-gray-900">{item.value}</span>
|
||||
{item.historique.length > 0 && (
|
||||
@@ -274,10 +276,10 @@ export default function BudgetContent() {
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-orange-600 font-medium">
|
||||
<td className="px-4 sm:px-6 py-3 sm:py-4 whitespace-nowrap text-sm text-orange-600 font-medium">
|
||||
{formatEuro(item.consommé)}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap">
|
||||
<td className="px-4 sm:px-6 py-3 sm:py-4 whitespace-nowrap">
|
||||
<span
|
||||
className={`text-sm font-medium ${
|
||||
item.consommé > item.montant || (item.montant > 0 && item.restant < item.montant * 0.2)
|
||||
@@ -288,7 +290,7 @@ export default function BudgetContent() {
|
||||
{formatEuro(item.restant)}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-right" onClick={(e) => e.stopPropagation()}>
|
||||
<td className="px-4 sm:px-6 py-3 sm:py-4 whitespace-nowrap text-right" onClick={(e) => e.stopPropagation()}>
|
||||
<div className="flex items-center gap-2 justify-end">
|
||||
<button
|
||||
onClick={() => {
|
||||
@@ -320,12 +322,12 @@ export default function BudgetContent() {
|
||||
</tr>
|
||||
{expandedPrescripteur === item.value && item.historique.length > 0 && (
|
||||
<tr key={`${item.value}-hist`} className="bg-gray-50">
|
||||
<td colSpan={4} className="px-6 py-4">
|
||||
<td colSpan={4} className="px-4 sm:px-6 py-4">
|
||||
<div className="space-y-2">
|
||||
<h4 className="text-xs font-semibold text-gray-700 uppercase tracking-wide">
|
||||
Historique des participations
|
||||
</h4>
|
||||
<div className="rounded-lg border border-gray-200 overflow-hidden">
|
||||
<div className="rounded-lg border border-gray-200 overflow-x-auto">
|
||||
<table className="min-w-full text-sm">
|
||||
<thead className="bg-gray-100">
|
||||
<tr>
|
||||
@@ -362,7 +364,7 @@ export default function BudgetContent() {
|
||||
)}
|
||||
{expandedPrescripteur === item.value && item.historique.length === 0 && (
|
||||
<tr className="bg-gray-50">
|
||||
<td colSpan={4} className="px-6 py-4">
|
||||
<td colSpan={4} className="px-4 sm:px-6 py-4">
|
||||
<p className="text-sm text-gray-500 italic">Aucune participation enregistrée pour ce prescripteur.</p>
|
||||
</td>
|
||||
</tr>
|
||||
@@ -373,7 +375,111 @@ export default function BudgetContent() {
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div className="px-6 py-3 bg-gray-50 border-t border-gray-200">
|
||||
{/* Vue mobile - Cartes */}
|
||||
<div className="md:hidden divide-y divide-gray-200">
|
||||
{prescripteurs.map((item) => (
|
||||
<div key={item.value} className="p-4">
|
||||
<button
|
||||
type="button"
|
||||
className="w-full text-left"
|
||||
onClick={() => setExpandedPrescripteur(expandedPrescripteur === item.value ? null : item.value)}
|
||||
>
|
||||
<div className="flex items-center justify-between gap-2 mb-3">
|
||||
<span className="font-medium text-gray-900">{item.value}</span>
|
||||
{item.historique.length > 0 && (
|
||||
<svg
|
||||
className={`w-4 h-4 text-gray-400 flex-shrink-0 transition-transform ${expandedPrescripteur === item.value ? 'rotate-90' : ''}`}
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
)}
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-2 text-sm">
|
||||
<div>
|
||||
<span className="text-xs text-gray-500 uppercase">Consommé</span>
|
||||
<p className="text-orange-600 font-medium">{formatEuro(item.consommé)}</p>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-xs text-gray-500 uppercase">Restant</span>
|
||||
<p
|
||||
className={`font-medium ${
|
||||
item.consommé > item.montant || (item.montant > 0 && item.restant < item.montant * 0.2)
|
||||
? 'text-red-600'
|
||||
: 'text-lgreen'
|
||||
}`}
|
||||
>
|
||||
{formatEuro(item.restant)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
<div className="flex flex-col sm:flex-row gap-2 pt-3 border-t border-gray-200 mt-3" onClick={(e) => e.stopPropagation()}>
|
||||
<button
|
||||
onClick={() => {
|
||||
setAddModalPrescripteur(item.value);
|
||||
setAddAmount('');
|
||||
}}
|
||||
className="flex-1 inline-flex items-center justify-center gap-1.5 px-3 py-2.5 text-sm font-medium text-white bg-lgreen rounded-lg hover:bg-dgreen transition-colors"
|
||||
>
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
|
||||
</svg>
|
||||
Ajouter
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
setRectifierModalPrescripteur(item);
|
||||
setRectifierBudget(item.montant.toString().replace('.', ','));
|
||||
setRectifierAjustement((item.ajustementConsomme ?? 0).toString().replace('.', ','));
|
||||
}}
|
||||
className="flex-1 inline-flex items-center justify-center gap-1.5 px-3 py-2.5 text-sm font-medium text-white bg-lblue rounded-lg hover:bg-dblue transition-colors"
|
||||
>
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
|
||||
</svg>
|
||||
Rectifier
|
||||
</button>
|
||||
</div>
|
||||
{expandedPrescripteur === item.value && item.historique.length > 0 && (
|
||||
<div className="mt-4 pt-3 border-t border-gray-200 space-y-2">
|
||||
<h4 className="text-xs font-semibold text-gray-700 uppercase tracking-wide">Historique</h4>
|
||||
<div className="space-y-1 max-h-48 overflow-y-auto">
|
||||
{item.historique.map((h) => (
|
||||
<div
|
||||
key={h.id}
|
||||
className="flex items-center justify-between gap-2 py-2 px-3 bg-gray-50 rounded-lg text-sm"
|
||||
>
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="font-medium text-gray-900 truncate">{h.adherentNom}</p>
|
||||
<p className="text-xs text-gray-500">{formatDate(h.date)}</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 flex-shrink-0">
|
||||
<span className="text-orange-600 font-medium">{formatEuro(h.montant)}</span>
|
||||
<Link
|
||||
href="/dashboard/factures"
|
||||
className="text-lblue hover:underline text-xs font-medium"
|
||||
>
|
||||
Voir
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{expandedPrescripteur === item.value && item.historique.length === 0 && (
|
||||
<p className="mt-4 pt-3 border-t border-gray-200 text-sm text-gray-500 italic">
|
||||
Aucune participation enregistrée.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="px-4 sm:px-6 py-3 bg-gray-50 border-t border-gray-200">
|
||||
<p className="text-xs text-gray-500">
|
||||
Les prescripteurs sont définis dans{' '}
|
||||
<Link href="/dashboard/parametres/configuration" className="text-lblue hover:underline">
|
||||
@@ -387,7 +493,7 @@ export default function BudgetContent() {
|
||||
{/* Modal Rectifier */}
|
||||
{rectifierModalPrescripteur && (
|
||||
<div
|
||||
className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50"
|
||||
className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 overflow-y-auto"
|
||||
onClick={() => {
|
||||
setRectifierModalPrescripteur(null);
|
||||
setRectifierBudget('');
|
||||
@@ -395,7 +501,7 @@ export default function BudgetContent() {
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="bg-white rounded-xl shadow-xl max-w-sm w-full p-6"
|
||||
className="bg-white rounded-xl shadow-xl max-w-sm w-full p-6 my-4"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
@@ -442,21 +548,21 @@ export default function BudgetContent() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-3 justify-end">
|
||||
<div className="flex flex-col-reverse sm:flex-row gap-3 justify-end">
|
||||
<button
|
||||
onClick={() => {
|
||||
setRectifierModalPrescripteur(null);
|
||||
setRectifierBudget('');
|
||||
setRectifierAjustement('');
|
||||
}}
|
||||
className="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 transition-colors"
|
||||
className="w-full sm:w-auto px-4 py-2.5 sm:py-2 text-sm font-medium text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 transition-colors"
|
||||
>
|
||||
Annuler
|
||||
</button>
|
||||
<button
|
||||
onClick={handleRectifier}
|
||||
disabled={savingId === rectifierModalPrescripteur.value}
|
||||
className="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-white bg-lblue rounded-lg hover:bg-dblue disabled:opacity-50 transition-colors"
|
||||
className="w-full sm:w-auto inline-flex items-center justify-center gap-2 px-4 py-2.5 sm:py-2 text-sm font-medium text-white bg-lblue rounded-lg hover:bg-dblue disabled:opacity-50 transition-colors"
|
||||
>
|
||||
{savingId === rectifierModalPrescripteur.value ? (
|
||||
<>
|
||||
@@ -483,14 +589,14 @@ export default function BudgetContent() {
|
||||
{/* Modal Ajouter de l'argent */}
|
||||
{addModalPrescripteur && (
|
||||
<div
|
||||
className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50"
|
||||
className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 overflow-y-auto"
|
||||
onClick={() => {
|
||||
setAddModalPrescripteur(null);
|
||||
setAddAmount('');
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="bg-white rounded-xl shadow-xl max-w-sm w-full p-6"
|
||||
className="bg-white rounded-xl shadow-xl max-w-sm w-full p-6 my-4"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
@@ -514,20 +620,20 @@ export default function BudgetContent() {
|
||||
/>
|
||||
<span className="text-sm text-gray-500">€</span>
|
||||
</div>
|
||||
<div className="flex gap-3 justify-end">
|
||||
<div className="flex flex-col-reverse sm:flex-row gap-3 justify-end">
|
||||
<button
|
||||
onClick={() => {
|
||||
setAddModalPrescripteur(null);
|
||||
setAddAmount('');
|
||||
}}
|
||||
className="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 transition-colors"
|
||||
className="w-full sm:w-auto px-4 py-2.5 sm:py-2 text-sm font-medium text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 transition-colors"
|
||||
>
|
||||
Annuler
|
||||
</button>
|
||||
<button
|
||||
onClick={handleAddMoney}
|
||||
disabled={savingId === addModalPrescripteur}
|
||||
className="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-white bg-lgreen rounded-lg hover:bg-dgreen disabled:opacity-50 transition-colors"
|
||||
className="w-full sm:w-auto inline-flex items-center justify-center gap-2 px-4 py-2.5 sm:py-2 text-sm font-medium text-white bg-lgreen rounded-lg hover:bg-dgreen disabled:opacity-50 transition-colors"
|
||||
>
|
||||
{savingId === addModalPrescripteur ? (
|
||||
<>
|
||||
|
||||
Reference in New Issue
Block a user