shoc-frontend-new/src/app/v/[token]/dispatch/_components/dispatch-summary-card.tsx

import { Link } from "react-router";
import { Text } from "@/components/ui/text";
import { vendorPortalStatusClass } from "@/domain/vendor-portal/lib/status-helpers";
import type { VendorPortalDispatchDetail } from "@/domain/vendor-portal/types/vendor-portal";
import { DispatchSnapshotDetails } from "@/app/v/[token]/dispatch/_components/dispatch-snapshot-details";
import { DispatchStatusActions } from "@/app/v/[token]/dispatch/_components/dispatch-status-actions";

type DispatchSummaryCardProps = {
  token: string;
  data: VendorPortalDispatchDetail;
  locked: boolean;
  busy: boolean;
  onAccept: () => void;
  onRefuse: () => void;
  onStart: () => void;
  onComplete: () => void;
  onRequestCancel: () => void;
};

export function DispatchSummaryCard({
  token,
  data,
  locked,
  busy,
  onAccept,
  onRefuse,
  onStart,
  onComplete,
  onRequestCancel,
}: DispatchSummaryCardProps) {
  return (
    <>
      <Link to={`/v/${token}/dashboard`} className="vp-back-link">
        ← Back to dispatches
      </Link>

      <div className="vp-card">
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
          <div>
            <Text variant="title">{data.dispatchNumber}</Text>
            <div className="vp-muted">{data.workOrder?.workerOrderTitle}</div>
          </div>
          <span className={vendorPortalStatusClass(data.status)}>{data.status}</span>
        </div>

        <DispatchSnapshotDetails data={data} locked={locked} />

        <DispatchStatusActions
          status={data.status}
          locked={locked}
          busy={busy}
          onAccept={onAccept}
          onRefuse={onRefuse}
          onStart={onStart}
          onComplete={onComplete}
          onRequestCancel={onRequestCancel}
        />
      </div>
    </>
  );
}