Design a modern, responsive web dashboard for WordPress/WooCommerce admin, focused on order statistics. The layout should support all screen sizes from mobile to desktop. Use Tailwind CSS (or Bootstrap 5) for styling, clean card design, and modular UI components. Include filters at the top and summary cards below. 📊 Page Name: Order Statistics Dashboard 🎯 Functional Zones: Header Section: Title: "Order Statistics" Filters Section (inside a card at the top): Two radio buttons: "Date Commande" "Date Pick up" Date range picker Dropdowns: Governorate (states list) Product list Shipping company list Input field: Number input for "Frais PUB" Submit button: "تأكيد" (Confirm) Statistics Cards Grid (2 to 4 per row depending on screen width): Each card must include: Title (e.g., "Taux Annulation", "Taux Retour", etc.) Value (e.g., 0%, $0, etc.) Icon on the right Progress bar at the bottom Cards to include: Taux Annulation (Cancellation Rate) – icon: fa-times-circle Taux Retour (Return Rate) – icon: fa-undo Profit Net – icon: fa-dollar-sign Completed Orders – icon: fa-check-circle Total Products Sold – icon: fa-box Avg Products per Order – icon: fa-shopping-cart Delivered Orders – icon: fa-truck Chart Ready: Include placeholders or containers for mini-charts (e.g., for ApexCharts/Chart.js). 📱 Responsiveness: Mobile: Cards stack vertically Tablet: 2 columns Desktop: 3 or 4 columns 🌈 Design Style: Clean, minimal, modern UI Use gradients, shadows, rounded corners Subtle hover animations Light background with colored accents per stat card (blue, green, yellow, etc.) 🧠 Bonus Features (optional): Add a loading spinner next to the submit button Floating labels for form inputs Dark mode switch support