Add filtering options to view reconciliation status

Update the reconciliation page to include a new filter allowing users to view all, validated, or non-validated reconciliation statuses, replacing the previous hide validated option.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 1e4433b5-47ab-464c-b663-fea2e53367dd
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/1957c339-2757-4d1f-8e92-e9f71a1ce58e/1e4433b5-47ab-464c-b663-fea2e53367dd/zhCtuJP

.replit

@@ -27,6 +27,10 @@ externalPort = 3002
 localPort = 41343
 externalPort = 3001
 
+[[ports]]
+localPort = 42073
+externalPort = 3003
+
 [workflows]
 runButton = "Project"
 

client/src/pages/BLReconciliation.tsx

@@ -52,7 +52,7 @@ export default function BLReconciliation() {
   const [searchTerm, setSearchTerm] = useState("");
   const [selectedDelivery, setSelectedDelivery] = useState<any>(null);
   const [isModalOpen, setIsModalOpen] = useState(false);
-  const [hideValidated, setHideValidated] = useState(false);
+  const [filterStatus, setFilterStatus] = useState<"all" | "validated" | "not_validated">("all");
   
   // État pour le modal d'envoi de facture
   const [showInvoiceModal, setShowInvoiceModal] = useState(false);
@@ -630,7 +630,10 @@ export default function BLReconciliation() {
   const filterDeliveries = (deliveries: any[]) => {
     return deliveries.filter((delivery: any) => {
       // Filtre par statut validé
-      if (hideValidated && delivery.reconciled) {
+      if (filterStatus === "validated" && !delivery.reconciled) {
+        return false;
+      }
+      if (filterStatus === "not_validated" && delivery.reconciled) {
         return false;
       }
       
@@ -743,6 +746,31 @@ export default function BLReconciliation() {
               />
             </div>
           </div>
+          <div className="w-full sm:w-48">
+            <Select value={filterStatus} onValueChange={(value: "all" | "validated" | "not_validated") => setFilterStatus(value)}>
+              <SelectTrigger className="border border-gray-300 shadow-sm">
+                <Filter className="w-4 h-4 mr-2" />
+                <SelectValue placeholder="Filtrer par statut" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="all">
+                  Tous les rapprochements
+                </SelectItem>
+                <SelectItem value="validated">
+                  <div className="flex items-center">
+                    <Check className="w-4 h-4 mr-2 text-green-600" />
+                    Validés seulement
+                  </div>
+                </SelectItem>
+                <SelectItem value="not_validated">
+                  <div className="flex items-center">
+                    <X className="w-4 h-4 mr-2 text-orange-600" />
+                    Non validés seulement
+                  </div>
+                </SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
         </div>
       </div>