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

import React, { useEffect, useState } from 'react' import { Document, Page, Text, View, StyleSheet, Image } from '@react-pdf/renderer' import { useDispatch, useSelector } from 'react-redux' // import { fetchCompanyProfile, getProducts } from "../redux/actions"; // Adjust import path // Define styles const styles = StyleSheet.create({ page: { padding: 20, fontSize: 12 }, header: { textAlign: 'center', marginBottom: 20 }, title: { fontSize: 18, fontWeight: 'bold' }, section: { marginBottom: 10 }, subtitle: { fontSize: 14, fontWeight: 'bold', marginBottom: 5 }, text: { marginBottom: 3 }, table: { display: 'table', width: '100%', marginTop: 10 }, tableRow: { flexDirection: 'row' }, tableCell: { flex: 1, padding: 5, borderBottom: 1, textAlign: 'center' }, boldText: { fontWeight: 'bold' }, footer: { marginTop: 20, textAlign: 'right' }, logo: { width: 100, height: 100, marginBottom: 10 } }) // Fetch company logo component const FetchCompanyLogo = ({ tenantId, logoId }) => { const [imageSrc, setImageSrc] = useState('') useEffect(() => { if (!tenantId || !logoId) return fetch(`http://localhost:5000/profile/${tenantId}/logo/${logoId}`) .then((res) => { if (!res.ok) throw new Error('Failed to fetch image') return res.blob() }) .then((blob) => setImageSrc(URL.createObjectURL(blob))) .catch((err) => console.error('Error fetching image:', err)) }, [tenantId, logoId]) return imageSrc ? <Image src={imageSrc} style={styles.logo} /> : null } // PDF Document component const MyDocument = ({ invoiceData, profile }) => { const tenantId = localStorage.getItem('tenantId') return ( <Document> <Page size="A4" style={styles.page}> {/* Header */} <View style={styles.header}> <FetchCompanyLogo tenantId={tenantId} logoId={profile?.logo} /> <Text style={styles.title}>{profile?.slogan}</Text> <Text style={styles.title}>{invoiceData?.companyInfo?.name}</Text> <Text>{invoiceData?.companyInfo?.address}</Text> <Text>Phone: {invoiceData?.companyInfo?.phone}</Text> <Text>Email: {invoiceData?.companyInfo?.email}</Text> </View> {/* Invoice Details */} <View style={styles.section}> <Text style={styles.subtitle}>Invoice Details</Text> <Text> <Text style={styles.boldText}>Invoice #:</Text>{' '} {invoiceData.invoiceDetails.InvoiceNumber} </Text> <Text> <Text style={styles.boldText}>Date:</Text> {invoiceData.invoiceDetails.date} </Text> <Text> <Text style={styles.boldText}>Due Date:</Text> {invoiceData.invoiceDetails.dueDate} </Text> <Text> <Text style={styles.boldText}>Invoice Status: </Text>{' '} {invoiceData?.status.toUpperCase()} </Text> </View> {/* Customer Details */} <View style={styles.section}> <Text style={styles.subtitle}>Bill To</Text> <Text>{invoiceData.customerInfo.name}</Text> <Text>{invoiceData.customerInfo.address}</Text> <Text>{invoiceData.customerInfo.phone}</Text> <Text>{invoiceData.customerInfo.email}</Text> </View> {/* Items Table */} <View style={styles.table}> <View style={[styles.tableRow, { backgroundColor: '#cccccc' }]}> <Text style={styles.tableCell}>Item</Text> <Text style={styles.tableCell}>Kilos</Text> <Text style={styles.tableCell}>Grams</Text> <Text style={styles.tableCell}>Price</Text> <Text style={styles.tableCell}>Discount (%)</Text> <Text style={styles.tableCell}>Without Gst Amount</Text> <Text style={styles.tableCell}>CGST (%)</Text> <Text style={styles.tableCell}>SGST (%)</Text> <Text style={styles.tableCell}>Total</Text> </View> {invoiceData.items.map((item, index) => ( <View key={index} style={styles.tableRow}> <Text style={styles.tableCell}>{item.item}</Text> <Text style={styles.tableCell}>{item.kilos}</Text> <Text style={styles.tableCell}>{item.grams}</Text> <Text style={styles.tableCell}>₹{item.price}</Text> <Text style={styles.tableCell}>{item.discount}%</Text> <Text style={styles.tableCell}> {((item.kilos + item.grams / 1000) * item.price).toFixed(2)} </Text> <Text style={styles.tableCell}>{item.cgst}%</Text> <Text style={styles.tableCell}>{item.sgst}%</Text> <Text style={styles.tableCell}>₹{item.total.toFixed(2)}</Text> </View> ))} </View> {/* Summary */} <View style={styles.footer}> <Text style={styles.boldText}>Subtotal: ₹{invoiceData.subtotal.toFixed(2)}</Text> <Text>Delivery Charge: ₹{invoiceData.invoiceDetails.deliveryCharge}</Text> <Text>Service Charge: ₹{invoiceData.invoiceDetails.serviceCharge}</Text> <Text style={styles.boldText}>Net Payable: ₹{invoiceData.GrandTotal.toFixed(2)}</Text> </View> </Page> </Document> ) } export default MyDocument style the invoice template page apply css