Teacher Marks Management - Copy this React, Tailwind Component to your project

Design Prompt for Deliberation Page UI Create a clean, professional deliberation page UI for an academic admin panel. The page receives the following selected filters from another component: Academic Year, Department, Filiere (branch), and Semester. These selections should be displayed prominently at the top of the page in an info banner or card. The banner includes: Text showing each selection clearly (e.g., “Academic Year: 2024-2025 | Department: Computer Science | Filiere: Software Engineering | Semester: 3”) A clearly visible “Change Selection” button that navigates the user back to the filter selection page Below the banner, show a table listing all modules available for the selected semester. The table includes these columns: Module Code Module Name Status — displayed as colored badges or icons with text, where green indicates “Ready for Deliberation” and red indicates “Not Ready” Action — a “Deliberate” button for each module that is ready; disabled or grayed out if not ready The “Deliberate” buttons should be styled as primary action buttons and have loading states when clicked. Provide user feedback for success or failure after clicking (like toast notifications). Below the modules table, optionally include a global “Deliberate All Ready Modules” button that triggers deliberation on all ready modules at once. This button is enabled only if there are modules ready. Include states for when: No modules are found: show a friendly message like “No modules available for the selected semester.” No modules are ready: show “No modules are ready for deliberation at this time.” Loading data: show a spinner or loading indicator The overall style should be clean, user-friendly, and consistent with typical admin dashboards. Use clear color coding (green/red) for status, ensure responsive layout for smaller screens, and provide intuitive button affordances. now create a page for this