feat(cards): migrated cards over
This commit is contained in:
@@ -3,55 +3,37 @@ import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from "@/components/ui/dialog";
|
||||
|
||||
import { useCardStore } from "@/lib/store/useCardStore";
|
||||
import { toast } from "sonner";
|
||||
import Cards from "./Cards";
|
||||
//import { toast } from "sonner";
|
||||
|
||||
export function AddCards() {
|
||||
const { cards, addCard } = useCardStore();
|
||||
|
||||
const handleAddPPOO = () => {
|
||||
const existingCard = cards.filter((c) => c.i === "PPOO");
|
||||
//console.log(existingCard.length);
|
||||
//console.log(data);
|
||||
if (existingCard.length != 0) {
|
||||
toast.error(`PPOO already exists no card will be added`);
|
||||
return;
|
||||
}
|
||||
addCard({
|
||||
i: "PPOO",
|
||||
x: 0,
|
||||
y: 0,
|
||||
w: 5,
|
||||
h: 3,
|
||||
isResizable: true,
|
||||
isDraggable: true,
|
||||
});
|
||||
};
|
||||
return (
|
||||
<Dialog>
|
||||
<DialogTrigger asChild>
|
||||
<Button variant="outline">Add Cards</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="sm:max-w-[425px]">
|
||||
<DialogContent className="min-w-fit ">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Cards</DialogTitle>
|
||||
<DialogDescription>
|
||||
Please add a card below.
|
||||
Manage Cards and there settings.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<Button onClick={handleAddPPOO} className="w-48">
|
||||
PPOO
|
||||
</Button>
|
||||
|
||||
<DialogFooter>
|
||||
<Cards name={"ppoo"} inventory />
|
||||
<Cards name={"inv-empty"} rowType={"empty"} />
|
||||
<Cards name={"inv-fg"} rowType={"fg"} />
|
||||
<Cards name={"inv-materials"} rowType={"materials"} />
|
||||
<Cards name={"inv-packaging"} rowType={"packaging"} />
|
||||
<Cards name={"inv-waste"} rowType={"waste"} />
|
||||
|
||||
{/* <DialogFooter>
|
||||
<Button type="submit">Save changes</Button>
|
||||
</DialogFooter>
|
||||
</DialogFooter> */}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
|
||||
183
frontend/src/components/dashboard/Cards.tsx
Normal file
183
frontend/src/components/dashboard/Cards.tsx
Normal file
@@ -0,0 +1,183 @@
|
||||
import { useCardStore } from "@/lib/store/useCardStore";
|
||||
import { useForm } from "@tanstack/react-form";
|
||||
import { Label } from "../ui/label";
|
||||
import { Checkbox } from "../ui/checkbox";
|
||||
import { Input } from "../ui/input";
|
||||
// import {
|
||||
// Select,
|
||||
// SelectContent,
|
||||
// SelectGroup,
|
||||
// SelectItem,
|
||||
// SelectLabel,
|
||||
// SelectTrigger,
|
||||
// SelectValue,
|
||||
// } from "../ui/select";
|
||||
import { Button } from "../ui/button";
|
||||
import { toast } from "sonner";
|
||||
|
||||
export default function Cards(card: any) {
|
||||
const { addCard, removeCard, cards } = useCardStore();
|
||||
let existing: any = cards.filter((n: any) => n.name === card.name);
|
||||
|
||||
console.log(existing);
|
||||
const form = useForm({
|
||||
defaultValues: {
|
||||
name: existing?.name || card.name,
|
||||
rowType: existing?.type ?? card.rowType,
|
||||
age: existing?.age ?? 90,
|
||||
active: existing.active ? existing.active : false,
|
||||
},
|
||||
onSubmit: async ({ value }) => {
|
||||
console.log(value);
|
||||
const testCard: any = cards.filter(
|
||||
(i: any) => i.name === value.name
|
||||
);
|
||||
|
||||
if (value.active) {
|
||||
if (testCard.length > 0) {
|
||||
toast.error("Card already exists");
|
||||
return;
|
||||
}
|
||||
// change the name for a type card
|
||||
const newCard = {
|
||||
name: `${value.name}`,
|
||||
rowType: value.rowType,
|
||||
age: value.age ?? 90,
|
||||
active: value.active,
|
||||
};
|
||||
addCard(newCard);
|
||||
} else {
|
||||
removeCard(value.name);
|
||||
}
|
||||
},
|
||||
});
|
||||
return (
|
||||
<div className="border-solid border-2">
|
||||
<p>{card.name}</p>
|
||||
<form
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
}}
|
||||
className="flex flex-row"
|
||||
>
|
||||
<form.Field
|
||||
name="active"
|
||||
// validators={{
|
||||
// // We can choose between form-wide and field-specific validators
|
||||
// onChange: ({ value }) =>
|
||||
// value.length > 3
|
||||
// ? undefined
|
||||
// : "Username must be longer than 3 letters",
|
||||
// }}
|
||||
children={(field) => {
|
||||
return (
|
||||
<div className="m-2 p-2 flex flex-row">
|
||||
<div>
|
||||
<Label htmlFor="active">
|
||||
<span>Active</span>
|
||||
</Label>
|
||||
</div>
|
||||
|
||||
<Checkbox
|
||||
className="ml-2"
|
||||
name={field.name}
|
||||
onBlur={field.handleBlur}
|
||||
checked={field.state.value}
|
||||
onCheckedChange={(e) =>
|
||||
field.handleChange(e)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
{!card.inventory && (
|
||||
<>
|
||||
<form.Field
|
||||
name="age"
|
||||
// validators={{
|
||||
// // We can choose between form-wide and field-specific validators
|
||||
// onChange: ({ value }) =>
|
||||
// value.length > 3
|
||||
// ? undefined
|
||||
// : "Username must be longer than 3 letters",
|
||||
// }}
|
||||
children={(field) => {
|
||||
return (
|
||||
<div className="m-2 min-w-48 p-2">
|
||||
<Label htmlFor="active" className="">
|
||||
Age
|
||||
</Label>
|
||||
<Input
|
||||
name={field.name}
|
||||
onBlur={field.handleBlur}
|
||||
type="number"
|
||||
onChange={(e) =>
|
||||
field.handleChange(
|
||||
e.target.value
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* <form.Field
|
||||
name="rowType"
|
||||
//listeners={{onChange: ({value})=>{}}}
|
||||
children={(field) => {
|
||||
return (
|
||||
<div className="m-2 min-w-48 max-w-96 p-2">
|
||||
<Label htmlFor={field.name}>
|
||||
Row Type
|
||||
</Label>
|
||||
<Select
|
||||
value={field.state.value}
|
||||
onValueChange={field.handleChange}
|
||||
>
|
||||
<SelectTrigger className="w-[180px]">
|
||||
<SelectValue
|
||||
id={field.name}
|
||||
placeholder="Select Role"
|
||||
/>
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectGroup>
|
||||
<SelectLabel>
|
||||
Row Type
|
||||
</SelectLabel>
|
||||
<SelectItem value="empty">
|
||||
Empty
|
||||
</SelectItem>
|
||||
<SelectItem value="fg">
|
||||
Finished Goods
|
||||
</SelectItem>
|
||||
<SelectItem value="materials">
|
||||
Materials
|
||||
</SelectItem>
|
||||
<SelectItem value="waste">
|
||||
Waste
|
||||
</SelectItem>
|
||||
<SelectItem value="packaging">
|
||||
Packaging
|
||||
</SelectItem>
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
/> */}
|
||||
</>
|
||||
)}
|
||||
<div className="mt-7">
|
||||
<Button type="submit" onClick={() => form.handleSubmit()}>
|
||||
Save Card
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,68 +1,74 @@
|
||||
import { useCardStore } from "@/lib/store/useCardStore";
|
||||
import INVCheckCard from "../logistics/warehouse/InventoryCard";
|
||||
import PPOO from "../logistics/warehouse/PPOOCard";
|
||||
|
||||
const componentsMap: any = {
|
||||
ppoo: PPOO,
|
||||
inv: INVCheckCard,
|
||||
//QualityRequest,
|
||||
};
|
||||
|
||||
export default function DashBoard() {
|
||||
// const handleResizeStop = (newLayout: any, newItem: any) => {
|
||||
// updateCard(
|
||||
// newItem.i,
|
||||
// newLayout.filter((n: any) => n.i === newItem.i)[0]
|
||||
// ); // Store the new layout in state
|
||||
// };
|
||||
|
||||
// const handleDragStop = (newLayout: any, newItem: any) => {
|
||||
// updateCard(
|
||||
// newItem.i,
|
||||
// newLayout.filter((n: any) => n.i === newItem.i)[0]
|
||||
// ); // Persist the updated layout with custom name
|
||||
// };
|
||||
const { cards } = useCardStore();
|
||||
|
||||
//console.log(cards);
|
||||
return (
|
||||
<div className="ml-5 w-11/12 h-9/10">
|
||||
<p>Comming soon...</p>
|
||||
{/* <ResizablePanelGroup
|
||||
direction="horizontal"
|
||||
//className="rounded-lg border"
|
||||
autoSaveId="persistence"
|
||||
>
|
||||
<ResizablePanel>
|
||||
<ResizablePanelGroup direction="vertical">
|
||||
<ResizablePanel>
|
||||
<div className="overflow: auto">
|
||||
<Lots />
|
||||
</div>
|
||||
</ResizablePanel>
|
||||
<ResizableHandle />
|
||||
<ResizablePanel>
|
||||
<ResizablePanelGroup direction="horizontal">
|
||||
<ResizablePanel>
|
||||
<LabelLog />
|
||||
</ResizablePanel>
|
||||
<ResizableHandle />
|
||||
<ResizablePanel>
|
||||
<OcpLogs />
|
||||
</ResizablePanel>
|
||||
</ResizablePanelGroup>
|
||||
</ResizablePanel>
|
||||
</ResizablePanelGroup>
|
||||
</ResizablePanel>
|
||||
<ResizableHandle />
|
||||
<ResizablePanel defaultSize={25}>
|
||||
<ResizablePanelGroup direction="vertical">
|
||||
{server[0].value === "usday1vms006" && (
|
||||
<ResizablePanel className="max-h-[300px]">
|
||||
<WrapperManualTrigger />
|
||||
</ResizablePanel>
|
||||
)}
|
||||
{server[0].value === "usday1vms006" && (
|
||||
<ResizablePanel className="max-h-[300px]">
|
||||
<WrapperManualTrigger />
|
||||
</ResizablePanel>
|
||||
)}
|
||||
<div className="ml-5 w-11/12 h-9/10 grid grid-cols-12 gap-1">
|
||||
{cards.map((a: any) => {
|
||||
const name = a.name; //.filter((c) => c.i === card.i)[0].i || "name";
|
||||
|
||||
<ResizableHandle />
|
||||
<ResizablePanel>
|
||||
<PrinterStatus />
|
||||
</ResizablePanel>
|
||||
</ResizablePanelGroup>
|
||||
</ResizablePanel>
|
||||
</ResizablePanelGroup> */}
|
||||
const Component = componentsMap[name.split("-")[0]];
|
||||
|
||||
return (
|
||||
<div key={a.name} className="col-span-3">
|
||||
<Component age={a.age} type={a.rowType} />{" "}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
|
||||
// return (
|
||||
// <div className="ml-5 w-11/12 h-9/10 grid grid-cols-12 gap-1">
|
||||
// <div className="col-span-3">
|
||||
// <PPOO />
|
||||
// </div>
|
||||
// <div className="col-span-3">
|
||||
// <INVCheckCard age={90} type={"empty"} />
|
||||
// </div>
|
||||
// <div className="col-span-3">
|
||||
// <INVCheckCard age={75} type={"fg"} />
|
||||
// </div>
|
||||
// <div className="col-span-3">
|
||||
// <INVCheckCard age={30} type={"materials"} />
|
||||
// </div>
|
||||
// <div className="col-span-3">
|
||||
// <INVCheckCard age={7} type={"waste"} />
|
||||
// </div>
|
||||
// <div className="col-span-3">
|
||||
// <INVCheckCard age={7} type={"packaging"} />
|
||||
// </div>
|
||||
// </div>
|
||||
// );
|
||||
}
|
||||
|
||||
/*
|
||||
<div className="col-span-3">
|
||||
<PPOO />
|
||||
</div>
|
||||
<div className="col-span-3">
|
||||
<INVCheckCard age={30} type={"empty"} />
|
||||
</div>
|
||||
<div className="col-span-3">
|
||||
<INVCheckCard age={30} type={"fg"} />
|
||||
</div>
|
||||
<div className="col-span-3">
|
||||
<INVCheckCard age={30} type={"materials"} />
|
||||
</div>
|
||||
<div className="col-span-3">
|
||||
<INVCheckCard age={30} type={"waste"} />
|
||||
</div>
|
||||
<div className="col-span-3">
|
||||
<INVCheckCard age={30} type={"packaging"} />
|
||||
</div>
|
||||
*/
|
||||
|
||||
@@ -0,0 +1,153 @@
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from "@/components/ui/dialog";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
|
||||
import { useForm } from "@tanstack/react-form";
|
||||
import axios from "axios";
|
||||
import { format } from "date-fns";
|
||||
import { useState } from "react";
|
||||
import { toast } from "sonner";
|
||||
|
||||
export default function ExportInventoryData() {
|
||||
const [open, setOpen] = useState(false);
|
||||
const [saving, setSaving] = useState(false);
|
||||
|
||||
const form = useForm({
|
||||
defaultValues: {
|
||||
age: "",
|
||||
},
|
||||
onSubmit: async ({ value }) => {
|
||||
setSaving(true);
|
||||
try {
|
||||
const res = await axios.get(
|
||||
`/api/logistics/getcyclecount?age=${value.age}`,
|
||||
{
|
||||
responseType: "blob",
|
||||
}
|
||||
);
|
||||
|
||||
const blob = new Blob([res.data], {
|
||||
type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
|
||||
});
|
||||
|
||||
const link = document.createElement("a");
|
||||
link.href = window.URL.createObjectURL(blob);
|
||||
link.download = `CycleCount-${format(new Date(Date.now()), "M-d-yyyy")}.xlsx`; // You can make this dynamic
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
|
||||
// Clean up
|
||||
document.body.removeChild(link);
|
||||
window.URL.revokeObjectURL(link.href);
|
||||
toast.success(`File Downloaded`);
|
||||
setSaving(false);
|
||||
setOpen(false);
|
||||
form.reset();
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
console.log(`There was an error getting cycle counts.`);
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Dialog
|
||||
open={open}
|
||||
onOpenChange={(isOpen) => {
|
||||
if (!open) {
|
||||
form.reset();
|
||||
}
|
||||
setOpen(isOpen);
|
||||
// toast.message("Model was something", {
|
||||
// description: isOpen ? "Modal is open" : "Modal is closed",
|
||||
// });
|
||||
}}
|
||||
>
|
||||
<DialogTrigger asChild>
|
||||
<Button variant="outline">Export Inventory Check</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="sm:max-w-[425px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Export Inventory lane check</DialogTitle>
|
||||
<DialogDescription>
|
||||
Exports all lanes based on the age you enter, except
|
||||
empty lanes.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<form
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
<>
|
||||
<form.Field
|
||||
name="age"
|
||||
// validators={{
|
||||
// // We can choose between form-wide and field-specific validators
|
||||
// onChange: ({ value }) =>
|
||||
// value.length > 3
|
||||
// ? undefined
|
||||
// : "Username must be longer than 3 letters",
|
||||
// }}
|
||||
children={(field) => {
|
||||
return (
|
||||
<div className="m-2 min-w-48 max-w-96 p-2 flex flex-row">
|
||||
<Label htmlFor="active">
|
||||
Age
|
||||
</Label>
|
||||
<Input
|
||||
className="ml-2"
|
||||
name={field.name}
|
||||
onBlur={field.handleBlur}
|
||||
type="number"
|
||||
onChange={(e) =>
|
||||
field.handleChange(
|
||||
e.target.value
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<div className="flex justify-end mt-2">
|
||||
<Button onClick={() => setOpen(false)}>
|
||||
Close
|
||||
</Button>
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={saving}
|
||||
onClick={form.handleSubmit}
|
||||
>
|
||||
{saving ? (
|
||||
<>
|
||||
<span>Saving....</span>
|
||||
</>
|
||||
) : (
|
||||
<span>Save setting</span>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
//import { LstCard } from "@/components/extendedUI/LstCard";
|
||||
import { getinventoryCheck } from "@/utils/querys/logistics/getInventoryCheck";
|
||||
import { invColumns } from "@/utils/tableData/InventoryCards/inventoryColumns";
|
||||
import { InvTable } from "@/utils/tableData/InventoryCards/inventoryData";
|
||||
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
//import { CircleX } from "lucide-react";
|
||||
//import { Suspense } from "react";
|
||||
//import { toast } from "sonner";
|
||||
|
||||
export default function INVCheckCard(props: any) {
|
||||
//{ style = {} }
|
||||
const { data, isError, isLoading } = useQuery(getinventoryCheck(props));
|
||||
|
||||
if (isLoading) return <div>Loading inventory data...</div>;
|
||||
if (isError) {
|
||||
return (
|
||||
<div>
|
||||
<p>There was an error getting the inv.</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
let laneData: any = data;
|
||||
if (props.type != "") {
|
||||
laneData = laneData.filter(
|
||||
(l: any) => l.rowType === props.type.toUpperCase()
|
||||
);
|
||||
}
|
||||
|
||||
// const handleCloseCard = () => {
|
||||
// //removeCard("PPOO");
|
||||
|
||||
// toast.success("card removed");
|
||||
// };
|
||||
|
||||
return <InvTable columns={invColumns} data={laneData} info={props} />;
|
||||
}
|
||||
@@ -1,15 +1,14 @@
|
||||
import { LstCard } from "@/components/extendedUI/LstCard";
|
||||
import { useCardStore } from "@/lib/store/useCardStore";
|
||||
//import { LstCard } from "@/components/extendedUI/LstCard";
|
||||
import { getPPOO } from "@/utils/querys/logistics/getPPOO";
|
||||
import { columns } from "@/utils/tableData/ppoo/ppooColumns";
|
||||
import { PPOOTable } from "@/utils/tableData/ppoo/ppooData";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { CircleX } from "lucide-react";
|
||||
import { Suspense } from "react";
|
||||
import { toast } from "sonner";
|
||||
//import { CircleX } from "lucide-react";
|
||||
//import { Suspense } from "react";
|
||||
//import { toast } from "sonner";
|
||||
|
||||
export default function PPOO({ style = {} }) {
|
||||
const { removeCard } = useCardStore();
|
||||
export default function PPOO() {
|
||||
//{ style = {} }
|
||||
const { data, isError, isLoading } = useQuery(getPPOO());
|
||||
|
||||
if (isLoading) return <div>Loading adjustmnet data...</div>;
|
||||
@@ -21,30 +20,42 @@ export default function PPOO({ style = {} }) {
|
||||
);
|
||||
}
|
||||
|
||||
const handleCloseCard = () => {
|
||||
removeCard("PPOO");
|
||||
// const handleCloseCard = () => {
|
||||
// //removeCard("PPOO");
|
||||
|
||||
// toast.success("card removed");
|
||||
// };
|
||||
|
||||
toast.success("card removed");
|
||||
};
|
||||
return (
|
||||
<div style={style}>
|
||||
<LstCard style={style}>
|
||||
<Suspense fallback={<p>Loading PPOO...</p>}>
|
||||
<div className={`flex justify-center`}>
|
||||
<p
|
||||
className={`drag-handle w-fit`}
|
||||
style={{ cursor: "move", padding: "5px" }}
|
||||
>
|
||||
PPOO
|
||||
</p>
|
||||
|
||||
<button onClick={handleCloseCard}>
|
||||
<CircleX />
|
||||
</button>
|
||||
</div>
|
||||
<PPOOTable columns={columns} data={data} style={style} />
|
||||
</Suspense>
|
||||
</LstCard>
|
||||
</div>
|
||||
<PPOOTable
|
||||
columns={columns}
|
||||
data={data}
|
||||
//style={style}
|
||||
/>
|
||||
);
|
||||
// return (
|
||||
// <div style={style}>
|
||||
// <LstCard style={style}>
|
||||
// <Suspense fallback={<p>Loading PPOO...</p>}>
|
||||
// <div className={`flex justify-center`}>
|
||||
// <p
|
||||
// className={`drag-handle w-fit`}
|
||||
// style={{ cursor: "move", padding: "5px" }}
|
||||
// >
|
||||
// PPOO
|
||||
// </p>
|
||||
|
||||
// <button onClick={handleCloseCard}>
|
||||
// <CircleX />
|
||||
// </button>
|
||||
// </div>
|
||||
// <PPOOTable
|
||||
// columns={columns}
|
||||
// data={data}
|
||||
// //style={style}
|
||||
// />
|
||||
// </Suspense>
|
||||
// </LstCard>
|
||||
// </div>
|
||||
// );
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user