Default Component - Copy this React, Tailwind Component to your project

Design a Shift-Based Student Attendance Report with Pie Charts & Print Option for schools/universities. The report should be visually appealing, structured, and optimized for printing. Header: School/University Name and Logo (Placeholder for branding) Report Title: Shift-Based Student Attendance Report Academic Term or Date Range (e.g., ‘January - June 2025’) Student Details: Name & ID Class/Grade Level Subject/Course Name Instructor Name Shift Type: (Dropdown: Morning / Afternoon / Evening) Attendance Table: A structured table with the following columns: Date (MM/DD/YYYY) Day (e.g., Monday, Tuesday, etc.) Shift (Morning, Afternoon, Evening) Check-in Time (HH:MM AM/PM) Check-out Time (HH:MM AM/PM) Total Hours Attended Status (Present, Absent, Late, Excused) Remarks (Optional Notes) ✅ Alternate row colors for readability. ✅ Fixed table headers for print clarity. Summary Section (with Pie Charts): Pie Chart 1: Attendance Distribution (Present, Absent, Late, Excused) Pie Chart 2: Shift-wise Attendance Breakdown (Morning, Afternoon, Evening) Total Days Present (Per Shift) Total Days Absent (Per Shift) Total Late Arrivals (Per Shift) Total Hours Attended (Per Shift) Attendance Percentage (%) Print Functionality: Add a 'Print Report' Button using JavaScript's window.print() function. Ensure the report formats correctly for printing, including headers, footers, tables, and charts. Footer: School’s Contact Information Instructor’s Signature Line Message: “Punctuality and consistent attendance are key to success. Keep up the good work!” Ensure the design is professional, interactive, and print-friendly, with pie charts dynamically generated using Chart.js, Google Charts, or any suitable library