Files
lstV2/frontend/src/components/eom/KFP.tsx

69 lines
2.5 KiB
TypeScript

import {useModuleStore} from "@/lib/store/useModuleStore";
import {LstCard} from "../extendedUI/LstCard";
import {CardHeader} from "../ui/card";
import {Tabs, TabsContent, TabsList, TabsTrigger} from "../ui/tabs";
import {useSessionStore} from "@/lib/store/sessionStore";
export default function KFP() {
const {modules} = useModuleStore();
const {user} = useSessionStore();
const eomMod = modules.filter((m) => m.name === "eom");
// the users current role for eom is?
const role: any = user?.roles.filter((r) => r.module_id === eomMod[0].module_id) || "";
const tabs = [
{key: "mat", label: "Materials", roles: ["admin", "systemAdmin"], content: <Materials />},
{key: "sbm", label: "Stretch Blow", roles: ["admin", "systemAdmin"]},
];
return (
<div className="flex flex-row w-full">
<Tabs defaultValue="mat">
<TabsList>
{tabs.map((tab) => {
if (tab.roles.includes(role[0].role))
return <TabsTrigger value={tab.key}>{tab.label}</TabsTrigger>;
})}
</TabsList>
{tabs.map((tab) => {
if (tab.roles.includes(role[0].role))
return (
<TabsContent value={tab.key} className="w-screen">
{tab.content}
</TabsContent>
);
})}
</Tabs>
</div>
);
}
function Materials() {
return (
<div className="flex flex-row w-[90%]">
<div className="w-1/5">
<LstCard className="m-1">
<CardHeader>Resin</CardHeader>
</LstCard>
<LstCard className="m-1">
<CardHeader>MasterBatch</CardHeader>
</LstCard>
<LstCard className="m-1">
<CardHeader>Additive</CardHeader>
</LstCard>
<LstCard className="m-1">
<CardHeader>Dose cups / Spigots / Spouts</CardHeader>
</LstCard>
</div>
<div className="w-1/2">
<LstCard className="m-1">
<CardHeader>Pre-Emis Material Consistency report</CardHeader>
</LstCard>
</div>
<div className="w-1/6">
<LstCard className="m-1">
<CardHeader>Regrind Report in kg</CardHeader>
</LstCard>
</div>
</div>
);
}