DocumentStudio
The brand editor for every printed document: logo, layout, typeface, language and footer note, with a live preview of any document at any paper size and stamp.
import { DocumentStudio } from "@cynco-labs/ui";Example
import {
BalanceSheetReport,
DeliveryOrderDocument,
DocumentStudio,
PayslipDocument,
ProfitAndLossReport,
PurchaseOrderDocument,
QuotationDocument,
ReceiptDocument,
StatementOfAccountDocument,
TaxInvoiceDocument,
} from "@cynco-labs/ui";
const NUSA = {
name: "Nusantara Logistik Bhd",
registrationNo: "200501012345 (689012-W)",
tin: "C10987654320",
sstNo: "W10-1808-31004422",
address: ["Lot 8, Persiaran Klang, Kawasan Perindustrian Bukit Raja", "41050 Klang, Selangor"],
attention: "Puan Aisyah Rahman, Finance",
};
const NUSA_SITE = {
name: "Nusantara Logistik Bhd — Warehouse B",
address: [
"Lot 12A, Jalan Sungai Puloh, Kawasan Perindustrian Sungai Puloh",
"42100 Klang, Selangor",
],
attention: "En. Hafiz Zainal, Facilities",
phone: "+60 12-334 8821",
};
const D_INV = {
title: "taxInvoice",
number: "INV-2026-0142",
status: "partially_paid",
invoiceDate: "2026-10-28",
dueDate: "2026-11-27",
terms: "Net 30",
reference: "PO-NL-7781",
billTo: NUSA,
shipTo: NUSA_SITE,
lines: [
{
description: "Rooftop solar PV installation — 12.3 kWp",
detail: "Mounting, DC/AC cabling, earthing and commissioning · Warehouse B",
quantity: "1",
unit: "lot",
unitPrice: "38500.00",
taxCode: "SV8",
taxRate: "8",
amount: "38500.00",
},
{
description: "Huawei SUN2000-12KTL-M5 string inverter",
detail: "S/N HV2310045872 · 10-year manufacturer warranty",
quantity: "1",
unit: "unit",
unitPrice: "6800.00",
taxCode: "ST10",
taxRate: "10",
amount: "6800.00",
},
{
description: "AC cable 6mm² 4-core XLPE/SWA",
quantity: "120",
unit: "m",
unitPrice: "8.50",
discount: "10%",
taxCode: "ST10",
taxRate: "10",
amount: "918.00",
},
{
description: "Preventive maintenance — first year",
detail: "2 site visits, panel cleaning, thermal scan and performance report",
quantity: "1",
unit: "yr",
unitPrice: "1800.00",
taxCode: "SV8",
taxRate: "8",
amount: "1800.00",
},
],
totals: [
{ label: "subtotal", value: "48018.00" },
{ label: "serviceTax", hint: "8%", value: "3224.00", kind: "tax" },
{ label: "salesTax", hint: "10%", value: "771.80", kind: "tax" },
{ label: "total", value: "52013.80", kind: "total" },
{ label: "deposit", hint: "paid 14 Oct 2026", value: "-15000.00", kind: "paid" },
{ label: "balanceDue", value: "37013.80", kind: "balance" },
],
payment: {
bankName: "Maybank Islamic",
accountName: "Arus Teknik Sdn Bhd",
accountNumber: "5621 4400 8812",
note: "Please quote the invoice number as the payment reference.",
},
einvoice: { status: "pending", uuid: "F9D425P6DS7D8IU0K2C8VXHF10" },
notes:
"Installation completed and commissioned on 24 Oct 2026. Net Energy Metering (NEM 3.0) application ref. SEDA-NEM-2026-08812.",
termsAndConditions:
"Late payment interest of 1.5% per month applies after the due date. Goods remain the property of Arus Teknik Sdn Bhd until paid in full.",
signature: true,
};
const D_QUO = {
number: "QUO-2026-0093",
status: "sent",
date: "2026-10-20",
validUntil: "2026-11-19",
reference: "RFQ-NL-2604",
terms: "50% deposit",
preparedBy: "Lim Wei Jie",
customer: NUSA,
shipTo: NUSA_SITE,
sections: [
{
title: "Phase 1 · Survey & design",
subtotal: "3700.00",
lines: [
{
description: "Site survey and shading analysis",
detail: "Drone roof survey, structural check, 12-month yield simulation",
quantity: "1",
unit: "lot",
unitPrice: "1200.00",
taxCode: "SV8",
taxRate: "8",
amount: "1200.00",
},
{
description: "System design and NEM 3.0 application",
detail: "Single-line diagram, SEDA and TNB submissions",
quantity: "1",
unit: "lot",
unitPrice: "2500.00",
taxCode: "SV8",
taxRate: "8",
amount: "2500.00",
},
],
},
{
title: "Phase 2 · Supply",
subtotal: "22640.00",
lines: [
{
description: "Jinko Tiger Neo 580W N-type mono panel",
detail: "25-year linear performance warranty",
quantity: "22",
unit: "pcs",
unitPrice: "720.00",
taxCode: "ST10",
taxRate: "10",
amount: "15840.00",
},
{
description: "Huawei SUN2000-12KTL-M5 string inverter",
quantity: "1",
unit: "unit",
unitPrice: "6800.00",
taxCode: "ST10",
taxRate: "10",
amount: "6800.00",
},
],
},
{
title: "Phase 3 · Installation",
subtotal: "9800.00",
lines: [
{
description: "Mounting, cabling, earthing and commissioning",
detail: "Includes scaffolding, PPE and CIDB-registered crew",
quantity: "1",
unit: "lot",
unitPrice: "9800.00",
taxCode: "SV8",
taxRate: "8",
amount: "9800.00",
},
],
},
],
optionalItems: [
{
description: "Huawei LUNA2000 10 kWh battery storage",
quantity: "1",
unit: "unit",
unitPrice: "18500.00",
taxCode: "ST10",
taxRate: "10",
amount: "18500.00",
},
{
description: "Bird-proofing mesh around array",
quantity: "1",
unit: "lot",
unitPrice: "1450.00",
taxCode: "SV8",
taxRate: "8",
amount: "1450.00",
},
],
totals: [
{ label: "subtotal", value: "36140.00" },
{ label: "serviceTax", hint: "8%", value: "1080.00", kind: "tax" },
{ label: "salesTax", hint: "10%", value: "2264.00", kind: "tax" },
{ label: "total", value: "39484.00", kind: "total" },
],
notes: "Estimated generation 15,900 kWh/yr. Estimated payback 4.6 years at current TNB tariff.",
termsAndConditions: [
"Prices are valid until the date stated above.",
"50% deposit on acceptance; balance within 14 days of commissioning.",
"Installation within 21 working days of deposit, subject to SEDA approval.",
"Workmanship warranty of 5 years from the date of commissioning.",
"Any work outside this scope is quoted separately.",
"Prices include SST at the prevailing rates.",
],
};
const D_RCPT = {
number: "OR-2026-0318",
status: "issued",
date: "2026-11-01",
receivedFrom: {
name: "Ahmad Faizal bin Rahman",
address: ["No. 22, Jalan Anggerik 3, Taman Sri Muda", "40400 Shah Alam, Selangor"],
},
payment: { method: "cash" },
amountReceived: "1284.40",
allocations: [
{ number: "INV-2026-0151", date: "2026-10-29", invoiceAmount: "1284.42", applied: "1284.42" },
],
totals: [
{ label: "totalDue", value: "1284.42" },
{ label: "rounding", value: "-0.02", kind: "rounding" },
{ label: "amountReceived", value: "1284.40", kind: "total" },
{ label: "cashTendered", value: "1300.00" },
{ label: "change", value: "15.60" },
],
notes: "Rounded to the nearest 5 sen (BNM rounding mechanism).",
};
const D_DO = {
number: "DO-2026-0087",
status: "issued",
date: "2026-10-21",
deliveryDate: "2026-10-22",
reference: "PO-NL-7781",
salesOrder: "SO-2026-0064",
invoiceNo: "INV-2026-0142",
billTo: NUSA,
shipTo: NUSA_SITE,
vehicleNo: "WXY 4821 · 3-tonne lorry",
driver: "Muthu a/l Ramasamy · 012-778 3310",
packages: "6 pallets, 4 cartons",
weight: "1,148 kg",
lines: [
{
code: "JKM-580N",
description: "Jinko Tiger Neo 580W N-type mono panel",
detail: "Pallet 1–4 · 22 pcs",
unit: "pcs",
ordered: "22",
delivered: "22",
backOrdered: "0",
},
{
code: "HW-12KTL-M5",
description: "Huawei SUN2000-12KTL-M5 string inverter",
detail: "S/N HV2310045872",
unit: "unit",
ordered: "1",
delivered: "1",
},
{
code: "MR-AL42",
description: "Aluminium mounting rail 4.2 m",
detail: "Balance 6 pcs to follow on DO-2026-0091",
unit: "pcs",
ordered: "36",
delivered: "30",
backOrdered: "6",
},
{
code: "CBL-6C4",
description: "AC cable 6mm² 4-core XLPE/SWA",
unit: "m",
ordered: "120",
delivered: "120",
},
{
code: "MC4-PR",
description: "MC4 connector, male/female pair",
unit: "pair",
ordered: "24",
delivered: "24",
},
{
code: "ACC-CLMP",
description: "Mid and end clamps, stainless steel",
unit: "set",
ordered: "48",
delivered: "40",
backOrdered: "8",
},
],
notes:
"Please inspect all items on delivery. Report any shortage or damage within 3 working days. Panels must be stored flat and covered.",
};
const D_PO = {
number: "PO-2026-0088",
date: "2026-10-30",
requiredBy: "2026-11-06",
terms: "Net 30",
quotationRef: "QT-BBU-26-0412",
requester: { name: "Nurul Huda Ismail", department: "Production" },
vendor: {
name: "Bekalan Bakeri Utama Sdn Bhd",
registrationNo: "200901027781 (865412-P)",
sstNo: "B10-1808-31004418",
tin: "C10745821600",
address: ["No. 8, Jalan Industri Puchong 3", "47100 Puchong, Selangor"],
attention: "Mr. Lim Wei Jie, Sales",
phone: "+60 3-8061 2290",
},
deliverTo: {
name: "Kilang Roti Mutiara — Central Kitchen",
address: ["Lot 22, Jalan Utas 15/7, Seksyen 15", "40200 Shah Alam, Selangor"],
attention: "Encik Faizal, Store (Loading bay 2)",
phone: "+60 12-338 7710",
},
lines: [
{
itemCode: "FLR-HP-25",
description: "High-protein bread flour",
detail: "Cap Sauh, 25 kg bag",
quantity: "40",
unit: "bag",
unitPrice: "68.50",
taxCode: "EX",
amount: "2740.00",
},
{
itemCode: "BTR-UNS-5",
description: "Unsalted butter block",
detail: "5 kg, chilled (2–4°C)",
quantity: "12",
unit: "blk",
unitPrice: "142.00",
taxRate: 5,
taxCode: "ST5",
amount: "1704.00",
},
{
itemCode: "YST-INS-500",
description: "Instant dry yeast",
detail: "500 g vacuum pack",
quantity: "24",
unit: "pkt",
unitPrice: "9.80",
taxRate: 5,
taxCode: "ST5",
amount: "235.20",
},
{
itemCode: "PKG-LOAF-600",
description: "Printed loaf bag, 600 g",
detail: "LDPE, 2-colour Mutiara print · 1,000 pcs/ctn",
quantity: "10",
unit: "ctn",
unitPrice: "185.00",
taxRate: 10,
taxCode: "ST10",
amount: "1850.00",
},
{
itemCode: "TRY-SS-6040",
description: "Stainless steel baking tray",
detail: "600 × 400 mm, perforated",
quantity: "20",
unit: "pcs",
unitPrice: "46.00",
taxRate: 10,
taxCode: "ST10",
amount: "920.00",
},
],
totals: {
subtotal: "7449.20",
taxes: [
{ label: { en: "Sales tax", ms: "Cukai jualan" }, rate: 5, amount: "96.96" },
{ label: { en: "Sales tax", ms: "Cukai jualan" }, rate: 10, amount: "277.00" },
],
shipping: "120.00",
total: "7943.16",
},
deliveryInstructions:
"Deliver Mon–Fri, 8.00 am – 3.00 pm to loading bay 2.\nButter must arrive chilled; temperature log required.\nQuote PO-2026-0088 on the delivery order and invoice.",
termsAndConditions:
"1. Goods must match the quotation and specification above.\n2. Short or damaged deliveries will be rejected at receiving.\n3. Invoices without a valid PO number will not be processed.",
preparedBy: { name: "Nurul Huda Ismail", title: "Production Executive", date: "30 Oct 2026" },
approvedBy: { name: "Tan Mei Ling", title: "Operations Manager" },
};
const D_SOA = {
number: "SOA-2026-10-0147",
date: "2026-10-31",
periodFrom: "2026-10-01",
periodTo: "2026-10-31",
accountNo: "C-0147",
terms: "Net 14",
party: {
name: "Kafe Pelangi Enterprise",
registrationNo: "202003154872 (KT0458721-X)",
tin: "IG24758193020",
address: ["G-12, Imago Shopping Mall, Jalan Coastal", "88000 Kota Kinabalu, Sabah"],
attention: "Ms. Joanne Chong",
},
openingBalance: "6480.50",
totalDebit: "14278.05",
totalCredit: "8185.30",
closingBalance: "12573.25",
transactions: [
{
date: "2026-10-02",
type: "payment",
number: "OR-2026-0611",
description: "Payment received — DuitNow",
credit: "3200.00",
balance: "3280.50",
},
{
date: "2026-10-03",
type: "invoice",
number: "INV-2026-1402",
description: "Soft drinks & mineral water, 48 ctn",
debit: "1862.40",
balance: "5142.90",
},
{
date: "2026-10-07",
type: "invoice",
number: "INV-2026-1419",
description: "Arabica beans 1 kg × 20, syrups",
debit: "2315.00",
balance: "7457.90",
},
{
date: "2026-10-09",
type: "creditNote",
number: "CN-2026-0088",
description: "Damaged cartons returned (INV-2026-1402)",
credit: "124.80",
balance: "7333.10",
},
{
date: "2026-10-10",
type: "invoice",
number: "INV-2026-1433",
description: "Juice concentrate, 12 btl",
debit: "986.50",
balance: "8319.60",
},
{
date: "2026-10-14",
type: "invoice",
number: "INV-2026-1450",
description: "Mineral water 1.5 L, 60 ctn",
debit: "1540.00",
balance: "9859.60",
},
{
date: "2026-10-15",
type: "payment",
number: "OR-2026-0648",
description: "Payment received — IBG",
credit: "2860.50",
balance: "6999.10",
},
{
date: "2026-10-17",
type: "invoice",
number: "INV-2026-1468",
description: "Arabica beans, fresh milk, syrups",
debit: "2104.20",
balance: "9103.30",
},
{
date: "2026-10-21",
type: "invoice",
number: "INV-2026-1481",
description: "Paper cups 12 oz, 20 ctn",
debit: "760.00",
balance: "9863.30",
},
{
date: "2026-10-22",
type: "debitNote",
number: "DN-2026-0019",
description: "Re-delivery charge, 20 Oct",
debit: "45.00",
balance: "9908.30",
},
{
date: "2026-10-24",
type: "invoice",
number: "INV-2026-1497",
description: "Soft drinks, 32 ctn",
debit: "1318.75",
balance: "11227.05",
},
{
date: "2026-10-28",
type: "payment",
number: "OR-2026-0702",
description: "Part payment — cheque 118842",
credit: "2000.00",
balance: "9227.05",
},
{
date: "2026-10-29",
type: "invoice",
number: "INV-2026-1510",
description: "Arabica beans, oat milk, cups",
debit: "2452.80",
balance: "11679.85",
},
{
date: "2026-10-31",
type: "invoice",
number: "INV-2026-1524",
description: "Mineral water 500 ml, 40 ctn",
debit: "893.40",
balance: "12573.25",
},
],
aging: {
current: "7574.15",
days1to30: "4579.10",
days31to60: "0.00",
days61to90: "420.00",
days90plus: "0.00",
},
totalDue: "12573.25",
payment: {
bankName: "Public Bank",
accountName: "Pengedar Minuman Borneo Sdn Bhd",
accountNumber: "3197 5520 14",
reference: "C-0147",
},
notes:
"RM 420.00 from INV-2026-1188 (August) is now over 60 days. Please settle to avoid a hold on deliveries.",
};
const D_PS = {
number: "PS-2026-10-0042",
periodFrom: "2026-10-01",
periodTo: "2026-10-31",
payDate: "2026-10-31",
employer: { epfNo: "021456789", socsoNo: "B32012345678", taxNo: "E 9123456708" },
employee: {
name: "Nurul Aina binti Kamarudin",
staffId: "LDS-0042",
icNo: "920814-14-5528",
position: "Senior UX Designer",
department: "Product Design",
epfNo: "19837465",
socsoNo: "920814145528",
taxNo: "IG 21837465090",
bankName: "Maybank",
bankAccount: "1621 4589 3307",
},
earnings: [
{ label: "basicSalary", amount: "4200.00" },
{ label: { en: "Transport allowance", ms: "Elaun pengangkutan" }, amount: "250.00" },
{ label: { en: "Phone allowance", ms: "Elaun telefon" }, amount: "100.00" },
{
label: "overtime",
detail: { en: "10.0 hrs × RM 30.29 (1.5×)", ms: "10.0 jam × RM 30.29 (1.5×)" },
amount: "302.90",
},
{
label: "commission",
detail: { en: "Q3 retainer upsell", ms: "Jualan tambahan retainer S3" },
amount: "380.00",
},
],
deductions: [
{
label: "epf",
detail: { en: "11% of EPF wages RM 4,930.00", ms: "11% daripada gaji KWSP RM 4,930.00" },
amount: "544.00",
},
{
label: "socso",
detail: { en: "Employment Injury & Invalidity", ms: "Bencana Pekerjaan & Keilatan" },
amount: "26.25",
},
{ label: "eis", detail: "0.2%", amount: "10.50" },
{ label: "pcb", amount: "213.45" },
{ label: "zakat", detail: "Lembaga Zakat Selangor", amount: "50.00" },
{
label: "advance",
detail: { en: "Recovery 2 of 3", ms: "Bayaran balik 2 daripada 3" },
amount: "200.00",
},
],
employerContributions: [
{ label: "epf", amount: "643.00" },
{ label: "socso", amount: "91.85" },
{ label: "eis", amount: "10.50" },
{ label: "hrdf", amount: "45.50" },
],
grossPay: "5232.90",
totalDeductions: "1044.20",
netPay: "4188.70",
totalEmployerContributions: "790.85",
ytd: [
{ label: "grossPay", amount: "51904.62" },
{ label: "epf", amount: "5412.00" },
{ label: "socso", amount: "262.50" },
{ label: "eis", amount: "105.00" },
{ label: "pcb", amount: "2121.30" },
{ label: "zakat", amount: "500.00" },
{ label: "netPay", amount: "43303.82" },
],
};
const D_PNL = {
period: { kind: "month", end: "2026-10-31" },
basis: "accrual",
currency: "MYR",
columns: [{ label: "Oct 2026" }, { label: "Oct 2025" }],
variance: true,
filters: [
{ label: "Branch", value: "All branches" },
{ label: "Department", value: "All" },
],
preparedBy: "Aisyah Rahman, Finance Manager",
preparedOn: "2026-11-01",
notes:
"Management accounts — unaudited. Income tax is provided at the expected effective rate of 22% for YA 2026. Note references are to the notes in the year-end financial statements.",
revenue: [
{
code: "4000-001",
label: "Sales — furniture (local)",
values: ["368450.00", "321780.00"],
variance: "46670.00",
variancePct: "14.5",
},
{
code: "4000-002",
label: "Sales — export",
values: ["52300.00", "61200.00"],
variance: "-8900.00",
variancePct: "-14.5",
},
{
code: "4100-001",
label: "Installation and delivery income",
values: ["14860.00", "11240.00"],
variance: "3620.00",
variancePct: "32.2",
},
{
code: "4900-001",
label: "Sales returns and discounts",
values: ["-6215.00", "-4980.00"],
variance: "-1235.00",
variancePct: "-24.8",
},
],
totalRevenue: { values: ["429395.00", "389240.00"], variance: "40155.00", variancePct: "10.3" },
costOfSales: [
{
code: "5000-001",
label: "Cost of goods sold",
values: ["-232640.00", "-205310.00"],
variance: "-27330.00",
variancePct: "-13.3",
},
{
code: "5100-001",
label: "Direct labour",
values: ["-28400.00", "-26150.00"],
variance: "-2250.00",
variancePct: "-8.6",
},
{
code: "5200-001",
label: "Freight inwards and import duties",
values: ["-9870.00", "-8640.00"],
variance: "-1230.00",
variancePct: "-14.2",
},
],
totalCostOfSales: {
values: ["-270910.00", "-240100.00"],
variance: "-30810.00",
variancePct: "-12.8",
},
grossProfit: { values: ["158485.00", "149140.00"], variance: "9345.00", variancePct: "6.3" },
operatingExpenses: [
{
label: "Staff costs",
lines: [
{
code: "6100-001",
label: "Salaries and wages",
values: ["-48600.00", "-44200.00"],
variance: "-4400.00",
variancePct: "-10.0",
},
{
code: "6100-002",
label: "EPF, SOCSO and EIS",
values: ["-6912.40", "-6284.60"],
variance: "-627.80",
variancePct: "-10.0",
},
{
code: "6100-003",
label: "Staff welfare and HRDF levy",
values: ["-1850.00", "-2120.00"],
variance: "270.00",
variancePct: "12.7",
},
],
total: { values: ["-57362.40", "-52604.60"], variance: "-4757.80", variancePct: "-9.0" },
},
{
label: "Premises",
lines: [
{
code: "6200-001",
label: "Rental — factory and showroom",
values: ["-18500.00", "-18500.00"],
variance: "0.00",
variancePct: "0.0",
},
{
code: "6200-002",
label: "Utilities (TNB, Air Selangor)",
values: ["-4386.55", "-3912.30"],
variance: "-474.25",
variancePct: "-12.1",
},
{
code: "6200-003",
label: "Repairs and maintenance",
values: ["-1240.00", "-2860.00"],
variance: "1620.00",
variancePct: "56.6",
},
],
total: { values: ["-24126.55", "-25272.30"], variance: "1145.75", variancePct: "4.5" },
},
{
label: "Selling and distribution",
lines: [
{
code: "6300-001",
label: "Advertising and promotion",
values: ["-7450.00", "-5200.00"],
variance: "-2250.00",
variancePct: "-43.3",
},
{
code: "6300-002",
label: "Sales commission",
values: ["-8420.00", "-7310.00"],
variance: "-1110.00",
variancePct: "-15.2",
},
{
code: "6300-003",
label: "Delivery and transport",
values: ["-5680.20", "-4950.80"],
variance: "-729.40",
variancePct: "-14.7",
},
],
total: { values: ["-21550.20", "-17460.80"], variance: "-4089.40", variancePct: "-23.4" },
},
{
label: "Administrative",
lines: [
{
code: "6400-001",
label: "Audit and professional fees",
values: ["-2500.00", "-2500.00"],
variance: "0.00",
variancePct: "0.0",
},
{
code: "6400-002",
label: "Software subscriptions",
values: ["-1180.00", "-890.00"],
variance: "-290.00",
variancePct: "-32.6",
},
{
code: "6400-003",
label: "Insurance",
values: ["-1325.00", "-1250.00"],
variance: "-75.00",
variancePct: "-6.0",
},
{
code: "6400-004",
label: "Bank charges",
values: ["-412.35", "-386.10"],
variance: "-26.25",
variancePct: "-6.8",
},
{
code: "6500-001",
label: "Depreciation and amortisation",
values: ["-9930.00", "-9210.00"],
variance: "-720.00",
variancePct: "-7.8",
note: "5",
},
],
total: { values: ["-15347.35", "-14236.10"], variance: "-1111.25", variancePct: "-7.8" },
},
],
totalOperatingExpenses: {
values: ["-118386.50", "-109573.80"],
variance: "-8812.70",
variancePct: "-8.0",
},
operatingProfit: { values: ["40098.50", "39566.20"], variance: "532.30", variancePct: "1.3" },
otherIncome: [
{
code: "7100-001",
label: "Interest income — fixed deposit",
values: ["820.00", "640.00"],
variance: "180.00",
variancePct: "28.1",
},
{
code: "7100-002",
label: "Realised foreign exchange gain/(loss)",
values: ["-1135.40", "2280.00"],
variance: "-3415.40",
variancePct: "-149.8",
},
],
otherExpenses: [
{
code: "8100-001",
label: "Hire purchase interest",
values: ["-1264.00", "-1410.00"],
variance: "146.00",
variancePct: "10.4",
},
{
code: "8100-002",
label: "Term loan interest",
values: ["-2980.00", "-3240.00"],
variance: "260.00",
variancePct: "8.0",
},
{
code: "8100-003",
label: "Lease interest",
values: ["-760.00", "-880.00"],
variance: "120.00",
variancePct: "13.6",
},
],
profitBeforeTax: { values: ["34779.10", "36956.20"], variance: "-2177.10", variancePct: "-5.9" },
tax: [
{
code: "8800-001",
label: "Income tax expense (estimated)",
values: ["-7651.00", "-8130.00"],
variance: "479.00",
variancePct: "5.9",
note: "6",
},
],
netProfit: { values: ["27128.10", "28826.20"], variance: "-1698.10", variancePct: "-5.9" },
};
const D_BS = {
period: { kind: "asAt", end: "2026-10-31" },
currency: "MYR",
columns: [{ label: "31 Oct 2026" }, { label: "31 Dec 2025", sublabel: "RM · audited" }],
preparedBy: "Aisyah Rahman, Finance Manager",
preparedOn: "2026-11-01",
notes:
"Comparative figures as at 31 December 2025 are taken from the audited financial statements.",
nonCurrentAssets: [
{ label: "Property, plant and equipment", values: ["1284600.00", "1326400.00"], note: "3" },
{ label: "Right-of-use assets", values: ["186000.00", "214000.00"], note: "4" },
{ label: "Intangible assets — software", values: ["24500.00", "28000.00"] },
],
totalNonCurrentAssets: { values: ["1495100.00", "1568400.00"] },
currentAssets: [
{ label: "Inventories", values: ["862340.50", "781215.00"], note: "7" },
{ label: "Trade receivables", values: ["524180.25", "468920.40"], note: "8" },
{ label: "Other receivables, deposits and prepayments", values: ["46718.35", "38560.00"] },
{ label: "Cash and bank balances", values: ["279591.65", "254310.85"], note: "9" },
],
totalCurrentAssets: { values: ["1712830.75", "1543006.25"] },
totalAssets: { values: ["3207930.75", "3111406.25"] },
currentLiabilities: [
{ label: "Trade payables", values: ["386240.60", "352180.30"] },
{ label: "Other payables and accruals", values: ["92415.00", "84600.00"] },
{ label: "SST payable", values: ["18642.35", "16980.20"] },
{ label: "Hire purchase payables", values: ["24000.00", "24000.00"], note: "10" },
{ label: "Term loan", values: ["60000.00", "60000.00"], note: "11" },
{ label: "Current tax liabilities", values: ["32180.00", "21450.00"] },
],
totalCurrentLiabilities: { values: ["613477.95", "559210.50"] },
nonCurrentLiabilities: [
{ label: "Hire purchase payables", values: ["38000.00", "58000.00"], note: "10" },
{ label: "Term loan", values: ["420000.00", "470000.00"], note: "11" },
{ label: "Lease liabilities", values: ["156000.00", "182000.00"], note: "4" },
{ label: "Deferred tax liabilities", values: ["46800.00", "46800.00"] },
],
totalNonCurrentLiabilities: { values: ["660800.00", "756800.00"] },
totalLiabilities: { values: ["1274277.95", "1316010.50"] },
equity: [
{ label: "Share capital", values: ["500000.00", "500000.00"], note: "12" },
{ label: "Retained earnings", values: ["1433652.80", "1295395.75"] },
],
totalEquity: { values: ["1933652.80", "1795395.75"] },
totalEquityAndLiabilities: { values: ["3207930.75", "3111406.25"] },
balanced: true,
};
const BRAND = {
company: {
name: "Arus Teknik Sdn Bhd",
registrationNo: "201801034567 (1295521-D)",
sstNo: "B16-1809-32000417",
tin: "C25718364020",
address: ["No. 18, Jalan Pelabur 23/1, Seksyen 23", "40300 Shah Alam, Selangor"],
phone: "+60 3-5541 2280",
email: "accounts@arusteknik.my",
website: "arusteknik.my",
},
layout: "minimal",
locale: "en",
signature: { name: "Lim Wei Jie", title: "Operations Manager" },
footerNote: "Thank you for your business.",
};
function d(id, label, C, prop, data, sizes, stamps) {
return {
id,
label,
sizes,
stamps,
render: (o) => {
const p = { isolate: true, stamp: o.stamp, size: o.size };
p[prop] = data;
return <C {...p} />;
},
};
}
const DOCS = [
d(
"inv",
"Tax invoice",
TaxInvoiceDocument,
"invoice",
D_INV,
["a4", "letter"],
["paid", "overdue", "draft", "void"],
),
d("quo", "Quotation", QuotationDocument, "quotation", D_QUO, ["a4"], ["draft"]),
d("rcpt", "Receipt", ReceiptDocument, "receipt", D_RCPT, ["a4", "a5", "receipt"], ["copy"]),
d("do", "Delivery order", DeliveryOrderDocument, "order", D_DO, ["a4", "a5"], ["copy"]),
d("po", "Purchase order", PurchaseOrderDocument, "order", D_PO, ["a4"], ["draft", "void"]),
d("soa", "Statement", StatementOfAccountDocument, "statement", D_SOA, ["a4"], []),
d("ps", "Payslip", PayslipDocument, "payslip", D_PS, ["a4", "a5"], ["copy"]),
d("pnl", "Profit & loss", ProfitAndLossReport, "report", D_PNL, ["a4"], ["draft"]),
d("bs", "Balance sheet", BalanceSheetReport, "report", D_BS, ["a4"], ["draft"]),
];
export default function DocumentStudioDemo() {
return <DocumentStudio defaultBrand={BRAND} documents={DOCS} />;
}Use
Settings → Documents (invoice templates). One brand drives invoices, receipts, statements, payslips and reports, so customers set it once.
Props
brand / defaultBrand / onBrandChange (DocBrand), documents ([{id, label, render({stamp, size}), sizes?, stamps?}]), defaultDocumentId, onPrint. brandFromCyncoTemplate(template, company) maps Cynco's stored invoice template onto a DocBrand.
Notes
Controls stack above the preview below 48rem of container width. Logo upload reads the file to a data URL (production should upload it and store the URL). Layout thumbnails and Inter / Geist / Newsreader; documents stay black ink, so there is no colour picker. Print prints only the previewed document.