File size: 2,948 Bytes
1f55496 478ea27 1f55496 478ea27 1f55496 478ea27 1f55496 478ea27 1f55496 478ea27 1f55496 478ea27 1f55496 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 | 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>
);
}
|