Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 103 104 105 106 107 108 109 110 111 112 | 225x 56x 281x 393x 225x 225x 225x 256x 238x 287x 225x 900x 198x 1017x 90x 225x 225x 256x 315x 675x 1350x 649x 1073x | import { CircleDollarSign, Lock } from "lucide-react";
import { Badge } from "@/ahuora-design-system/ui/badge";
import type { EconomicsStudyRead } from "@/api/apiStore.gen";
import {
duplicateEconomicsStudyNames,
economicsStudyDisplayLabel,
GroupedEconomicsStudySelect,
} from "../../shared/ui";
import {
CreateEconomicsStudyButton,
DeleteEconomicsStudyButton,
DuplicateEconomicsStudyButton,
RecalculateEconomicsButton,
} from "../actions";
import { type EconomicsLoadState, selectorPlaceholder } from "../model";
export function EconomicsHeader({
readOnly,
state,
studies,
selectedStudy,
routeFlowsheetId,
canEdit,
onStudyChange,
onStudyCreated,
onStudyDeleted,
onStudyRecalculated,
}: {
readOnly: boolean;
state: EconomicsLoadState;
studies: EconomicsStudyRead[];
selectedStudy?: EconomicsStudyRead;
routeFlowsheetId?: number;
canEdit: boolean;
onStudyChange: (studyId: number) => void;
onStudyCreated?: (study: EconomicsStudyRead) => void;
onStudyDeleted?: (studyId: number) => void;
onStudyRecalculated?: () => void;
}) {
const duplicateNames = duplicateEconomicsStudyNames(studies);
const selectedSubtitle = selectedStudy
? economicsStudyDisplayLabel(selectedStudy, {
duplicateNames,
routeFlowsheetId,
})
: "Study workspace";
return (
<header className="flex min-h-[64px] flex-wrap items-center gap-3 px-5 py-3">
<div className="flex min-w-0 flex-1 items-center gap-3">
<CircleDollarSign className="size-5 shrink-0 text-primary" />
<div className="min-w-0">
<h1 className="truncate text-base font-semibold">Economics</h1>
<div className="text-xs text-muted-foreground">
{state === "ready" ? selectedSubtitle : "Study workspace"}
</div>
</div>
{readOnly && (
<Badge
variant="secondary"
size="xs"
borderRadius="round"
className="gap-1"
aria-label="economics-read-only-indicator"
>
<Lock size={12} />
Read only
</Badge>
)}
</div>
{canEdit && state === "ready" && (
<CreateEconomicsStudyButton
compact
canEdit={canEdit}
onCreated={onStudyCreated}
/>
)}
{state === "ready" && selectedStudy && (
<RecalculateEconomicsButton
study={selectedStudy}
canEdit={canEdit}
onRecalculated={onStudyRecalculated}
/>
)}
<div className="flex min-w-[14rem] flex-1 items-center gap-1 sm:w-[320px] sm:max-w-[42vw] sm:flex-none">
<div className="min-w-0 flex-1">
<GroupedEconomicsStudySelect
ariaLabel="Select economics study"
value={selectedStudy ? String(selectedStudy.id) : ""}
studies={studies}
disabled={studies.length === 0 || state !== "ready"}
placeholder={selectorPlaceholder(state)}
onChange={(value) => onStudyChange(Number(value))}
/>
</div>
{canEdit && state === "ready" && selectedStudy && (
<div className="ml-2 flex shrink-0 items-center gap-2 border-l pl-2">
<DuplicateEconomicsStudyButton
study={selectedStudy}
onDuplicated={onStudyCreated}
/>
<DeleteEconomicsStudyButton
study={selectedStudy}
onDeleted={onStudyDeleted}
/>
</div>
)}
</div>
</header>
);
}
|