<!-- source-hash: d5d3a5d0e430ad78e58c1dc249ed1e27 -->
A bordered card component that renders a list of `DeliveryItem` entries, one `DeliveryRow` per item, with loading skeleton and empty-state handling.

## Key Components

| Export | Type | Description |
|--------|------|-------------|
| `DeliveryTable` | Named export | Main table container rendering delivery items |
| `SkeletonRow` | Internal | Animated placeholder row shown during loading |
| `DeliveryTableProps` | Interface | `items: DeliveryItem[]`, `isLoading?: boolean` |

## Rendering States

| State | Trigger | Output |
|-------|---------|--------|
| Loading | `isLoading={true}` | 5 animated `SkeletonRow` placeholders |
| Empty | `items.length === 0` | "No tasks available" message |
| Default | Items present | One `<DeliveryRow>` per item, separated by borders |

## Usage Example

```typescript
import { DeliveryTable } from './delivery-table';
import type { DeliveryItem } from '../../../types/delivery';

// Normal render with data
<DeliveryTable items={deliveryItems} />

// Loading state (e.g. while fetching)
<DeliveryTable items={[]} isLoading={true} />

// Typically consumed by DeliveryLists — split into two tables:
<DeliveryTable items={completedItems} />
<DeliveryTable items={inProgressItems} />
```

## Notes

- Each item row is wrapped in a `div` with `border-b` and `last:border-b-0` to avoid a trailing border on the final row.
- `DeliveryRow` handles all visual logic per row — `DeliveryTable` is purely a layout/state shell.
- Designed to be instantiated twice by the parent `DeliveryLists` component: once for completed items and once for in-progress items.