Packing List Management - Copy this React, Tailwind Component to your project

Create a UI for a packing list management application. The UI should allow users to view and edit packing list data. Data should be fetched from an API endpoint at example.com. The UI should have the following structure and fields, mirroring the layout and content of the provided document, but presented in a tabular and form based manner for editing: Section 1: Header Information: Company Name (Text Input): "THIEN PHUC THANH TRADING PRODUCTION COMPANY LIMITED" Address (Text Input): "LOT J21 J22, ROAD NO. 5C, LE MINH XUAN INDUSTRIAL PARK, LE MINH XUAN COMMUNE, HO CHI MINH CITY, VIETNAM TEL: 0394025301" Document Type (Text): "DETAIL PACKING LIST" Section 2: Buyer/Vendor Information: Buyer/For Account (Text Input): "KAM HING PIECE WORKS LTD" Buyer Address (Text Input): "UNIT A, 23/F., TML TOWER, 3 HOI SHING ROAD, TSUEN WAN, N.T., HONG KONG" Document No. (Text Input): "TPT832024" Date (Date Input): "12 Dec 2024" Vendor Name (Text Input): "SHINWON CORPORATION" Contract No. (Text Input): "2024/06 01/KH TPT" Vendor PO No. (Text Input): "F# 25KONF553 1ST, F# 25KONF553 1S2" PO No. (Text Input): "KZ241000009, KZ241000008" Style No. (Text Input): "S#864998 1ST, S#864998 1S2" Section 3: Consignee/Notify Party Information: Consignee/Notify Party (Text Input): "PT GLOBAL BUSANA INTENASIONAL" Consignee Address 1 (Text Input): "Jl. RAYA BOJONGSARI KETANGGUNGAN BLOK.25 DS.BOJONGSARI " Consignee Address 2 (Text Input): "KEC.LOSARI KAB.BREBES – JAWA TENGAH – INDONESIA" Consignee Address 3 (Text Input): "POST CODE 52255 NPWP#93.513.924.6.501.000 TEL.) 84 096 832 4606" Section 4: Transport Information: Means of Transport (Text Input): "Viettel Post" AWB (Text Input): "1745514015377" Section 5: Commodity Information: Commodity Item 1 (Text Input): "30S/1x2 COTTON+16S/1 COTTON/RECYCLE POLY FLEECE (90% BCI COTTON+10% RECYCLE POLY) RD1037060" Item 1 Details (Text Area): "WIDTH: 60/62,WEIGHT: 230 G/M2; Edge to edge width: 62 (+1/ 1) ; Cuttable width: 60 (+1/ 1) ; GSM Before Wash: 230 G/M2 (+5%/ 5%); GSM After Wash: 260 G/M2 (+5%/ 5%); Fabric Shrinkage: W: 6%/+0%, L: 10%/+0%, N: 5%, Slant: 22%; Approved Qty Ref: KZ240700002(K102410897)" Commodity Item 2 (Text Input): Item 2 Details (Text Area): Section 6: Goods Details Table (Editable Table): The table should have editable columns with the following headers: 'No.' (Number), 'PO No.' (Text), 'Description of goods' (Text), 'Color and Reference No.' (Text), 'Batch no' (Text), 'Category' (Dropdown with values 'AD Sample', 'PP Sample'), 'NW (Kg)' (Number), 'GW (Kg)' (Number), 'Length (Yds)' (Number), 'NW (Lbs)' (Number), 'GW (Lbs)' (Number) Initial table data should be: Row 1: 1, KZ241100044, RD183756 40S/1 Cotton +20D Spandex Jersey EPI, BC02, K1024 14759, AD Sample, 4.8, 5.1, 20.83, 10.58, 11.24 Row 2: , , BC02, K1024 14759, PP Sample, 5.0, 5.3, 21.70, 11.02, 11.68 Section 7: Totals Total Packages (Text Input): 2 Total Length (Text Input): 42.53 YDS Total Net Weight KGS (Text Input): 9.80 KGS Total Net Weight LBS (Text Input): 21.60 LBS Total Gross Weight KGS (Text Input): 10.40 KGS Total Gross Weight LBS (Text Input): 22.92 LBS Section 8: Footer Footer Text (Text): "FOR AND ON BEHALF OF, THIEN PHUC THANH TRADING PRODUCTION COMPANY LIMITED" The UI should use appropriate input types for each field (e.g., text input, date picker, numeric input, dropdown). Data should be editable. The UI should allow for adding new rows to the table and deleting rows. The UI should implement a button to 'Save Changes' that pushes modified data back to the same example.com API. Make the UI responsive for different screen sizes. Ensure the dropdown in the table for category should only accept AD Sample and PP Sample. Make the table column length dynamic based on data length.