Skip to content

Layout/invoice #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Mar 18, 2025
Merged

Layout/invoice #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7b0958b
70% layout completed for invoice
rb0298 Mar 17, 2025
05ece37
layout ui fixed
rb0298 Mar 18, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion src/components/InvoicePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -155,7 +155,6 @@ const InvoicePage: FC<Props> = ({ data, pdfMode, onChange }) => {
onChangeImage={(value) => handleChange('logo', value)}
onChangeWidth={(value) => handleChange('logoWidth', value)}
/>

<EditableInput
placeholder="Your Name"
value={invoice.name}
Expand Down
383 changes: 323 additions & 60 deletions src/components/MyInvoicePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -141,66 +141,329 @@ const MyInvoicePage: FC<Props> = ({ data, pdfMode, onChange }) => {

return (
<Document pdfMode={pdfMode}>
<Page className="invoice-wrapper-my" pdfMode={pdfMode}>
{!pdfMode && <Download data={invoice} setData={(d) => setInvoice(d)} />}

<View className="invoice-container" pdfMode={pdfMode}>
<EditableInput
className="fs-45 left bold"
placeholder="Invoice"
value={invoice.title}
onChange={(value) => handleChange('title', value)}
pdfMode={pdfMode}
/>
</View>

<View className="logo-pdf" pdfMode={pdfMode}>
<EditableFileImage
className="logo"
placeholder="Your Logo"
value={invoice.logo}
width={invoice.logoWidth}
pdfMode={pdfMode}
onChangeImage={(value) => handleChange('logo', value)}
onChangeWidth={(value) => handleChange('logoWidth', value)}
/>
</View>

<View className="one-block" pdfMode={pdfMode}>
company
</View>
<View className="one-block" pdfMode={pdfMode}>
<EditableInput
className="fs-20 bold"
placeholder="Your Company"
value={invoice.companyName}
onChange={(value) => handleChange('companyName', value)}
pdfMode={pdfMode}
/>
<EditableInput
placeholder="Company's Address"
value={invoice.companyAddress}
onChange={(value) => handleChange('companyAddress', value)}
pdfMode={pdfMode}
/>
<EditableInput
placeholder="City, State Zip"
value={invoice.companyAddress2}
onChange={(value) => handleChange('companyAddress2', value)}
pdfMode={pdfMode}
/>
<EditableSelect
options={countryList}
value={invoice.companyCountry}
onChange={(value) => handleChange('companyCountry', value)}
pdfMode={pdfMode}
/>
</View>
<View className="one-block" pdfMode={pdfMode}>
bank
</View>
<View className="one-block" pdfMode={pdfMode}>
empty
<Page className="invoice-wrapper" pdfMode={pdfMode}>
<View className="grid grid-cols-4 gap-3">
{!pdfMode && <Download data={invoice} setData={(d) => setInvoice(d)} />}

<View className="invoice-container" pdfMode={pdfMode}>
<EditableInput
className="fs-45 left bold"
placeholder="Invoice"
value={invoice.title}
onChange={(value) => handleChange('title', value)}
pdfMode={pdfMode}
/>
</View>

<View className="logo-pdf" pdfMode={pdfMode}>
<EditableFileImage
className="logo"
placeholder="Your Logo"
value={invoice.logo}
width={invoice.logoWidth}
pdfMode={pdfMode}
onChangeImage={(value) => handleChange('logo', value)}
onChangeWidth={(value) => handleChange('logoWidth', value)}
/>
</View>

{/* Company Section */}
<View className="one-block" pdfMode={pdfMode}>
COMPANY
</View>
<View className="one-block" pdfMode={pdfMode}>
<EditableInput
placeholder="Your Company"
value={invoice.companyName}
onChange={(value) => handleChange('companyName', value)}
pdfMode={pdfMode}
/>
<EditableInput
placeholder="Address"
value={invoice.companyAddress}
onChange={(value) => handleChange('companyAddress', value)}
pdfMode={pdfMode}
/>
<EditableInput
placeholder="City"
value={invoice.companyCity}
onChange={(value) => handleChange('companyCity', value)}
pdfMode={pdfMode}
/>
<EditableSelect
placeholder="Country"
options={countryList}
value={invoice.companyCountry}
onChange={(value) => handleChange('companyCountry', value)}
pdfMode={pdfMode}
/>
</View>
<View className="one-block col-span-2" pdfMode={pdfMode}>
<EditableInput
placeholder="bank"
value={invoice.bankName}
onChange={(value) => handleChange('bankName', value)}
pdfMode={pdfMode}
/>
<EditableInput
placeholder="IBAN"
value={invoice.iban}
onChange={(value) => handleChange('iban', value)}
pdfMode={pdfMode}
/>
<EditableInput
placeholder="BIC"
value={invoice.bic}
onChange={(value) => handleChange('bic', value)}
pdfMode={pdfMode}
/>
</View>
{/* Recipient Section */}
<View className="one-block" pdfMode={pdfMode}>
RECIPIENT
</View>
<View className="one-block" pdfMode={pdfMode}>
<EditableInput
placeholder="Bill To"
value={invoice.billTo}
onChange={(value) => handleChange('billTo', value)}
pdfMode={pdfMode}
/>
<EditableInput
placeholder="Name"
value={invoice.clientName}
onChange={(value) => handleChange('clientName', value)}
pdfMode={pdfMode}
/>
<EditableInput
placeholder="Address"
value={invoice.clientAddress}
onChange={(value) => handleChange('clientAddress', value)}
pdfMode={pdfMode}
/>
<EditableInput
placeholder="City"
value={invoice.clientCity}
onChange={(value) => handleChange('clientCity', value)}
pdfMode={pdfMode}
/>
<EditableSelect
placeholder="Country"
options={countryList}
value={invoice.clientCountry}
onChange={(value) => handleChange('clientCountry', value)}
pdfMode={pdfMode}
/>
</View>
<View className="col-span-2 flex flex-col text-right" pdfMode={pdfMode}>
<View className="w-60" pdfMode={pdfMode}>
<EditableInput
placeholder="INV-12"
value={invoice.invoiceTitle}
onChange={(value) => handleChange('invoiceTitle', value)}
pdfMode={pdfMode}
/>
</View>
<View className="flex mb-5" pdfMode={pdfMode}>
<View className="w-40" pdfMode={pdfMode}>
<EditableInput
className="bold"
value={invoice.invoiceDateLabel}
onChange={(value) => handleChange('invoiceDateLabel', value)}
pdfMode={pdfMode}
/>
</View>
<View className="w-60" pdfMode={pdfMode}>
<EditableCalendarInput
value={format(invoiceDate, dateFormat)}
selected={invoiceDate}
onChange={(date) =>
handleChange(
'invoiceDate',
date && !Array.isArray(date) ? format(date, dateFormat) : '',
)
}
pdfMode={pdfMode}
/>
</View>
</View>
<View className="flex mb-5" pdfMode={pdfMode}>
<View className="w-40" pdfMode={pdfMode}>
<EditableInput
className="bold"
value={invoice.invoiceDueDateLabel}
onChange={(value) => handleChange('invoiceDueDateLabel', value)}
pdfMode={pdfMode}
/>
</View>
<View className="w-60" pdfMode={pdfMode}>
<EditableCalendarInput
value={format(invoiceDueDate, dateFormat)}
selected={invoiceDueDate}
onChange={(date) =>
handleChange(
'invoiceDueDate',
date ? (!Array.isArray(date) ? format(date, dateFormat) : '') : '',
)
}
pdfMode={pdfMode}
/>
</View>
</View>
</View>
{/* bill section */}
<View className="one-block" pdfMode={pdfMode}>
BREAKDOWN
</View>
<View className="one-block col-span-3" pdfMode={pdfMode}>
<View className="bg-dark flex" pdfMode={pdfMode}>
<View className="w-48 p-4-8" pdfMode={pdfMode}>
<EditableInput
className="white bold"
value={invoice.productLineDescription}
onChange={(value) => handleChange('productLineDescription', value)}
pdfMode={pdfMode}
/>
</View>
<View className="w-17 p-4-8" pdfMode={pdfMode}>
<EditableInput
className="white bold right"
value={invoice.productLineQuantity}
onChange={(value) => handleChange('productLineQuantity', value)}
pdfMode={pdfMode}
/>
</View>
<View className="w-17 p-4-8" pdfMode={pdfMode}>
<EditableInput
className="white bold right"
value={invoice.productLineQuantityRate}
onChange={(value) => handleChange('productLineQuantityRate', value)}
pdfMode={pdfMode}
/>
</View>
<View className="w-18 p-4-8" pdfMode={pdfMode}>
<EditableInput
className="white bold right"
value={invoice.productLineQuantityAmount}
onChange={(value) => handleChange('productLineQuantityAmount', value)}
pdfMode={pdfMode}
/>
</View>
</View>
{invoice.productLines.map((productLine, i) => {
return pdfMode && productLine.description === '' ? (
<Text key={i}></Text>
) : (
<View key={i} className="row flex" pdfMode={pdfMode}>
<View className="w-48 p-4-8 pb-10" pdfMode={pdfMode}>
<EditableTextarea
className="dark"
rows={2}
placeholder="Enter item name/description"
value={productLine.description}
onChange={(value) => handleProductLineChange(i, 'description', value)}
pdfMode={pdfMode}
/>
</View>
<View className="w-17 p-4-8 pb-10" pdfMode={pdfMode}>
<EditableInput
className="dark right"
value={productLine.quantity}
onChange={(value) => handleProductLineChange(i, 'quantity', value)}
pdfMode={pdfMode}
/>
</View>
<View className="w-17 p-4-8 pb-10" pdfMode={pdfMode}>
<EditableInput
className="dark right"
value={productLine.rate}
onChange={(value) => handleProductLineChange(i, 'rate', value)}
pdfMode={pdfMode}
/>
</View>
<View className="w-18 p-4-8 pb-10" pdfMode={pdfMode}>
<Text className="dark right" pdfMode={pdfMode}>
{calculateAmount(productLine.quantity, productLine.rate)}
</Text>
</View>
{!pdfMode && (
<button
className="link row__remove"
aria-label="Remove Row"
title="Remove Row"
onClick={() => handleRemove(i)}
>
<span className="icon icon-remove bg-red"></span>
</button>
)}
</View>
)
})}
<View className="flex" pdfMode={pdfMode}>
<View className="w-50 mt-10" pdfMode={pdfMode}>
{!pdfMode && (
<button className="link" onClick={handleAdd}>
<span className="icon icon-add bg-green mr-10"></span>
Add Line Item
</button>
)}
</View>
<View className="w-50 mt-20" pdfMode={pdfMode}>
<View className="flex" pdfMode={pdfMode}>
<View className="w-50 p-5" pdfMode={pdfMode}>
<EditableInput
value={invoice.subTotalLabel}
onChange={(value) => handleChange('subTotalLabel', value)}
pdfMode={pdfMode}
/>
</View>
<View className="w-50 p-5" pdfMode={pdfMode}>
<Text className="right bold dark" pdfMode={pdfMode}>
{subTotal?.toFixed(2)}
</Text>
</View>
</View>
<View className="flex" pdfMode={pdfMode}>
<View className="w-50 p-5" pdfMode={pdfMode}>
<EditableInput
value={invoice.taxLabel}
onChange={(value) => handleChange('taxLabel', value)}
pdfMode={pdfMode}
/>
</View>
<View className="w-50 p-5" pdfMode={pdfMode}>
<Text className="right bold dark" pdfMode={pdfMode}>
{saleTax?.toFixed(2)}
</Text>
</View>
</View>
<View className="flex bg-gray p-5" pdfMode={pdfMode}>
<View className="w-50 p-5" pdfMode={pdfMode}>
<EditableInput
className="bold"
value={invoice.totalLabel}
onChange={(value) => handleChange('totalLabel', value)}
pdfMode={pdfMode}
/>
</View>
<View className="w-50 p-5 flex" pdfMode={pdfMode}>
<EditableInput
className="dark bold right ml-30"
value={invoice.currency}
onChange={(value) => handleChange('currency', value)}
pdfMode={pdfMode}
/>
<Text className="right bold dark w-auto" pdfMode={pdfMode}>
{(typeof subTotal !== 'undefined' && typeof saleTax !== 'undefined'
? subTotal + saleTax
: 0
).toFixed(2)}
</Text>
</View>
</View>
</View>
</View>
</View>
</View>
</Page>
</Document>
Expand Down
Loading