Data Display P D F - Copy this React, Tailwind Component to your project

Create a React-based UI that fetches data from an API endpoint (https://example.com/api/data) and generates a PDF document following the structure of the provided PDF. The UI should include: File Upload Section: Allow the user to upload a PDF for reference (optional). Data Display: Display the fetched data in a table format with the following columns based on the PDF content: No. PO No. Description of Goods Batch No. Category NW (Kg) GW (Kg) Length (Yds) NW (Lbs) GW (Lbs) Generate PDF Button: A button labeled "Generate PDF" that takes the displayed data and formats it into a new PDF document matching the style and structure of the original PDF. Styling: Use a clean and professional design with a navigation bar and responsive layout. PDF Export Functionality: Utilize libraries like jspdf or react-pdf to generate the PDF. Ensure the generated PDF includes the following: Table of items with data as listed above. Footer showing totals for NW (Kg), GW (Kg), Length (Yds), etc. A header matching the provided PDF’s style (company name, address, etc.). Use mock data to simulate the API response, with the following structure: [ { "no": 1, "po_no": "K1024 14452", "description": "AD Sample", "batch_no": "RD1023637", "category": "40S/1 Cotton", "nw_kg": 5.6, "gw_kg": 5.9, "length_yds": 21.53, "nw_lbs": 12.35, "gw_lbs": 13.01 }, ... ]