# OrderTicket

> `OrderTicket` is part of the Containers set, imported from `@jcsoftdev/ui/containers`.

Source: https://ui.jcsoftdev.com/docs/components/order-ticket

`OrderTicket` is part of the Containers set, imported from `@jcsoftdev/ui/containers`.

## Import

```ts
import { OrderTicket } from "@jcsoftdev/ui/containers";
```

Single-component entry points tree-shake to just this component: `@jcsoftdev/ui/containers/order-ticket`.

## Usage

```tsx
<OrderTicket
  table="Mesa 8"
  guests={4}
  server="Rosa"
  targetMinutes={20}
  lines={seed}
  chip="Fondos"
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `table` | `string` |  |  |
| `number` | `string \| number` |  |  |
| `channel` | `OrderTicketChannel` |  |  |
| `guests` | `number` |  |  |
| `server` | `string` |  |  |
| `customer` | `string` |  |  |
| `since` * | `string \| Date` |  |  |
| `targetMinutes` * | `number` |  |  |
| `serverOffsetMs` | `number` |  |  |
| `state` | `"ok" \| "warn" \| "late"` |  |  |
| `lines` * | `readonly OrderTicketLine[]` |  |  |
| `partIndex` | `number` |  |  |
| `partCount` | `number` |  |  |
| `recovered` | `boolean` |  |  |
| `chip` | `ReactNode` |  |  |
| `readOnly` | `boolean` | `false` |  |
| `onStartAll` | `((lines: readonly OrderTicketLine[]) => void)` |  |  |
| `onReadyAll` | `((lines: readonly OrderTicketLine[]) => void)` |  |  |
| `actions` | `ReactNode` |  |  |
| `hanging` | `boolean` |  |  |
| `headingLevel` | `2 \| 4 \| 3` | `3` |  |
| `viewTransitionName` | `string` |  |  |
| `classNames` | `Partial<Record<OrderTicketPart, string>>` |  |  |

`*` marks a required prop.

It also accepts the native props of the element or primitive it renders (for example `className`, `id`, `aria-*` and event handlers).

## Storybook stories

- [Default](/storybook/?path=/story/containers-orderticket--default)
- [Late](/storybook/?path=/story/containers-orderticket--late)
- [Kitchen Board](/storybook/?path=/story/containers-orderticket--kitchen-board)
- [Wall Screen](/storybook/?path=/story/containers-orderticket--wall-screen)

## Source

`packages/ui/src/containers/order-ticket/order-ticket.tsx`