edr-platform/apps/edr-freight-web/backoffice/src/pages/warehouses/DispatchQueuePage.tsx

import { Card } from '@mantine/core';

import { PageContainer, PageHeader } from '@/components/page';
import { useQuery } from '@tanstack/react-query';

import { InventoryWorkbench, VisualEmptyState } from '@/components/warehouses';
import { api } from '@/services/api';

/** Items that are LOADED and awaiting dispatch (train departure). */
export default function DispatchQueuePage() {
  const { data, isLoading } = useQuery(
    api.warehouses.listInventory.queryOptions({ input: { filter: { status: 'LOADED' } } }),
  );
  const items = data ?? [];

  return (
    <PageContainer>
      <PageHeader
        title="Dispatch Queue"
        subtitle="Loaded inventory awaiting train departure. Mark items dispatched once they leave."
      />

      <Card>
        {!isLoading && items.length === 0 ? (
          <VisualEmptyState
            variant="train"
            title="Nothing to dispatch"
            description="Loaded items appear here, ready to mark as dispatched."
          />
        ) : (
          <InventoryWorkbench items={items} isLoading={isLoading} />
        )}
      </Card>
    </PageContainer>
  );
}