diff --git a/index.html b/index.html index e4b78ea..334d328 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ - Vite + React + TS + POS Kitchen Display
diff --git a/src/App.tsx b/src/App.tsx index 691f8e5..1744f70 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -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); diff --git a/src/components/main/DraggableTask.tsx b/src/components/main/DraggableTask.tsx index 4255b8f..b171cfa 100644 --- a/src/components/main/DraggableTask.tsx +++ b/src/components/main/DraggableTask.tsx @@ -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" : ""}`} >

- Seat {task.seat_id}{" "} + {task.seat_id}{" "} - (Order Id: {task.order_id}) + (Id: {task.order_id}) {" "}

@@ -119,7 +124,7 @@ const DraggableTask: React.FC<{ task: any; containerId: string }> = ({

- {task.ref_ticket === "false" ? "" : task.ref_ticket} + Tracking No. {task.ref_ticket === "false" ? "" : task.ref_ticket}

diff --git a/src/components/main/DroppableContainer.tsx b/src/components/main/DroppableContainer.tsx index 0f9e21a..bebd6aa 100644 --- a/src/components/main/DroppableContainer.tsx +++ b/src/components/main/DroppableContainer.tsx @@ -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 }> = ({
Drop orders here
) : ( tasks.map((task, index) => ( - + )) )}
diff --git a/src/components/main/TaskCard.tsx b/src/components/main/TaskCard.tsx index 64e8749..b50f6e1 100644 --- a/src/components/main/TaskCard.tsx +++ b/src/components/main/TaskCard.tsx @@ -8,9 +8,9 @@ const TaskCard: React.FC<{ task: Task }> = ({ task }) => {

- Seat {task.seat_id}{" "} + {task.seat_id}{" "} - (Order Id: {task.order_id}) + (Id: {task.order_id}) {" "}

@@ -20,7 +20,7 @@ const TaskCard: React.FC<{ task: Task }> = ({ task }) => {

- {task.ref_ticket === "false" ? "" : task.ref_ticket} + Tracking No. {task.ref_ticket === "false" ? "" : task.ref_ticket}

diff --git a/src/hooks/hooks.tsx b/src/hooks/hooks.tsx index 6509ce9..07b762c 100644 --- a/src/hooks/hooks.tsx +++ b/src/hooks/hooks.tsx @@ -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 = ({ children }) => { const [kdsStage, setkds] = useState(null); + const [isRefreshStop, setisRefreshStop] = useState(false); + const updateKDSstage = (newKDSs: KDS[]) => { setkds(newKDSs); }; + const updateRefresh = (refresh: Boolean) => { + setisRefreshStop(refresh); + }; return ( diff --git a/src/main/Main.tsx b/src/main/Main.tsx index f7982f0..7d8a9a0 100644 --- a/src/main/Main.tsx +++ b/src/main/Main.tsx @@ -10,24 +10,42 @@ import axios from "axios"; const Main: React.FC = () => { const [activeTask, setActiveTask] = useState(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() )) diff --git a/vite.config.ts b/vite.config.ts index 5790e82..d120a81 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -9,4 +9,7 @@ export default defineConfig({ "@": path.resolve(__dirname, "./src"), }, }, + server: { + port: 3001, + }, })