feat(migration): moved ocp, ocme, wrapper stuff

This commit is contained in:
2025-10-26 10:35:06 -05:00
parent 0fe0a8f56a
commit 4ca20a085e
52 changed files with 1522 additions and 1525 deletions

View File

@@ -0,0 +1,229 @@
import axios from "axios";
import { useState } from "react";
import { Controller, useForm } from "react-hook-form";
import { toast } from "sonner";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { LstCard } from "@/components/ui/lstCard";
//import CycleCountLog from "./CycleCountLog";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import { Skeleton } from "@/components/ui/skeleton";
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "@/components/ui/table";
export default function OcmeCycleCount() {
const token = localStorage.getItem("auth_token");
const [data, setData] = useState([]);
const [counting, setCounting] = useState(false);
const {
register,
handleSubmit,
//watch,
formState: { errors },
reset,
control,
} = useForm({
defaultValues: {
lane: "",
laneType: "name",
},
});
const onSubmit = async (data: any) => {
setData([]);
setCounting(true);
if (data.laneType === "") {
toast.error("Please select a type");
setCounting(false);
return;
}
toast.success(`Cycle count started`);
try {
const res = await axios.post("/ocme/api/v1/cycleCount", data, {
headers: { Authorization: `Bearer ${token}` },
});
if (res.data.success) {
toast.success(res.data.message);
setData(res.data.data);
setCounting(false);
reset();
}
if (!res.data.success) {
toast.success(res.data.message);
setCounting(false);
}
} catch (error) {
toast.error("There was an error cycle counting");
setCounting(false);
reset();
}
};
return (
<div className="flex flex-row w-screen">
<div className="m-2 w-5/6">
<LstCard>
<p className="ml-2">
Please enter the name or laneID you want to cycle count.
</p>
<div>
<form onSubmit={handleSubmit(onSubmit)}>
<div className="flex justify-between">
<div className="m-2 flex flex-row">
<Input
placeholder="enter lane: L064"
className={errors.lane ? "border-red-500" : ""}
aria-invalid={!!errors.lane}
{...register("lane", {
required: true,
minLength: {
value: 3,
message: "The lane is too short!",
},
})}
/>
<div className="ml-2">
<Controller
control={control}
name="laneType"
render={({
field: { onChange },
fieldState: {},
//formState,
}) => (
<Select onValueChange={onChange}>
<SelectTrigger className="w-[180px]">
<SelectValue placeholder="Select name or id" />
</SelectTrigger>
<SelectContent>
<SelectItem value="name">Name</SelectItem>
<SelectItem value="laneID">Lane ID</SelectItem>
</SelectContent>
</Select>
)}
/>
</div>
</div>
<Button className="m-2" type="submit" disabled={counting}>
{counting ? (
<span>Counting...</span>
) : (
<span>CycleCount</span>
)}
</Button>
</div>
</form>
</div>
<div>
<Table>
<TableHeader>
<TableRow>
<TableHead>LaneID</TableHead>
<TableHead>Lane</TableHead>
<TableHead>AV</TableHead>
<TableHead>Description</TableHead>
<TableHead>Running Number</TableHead>
<TableHead>In Ocme</TableHead>
<TableHead>In Stock</TableHead>
<TableHead>Result</TableHead>
</TableRow>
</TableHeader>
{data?.length === 0 ? (
<TableBody>
{Array(10)
.fill(0)
.map((_, i) => (
<TableRow key={i}>
<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>
<TableCell>
<Skeleton className="h-4" />
</TableCell>
<TableCell>
<Skeleton className="h-4" />
</TableCell>
<TableCell>
<Skeleton className="h-4" />
</TableCell>
</TableRow>
))}
</TableBody>
) : (
<>
{data.map((i: any) => {
let classname = ``;
if (i.info === "Validate pallet is ok.") {
classname = `bg-red-500`;
}
if (i.info === "Sent to Inv") {
classname = `bg-amber-700`;
}
return (
<TableRow key={i.runningNumber}>
<TableCell className={`font-medium ${classname}`}>
{i.alpla_laneID}
</TableCell>
<TableCell className={`font-medium ${classname}`}>
{i.alpla_laneDescription}
</TableCell>
<TableCell className={`font-medium ${classname}`}>
{i.Article}
</TableCell>
<TableCell className={`font-medium ${classname}`}>
{i.alpla_laneDescription}
</TableCell>
<TableCell className={`font-medium ${classname}`}>
{i.runningNumber}
</TableCell>
<TableCell className={`font-medium ${classname}`}>
{i.ocme}
</TableCell>
<TableCell className={`font-medium ${classname}`}>
{i.stock}
</TableCell>
<TableCell className={`font-medium ${classname}`}>
{i.info}
</TableCell>
</TableRow>
);
})}
</>
)}
</Table>
</div>
</LstCard>
</div>
{/* <div className="m-2">
<CycleCountLog />
</div> */}
</div>
);
}