264 lines
13 KiB
TypeScript
264 lines
13 KiB
TypeScript
import { LstCard } from "@/components/extendedUI/LstCard";
|
|
import { Button } from "@/components/ui/button";
|
|
import { CardHeader } from "@/components/ui/card";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Label } from "@/components/ui/label";
|
|
import {
|
|
Tooltip,
|
|
TooltipContent,
|
|
TooltipProvider,
|
|
TooltipTrigger,
|
|
} from "@/components/ui/tooltip";
|
|
import { getStockSilo } from "@/utils/querys/logistics/siloAdjustments/getStockSilo";
|
|
import { useForm } from "@tanstack/react-form";
|
|
import { useQuery } from "@tanstack/react-query";
|
|
import { Link } from "@tanstack/react-router";
|
|
import axios from "axios";
|
|
import { format } from "date-fns";
|
|
import { CircleAlert } from "lucide-react";
|
|
import { useState } from "react";
|
|
import { toast } from "sonner";
|
|
import ChartData from "./ChartData";
|
|
import { AttachSilo } from "./AttachSilo";
|
|
import { DetachSilo } from "./DetachSilo";
|
|
import { useSessionStore } from "@/lib/store/sessionStore";
|
|
import { useModuleStore } from "@/lib/store/useModuleStore";
|
|
import { useGetUserRoles } from "@/lib/store/useGetRoles";
|
|
|
|
export default function SiloCard(data: any) {
|
|
const token = localStorage.getItem("auth_token");
|
|
const [submitting, setSubmitting] = useState(false);
|
|
const { refetch } = useQuery(getStockSilo());
|
|
const { user } = useSessionStore();
|
|
const { userRoles } = useGetUserRoles();
|
|
const { modules } = useModuleStore();
|
|
const silo = data.silo;
|
|
|
|
// roles that can do the silo adjustments
|
|
const roles = ["systemAdmin", "technician", "admin", "manager"];
|
|
|
|
const module = modules.filter((n) => n.name === "logistics");
|
|
|
|
const accessRoles = userRoles.filter(
|
|
(n) => n.module_id === module[0]?.module_id
|
|
) as any;
|
|
|
|
const form = useForm({
|
|
defaultValues: {
|
|
newLevel: "",
|
|
},
|
|
onSubmit: async ({ value }) => {
|
|
setSubmitting(true);
|
|
const dataToSubmit = {
|
|
quantity: parseFloat(value.newLevel),
|
|
warehouseId: silo.WarehouseID,
|
|
laneId: silo.LocationID,
|
|
};
|
|
|
|
try {
|
|
const res = await axios.post(
|
|
"/api/logistics/createsiloadjustment",
|
|
dataToSubmit,
|
|
{ headers: { Authorization: `Bearer ${token}` } }
|
|
);
|
|
//console.log(res.data);
|
|
|
|
if (res.data.success) {
|
|
toast.success(res.data.message);
|
|
refetch();
|
|
form.reset();
|
|
}
|
|
if (!res.data.success && res.data.data?.status === 400) {
|
|
if (res.data.data.status === 400) {
|
|
toast.error(res.data.data.data.errors[0].message);
|
|
}
|
|
} else if (!res.data.success) {
|
|
toast.error(res.data.message);
|
|
}
|
|
setSubmitting(false);
|
|
} catch (error: any) {
|
|
//console.log(error);
|
|
if (error.status === 401) {
|
|
toast.error(error.response.statusText);
|
|
setSubmitting(false);
|
|
}
|
|
}
|
|
},
|
|
});
|
|
|
|
console.log(accessRoles);
|
|
return (
|
|
<LstCard>
|
|
<div className="flex flex-row">
|
|
<LstCard className="grow m-1 max-w-[400px]">
|
|
<CardHeader>{silo.Description}</CardHeader>
|
|
<div className="m-1">
|
|
<hr className="m-2" />
|
|
<span>Current Stock: </span>
|
|
{silo.Stock_Total}
|
|
<hr className="m-2" />
|
|
<span>Last date adjusted </span>
|
|
{format(silo.LastAdjustment, "M/dd/yyyy")}
|
|
<hr className="m-2" />
|
|
</div>
|
|
<div>
|
|
{silo.Stock_Total === 0 ? (
|
|
<div className="flex justify-center flex-col">
|
|
<span>
|
|
The silo is currently empty you will not be
|
|
able to do an adjustment until you have
|
|
received material in.
|
|
</span>
|
|
<hr />
|
|
<ul>
|
|
<li>
|
|
-Someone click "Take inventory on a
|
|
empty location" in stock.
|
|
</li>
|
|
<li>
|
|
-Silo virtualy ran empty due to
|
|
production over consumption.
|
|
</li>
|
|
<li>
|
|
-Someone forgot to move a railcar
|
|
compartment over to this location.
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
) : (
|
|
<>
|
|
{user &&
|
|
roles.includes(accessRoles[0]?.role) && (
|
|
<form
|
|
onSubmit={(e) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
}}
|
|
>
|
|
<form.Field
|
|
name="newLevel"
|
|
validators={{
|
|
// We can choose between form-wide and field-specific validators
|
|
onChange: ({ value }) =>
|
|
value.length > 1
|
|
? undefined
|
|
: "You must enter a value greate than 1",
|
|
}}
|
|
children={(field) => {
|
|
return (
|
|
<div className="m-2 min-w-48 max-w-96 p-2">
|
|
<div className="flex flex-row">
|
|
<Label htmlFor="newLevel">
|
|
New level
|
|
</Label>
|
|
<div>
|
|
<Disclaimer />
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-row">
|
|
<Input
|
|
name={
|
|
field.name
|
|
}
|
|
value={
|
|
field
|
|
.state
|
|
.value
|
|
}
|
|
onBlur={
|
|
field.handleBlur
|
|
}
|
|
type="decimal"
|
|
onChange={(
|
|
e
|
|
) =>
|
|
field.handleChange(
|
|
e
|
|
.target
|
|
.value
|
|
)
|
|
}
|
|
/>
|
|
<Button
|
|
className="ml-1"
|
|
variant="outline"
|
|
type="submit"
|
|
onClick={
|
|
form.handleSubmit
|
|
}
|
|
disabled={
|
|
submitting
|
|
}
|
|
>
|
|
{submitting ? (
|
|
<span className="w-24">
|
|
Submitting...
|
|
</span>
|
|
) : (
|
|
<span className="w-24">
|
|
Submit
|
|
</span>
|
|
)}
|
|
</Button>
|
|
</div>
|
|
|
|
{field.state.meta
|
|
.errors
|
|
.length ? (
|
|
<em>
|
|
{field.state.meta.errors.join(
|
|
","
|
|
)}
|
|
</em>
|
|
) : null}
|
|
</div>
|
|
);
|
|
}}
|
|
/>
|
|
</form>
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
</LstCard>
|
|
<div className="grow max-w-[600px]">
|
|
<ChartData laneId={silo.LocationID} />
|
|
|
|
<div className="flex justify-end m-1 gap-3">
|
|
<AttachSilo silo={silo} />
|
|
<DetachSilo silo={silo} />
|
|
<Button variant="outline">
|
|
<Link
|
|
to={"/siloAdjustments/$hist"}
|
|
params={{ hist: silo.LocationID }}
|
|
>
|
|
Historical Data
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</LstCard>
|
|
);
|
|
}
|
|
|
|
const Disclaimer = () => {
|
|
return (
|
|
<TooltipProvider>
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<CircleAlert className="ml-1 w-[14px]" />
|
|
</TooltipTrigger>
|
|
<TooltipContent className="max-w-48">
|
|
<p className="text-pretty">
|
|
If you have had this page open for a period of time
|
|
before submitting your data, there is a chance that the
|
|
stock levels will be different from the ones you see
|
|
above
|
|
</p>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
</TooltipProvider>
|
|
);
|
|
};
|