{
  "schemaVersion": 1,
  "name": "Invoice status",
  "unit": "mm",
  "page": {
    "size": "A4",
    "orientation": "portrait",
    "margins": {
      "top": 12,
      "right": 12,
      "bottom": 12,
      "left": 12
    }
  },
  "dataSources": [
    {
      "name": "invoices"
    }
  ],
  "styles": {
    "title": {
      "fontSize": 18,
      "fontWeight": "bold",
      "color": "#0f172a"
    },
    "muted": {
      "fontSize": 9,
      "color": "#64748b"
    },
    "th": {
      "fontSize": 9,
      "fontWeight": "bold",
      "color": "#ffffff",
      "backgroundColor": "#334155",
      "padding": 1.5
    },
    "td": {
      "fontSize": 9,
      "padding": 1.5,
      "border": {
        "width": 0.4,
        "color": "#e2e8f0",
        "style": "solid",
        "sides": [
          "bottom"
        ]
      }
    },
    "num": {
      "textAlign": "right"
    },
    "sub": {
      "fontSize": 9,
      "fontWeight": "bold",
      "backgroundColor": "#e2e8f0",
      "padding": 1.5
    }
  },
  "reportHeader": {
    "id": "rh",
    "height": 22,
    "components": [
      {
        "id": "title",
        "type": "text",
        "x": 0,
        "y": 0,
        "width": 186,
        "height": 9,
        "text": "Invoice status",
        "styleName": "title"
      },
      {
        "id": "sub",
        "type": "text",
        "x": 0,
        "y": 10,
        "width": 186,
        "height": 10,
        "text": "{{ count(invoices, r => r.status === \"overdue\") }} overdue invoices, {{ formatCurrency(sum(invoices, r => r.status === \"overdue\" ? r.amount : 0), \"USD\") }} outstanding",
        "styleName": "muted",
        "style": {
          "fontSize": 10
        },
        "conditions": [
          {
            "expression": "invoices.some(r => r.status === \"overdue\")",
            "style": {
              "color": "#b91c1c"
            }
          }
        ]
      }
    ]
  },
  "pageFooter": {
    "id": "pf",
    "height": 8,
    "components": [
      {
        "id": "pf_n",
        "type": "text",
        "x": 0,
        "y": 2,
        "width": 186,
        "height": 5,
        "text": "Page {{ page.number }} of {{ page.count }}",
        "style": {
          "fontSize": 8,
          "color": "#64748b",
          "textAlign": "right"
        }
      }
    ]
  },
  "body": [
    {
      "kind": "dataRegion",
      "id": "list",
      "dataSource": "invoices",
      "header": {
        "id": "head",
        "height": 7,
        "components": [
          {
            "id": "h1",
            "type": "text",
            "x": 0,
            "y": 0,
            "width": 30,
            "height": 7,
            "text": "Invoice",
            "styleName": "th"
          },
          {
            "id": "h2",
            "type": "text",
            "x": 30,
            "y": 0,
            "width": 60,
            "height": 7,
            "text": "Client",
            "styleName": "th"
          },
          {
            "id": "h3",
            "type": "text",
            "x": 90,
            "y": 0,
            "width": 30,
            "height": 7,
            "text": "Due",
            "styleName": "th"
          },
          {
            "id": "h4",
            "type": "text",
            "x": 120,
            "y": 0,
            "width": 36,
            "height": 7,
            "text": "Amount",
            "styleName": "th",
            "style": {
              "textAlign": "right"
            }
          },
          {
            "id": "h5",
            "type": "text",
            "x": 156,
            "y": 0,
            "width": 30,
            "height": 7,
            "text": "Status",
            "styleName": "th",
            "style": {
              "textAlign": "center"
            }
          }
        ]
      },
      "detail": {
        "id": "row",
        "height": 7,
        "components": [
          {
            "id": "c1",
            "type": "text",
            "x": 0,
            "y": 0,
            "width": 30,
            "height": 7,
            "text": "{{ row.no }}",
            "styleName": "td"
          },
          {
            "id": "c2",
            "type": "text",
            "x": 30,
            "y": 0,
            "width": 60,
            "height": 7,
            "text": "{{ row.client }}",
            "styleName": "td"
          },
          {
            "id": "c3",
            "type": "text",
            "x": 90,
            "y": 0,
            "width": 30,
            "height": 7,
            "text": "{{ row.due }}",
            "styleName": "td",
            "format": {
              "type": "date",
              "pattern": "dd MMM yyyy"
            }
          },
          {
            "id": "c4",
            "type": "text",
            "x": 120,
            "y": 0,
            "width": 36,
            "height": 7,
            "text": "{{ row.amount }}",
            "styleName": "td",
            "style": {
              "textAlign": "right"
            },
            "format": {
              "type": "currency",
              "currency": "USD"
            },
            "conditions": [
              {
                "expression": "row.amount >= 5000",
                "style": {
                  "fontWeight": "bold"
                }
              }
            ]
          },
          {
            "id": "c5",
            "type": "text",
            "x": 156,
            "y": 0,
            "width": 30,
            "height": 7,
            "text": "{{ upper(row.status) }}",
            "styleName": "td",
            "style": {
              "textAlign": "center",
              "fontWeight": "bold",
              "fontSize": 8
            },
            "conditions": [
              {
                "expression": "row.status === \"paid\"",
                "style": {
                  "color": "#15803d",
                  "backgroundColor": "#dcfce7"
                }
              },
              {
                "expression": "row.status === \"overdue\"",
                "style": {
                  "color": "#b91c1c",
                  "backgroundColor": "#fee2e2"
                }
              },
              {
                "expression": "row.status === \"open\"",
                "style": {
                  "color": "#a16207",
                  "backgroundColor": "#fef9c3"
                }
              }
            ]
          }
        ]
      }
    }
  ]
}