import * as React from "react"; export interface ServiceItem { description: string; qty: number; unitPrice: number; total: number; } export interface DentalInvoiceProps { invoiceNumber: string; invoiceDate: string; dueDate: string; patientName: string; patientAddress: string; patientCity: string; patientPhone: string; patientEmail: string; bookingId: string; appointmentDate: string; appointmentTime: string; doctorName: string; treatmentRoom: string; appointmentDuration: string; reasonForVisit: string; pdfDownloadUrl: string; paymentStatus: string; nextAppointmentDate: string; nextAppointmentTime: string; nextAppointmentPurpose: string; services: ServiceItem[]; subtotal: number; tax: number; totalDue: number; } import { Html, Head, Body, Container, Section, Row, Column, Text, Heading, Hr, Button, Tailwind, } from "@react-email/components"; const DentalInvoice: React.FC = (props) => { return ( {/* Header */}
DENTAL U CARE Professional Dental Services
{/* Invoice Header */}
INVOICE Invoice #: {props.invoiceNumber} Date: {props.invoiceDate} Due Date: {props.dueDate} Dental U Care Clinic Baltan Street Puerto Princesa City, Palawan 5300 Phone: (043) 756-1234

{/* Patient Information */}
Bill To: {props.patientName} {props.patientAddress} {props.patientCity} Phone: {props.patientPhone} Email: {props.patientEmail}

{/* Booking Details */}
Appointment Details: Booking ID: {props.bookingId} Appointment Date: {props.appointmentDate} Time: {props.appointmentTime} Doctor: {props.doctorName} Treatment Room: {props.treatmentRoom} Duration: {props.appointmentDuration} Reason for Visit: {props.reasonForVisit}

{/* Services Table */}
Services Rendered: {/* Table Header */} Description Qty Unit Price Total {/* Dynamic Service Items */} {props.services.map((service, index) => ( {service.description} {service.qty} ₱{service.unitPrice.toFixed(2)} ₱{service.total.toFixed(2)} ))}
{/* Totals */}
Subtotal: ₱{props.subtotal.toFixed(2)} Tax (12%): ₱{props.tax.toFixed(2)}
Total Due: ₱{props.totalDue.toFixed(2)}
{/* Download PDF Button */}
Click the button above to download a PDF copy of this invoice
{/* Payment Information */}
Payment Information Payment Status: {props.paymentStatus} Payment Methods: Cash, Credit Card, Bank Transfer, GCash, PayMaya Bank Details: BPI - Account #1234567890 (Dental U Care Clinic) GCash: 09171234567 Payment Terms: Payment due within 30 days of invoice date
{/* Next Appointment */}
Next Appointment Reminder Follow-up Date: {props.nextAppointmentDate} Time: {props.nextAppointmentTime} Purpose: {props.nextAppointmentPurpose}
{/* Footer */}
Thank you for choosing Dental U Care for your oral health needs! For questions about this invoice, please contact us at billing@dentalucare.com or (043) 756-1234 To reschedule or cancel appointments, call us at least 24 hours in advance
{/* Company Footer */}
Dental U Care Clinic | Baltan Street, Puerto Princesa City, Palawan 5300 © 2025 Dental U Care. All rights reserved. | License #DC-2025-001
); }; export default DentalInvoice;