manus-admin/demat-facturation
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Checkpoint: Tous les boutons d'action (Excel, ZIP, Valider tout BAP, Importer, Supprimer, Dévalider BAP, Relancer) et la recherche sont maintenant sur une seule ligne dans le cartouche vert pastel, avec les filtres période et statut en dessous.

Browse Source
This commit is contained in:
Manus
2026-07-30 12:48:20 +00:00
parent 295ba29329
commit bcb307bde1
1 changed files with 27 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
client/src/pages/InvoicesBAP.tsx
View File

@@ -587,17 +587,19 @@ export default function InvoicesBAP() {
<h1 className="text-3xl font-bold">Factures BAP</h1> <h1 className="text-3xl font-bold">Factures BAP</h1>
<p className="text-gray-500 mt-1">Factures non-abonnement (Abonnement = NON)</p> <p className="text-gray-500 mt-1">Factures non-abonnement (Abonnement = NON)</p>
</div> </div>
{/* Barre d'actions : 2 lignes */} {/* ===== CARTOUCHE FILTRES + ACTIONS BAP ===== */}
<div className="space-y-2"> <div className="rounded-xl border border-emerald-100 bg-emerald-50/60 px-4 py-3 mb-4 shadow-sm">
{/* Ligne 1 : Excel, ZIP, Valider tout en BAP, Importer */}
<div className="flex flex-wrap gap-2"> {/* Ligne 1 : Boutons d'action + Recherche */}
<div className="flex gap-2 items-center flex-wrap mb-3">
<Button <Button
onClick={handleExportExcel} onClick={handleExportExcel}
disabled={selectedIds.length === 0 || exportExcelMutation.isPending} disabled={selectedIds.length === 0 || exportExcelMutation.isPending}
variant="outline" variant="outline"
className="border-green-600 text-green-600 hover:bg-green-50" size="sm"
className="bg-white border-green-300 text-green-700 hover:bg-green-50"
> >
<FileSpreadsheet className="w-4 h-4 mr-2" /> <FileSpreadsheet className="w-4 h-4 mr-1" />
Excel ({selectedIds.length}) Excel ({selectedIds.length})
</Button> </Button>
<Button <Button
@@ -631,9 +633,10 @@ export default function InvoicesBAP() {
}} }}
disabled={selectedIds.length === 0 || isZipDownloading} disabled={selectedIds.length === 0 || isZipDownloading}
variant="outline" variant="outline"
className="border-indigo-500 text-indigo-600 hover:bg-indigo-50" size="sm"
className="bg-white border-indigo-300 text-indigo-700 hover:bg-indigo-50"
> >
<FolderDown className={`w-4 h-4 mr-2 ${isZipDownloading ? 'animate-bounce' : ''}`} /> <FolderDown className={`w-4 h-4 mr-1 ${isZipDownloading ? 'animate-bounce' : ''}`} />
{isZipDownloading ? 'ZIP...' : `ZIP (${selectedIds.length})`} {isZipDownloading ? 'ZIP...' : `ZIP (${selectedIds.length})`}
</Button> </Button>
<Button <Button
@@ -643,18 +646,16 @@ export default function InvoicesBAP() {
} }
}} }}
disabled={validateBAPBulkMutation.isPending} disabled={validateBAPBulkMutation.isPending}
size="sm"
className="bg-green-700 hover:bg-green-800 text-white" className="bg-green-700 hover:bg-green-800 text-white"
> >
<ShieldCheck className="w-4 h-4 mr-2" /> <ShieldCheck className="w-4 h-4 mr-1" />
{validateBAPBulkMutation.isPending ? "Validation en cours..." : "Valider tout en BAP"} {validateBAPBulkMutation.isPending ? "Validation..." : "Valider tout BAP"}
</Button> </Button>
<Button onClick={() => setLocation("/upload")}> <Button onClick={() => setLocation("/upload")} size="sm" className="bg-white border-emerald-300 text-emerald-700 hover:bg-emerald-50" variant="outline">
<FileText className="w-4 h-4 mr-2" /> <FileText className="w-4 h-4 mr-1" />
Importer Importer
</Button> </Button>
</div>
{/* Ligne 2 : Supprimer, Dévalider BAP, Relancer */}
<div className="flex flex-wrap gap-2">
<Button <Button
onClick={async () => { onClick={async () => {
if (confirm(`Voulez-vous vraiment supprimer ${selectedIds.length} facture(s) ?`)) { if (confirm(`Voulez-vous vraiment supprimer ${selectedIds.length} facture(s) ?`)) {
@@ -672,8 +673,9 @@ export default function InvoicesBAP() {
}} }}
disabled={selectedIds.length === 0} disabled={selectedIds.length === 0}
variant="destructive" variant="destructive"
size="sm"
> >
<Trash2 className="w-4 h-4 mr-2" /> <Trash2 className="w-4 h-4 mr-1" />
Supprimer ({selectedIds.length}) Supprimer ({selectedIds.length})
</Button> </Button>
<Button <Button
@@ -689,9 +691,10 @@ export default function InvoicesBAP() {
}} }}
disabled={selectedIds.length === 0 || devalidateBAPMutation.isPending} disabled={selectedIds.length === 0 || devalidateBAPMutation.isPending}
variant="outline" variant="outline"
className="border-orange-500 text-orange-600 hover:bg-orange-50" size="sm"
className="bg-white border-orange-300 text-orange-700 hover:bg-orange-50"
> >
<ShieldCheck className="w-4 h-4 mr-2 rotate-180" /> <ShieldCheck className="w-4 h-4 mr-1 rotate-180" />
{devalidateBAPMutation.isPending ? "Dévalidation..." : `Dévalider BAP (${selectedIds.length})`} {devalidateBAPMutation.isPending ? "Dévalidation..." : `Dévalider BAP (${selectedIds.length})`}
</Button> </Button>
<Button <Button
@@ -706,26 +709,20 @@ export default function InvoicesBAP() {
}} }}
disabled={selectedIds.length === 0 || reprocessMutation.isPending} disabled={selectedIds.length === 0 || reprocessMutation.isPending}
variant="outline" variant="outline"
className="border-purple-500 text-purple-600 hover:bg-purple-50" size="sm"
className="bg-white border-purple-300 text-purple-700 hover:bg-purple-50"
> >
<RefreshCw className={`w-4 h-4 mr-2 ${reprocessMutation.isPending ? 'animate-spin' : ''}`} /> <RefreshCw className={`w-4 h-4 mr-1 ${reprocessMutation.isPending ? 'animate-spin' : ''}`} />
{reprocessMutation.isPending ? `Retraitement...` : `Relancer (${selectedIds.length})`} {reprocessMutation.isPending ? `Retraitement...` : `Relancer (${selectedIds.length})`}
</Button> </Button>
</div> {/* Recherche à droite */}
</div> <div className="relative flex-1 min-w-[200px] ml-auto">
{/* ===== CARTOUCHE FILTRES BAP ===== */}
<div className="rounded-xl border border-emerald-100 bg-emerald-50/60 px-4 py-3 mb-4 shadow-sm">
{/* Ligne 1 : Recherche */}
<div className="flex gap-3 items-center flex-wrap mb-3">
<div className="relative flex-1 min-w-[220px]">
<Search className="absolute left-3 top-1/2 -translate-y-1/2 text-emerald-400 w-4 h-4" /> <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-emerald-400 w-4 h-4" />
<Input <Input
placeholder="Rechercher par fournisseur ou numéro..." placeholder="Rechercher par fournisseur ou numéro..."
value={searchQuery} value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)} onChange={(e) => setSearchQuery(e.target.value)}
className="pl-10 bg-white border-emerald-200 focus:border-emerald-400" className="pl-10 bg-white border-emerald-200 focus:border-emerald-400 h-8 text-sm"
/> />
</div> </div>
</div> </div>