src/components/RequestSummaryPanel.tsx

import type { ReactNode } from "react";

type Props = {
  requestNumber: string;
  requestedBy: string;
  department: string;
  budgetCode: string;
  requestedDate: string;
  onRequestedByChange: (v: string) => void;
  onDepartmentChange: (v: string) => void;
  onBudgetCodeChange: (v: string) => void;
  onRequestedDateChange: (v: string) => void;
};

const INPUT =
  "mt-0.5 w-full rounded-md border border-outline-variant bg-surface-container-lowest px-2 py-1 text-[11px] leading-tight text-primary shadow-sm focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary";

function MiniField({
  label,
  children,
}: {
  label: string;
  children: ReactNode;
}) {
  return (
    <div>
      <label className="font-label-caps text-[8px] font-bold uppercase leading-none tracking-wide text-secondary">
        {label}
      </label>
      {children}
    </div>
  );
}

export function RequestSummaryPanel({
  requestNumber,
  requestedBy,
  department,
  budgetCode,
  requestedDate,
  onRequestedByChange,
  onDepartmentChange,
  onBudgetCodeChange,
  onRequestedDateChange,
}: Props) {
  return (
    <div className="shrink-0 rounded-lg border border-outline-variant bg-surface-container-low px-2.5 py-2 shadow-sm">
      <h2 className="mb-1.5 font-label-caps text-[8px] font-bold uppercase leading-none tracking-wide text-secondary">
        Request details
      </h2>
      <div className="grid grid-cols-2 gap-x-2 gap-y-1.5">
        <MiniField label="Request Number">
          <input
            type="text"
            readOnly
            value={requestNumber}
            className={`${INPUT} bg-surface-container-high font-data-mono text-[10px]`}
            aria-readonly
          />
        </MiniField>
        <MiniField label="Requested Date">
          <input
            type="date"
            value={requestedDate}
            onChange={(e) => onRequestedDateChange(e.target.value)}
            className={INPUT}
          />
        </MiniField>
        <MiniField label="Requested By">
          <input
            type="text"
            value={requestedBy}
            onChange={(e) => onRequestedByChange(e.target.value)}
            placeholder="Name or ID"
            className={INPUT}
          />
        </MiniField>
        <MiniField label="Department">
          <input
            type="text"
            value={department}
            onChange={(e) => onDepartmentChange(e.target.value)}
            placeholder="Cost center / org unit"
            className={INPUT}
          />
        </MiniField>
        <div className="col-span-2">
          <MiniField label="Budget Code">
            <input
              type="text"
              value={budgetCode}
              onChange={(e) => onBudgetCodeChange(e.target.value)}
              placeholder="GL / WBS / budget reference"
              className={INPUT}
            />
          </MiniField>
        </div>
      </div>
    </div>
  );
}