A
Anonymous

Invoice - Copy this React, Tailwind Component to your project

"Build a responsive invoice web application for a company called 'COCCINELLE SARL.' The application should have the following features: Header Section: Display the company name, address, and contact information. Include fields for company email and website. Display a unique invoice number and invoice date. Client Information Section: Input fields for client name and phone number. Dropdown or input field for delivery location (pre filled with 'LUBUMBASHI'). Dropdown for delivery method (options include 'Bateau' (Boat) and other common methods like Air, Road). Product Table: Columns for: Number (auto incrementing), Image (upload field), Quantity (input), Description (text field), Unit Price (input in USD), Weight/CBM (input), Amount (auto calculated based on quantity and unit price). Include Edit and Delete buttons for each product row. Summary Section: Calculate and display the subtotal of the items. Add a 10% fee (automatically calculated) to be displayed as 'Frais (10%)'. Input field for 'Transport & Douane' (Transport & Customs) fee. Display the final total amount. General Conditions Section: Text field for general terms and conditions (pre filled with 'Delivery time: 10 20 days depending on the type of merchandise'). Footer Section: Include bank account information fields with text for RCCM, IDNAT, and IMPOT numbers. Buttons: Delete All Items: Red button to clear the product list. Add Item: Green button to allow adding more product rows. Print Invoice: Blue button to generate a printable version of the invoice. Validation & Functionality: Ensure validation for all input fields (e.g., product quantity cannot be less than 1, unit price must be a valid number). Automatically update totals whenever a product or fee is changed. Responsive layout suitable for desktop and mobile devices."

Prompt
Component Preview

About

Invoice - Create a responsive invoice app with client info, product table, fees, and totals, professionally built with React and Tailwind. Copy component code!

Share

Last updated 1 month ago