feat(eom): frame work added in for eom

frontend/src/components/eom/KFP.tsx

@@ -0,0 +1,68 @@
+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>
+    );
+}