129 lines
3.6 KiB
TypeScript
129 lines
3.6 KiB
TypeScript
import { useState } from 'react'
|
|
import { LayoutShell } from './components/LayoutShell'
|
|
import { ConfigForm } from './components/ConfigForm'
|
|
import { PreviewFrame } from './components/PreviewFrame'
|
|
import type {
|
|
CompanyConfig,
|
|
InvitationInfo,
|
|
InvoiceInfo,
|
|
PaymentInfo,
|
|
ReportConfig,
|
|
PasswordResetInfo,
|
|
TemplateId,
|
|
} from './lib/types'
|
|
|
|
const navItems: { id: TemplateId; label: string }[] = [
|
|
{ id: 'invitation', label: 'Invitation' },
|
|
{ id: 'proforma', label: 'Proforma invoice' },
|
|
{ id: 'paymentRequest', label: 'Payment request' },
|
|
{ id: 'vatSummary', label: 'VAT summary' },
|
|
{ id: 'vatDetailed', label: 'VAT detailed' },
|
|
{ id: 'withholdingSummary', label: 'Withholding summary' },
|
|
{ id: 'withholdingDetailed', label: 'Withholding detailed' },
|
|
{ id: 'newsletter', label: 'Newsletter' },
|
|
{ id: 'passwordReset', label: 'Password reset' },
|
|
]
|
|
|
|
function App() {
|
|
const [activeTemplate, setActiveTemplate] = useState<TemplateId>('invitation')
|
|
|
|
const [company, setCompany] = useState<CompanyConfig>({
|
|
name: 'Yaltopia Ticket',
|
|
primaryColor: '#f97316',
|
|
logoUrl: '',
|
|
paymentLink: '',
|
|
bankDetails: {
|
|
bankName: 'Example Bank',
|
|
accountName: 'Yaltopia Ticket Ltd',
|
|
accountNumber: '123456789',
|
|
},
|
|
})
|
|
|
|
const [invitation, setInvitation] = useState<InvitationInfo>({
|
|
eventName: 'Yaltopia Product Launch',
|
|
dateTime: '24 March 2026, 15:00',
|
|
location: 'Online webinar',
|
|
ctaLabel: 'Reserve my seat',
|
|
ctaUrl: 'https://example.com/rsvp',
|
|
})
|
|
|
|
const [payment, setPayment] = useState<PaymentInfo>({
|
|
amount: 150,
|
|
currency: 'USD',
|
|
description: 'Yaltopia Ticket subscription',
|
|
dueDate: '31 March 2026',
|
|
})
|
|
|
|
const [invoice, setInvoice] = useState<InvoiceInfo>({
|
|
invoiceNumber: 'INV-2026-001',
|
|
issueDate: '11 March 2026',
|
|
dueDate: '31 March 2026',
|
|
currency: 'USD',
|
|
items: [
|
|
{ description: 'Yaltopia Ticket Pro (12 months)', quantity: 1, unitPrice: 150 },
|
|
{ description: 'Onboarding & configuration', quantity: 1, unitPrice: 0 },
|
|
],
|
|
})
|
|
|
|
const [vatReport, setVatReport] = useState<ReportConfig>({
|
|
periodLabel: 'Q1 2026',
|
|
totalAmount: 12000,
|
|
taxAmount: 1800,
|
|
currency: 'USD',
|
|
})
|
|
|
|
const [withholdingReport, setWithholdingReport] = useState<ReportConfig>({
|
|
periodLabel: 'Q1 2026',
|
|
totalAmount: 8000,
|
|
taxAmount: 800,
|
|
currency: 'USD',
|
|
})
|
|
|
|
const [passwordReset, setPasswordReset] = useState<PasswordResetInfo>({
|
|
resetLink: 'https://example.com/reset?token=demo',
|
|
recipientName: 'Customer',
|
|
})
|
|
|
|
return (
|
|
<LayoutShell
|
|
navItems={navItems}
|
|
activeId={activeTemplate}
|
|
onChange={setActiveTemplate}
|
|
leftPanel={
|
|
<ConfigForm
|
|
company={company}
|
|
onCompanyChange={setCompany}
|
|
payment={payment}
|
|
onPaymentChange={setPayment}
|
|
invoice={invoice}
|
|
onInvoiceChange={setInvoice}
|
|
vatReport={vatReport}
|
|
onVatReportChange={setVatReport}
|
|
withholdingReport={withholdingReport}
|
|
onWithholdingReportChange={setWithholdingReport}
|
|
invitation={invitation}
|
|
onInvitationChange={setInvitation}
|
|
passwordReset={passwordReset}
|
|
onPasswordResetChange={setPasswordReset}
|
|
/>
|
|
}
|
|
rightPanel={
|
|
<PreviewFrame
|
|
activeTemplate={activeTemplate}
|
|
templateProps={{
|
|
company,
|
|
invitation,
|
|
invoice,
|
|
payment,
|
|
vatReport,
|
|
withholdingReport,
|
|
passwordReset,
|
|
}}
|
|
/>
|
|
}
|
|
/>
|
|
)
|
|
}
|
|
|
|
export default App
|