DEV:
Form: {formState.isDirty ? "Dirty" : "Clean"}
reset(FORM_FILL_VALUES)}
>
Fill in the form
Template 1
Template 2
{/* Load modal button */}
{/* Export modal button */}
{/* New invoice button */}
{/* Generate pdf button */}
{/* Live preview and Final pdf */}
{invoiceNumberLabel}
{invoicePdf.size == 0 ? (
);
};
export default PdfViewer;
```
## /app/components/invoice/form/Charges.tsx
```tsx path="/app/components/invoice/form/Charges.tsx"
"use client";
// RHF
import { useFormContext } from "react-hook-form";
// ShadCn
import { Label } from "@/components/ui/label";
import { Switch } from "@/components/ui/switch";
// Components
import { ChargeInput } from "@/app/components";
// Contexts
import { useChargesContext } from "@/contexts/ChargesContext";
import { useTranslationContext } from "@/contexts/TranslationContext";
// Helpers
import { formatNumberWithCommas } from "@/lib/helpers";
// Types
import { InvoiceType } from "@/types";
const Charges = () => {
const {
formState: { errors },
} = useFormContext
{/* Switches */}
{
setDiscountSwitch(value);
}}
/>
{
setTaxSwitch(value);
}}
/>
{
setShippingSwitch(value);
}}
/>
{discountSwitch && (
{
setTotalInWordsSwitch(value);
}}
/>
);
};
export default Charges;
```
## /app/components/invoice/form/SingleItem.tsx
```tsx path="/app/components/invoice/form/SingleItem.tsx"
"use client";
import { useEffect } from "react";
// RHF
import { FieldArrayWithId, useFormContext, useWatch } from "react-hook-form";
// DnD
import { useSortable } from "@dnd-kit/sortable";
import { CSS } from "@dnd-kit/utilities";
// ShadCn
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
// Components
import { BaseButton, FormInput, FormTextarea } from "@/app/components";
// Contexts
import { useTranslationContext } from "@/contexts/TranslationContext";
// Icons
import { ChevronDown, ChevronUp, GripVertical, Trash2 } from "lucide-react";
// Types
import { ItemType, NameType } from "@/types";
type SingleItemProps = {
name: NameType;
index: number;
fields: ItemType[];
field: FieldArrayWithId{_t("form.steps.summary.subTotal")}
{formatNumberWithCommas(subTotal)} {currency}
{_t("form.steps.summary.totalAmount")}
{formatNumberWithCommas(totalAmount)} {currency}
{errors.details?.totalAmount?.message}{_t("form.steps.summary.includeTotalInWords")}
{" "}{totalInWordsSwitch ? _t("form.steps.summary.yes") : _t("form.steps.summary.no")}
{/* {isDragging && } */}
);
};
export default SingleItem;
```
## /app/components/invoice/form/TemplateSelector.tsx
```tsx path="/app/components/invoice/form/TemplateSelector.tsx"
"use client";
import Image from "next/image";
// RHF
import { useFormContext } from "react-hook-form";
// ShadCn
import {
Card,
CardContent,
CardDescription,
CardHeader,
} from "@/components/ui/card";
import { Label } from "@/components/ui/label";
// Components
import {
BaseButton,
InvoiceTemplate1,
InvoiceTemplate2,
} from "@/app/components";
// Template images
import template1 from "@/public/assets/img/invoice-1-example.png";
import template2 from "@/public/assets/img/invoice-2-example.png";
// Icons
import { Check } from "lucide-react";
// Types
import { InvoiceType } from "@/types";
const TemplateSelector = () => {
const { watch, setValue } = useFormContext
{itemName != "" ? (
#{index + 1} - {itemName}
) : (#{index + 1} - Empty name
)}
{/* Drag and Drop Button */}
moveFieldUp(index)}
disabled={index === 0}
>
{/* Down Button */}
moveFieldDown(index)}
disabled={index === fields.length - 1}
>
{/* Not allowing deletion for first item when there is only 1 item */}
{fields.length > 1 && (
removeField(index)}
>
)}
{templates.map((template, idx) => (
setValue(
"details.pdfTemplate",
template.id
)
}
>
Select
))}
{template.name}
{formValues.details.pdfTemplate ===
template.id && (
setValue(
"details.pdfTemplate",
template.id
)
}
/>
{/* {template.component} */}
Click to drop
{!isFirstStep && (
)}
{_t("form.wizard.next")}
);
};
export default WizardNavigation;
```
## /app/components/invoice/form/wizard/WizardProgress.tsx
```tsx path="/app/components/invoice/form/wizard/WizardProgress.tsx"
"use client";
// RHF
import { useFormContext } from "react-hook-form";
// React Wizard
import { WizardValues } from "react-use-wizard";
// Components
import { BaseButton } from "@/app/components";
// Contexts
import { useTranslationContext } from "@/contexts/TranslationContext";
// Types
import { InvoiceType, WizardStepType } from "@/types";
type WizardProgressProps = {
wizard: WizardValues;
};
const WizardProgress = ({ wizard }: WizardProgressProps) => {
const { activeStep, stepCount } = wizard;
const {
formState: { errors },
} = useFormContext
{steps.map((step, idx) => (
{
wizard.goToStep(step.id);
}}
>
{step.id + 1}. {step.label}
{/* {step.id != stepCount - 1 && (
);
};
export default WizardProgress;
```
## /app/components/invoice/form/wizard/WizardStep.tsx
```tsx path="/app/components/invoice/form/wizard/WizardStep.tsx"
"use client";
import React from "react";
// React Wizard
import { useWizard } from "react-use-wizard";
// Components
import { WizardNavigation, WizardProgress } from "@/app/components";
type WizardStepProps = {
children: React.ReactNode;
};
const WizardStep = ({ children }: WizardStepProps) => {
const wizard = useWizard();
return (
{children}
{savedInvoices.map((invoice, idx) => (
handleSelect(invoice)}
>
load(invoice)}
>
Load
loadAndGeneratePdf(invoice)}
>
Load & Generate
{/* Remove Invoice Button */}
{
e.stopPropagation();
deleteInvoice(idx);
}}
>
Delete
))}
{savedInvoices.length == 0 && (
)}
);
};
export default SavedInvoicesList;
```
## /app/components/modals/signature/SignatureModal.tsx
```tsx path="/app/components/modals/signature/SignatureModal.tsx"
"use client";
import { useEffect, useState } from "react";
// RHF
import { useFormContext, useWatch } from "react-hook-form";
// ShadCn
import {
Dialog,
DialogContent,
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog";
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Label } from "@/components/ui/label";
// Components
import {
DrawSignature,
TypeSignature,
UploadSignature,
} from "@/app/components";
// Contexts
import { useTranslationContext } from "@/contexts/TranslationContext";
import { useSignatureContext } from "@/contexts/SignatureContext";
// Icons
import { FileSignature } from "lucide-react";
// Helpers
import { isDataUrl } from "@/lib/helpers";
// Types
import { SignatureTabs } from "@/types";
type SignatureModalProps = {};
const SignatureModal = ({}: SignatureModalProps) => {
const { setValue } = useFormContext();
const {
handleCanvasEnd,
signatureData,
typedSignature,
selectedFont,
uploadSignatureImg,
signatureRef,
} = useSignatureContext();
const { _t } = useTranslationContext();
// Modal state
const [open, setOpen] = useState(false);
// Modal tabs
const [tab, setTab] = useState
{/*
Invoice #{invoice.details.invoiceNumber}{" "}
Updated at: {invoice.details.updatedAt}Sender: {invoice.sender.name}
Receiver: {invoice.receiver.name}
Total:{" "} {formatNumberWithCommas( Number( invoice.details.totalAmount ) )}{" "} {invoice.details.currency}
No saved invoices
{colors.map((color) => (
handleColorButtonClick(color.color)}
>
{selectedColor === color.color && (
))}
);
};
export default SignatureColorSelector;
```
## /app/components/modals/signature/components/SignatureFontSelector.tsx
```tsx path="/app/components/modals/signature/components/SignatureFontSelector.tsx"
// ShadCn
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
// Types
import { SignatureFont } from "@/types";
type SignatureFontSelectorProps = {
typedSignatureFonts: SignatureFont[];
selectedFont: SignatureFont;
setSelectedFont: (value: SignatureFont) => void;
};
const SignatureFontSelector = ({
typedSignatureFonts,
selectedFont,
setSelectedFont,
}: SignatureFontSelectorProps) => {
return (
{/* Font select */}
);
};
export default SignatureFontSelector;
```
## /app/components/modals/signature/tabs/DrawSignature.tsx
```tsx path="/app/components/modals/signature/tabs/DrawSignature.tsx"
"use client";
// React Signature Canvas
import SignatureCanvas from "react-signature-canvas";
// ShadCn
import { Card, CardContent } from "@/components/ui/card";
import { TabsContent } from "@/components/ui/tabs";
// Components
import { BaseButton, SignatureColorSelector } from "@/app/components";
// Contexts
import { useSignatureContext } from "@/contexts/SignatureContext";
// Icons
import { Check, Eraser } from "lucide-react";
// Types
import { SignatureTabs } from "@/types";
type DrawSignatureProps = {
handleSaveSignature: () => void;
};
const DrawSignature = ({ handleSaveSignature }: DrawSignatureProps) => {
const {
signatureData,
signatureRef,
colors,
selectedColor,
handleColorButtonClick,
clearSignature,
handleCanvasEnd,
} = useSignatureContext();
return (
{/* Signature Canvas to draw signature */}
{/* Color selector */}
Erase
)}
Done
) => {
setTypedSignature(e.target.value);
}}
/>
{uploadSignatureImg ? (
) : (
Upload image
)}
{/* Upload file here */}
{/* Buttons and operations */}
{uploadSignatureImg && (
Remove
)}
Done
{tooltipLabel}
{children}
; } ``` ## /app/components/reusables/ThemeSwitcher.tsx ```tsx path="/app/components/reusables/ThemeSwitcher.tsx" "use client"; import { useTheme } from "next-themes"; // Components import { BaseButton } from "@/app/components"; // Icons import { Moon, Sun } from "lucide-react"; const ThemeSwitcher = () => { const { theme, setTheme } = useTheme(); return ( <>{label}
{currency}
}
{label && {`${label}:`} }
{labelHelper && (
{labelHelper}
)}
Invoify Team
{children}
{details.invoiceLogo && (
)}
{sender.name}
Invoice #
{details.invoiceNumber} {sender.address}{sender.zipCode}, {sender.city}
{sender.country}
Bill to:
{receiver.name}
{} {receiver.address && receiver.address.length > 0 ? receiver.address : null} {receiver.zipCode && receiver.zipCode.length > 0 ? `, ${receiver.zipCode}` : null}{receiver.city}, {receiver.country}
- Invoice date:
- {new Date(details.invoiceDate).toLocaleDateString("en-US", DATE_OPTIONS)}
- Due date:
- {new Date(details.dueDate).toLocaleDateString("en-US", DATE_OPTIONS)}
Item
Qty
Rate
Amount
{details.items.map((item, index) => (
))}
{item.name}
{item.description}
{item.quantity}
{item.unitPrice} {details.currency}
{item.total} {details.currency}
- Subtotal:
- {formatNumberWithCommas(Number(details.subTotal))} {details.currency}
- Discount:
- {details.discountDetails.amountType === "amount" ? `- ${details.discountDetails.amount} ${details.currency}` : `- ${details.discountDetails.amount}%`}
- Tax:
- {details.taxDetails.amountType === "amount" ? `+ ${details.taxDetails.amount} ${details.currency}` : `+ ${details.taxDetails.amount}%`}
- Shipping:
- {details.shippingDetails.costType === "amount" ? `+ ${details.shippingDetails.cost} ${details.currency}` : `+ ${details.shippingDetails.cost}%`}
- Total:
- {formatNumberWithCommas(Number(details.totalAmount))} {details.currency}
- Total in words:
- {details.totalAmountInWords} {details.currency}
Additional notes:
{details.additionalNotes}
Payment terms:
{details.paymentTerms}
Please send the payment to this address
Bank: {details.paymentInformation?.bankName}
Account name: {details.paymentInformation?.accountName}
Account no: {details.paymentInformation?.accountNumber}
If you have any questions concerning this invoice, use the following contact information:
{sender.email}
{sender.phone}
Signature:
Signature:
{details.signature.data}
Invoice #
{details.invoiceNumber} {details.invoiceLogo && ({sender.name}
{sender.address}
{sender.zipCode}, {sender.city}
{sender.country}
{sender.zipCode}, {sender.city}
{sender.country}
Bill to:
{receiver.name}
{receiver.address}, {receiver.zipCode}{receiver.city}, {receiver.country}
- Invoice date:
- {new Date( details.invoiceDate ).toLocaleDateString("en-US", DATE_OPTIONS)}
- Due date:
- {new Date(details.dueDate).toLocaleDateString( "en-US", DATE_OPTIONS )}
Item
Qty
Rate
Amount
{details.items.map((item, index) => (
))}
{item.name}
{item.description}
{item.quantity}
{item.unitPrice} {details.currency}
{item.total} {details.currency}
- Subtotal:
- {formatNumberWithCommas( Number(details.subTotal) )}{" "} {details.currency}
- Discount:
- {details.discountDetails.amountType === "amount" ? `- ${details.discountDetails.amount} ${details.currency}` : `- ${details.discountDetails.amount}%`}
- Tax:
- {details.taxDetails.amountType === "amount" ? `+ ${details.taxDetails.amount} ${details.currency}` : `+ ${details.taxDetails.amount}%`}
- Shipping:
- {details.shippingDetails.costType === "amount" ? `+ ${details.shippingDetails.cost} ${details.currency}` : `+ ${details.shippingDetails.cost}%`}
- Total:
- {formatNumberWithCommas( Number(details.totalAmount) )}{" "} {details.currency}
- Total in words:
- {details.totalAmountInWords}{" "} {details.currency}
Additional notes:
{details.additionalNotes}
Payment terms:
{details.paymentTerms}
Please send the payment to this address
Bank: {details.paymentInformation?.bankName}
Account name:{" "} {details.paymentInformation?.accountName}
Account no:{" "} {details.paymentInformation?.accountNumber}
If you have any questions concerning this invoice, use the following contact information:
{sender.email}
{sender.phone}
Signature:
Signature:
{details.signature.data}
{body}
) }) FormMessage.displayName = "FormMessage" export { useFormField, Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField, } ``` ## /components/ui/input.tsx ```tsx path="/components/ui/input.tsx" import * as React from "react" import { cn } from "@/lib/utils" export interface InputProps extends React.InputHTMLAttributes
{title && {title} }
{description && (
{description}
)}
{action}