shoc-frontend-new/src/app/v/[token]/dispatch/_components/dispatch-detail-sections.tsx

import { Text } from "@/components/ui/text";
import { ChecklistSection } from "@/app/v/[token]/dispatch/_components/checklist-section";
import { CommentsSection } from "@/app/v/[token]/dispatch/_components/comments-section";
import { SignoffSection } from "@/app/v/[token]/dispatch/_components/signoff-section";
import { UpliftRequestsSection } from "@/app/v/[token]/dispatch/_components/uplift-requests-section";
import { VendorPortalDocuments } from "@/app/v/_components/vendor-portal-documents";
import type {
  VendorPortalDispatchDetail,
  VendorPortalDocumentStatus,
} from "@/domain/vendor-portal/types/vendor-portal";

type DispatchDetailSectionsProps = {
  token: string;
  dispatchId: number;
  data: VendorPortalDispatchDetail;
  locked: boolean;
  refresh: () => Promise<void>;
  pollEvidenceDocument: (documentId: number) => Promise<VendorPortalDocumentStatus | undefined>;
  updateLocal: (
    updater: (current: VendorPortalDispatchDetail) => VendorPortalDispatchDetail,
  ) => void;
};

export function DispatchDetailSections({
  token,
  dispatchId,
  data,
  locked,
  refresh,
  pollEvidenceDocument,
  updateLocal,
}: DispatchDetailSectionsProps) {
  return (
    <>
      <div className="vp-card">
        <Text variant="heading">Checklist</Text>
        <ChecklistSection
          token={token}
          dispatchId={dispatchId}
          items={data.checklist ?? []}
          locked={locked}
          onItemUpdated={(updated) =>
            updateLocal((current) => ({
              ...current,
              checklist: (current.checklist ?? []).map((item) =>
                item.id === updated.id ? { ...item, ...updated } : item,
              ),
            }))
          }
        />
      </div>

      <div className="vp-card">
        <Text variant="heading">Completion documents</Text>
        <VendorPortalDocuments
          token={token}
          dispatchId={dispatchId}
          documents={data.documents ?? []}
          locked={locked}
          onChanged={refresh}
        />
      </div>

      <div className="vp-card">
        <Text variant="heading">NTE Uplift Requests</Text>
        <UpliftRequestsSection
          token={token}
          dispatchId={dispatchId}
          currentNte={data.nteAmount}
          upliftRequests={data.upliftRequests ?? []}
          locked={locked}
          onChanged={refresh}
          pollDocument={pollEvidenceDocument}
        />
      </div>

      <div className="vp-card">
        <Text variant="heading">Customer Signoff</Text>
        <SignoffSection
          token={token}
          dispatchId={dispatchId}
          existing={data.signoffs ?? []}
          signoffType="customer"
          nameLabel="Customer name"
          submissionLocked={locked}
          onAdded={() => void refresh()}
        />
      </div>

      <div className="vp-card">
        <Text variant="heading">Vendor Signoff</Text>
        <SignoffSection
          token={token}
          dispatchId={dispatchId}
          existing={data.signoffs ?? []}
          signoffType="vendor"
          nameLabel="Your name"
          submissionLocked={locked}
          onAdded={() => void refresh()}
        />
      </div>

      <div className="vp-card">
        <Text variant="heading">Comments</Text>
        <CommentsSection
          token={token}
          dispatchId={dispatchId}
          comments={data.comments ?? []}
          onAdded={(comment) =>
            updateLocal((current) => ({
              ...current,
              comments: [...(current.comments ?? []), comment],
            }))
          }
        />
      </div>
    </>
  );
}