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 | 15x 15x 4x 11x 11x 27x 11x 27x 11x 33x 11x 44x 11x 66x 11x 11x 11x 11x 11x 11x | import { ColumnDef } from "@tanstack/react-table";
import { DataTable } from "@/ahuora-design-system/ui/data-table";
import { Separator } from "@/ahuora-design-system/ui/separator";
import { Spinner } from "@/ahuora-design-system/ui/spinner";
import { RowTypeEnum, TargetSummaryRead } from "@/api/apiStore.gen";
import {
useCurrentPinchOptions,
useCurrentPinchOutputs,
} from "@/hooks/PinchHooks";
import { getTargetColumns } from "./TableColumns/TargetOutputColumns";
export default function PinchTargetDashboard() {
const { outputs, isLoading, isError } = useCurrentPinchOutputs();
const {
options,
isLoading: isOptionsLoading,
isError: isOptionsError,
} = useCurrentPinchOptions();
if (isLoading || isOptionsLoading) {
return (
<div className="flex justify-center items-center h-screen">
<Spinner />
</div>
);
}
if (isError || !outputs) {
return <div>Error loading target data.</div>;
}
if (isOptionsError || !outputs || !options) {
return <div>Error loading target data.</div>;
}
const targets: TargetSummaryRead[] = outputs[0]!.targets!;
const contentRows: TargetSummaryRead[] = targets.filter(
(row) => row.row_type == RowTypeEnum.Content,
);
const footerRows: TargetSummaryRead[] = targets.filter(
(row) => row.row_type == RowTypeEnum.Footer,
);
const turbineSelected: boolean =
options[0].selections?.ContainedProperties?.find(
(prop) => prop.key == "PROP_MOP_2",
)?.values.value ?? false;
const areaSelected: boolean =
options[0].selections?.ContainedProperties?.find(
(prop) => prop.key == "PROP_MOP_3",
)?.values.value ?? false;
const exergySelected: boolean =
options[0].selections?.ContainedProperties?.find(
(prop) => prop.key == "PROP_MOP_5",
)?.values.value ?? false;
const mainColumns: ColumnDef<TargetSummaryRead>[] = getTargetColumns(
targets,
turbineSelected,
areaSelected,
exergySelected,
);
const utilityColumns: ColumnDef<TargetSummaryRead>[] = getTargetColumns(
targets,
turbineSelected,
areaSelected,
exergySelected,
true,
);
const sortOrder = [
"Total Integrated Target",
"Total Site Target",
"Total Process Target",
];
footerRows.sort((a, b) => {
const indexA = sortOrder.indexOf(a.name);
const indexB = sortOrder.indexOf(b.name);
return indexA - indexB;
});
const combinedRows: TargetSummaryRead[] = [...footerRows, ...contentRows];
return (
<div>
<div className="flex flex-col gap-8">
<div className="overflow-x-auto">
<DataTable
columns={mainColumns}
data={combinedRows}
rowSelection={() => {}}
withBorder={false}
/>
</div>
<Separator />
<div className="overflow-x-auto">
<DataTable
columns={utilityColumns}
data={combinedRows}
rowSelection={() => {}}
withBorder={false}
/>
</div>
</div>
</div>
);
}
|