feat(ocp): materials contorls and transfer to next lot logic
This commit is contained in:
@@ -0,0 +1,3 @@
|
||||
export default function MaterialCheck() {
|
||||
return <div>MaterialCheck</div>;
|
||||
}
|
||||
211
frontend/src/components/eom/materialsData/MaterialData.tsx
Normal file
211
frontend/src/components/eom/materialsData/MaterialData.tsx
Normal file
@@ -0,0 +1,211 @@
|
||||
import { LstCard } from "@/components/extendedUI/LstCard";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Calendar } from "@/components/ui/calendar";
|
||||
import { Popover, PopoverTrigger } from "@/components/ui/popover";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||
import { useSessionStore } from "@/lib/store/sessionStore";
|
||||
import { useModuleStore } from "@/lib/store/useModuleStore";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { PopoverContent } from "@radix-ui/react-popover";
|
||||
import { Link, useRouter } from "@tanstack/react-router";
|
||||
import { startOfMonth } from "date-fns";
|
||||
import { format } from "date-fns-tz";
|
||||
import { CalendarIcon } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import { toast } from "sonner";
|
||||
import KFP from "../KFP";
|
||||
|
||||
export default function MaterialData() {
|
||||
const { modules } = useModuleStore();
|
||||
const { user } = useSessionStore();
|
||||
const router = useRouter();
|
||||
const [date, setDate] = useState<Date>();
|
||||
|
||||
if (!user) {
|
||||
router.navigate({ to: "/" });
|
||||
}
|
||||
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: "kfp",
|
||||
label: "Key Figures",
|
||||
roles: ["admin", "systemAdmin"],
|
||||
content: <KFP />,
|
||||
},
|
||||
{
|
||||
key: "fg",
|
||||
label: "Finished Goods",
|
||||
roles: ["admin", "systemAdmin"],
|
||||
content: <DummyContent />,
|
||||
},
|
||||
{
|
||||
key: "mm",
|
||||
label: "Main Material",
|
||||
roles: ["admin", "systemAdmin"],
|
||||
content: <DummyContent />,
|
||||
},
|
||||
{
|
||||
key: "mb",
|
||||
label: "Master Batch",
|
||||
roles: ["admin", "systemAdmin"],
|
||||
content: <DummyContent />,
|
||||
},
|
||||
{
|
||||
key: "ab",
|
||||
label: "Additive",
|
||||
roles: ["admin", "systemAdmin"],
|
||||
content: <DummyContent />,
|
||||
},
|
||||
{
|
||||
key: "pp",
|
||||
label: "Purchased Preforms",
|
||||
roles: ["admin", "systemAdmin"],
|
||||
content: <DummyContent />,
|
||||
},
|
||||
{
|
||||
key: "pre",
|
||||
label: "Preforms",
|
||||
roles: ["admin", "systemAdmin"],
|
||||
content: <DummyContent />,
|
||||
},
|
||||
{
|
||||
key: "pkg",
|
||||
label: "Packaging",
|
||||
roles: ["admin", "systemAdmin"],
|
||||
content: <DummyContent />,
|
||||
},
|
||||
{
|
||||
key: "ui",
|
||||
label: "Undefined Items",
|
||||
roles: ["admin"],
|
||||
content: <DummyContent />,
|
||||
},
|
||||
];
|
||||
return (
|
||||
<div className="m-2 w-screen">
|
||||
<div className="mb-2 flex flex-row">
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant={"outline"}
|
||||
className={cn(
|
||||
"w-[280px] justify-start text-left font-normal",
|
||||
!date && "text-muted-foreground"
|
||||
)}
|
||||
>
|
||||
<CalendarIcon className="mr-2 h-4 w-4" />
|
||||
{date ? (
|
||||
format(date, "PPP")
|
||||
) : (
|
||||
<span>Pick a date</span>
|
||||
)}
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-auto p-0">
|
||||
<Calendar
|
||||
mode="single"
|
||||
selected={date}
|
||||
onSelect={setDate}
|
||||
initialFocus
|
||||
/>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
<div className="ml-2">
|
||||
<Button
|
||||
onClick={() =>
|
||||
toast.success(
|
||||
`Getting data for ${startOfMonth(date!)}-${date}`
|
||||
)
|
||||
}
|
||||
>
|
||||
<span className="text-sm">Update Data</span>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Tabs defaultValue="mm">
|
||||
<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}>
|
||||
{tab.content}
|
||||
</TabsContent>
|
||||
);
|
||||
})}
|
||||
</Tabs>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function DummyContent() {
|
||||
return (
|
||||
<LstCard className="w-5/6">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Av</TableHead>
|
||||
<TableHead>Description</TableHead>
|
||||
<TableHead>Material Type</TableHead>
|
||||
<TableHead>Waste</TableHead>
|
||||
<TableHead>Loss / Gain $$</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
|
||||
<TableBody>
|
||||
{Array(10)
|
||||
.fill(0)
|
||||
.map((_, i) => (
|
||||
<TableRow key={i}>
|
||||
<TableCell className="font-medium m-2">
|
||||
<Link
|
||||
to="/article/$av"
|
||||
params={{ av: `${i}` }}
|
||||
>
|
||||
{i}
|
||||
</Link>
|
||||
</TableCell>
|
||||
<TableCell className="font-medium">
|
||||
<Skeleton className="h-4" />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton className="h-4" />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton className="h-4" />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton className="h-4" />
|
||||
</TableCell>
|
||||
{/* <TableCell>
|
||||
<Skeleton className="h-4" />
|
||||
</TableCell> */}
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</LstCard>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,250 @@
|
||||
import { LstCard } from "@/components/extendedUI/LstCard";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { CardHeader } from "@/components/ui/card";
|
||||
import { useAppForm } from "@/utils/formStuff";
|
||||
import axios from "axios";
|
||||
import { useState } from "react";
|
||||
import { toast } from "sonner";
|
||||
|
||||
export default function TransferToNextLot() {
|
||||
const [gaylordFilled, setGaylordFilled] = useState([0]);
|
||||
|
||||
const form = useAppForm({
|
||||
defaultValues: {
|
||||
runnungNumber: "",
|
||||
lotNumber: "",
|
||||
originalAmount: "",
|
||||
},
|
||||
onSubmit: async ({ value }) => {
|
||||
//console.log(transferData);
|
||||
//toast.success("603468: qty: 361, was transfered to lot:24897");
|
||||
try {
|
||||
const res = await axios.post("/api/ocp/materiallottransfer", {
|
||||
runnungNumber: Number(value.runnungNumber),
|
||||
lotNumber: Number(value.lotNumber),
|
||||
originalAmount: Number(value.originalAmount),
|
||||
level: Number(
|
||||
gaylordFilled.length === 1
|
||||
? 0.25
|
||||
: gaylordFilled.length === 2
|
||||
? 0.5
|
||||
: gaylordFilled.length === 3
|
||||
? 0.75
|
||||
: gaylordFilled.length === 4 && 0.95
|
||||
),
|
||||
});
|
||||
|
||||
if (res.data.success) {
|
||||
toast.success(`${res.data.message}`);
|
||||
form.reset();
|
||||
}
|
||||
//console.log(res.data);
|
||||
|
||||
if (!res.data.success) {
|
||||
toast.error(res.data.message);
|
||||
}
|
||||
} catch (error) {
|
||||
if (error) {
|
||||
console.log(error);
|
||||
//toast.error(error)
|
||||
}
|
||||
}
|
||||
},
|
||||
});
|
||||
return (
|
||||
<div>
|
||||
<LstCard>
|
||||
<CardHeader>
|
||||
<p className="text-center text-lg">
|
||||
Material Transfer to Next lot
|
||||
</p>
|
||||
</CardHeader>
|
||||
<div>
|
||||
<div className="flex flex-wrap m-2 gap-2">
|
||||
<div className="flex gap-2">
|
||||
<div>
|
||||
<LstCard className="">
|
||||
<div className="grid columns-1">
|
||||
<button
|
||||
className={`box-border h-16 w-96 border-3 ${
|
||||
gaylordFilled.includes(4)
|
||||
? " bg-green-500"
|
||||
: ""
|
||||
}`}
|
||||
onClick={() =>
|
||||
setGaylordFilled([1, 2, 3, 4])
|
||||
}
|
||||
>
|
||||
<p className="text-center">
|
||||
Almost full
|
||||
</p>
|
||||
</button>
|
||||
<button
|
||||
className={`box-border h-16 w-96 border-3 ${
|
||||
gaylordFilled.includes(3)
|
||||
? " bg-green-500"
|
||||
: ""
|
||||
}`}
|
||||
onClick={() =>
|
||||
setGaylordFilled([1, 2, 3])
|
||||
}
|
||||
>
|
||||
<p className="text-center">
|
||||
About 75% full
|
||||
</p>
|
||||
</button>
|
||||
<button
|
||||
className={`box-border h-16 w-96 border-3 ${
|
||||
gaylordFilled.includes(2)
|
||||
? " bg-green-500"
|
||||
: ""
|
||||
}`}
|
||||
onClick={() =>
|
||||
setGaylordFilled([1, 2])
|
||||
}
|
||||
>
|
||||
<p className="text-center">
|
||||
Half full
|
||||
</p>
|
||||
</button>
|
||||
<button
|
||||
className={`box-border h-16 w-96 border-3 ${
|
||||
gaylordFilled.includes(1)
|
||||
? " bg-green-500"
|
||||
: ""
|
||||
}`}
|
||||
onClick={() =>
|
||||
setGaylordFilled(() => [1])
|
||||
}
|
||||
>
|
||||
<p className="text-center">
|
||||
Almost empty
|
||||
</p>
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex justify-end pr-1">
|
||||
<Button
|
||||
onClick={() =>
|
||||
setGaylordFilled([0])
|
||||
}
|
||||
>
|
||||
Reset Gaylord
|
||||
</Button>
|
||||
</div>
|
||||
</LstCard>
|
||||
</div>
|
||||
<div>
|
||||
<div className="w-96">
|
||||
<LstCard>
|
||||
<form
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
form.handleSubmit();
|
||||
}}
|
||||
>
|
||||
<div className="mt-3 p-2">
|
||||
<form.AppField
|
||||
name="runnungNumber"
|
||||
children={(field) => (
|
||||
<field.InputField
|
||||
label="Runnung Number"
|
||||
inputType="number"
|
||||
required={true}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className="mt-3 p-2">
|
||||
<form.AppField
|
||||
name="lotNumber"
|
||||
children={(field) => (
|
||||
<field.InputField
|
||||
label="Lot Number"
|
||||
inputType="number"
|
||||
required={true}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<div className="mt-3 p-2">
|
||||
<form.AppField
|
||||
name="originalAmount"
|
||||
children={(field) => (
|
||||
<field.InputField
|
||||
label="Orignal Quantity"
|
||||
inputType="number"
|
||||
required={true}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-end p-2">
|
||||
<form.AppForm>
|
||||
<form.SubmitButton>
|
||||
Transfer To Lot
|
||||
</form.SubmitButton>
|
||||
</form.AppForm>
|
||||
</div>
|
||||
</form>
|
||||
</LstCard>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<LstCard className="p-2">
|
||||
<CardHeader>
|
||||
<p className="text-center text-lg">
|
||||
Moving material to the next lot.
|
||||
</p>
|
||||
</CardHeader>
|
||||
|
||||
<div>
|
||||
<ol>
|
||||
<li>
|
||||
1. Grab the gaylord running number
|
||||
from the gaylord at the line/next to
|
||||
the tschritter
|
||||
</li>
|
||||
<li>
|
||||
2. Grab the next lot number you are
|
||||
going to be running (or the one that
|
||||
state no Main material prepared)
|
||||
</li>
|
||||
<li>
|
||||
3. Enter the total gaylord weight
|
||||
(this is how much the gaylord
|
||||
weighed when it came in from the
|
||||
supplier.)
|
||||
</li>
|
||||
<li>
|
||||
4. *Click the level of the gaylord
|
||||
(this is just an estimate to move to
|
||||
the next lot.)
|
||||
</li>
|
||||
<li>
|
||||
5. type in running number on the
|
||||
gaylord.
|
||||
</li>
|
||||
<li>6. Type in the new lot number.</li>
|
||||
<li>7. Press "Transfer To Lot"</li>
|
||||
</ol>
|
||||
<br></br>
|
||||
<p>
|
||||
* to reduce the time needed to get the
|
||||
lot going we will use an estimate of how
|
||||
full the gaylord is.
|
||||
</p>
|
||||
<p>
|
||||
NOTE: This is not the return process,
|
||||
this process will just get the gaylord
|
||||
to the next lot.
|
||||
</p>
|
||||
</div>
|
||||
</LstCard>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</LstCard>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user