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 | 48x 48x 48x 48x 54x 51x 60x 48x 192x 41x 212x 20x 48x 60x 48x 7x 55x 55x 11x 11x 59x 59x 148x 20x 128x 88x 232x | import { CircleDollarSign, Lock } from "lucide-react";
import { Badge } from "@/ahuora-design-system/ui/badge";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/ahuora-design-system/ui/select";
import type { EconomicsStudyRead } from "@/api/apiStore.gen";
import {
CreateEconomicsStudyButton,
DeleteEconomicsStudyButton,
RecalculateEconomicsButton,
} from "../actions";
import { type EconomicsLoadState, selectorPlaceholder } from "../model";
export function EconomicsHeader({
readOnly,
state,
studies,
selectedStudy,
canEdit,
onStudyChange,
onStudyCreated,
onStudyDeleted,
onStudyRecalculated,
}: {
readOnly: boolean;
state: EconomicsLoadState;
studies: EconomicsStudyRead[];
selectedStudy?: EconomicsStudyRead;
canEdit: boolean;
onStudyChange: (studyId: number) => void;
onStudyCreated?: (studyId: number) => void;
onStudyDeleted?: (studyId: number) => void;
onStudyRecalculated?: () => void;
}) {
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" && selectedStudy
? selectedStudy.name
: "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 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">
<Select
value={selectedStudy ? String(selectedStudy.id) : ""}
onValueChange={(value) => onStudyChange(Number(value))}
disabled={studies.length === 0 || state !== "ready"}
>
<SelectTrigger
aria-label="Select economics study"
data-testid="economics-study-selector"
>
<SelectValue placeholder={selectorPlaceholder(state)} />
</SelectTrigger>
<SelectContent>
{studies.map((study) => (
<SelectItem
key={study.id}
value={String(study.id)}
aria-label={`Select ${study.name}`}
>
{study.name}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
{canEdit && state === "ready" && selectedStudy && (
<DeleteEconomicsStudyButton
study={selectedStudy}
onDeleted={onStudyDeleted}
/>
)}
</div>
</header>
);
}
|