Oicana React example

Oicana

Template

Quality

Compiled in 903ms

Template Inputs

File Input

Select banner file

JSON Input

invoice

{
  "$schema": "invoice.schema.json",
  "id": "2025-03-10t172205",
  "issuingDate": "2025-04-27",
  "deliveryDate": "2025-04-19",
  "dueDate": "2025-05-06",
  "biller": {
    "name": "Alex Johnson",
    "title": "Senior Consultant",
    "company": "Example Solutions GmbH",
    "vat-id": "DE1234567",
    "iban": "DE89370400440532013000",
    "address": {
      "country": "Germany",
      "city": "Berlin",
      "postal-code": "10115",
      "street": "Sample Street 23"
    }
  },
  "recipient": {
    "name": "Maria Schmidt",
    "title": "IT Manager",
    "vat-id": "DE7654321",
    "address": {
      "country": "Germany",
      "city": "Munich",
      "postal-code": "80331",
      "street": "Business Avenue 1"
    }
  },
  "items": [
    {
      "date": "2025-04-03",
      "description": "Wireless keyboard",
      "quantity": 4,
      "price": 25
    },
    {
      "date": "2025-04-03",
      "description": "USB-C cable",
      "quantity": 2,
      "price": 45
    },
    {
      "date": "2025-04-03",
      "description": "External hard drive 2TB",
      "quantity": 1,
      "price": 75
    },
    {
      "date": "2025-04-03",
      "description": "Webcam HD",
      "quantity": 3,
      "price": 60
    },
    {
      "date": "2025-04-03",
      "description": "LED desk lamp",
      "quantity": 4,
      "price": 15
    },
    {
      "date": "2025-04-03",
      "description": "Laptop stand",
      "quantity": 2,
      "price": 55
    },
    {
      "date": "2025-04-03",
      "description": "Tablet 10 inch",
      "quantity": 1,
      "price": 85
    },
    {
      "date": "2025-04-03",
      "description": "Network infrastructure consultation",
      "dur-min": 120,
      "price": 200
    },
    {
      "date": "2025-04-03",
      "description": "Power adapter",
      "quantity": 3,
      "price": 40
    },
    {
      "date": "2025-04-03",
      "description": "Noise-canceling headphones",
      "quantity": 2,
      "price": 35
    },
    {
      "date": "2025-04-03",
      "description": "Projector wireless",
      "quantity": 1,
      "price": 90
    },
    {
      "date": "2025-03-03",
      "description": "Monitor 24 inch",
      "quantity": 4,
      "price": 30
    },
    {
      "date": "2025-04-03",
      "description": "Software migration consulting",
      "dur-min": 180,
      "price": 300
    },
    {
      "date": "2025-04-03",
      "description": "Document scanner",
      "quantity": 2,
      "price": 65
    },
    {
      "date": "2025-04-03",
      "description": "Network switch 8-port",
      "quantity": 1,
      "price": 95
    },
    {
      "date": "2025-04-03",
      "description": "Ethernet cable Cat6",
      "quantity": 3,
      "price": 50
    },
    {
      "date": "2025-04-03",
      "description": "Server optimization service",
      "dur-min": 225,
      "price": 375
    },
    {
      "date": "2025-04-03",
      "description": "Wireless router",
      "quantity": 1,
      "price": 80
    },
    {
      "date": "2025-04-03",
      "description": "Cable organizer",
      "quantity": 2,
      "price": 45
    },
    {
      "date": "2025-04-03",
      "description": "Whiteboard marker set",
      "quantity": 4,
      "price": 20
    },
    {
      "date": "2025-04-03",
      "description": "Hardware maintenance and cleaning",
      "dur-min": 75,
      "price": 125
    },
    {
      "date": "2025-04-03",
      "description": "Rechargeable battery pack",
      "quantity": 4,
      "price": 25
    },
    {
      "date": "2025-04-03",
      "description": "Conference speaker system",
      "quantity": 1,
      "price": 70
    },
    {
      "date": "2025-04-03",
      "description": "USB hub 4-port",
      "quantity": 3,
      "price": 35
    },
    {
      "date": "2025-04-03",
      "description": "Cable management box",
      "quantity": 2,
      "price": 40
    },
    {
      "date": "2025-04-03",
      "description": "Portable SSD 1TB",
      "quantity": 1,
      "price": 88
    },
    {
      "date": "2025-04-03",
      "description": "Database optimization service",
      "dur-min": 150,
      "price": 250
    },
    {
      "date": "2025-04-03",
      "description": "UPS battery backup",
      "quantity": 1,
      "price": 95
    },
    {
      "date": "2025-04-03",
      "description": "Office chair ergonomic",
      "quantity": 4,
      "price": 10
    },
    {
      "date": "2025-04-03",
      "description": "Graphics tablet",
      "quantity": 1,
      "price": 99
    }
  ]
}