Obanana.Corporation
/
POS_react
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

v1.1

This commit is contained in:
JunBarroga 2024-10-22 11:28:28 +08:00
parent ce8a5996b3
commit f998c93ead
8 changed files with 351 additions and 137 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -4,7 +4,7 @@
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React + TS</title>
<title>POS Kitchen Display</title>
</head>
<body>
<div id="root"></div>

325
src/App.tsx
View File

@ -7,12 +7,16 @@ import { useAppContext } from "./hooks/hooks";
function App() {
const [kds, setkds] = useState();
const [stages, setstages] = useState();
const [prevStage, setprevStage] = useState([]);
const { kdsStage, updateKDSstage } = useAppContext();
const { kdsStage,isRefreshStop,updateRefresh, updateKDSstage } = useAppContext();
// console.log(isRefreshStop)
// console.log(prevStage)
const getOrders = async () => {
try {
const response = await axios.get("http://localhost:3002/get-orders");
const response = await axios.get("http://pos-api.obanana.com/get-orders");
return response.data;
} catch (error) {
console.error("Error fetching orders:", error);
@ -22,7 +26,7 @@ function App() {
const getOrderedProducts = async () => {
try {
const response = await axios.get(
"http://localhost:3002/get-product_ordered"
"http://pos-api.obanana.com/get-product_ordered"
);
return response.data;
} catch (error) {
@ -30,10 +34,19 @@ function App() {
throw error;
}
};
const getTables = async () => {
try {
const response = await axios.get("http://pos-api.obanana.com/get-tables");
// console.log(response.data)
return response.data;
} catch (error) {
console.error("Error fetching orders:", error);
throw error;
}
};
// const getKDS = async () => {
// try {
// const response = await fetch("http://localhost:3002/api/kds"); // Adjust URL as needed
// const response = await fetch("http://pos-api.obanana.com/api/kds"); // Adjust URL as needed
// if (!response.ok) {
// throw new Error("Network response was not ok");
// }
@ -45,7 +58,7 @@ function App() {
// };
const getKDS = async () => {
try {
const response = await fetch("http://localhost:3002/api/kds"); // Adjust URL as needed
const response = await fetch("http://pos-api.obanana.com/api/kds"); // Adjust URL as needed
if (!response.ok) {
throw new Error("Network response was not ok");
}
@ -76,7 +89,7 @@ function App() {
// Function to create new KDS data via API POST request
const createKDS = async (newKDS) => {
try {
const response = await fetch("http://localhost:3002/api/kds", {
const response = await fetch("http://pos-api.obanana.com/api/kds", {
method: "POST",
headers: {
"Content-Type": "application/json",
@ -92,14 +105,36 @@ function App() {
// Handle the error as needed
}
};
function getRoomCode(roomName) {
const words = roomName.split(' ');
const code = words.map(word => word[0]).join('');
return code;
}
const createKDSArray = async () => {
try {
const [orders, productsOrdered] = await Promise.all([
getOrders(),
getOrderedProducts(),
]);
const newStageArray = await getStages();
const newTableArray = await getTables(); // Wait for stages to be fetched
// console.log(newTableArray);
const lastStage = newStageArray?.find(stage => stage.last_stage === true);
const cancelStage = newStageArray?.find(stage => stage.cancel_stage === true);
const KDS = orders.map((order) => {
const tableId = order?.table_id[0];
const table = newTableArray.find(table => table.id === tableId);
const floorName = table?.floor_id[1];
// Generate the room code
const roomCode = getRoomCode(floorName??"");
// console.log(roomCode);
const items = order.lines.map((lineId) => {
const product = productsOrdered.find((p) => p.id === lineId);
return {
@ -114,20 +149,20 @@ function App() {
return {
order_id: order.id,
order_name: order.name,
order_name: order.name,
order_date: order.date_order,
cancelled: order.state === "cancel" ? true : false,
ref_ticket: order.ticket_code,
ref_ticket: order.tracking_number,
take_away: order.take_away,
seat_id: order.table_id[1],
seat_id:roomCode + " Seat " + order.table_id[1],
customer_count: order.customer_count,
ref_id: order.pos_reference,
items: items,
stage:
order.state === "cancel"
? "parked"
? cancelStage?.name
: order.state === "done"
? "served"
? lastStage?.name
: order.state === "draft"
? "new"
: order.state === "paid"
@ -146,12 +181,17 @@ function App() {
};
useEffect(() => {
getStages();
fetchData();
fetchData(kdsStage);
}, []);
useEffect(() => {
// Function to be called periodically
const tick = () => {
fetchData();
// if(isRefreshStop===false){
// updateRefresh(true)
// setprevStage(kdsStage)
fetchData(kdsStage);
// }
};
const intervalId = setInterval(tick, 3000);
@ -159,13 +199,13 @@ function App() {
return () => {
clearInterval(intervalId);
};
}, []);
const fetchData = async () => {
}, [kdsStage, isRefreshStop]);
const fetchData = async (kd) => {
try {
const kdsData = await getKDS();
const newKDSArray = await createKDSArray();
// console.log(newKDSArray);
// console.log(kdsData);
// List of keys to compare between newItem and existingItem
const keysToCompare = [
@ -213,14 +253,31 @@ function App() {
// if (isDifferent) {
// await updateKDS(existingItem, existingItem.stage); // Use existingItem instead of newItem
// }
if (
// existingItem?.items !== newItem.items
// ||
existingItem.cancelled !== newItem.cancelled ||
existingItem.state !== newItem.state
) {
await updateKDS1(existingItem?._id, newItem, null); // Use existingItem instead of newItem
}
const today = new Date().toISOString().split("T")[0];
const orderDate = newItem.order_date.split(" ")[0]; // Extract date part "YYYY-MM-DD"
const isSameDay = orderDate === today;
if(isSameDay){
if (
// existingItem?.items !== newItem.items
// ||
existingItem.cancelled !== newItem.cancelled ||
existingItem.state !== newItem.state
) {
await updateKDS1(existingItem?._id, newItem, null,existingItem?.row_pos);
}
else if (
JSON.stringify(existingItem?.items || []) !== JSON.stringify(newItem.items || [])
){
await updateKDS(existingItem?._id, newItem.items, null);
// console.log(existingItem.order_id)
// console.log(newItem.order_d)
}else if(existingItem.ref_ticket !== newItem.ref_ticket){
await updateKDS2(existingItem?._id, newItem.ref_ticket, null);
}
}
}
}
@ -233,28 +290,49 @@ function App() {
const isSameDay = orderDate === today;
return isSameDay; // Keep only orders for the current day
});
setkds(filteredKDS);
const groupedKDS = await groupKDSByStage(filteredKDS);
updateKDSstage(groupedKDS);
if(isRefreshStop===false){
// if (
// JSON.stringify(groupedKDS) !== JSON.stringify(kdsStage)
// ){
updateKDSstage(groupedKDS);
// console.log(isRefreshStop)
// console.log("not same")
// console.log(JSON.stringify(groupedKDS ?? []))
// setStaged()
}
// console.log("updating kdsStage")
// updateRefresh(false)
// }
} catch (error) {
console.error("Failed to fetch and process KDS data:", error);
}
};
const setStaged = (staged )=>{
const updateKDS = async (kdsItem, newState) => {
}
// console.log(kdsStage)
const updateKDS = async (id,kdsItem, newState) => {
try {
const updatedKDS = {
...kdsItem,
stage: newState,
items:kdsItem,
};
const updatedKDS1 = {
...kdsItem,
};
const response = await axios.patch(
`http://localhost:3002/api/kds/${kdsItem._id}`,
newState === null ? updatedKDS1 : updatedKDS
`http://pos-api.obanana.com/api/kds/${id}`,
updatedKDS
);
// console.log(updatedKDS);
return response.data;
} catch (error) {
@ -262,19 +340,42 @@ function App() {
throw error;
}
};
const updateKDS1 = async (id, kdsItem, newState) => {
const updateKDS2 = async (id,kdsItem, newState) => {
try {
const updatedKDS = {
...kdsItem,
stage: newState,
ref_ticket:kdsItem,
};
const updatedKDS1 = {
...kdsItem,
};
console.log(updatedKDS);
const response = await axios.patch(
`http://localhost:3002/api/kds/${id}`,
`http://pos-api.obanana.com/api/kds/${id}`,
updatedKDS
);
console.log(updatedKDS);
return response.data;
} catch (error) {
console.error("Failed to update KDS:", error);
throw error;
}
};
const updateKDS1 = async (id, kdsItem, newState,row) => {
try {
const updatedKDS = {
...kdsItem,
stage: newState,
row_pos:row
};
const updatedKDS1 = {
...kdsItem,
row_pos:row
};
// console.log(updatedKDS);
const response = await axios.patch(
`http://pos-api.obanana.com/api/kds/${id}`,
newState === null ? updatedKDS1 : updatedKDS
);
@ -291,7 +392,7 @@ function App() {
stage: newState,
};
const response = await axios.delete(
`http://localhost:3002/api/kds/${kdsItem._id}`,
`http://pos-api.obanana.com/api/kds/${kdsItem._id}`,
updatedKDS
);
@ -303,13 +404,13 @@ function App() {
};
const getStages = async () => {
try {
const response = await fetch("http://localhost:3002/get-stages");
const response = await fetch("http://pos-api.obanana.com/get-stages");
if (!response.ok) {
throw new Error("Network response was not ok");
} else {
const stages = await response.json();
setstages(stages); // Ensure you're setting stages in the correct state
//console.log(stages);
// console.log(stages);
return stages; // Return the stages so they can be used later
}
} catch (error) {
@ -321,7 +422,7 @@ function App() {
const groupKDSByStage = async (kdsList) => {
// Fetch stages first before proceeding
const stages1 = await getStages(); // Wait for stages to be fetched
// Initialize groupedData with default keys
let groupedData = {
new: [],
@ -331,7 +432,7 @@ function App() {
parked: [],
unknown: [], // Include unknown as a default key
};
// If stages are successfully fetched, add them as keys to groupedData
if (stages1?.length) {
groupedData = stages1.reduce((acc, stage) => {
@ -339,30 +440,9 @@ function App() {
return acc;
}, {});
}
//console.log("Fetched Stages:", stages1);
// Sort kdsList by row_pos, putting items with no row_pos at the end
// const sortedKdsList = kdsList.sort((a, b) => {
// const rowA = a.row_pos !== undefined ? a.row_pos : Infinity;
// const rowB = b.row_pos !== undefined ? b.row_pos : Infinity;
// return rowA - rowB;
// });
const sortedKdsList = kdsList.sort((a, b) => {
// If both have row_pos, sort by it
if (a.row_pos !== undefined && b.row_pos !== undefined) {
return a.row_pos - b.row_pos;
}
// If a has row_pos and b doesn't, a comes first
if (a.row_pos !== undefined) return -1;
// If b has row_pos and a doesn't, b comes first
if (b.row_pos !== undefined) return 1;
// If both are undefined, keep original order (return 0)
return 0;
});
// Now group the sorted kdsList by the stages
sortedKdsList.forEach((kdsItem) => {
// Group the kdsList by stage
kdsList.forEach((kdsItem) => {
const stage = kdsItem.stage?.toLowerCase() || "unknown";
if (groupedData.hasOwnProperty(stage)) {
groupedData[stage]?.push(kdsItem);
@ -370,30 +450,103 @@ function App() {
groupedData["unknown"]?.push(kdsItem);
}
});
// Now sort the items within each stage by row_pos
Object.keys(groupedData).forEach((stage) => {
groupedData[stage].sort((a, b) => {
// If both have row_pos, sort by it
if (a.row_pos !== undefined && b.row_pos !== undefined) {
return a.row_pos - b.row_pos;
}
// If a has row_pos and b doesn't, a comes first
if (a.row_pos !== undefined) return -1;
// If b has row_pos and a doesn't, b comes first
if (b.row_pos !== undefined) return 1;
// If both are undefined, keep original order (return 0)
return 0;
});
});
return groupedData;
};
useEffect(() => {
const updateKDSStateToNew = async () => {
try {
// Get all KDS entries
const kdsList = await getKDS();
// const groupKDSByStage = async (kdsList) => {
// // Fetch stages first before proceeding
// const stages1 = await getStages(); // Wait for stages to be fetched
// Loop through the list and update the KDS state if it's not already "new"
for (const kdsItem of kdsList) {
// if (kdsItem.stage !== "new") {
// await updateKDS(kdsItem); // Update KDS state to "new"
// }
}
// // Initialize groupedData with default keys
// let groupedData = {
// new: [],
// preparing: [],
// serve: [],
// completed: [],
// parked: [],
// unknown: [], // Include unknown as a default key
// };
//console.log("All KDS states updated to 'new'");
} catch (error) {
console.error("Failed to update KDS states:", error);
}
};
updateKDSStateToNew();
}, []);
// // If stages are successfully fetched, add them as keys to groupedData
// if (stages1?.length) {
// groupedData = stages1.reduce((acc, stage) => {
// acc[stage.name.toLowerCase()] = []; // Ensure the key is in lowercase
// return acc;
// }, {});
// }
// //console.log("Fetched Stages:", stages1);
// // Sort kdsList by row_pos, putting items with no row_pos at the end
// // const sortedKdsList = kdsList.sort((a, b) => {
// // const rowA = a.row_pos !== undefined ? a.row_pos : Infinity;
// // const rowB = b.row_pos !== undefined ? b.row_pos : Infinity;
// // return rowA - rowB;
// // });
// const sortedKdsList = kdsList.sort((a, b) => {
// // If both have row_pos, sort by it
// if (a.row_pos !== undefined && b.row_pos !== undefined) {
// return a.row_pos - b.row_pos;
// }
// // If a has row_pos and b doesn't, a comes first
// if (a.row_pos !== undefined) return -1;
// // If b has row_pos and a doesn't, b comes first
// if (b.row_pos !== undefined) return 1;
// // If both are undefined, keep original order (return 0)
// return 0;
// });
// // Now group the sorted kdsList by the stages
// sortedKdsList.forEach((kdsItem) => {
// const stage = kdsItem.stage?.toLowerCase() || "unknown";
// if (groupedData.hasOwnProperty(stage)) {
// groupedData[stage]?.push(kdsItem);
// } else {
// groupedData["unknown"]?.push(kdsItem);
// }
// });
// return groupedData;
// };
// useEffect(() => {
// const updateKDSStateToNew = async () => {
// try {
// // Get all KDS entries
// const kdsList = await getKDS();
// // Loop through the list and update the KDS state if it's not already "new"
// for (const kdsItem of kdsList) {
// // if (kdsItem.stage !== "new") {
// await deleteKDS(kdsItem); // Update KDS state to "new"
// // }
// }
// //console.log("All KDS states updated to 'new'");
// } catch (error) {
// console.error("Failed to update KDS states:", error);
// }
// };
// updateKDSStateToNew();
// }, []);
//console.log(kds);
//console.log(kdsStage);

69
src/components/main/DraggableTask.tsx
View File

@ -5,9 +5,9 @@ import { CiClock2 } from "react-icons/ci";
import { FaRegUser } from "react-icons/fa";
import moment from "moment"; // You can use moment.js for date manipulation
const DraggableTask: React.FC<{ task: any; containerId: string }> = ({
const DraggableTask: React.FC<{ task: any; containerId: string,stagess:[] }> = ({
task,
containerId,
containerId,stagess
}) => {
const {
attributes,
@ -27,45 +27,49 @@ const DraggableTask: React.FC<{ task: any; containerId: string }> = ({
const style = {
transform: CSS.Transform.toString(transform),
opacity: isDragging ? 0.5 : 1,
border: isExpired === true && task.stage !== "served" ? "3px solid red" : "0px solid #fff", // Red border if time exceeded
border: isExpired === true && task.state !== "done" ? "3px solid red" : "0px solid #fff", // Red border if time exceeded
// transition: isExpired && task.stage !== "served"
// ? "shake .5s ease-in-out 0s infinite alternate 10s"
// : "none", // Shake animation if expired
};
useEffect(() => {
const getStages = async () => {
try {
const response = await fetch("http://localhost:3002/get-stages");
if (!response.ok) throw new Error("Network response was not ok");
const stages = await response.json();
setStages(stages);
} catch (error) {
console.error("Failed to fetch KDS data:", error);
}
};
getStages();
// getStages();
Func()
}, []);
useEffect(() => {
setIsExpired(false);
if (stages.length > 0) {
const currentStage = stages.find((stage) => stage.name === task.stage);
if (currentStage) {
const holdingTime = currentStage.holding_time * 60 * 1000; // Convert minutes to milliseconds
const taskUpdatedAt = moment(task.updatedAt);
const timeDiff = moment().diff(taskUpdatedAt); // Get time difference in milliseconds
const remainingTime = holdingTime - timeDiff;
// getStages();
Func()
}, [stagess]);
// console.log(timeLeft)
const Func = async () => {
// setIsExpired(false);
if (remainingTime > 0) {
setTimeLeft(remainingTime);
} else {
setIsExpired(true); // Mark as expired if the time has exceeded
}
// let stagess =await getStages()
if (stagess?.length > 0) {
const currentStage = stagess?.find((stage) => stage.name === task.stage);
if (currentStage) {
const holdingTime = currentStage.holding_time * 60 * 1000; // Convert minutes to milliseconds
const taskUpdatedAt = moment(task.updatedAt);
const timeDiff = moment().diff(taskUpdatedAt); // Get time difference in milliseconds
const remainingTime = holdingTime - timeDiff;
if (remainingTime > 0) {
setTimeLeft(remainingTime);
} else {
setIsExpired(true); // Mark as expired if the time has exceeded
// console.log("here")
}
}
}
}
useEffect(() => {
setIsExpired(false);
Func();
}, [task]);
useEffect(() => {
@ -88,6 +92,7 @@ const DraggableTask: React.FC<{ task: any; containerId: string }> = ({
setTimeLeft(0);
}
}, [timeLeft, isExpired]);
// console.log(isExpired)
const formatTimeLeft = (milliseconds) => {
const minutes = Math.floor(milliseconds / 60000);
@ -103,13 +108,13 @@ const DraggableTask: React.FC<{ task: any; containerId: string }> = ({
{...listeners}
{...attributes}
className={`task-card bg-customWhite border rounded-[16px] mb-2 shadow-md overflow-hidden cursor-move
${isExpired ===true && task.stage !== "served" ? "animate-shake" : ""}`}
${isExpired ===true && task.state !== "done" ? "animate-shake" : ""}`}
>
<div className="px-3 h-8 flex flex-row w-full justify-between items-center bg-customYellow-light border">
<h4 className="font-semibold text-[14px]">
Seat {task.seat_id}{" "}
{task.seat_id}{" "}
<span className="text-[#6e6e6e] font-[400]">
(Order Id: {task.order_id})
(Id: {task.order_id})
</span>{" "}
</h4>
<span className="flex flex-row justify-center items-center">
@ -119,7 +124,7 @@ const DraggableTask: React.FC<{ task: any; containerId: string }> = ({
</div>
<div className="px-5 pt-2 flex flex-row w-full justify-between items-center bg-customWhite">
<h4 className="font-semibold text-[12px] text-[#afafaf]">
{task.ref_ticket === "false" ? "" : task.ref_ticket}
Tracking No. {task.ref_ticket === "false" ? "" : task.ref_ticket}
</h4>
<span className="flex flex-row justify-center items-center text-[12px]">
<FaRegUser />

5
src/components/main/DroppableContainer.tsx
View File

@ -3,9 +3,10 @@ import { useDroppable } from "@dnd-kit/core";
import DraggableTask from "./DraggableTask";
import { Task } from "../../const/types";
const DroppableContainer: React.FC<{ id: string; tasks }> = ({
const DroppableContainer: React.FC<{ id: string; tasks,stages:[] }> = ({
id,
tasks,
stagess
}) => {
const { isOver, setNodeRef } = useDroppable({ id });
@ -23,7 +24,7 @@ const DroppableContainer: React.FC<{ id: string; tasks }> = ({
<div className="text-center text-gray-400">Drop orders here</div>
) : (
tasks.map((task, index) => (
<DraggableTask key={task._id} task={task} containerId={id} />
<DraggableTask key={task._id} task={task} stagess={stagess} containerId={id} />
))
)}
</div>

6
src/components/main/TaskCard.tsx
View File

@ -8,9 +8,9 @@ const TaskCard: React.FC<{ task: Task }> = ({ task }) => {
<div className="task-card bg-customWhite border border-gray-300 rounded-[16px] overflow-hidden mb-2 shadow-md">
<div className="px-3 h-8 flex flex-row w-full justify-between items-center bg-customYellow-light border">
<h4 className="font-semibold text-[14px]">
Seat {task.seat_id}{" "}
{task.seat_id}{" "}
<span className="text-[#6e6e6e] font-[400]">
(Order Id: {task.order_id})
(Id: {task.order_id})
</span>{" "}
</h4>
<span className="flex flex-row justify-center items-center">
@ -20,7 +20,7 @@ const TaskCard: React.FC<{ task: Task }> = ({ task }) => {
</div>
<div className="px-5 pt-2 flex flex-row w-full justify-between items-center bg-customWhite">
<h4 className="font-semibold text-[12px] text-[#afafaf]">
{task.ref_ticket === "false" ? "" : task.ref_ticket}
Tracking No. {task.ref_ticket === "false" ? "" : task.ref_ticket}
</h4>
<span className="flex flex-row justify-center items-center text-[12px]">
<FaRegUser />

9
src/hooks/hooks.tsx
View File

@ -10,8 +10,10 @@ import React, {
// Define the AppContext properties interface
interface AppContextProps {
kdsStage: KDS | null;
isRefreshStop: Boolean | null;
updateKDSstage: (newKDS: KDS) => void;
updateRefresh: (refresh: Boolean) => void;
}
// Create the context with a default value of undefined
@ -25,15 +27,22 @@ interface AppProviderProps {
// Define the AppProvider component
const AppProvider: FC<AppProviderProps> = ({ children }) => {
const [kdsStage, setkds] = useState<KDS[] | null>(null);
const [isRefreshStop, setisRefreshStop] = useState<Boolean| null>(false);
const updateKDSstage = (newKDSs: KDS[]) => {
setkds(newKDSs);
};
const updateRefresh = (refresh: Boolean) => {
setisRefreshStop(refresh);
};
return (
<AppContext.Provider
value={{
kdsStage,
isRefreshStop,
updateRefresh,
updateKDSstage,
}}
>

69
src/main/Main.tsx
View File

@ -10,24 +10,42 @@ import axios from "axios";
const Main: React.FC = () => {
const [activeTask, setActiveTask] = useState<Task | null>(null);
const { kdsStage, updateKDSstage } = useAppContext();
const { kdsStage,isRefreshStop, updateKDSstage,updateRefresh } = useAppContext();
const [tasks, setTasks] = useState(kdsStage);
const [stages, setstages] = useState([]);
const [prevTask, setprevTask] = useState(kdsStage);
const [stages, setstages] = useState([]);
useEffect(() => {
setTasks(kdsStage);
// if (JSON.stringify(tasks) !== JSON.stringify(prevTask)||!prevTask){
// setTasks(kdsStage);
// setprevTask(kdsStage);
// }else{
// }
if(isRefreshStop === false){
// console.log(tasks)
// console.log("-----------")
setTasks(kdsStage);
}
}, [kdsStage]);
useEffect(() => {
getStages()
}, []);
// console.log(stages)
const handleDragStart = (event: any) => {
const { id } = event.active;
const task = findTaskById(id);
updateRefresh(true)
setActiveTask(task);
};
const getStages = async () => {
try {
const response = await fetch("http://localhost:3002/get-stages");
const response = await fetch("http://pos-api.obanana.com/get-stages");
if (!response.ok) {
throw new Error("Network response was not ok");
} else {
@ -50,7 +68,7 @@ const Main: React.FC = () => {
// row_pos: pos,
// };
// const response = await axios.patch(
// `http://localhost:3002/api/kds/${kdsItem._id}`,
// `http://pos-api.obanana.com/api/kds/${kdsItem._id}`,
// updatedKDS
// );
@ -70,28 +88,53 @@ const Main: React.FC = () => {
// First API call to update KDS item
const response = await axios.patch(
`http://localhost:3002/api/kds/${kdsItem._id}`,
`http://pos-api.obanana.com/api/kds/${kdsItem._id}`,
updatedKDS
);
console.log(newState);
// console.log(newState);
// If the new state is "serve", make the second API call to update the order state
const lastStage = stages?.find(stage => stage.last_stage === true);
console.log()
const cancelStage = stages?.find(stage => stage.cancel_stage === true);
// console.log()
// If the newState matches the last stage name, update the order state
if (newState === lastStage.name) {
if (newState === lastStage?.name) {
const body = {
id: kdsItem.order_id, // Assuming order_id is available in kdsItem
id: kdsItem.order_id,
state: "done",
};
const orderResponse = await axios.post(
`http://localhost:3002/update-order-state`,
`http://pos-api.obanana.com/update-order-state`,
body
);
if(orderResponse.data){
updateRefresh(false)
}
console.log("Order state updated:", orderResponse.data);
}
}else if (newState === cancelStage?.name) {
const body = {
id: kdsItem.order_id,
state: "cancel",
};
const orderResponse = await axios.post(
`http://pos-api.obanana.com/update-order-state`,
body
);
if(orderResponse.data){
updateRefresh(false)
}
console.log("Order state updated:", orderResponse.data);
}else{
if(response.data){
updateRefresh(false)
}
}
return response.data; // Return the response from the KDS update
} catch (error) {
console.error("Failed to update KDS or order state:", error);
@ -179,7 +222,6 @@ console.log()
// Optionally revert back to previous state here if needed
}
}
setActiveTask(null);
};
@ -288,6 +330,7 @@ console.log()
<DroppableContainer
id={containerId}
tasks={tasks[containerId]}
stagess={stages}
/>
</SortableContext>
))

3
vite.config.ts
View File

@ -9,4 +9,7 @@ export default defineConfig({
"@": path.resolve(__dirname, "./src"),
},
},
server: {
port: 3001,
},
})