> ## Documentation Index
> Fetch the complete documentation index at: https://docs.unibee.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Status and workflow

export const IVStatus = ({statusId}) => {
  const commonStyle = {
    borderRadius: "4px",
    display: "inline-block",
    marginInlineEnd: "8px",
    paddingInline: "7px",
    fontSize: "12px"
  };
  const status = [{
    bgColor: "#fff0f6",
    color: "#c41d7f",
    border: "1px solid #ffadd2",
    text: "Initiating"
  }, {
    bgColor: "gray",
    color: "white",
    border: "1px solid gray",
    text: "Draft"
  }, {
    bgColor: "#e6f4ff",
    color: "#0958d9",
    border: "1px solid #91caff",
    text: "Awaiting payment"
  }, {
    bgColor: "#87d068",
    color: "#FFF",
    border: "1px solid transparent",
    text: "Paid"
  }, {
    bgColor: "#fff1f0",
    color: "#cf1322",
    border: "1px solid #ffa39e",
    text: "Failed"
  }, {
    bgColor: "#f9f0ff",
    color: "#531dab",
    border: "1px solid #d3adf7",
    text: "Cancelled"
  }, {
    bgColor: "#e6fffb",
    color: "#08979c",
    border: "1px solid #87e8de",
    text: "Reversed"
  }];
  const s = status[statusId];
  return <span style={{
    background: s.bgColor,
    color: s.color,
    border: s.border,
    borderRadius: "4px",
    ...commonStyle
  }}>
  {s.text}
</span>;
};

## Status

The Status of invoice is of integer enum type: 1-Draft | 2-Awaiting payment(Awaiting refund) | 3-Paid(Refunded) | 4-Failed | 5-Cancelled

* <IVStatus statusId={1} />: A `Draft` Invoice is the start status when created
  by admin manually, admin can edit the draft invoice by clicking the Save
  button. This status will transition to `Awaiting payment` when admin click the
  Create button, then edit is not allowed, invoice link will be generated (with
  payment link), and user will receive this invoice mail.

  Refund invoice works the same way, the only difference is that status will become “Awaiting refund” after creating.

* <IVStatus statusId={2} />: The invoice is waiting for users to finish the
  payment. The `DayUtilDue` property represents how many days this invoice will
  stay in this status. If user finish the payment on time, status will
  transition to `Paid`, otherwise `Faild`. But admin can cancel the invoice if
  users haven’t finished the payment in `DayUtilDue`, then status will become
  `Cancelled`.

  `Awaiting refund` status works the same way.

* <IVStatus statusId={3} />: User has finished the payment on time. Nor further
  action needed.

  `Refunded` status works the same way as Paid.

* <IVStatus statusId={4} />: This status is an end status from `Awaiting
  payment` as invoice's DayUtilDue time run out for payment.

* <IVStatus statusId={5} />: Comes from by Admin cancel the `Awaitig payment`
  invoice manual or cancel by System automatic.

* <IVStatus statusId={6} />: There are some edge cases when `Payment received`
  and `Payment failed or Invoice cancelled` happened at the same time. In this
  case, the invoice will turn to `Reversed`, admin's manual intervention is
  required.

## Status flow

```mermaid theme={null}
graph TB
  A[Create Invoice] -->|Initial State by Admin| B[Draft]
  A -->|Initial State by System| C[Awaiting payment]
  B[Draft] -->|Admin Finalizes| C[Awaiting payment]
  C -->|Invoice paid| D[Paid]
  C -->|Payment overdue| E[Failed]
  C -->|Cancelled by admin| F[Cancelled]
  E -->|Payment received| G[Reversed]
  F -->|Payment received| G[Reversed]
```