This commit is contained in:
commit
d1ff1c7f85
|
|
@ -0,0 +1,24 @@
|
|||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
# React + TypeScript + Vite
|
||||
|
||||
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
|
||||
|
||||
Currently, two official plugins are available:
|
||||
|
||||
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
|
||||
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
|
||||
|
||||
## Expanding the ESLint configuration
|
||||
|
||||
If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
|
||||
|
||||
- Configure the top-level `parserOptions` property like this:
|
||||
|
||||
```js
|
||||
export default tseslint.config({
|
||||
languageOptions: {
|
||||
// other options...
|
||||
parserOptions: {
|
||||
project: ['./tsconfig.node.json', './tsconfig.app.json'],
|
||||
tsconfigRootDir: import.meta.dirname,
|
||||
},
|
||||
},
|
||||
})
|
||||
```
|
||||
|
||||
- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
|
||||
- Optionally add `...tseslint.configs.stylisticTypeChecked`
|
||||
- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
|
||||
|
||||
```js
|
||||
// eslint.config.js
|
||||
import react from 'eslint-plugin-react'
|
||||
|
||||
export default tseslint.config({
|
||||
// Set the react version
|
||||
settings: { react: { version: '18.3' } },
|
||||
plugins: {
|
||||
// Add the react plugin
|
||||
react,
|
||||
},
|
||||
rules: {
|
||||
// other rules...
|
||||
// Enable its recommended rules
|
||||
...react.configs.recommended.rules,
|
||||
...react.configs['jsx-runtime'].rules,
|
||||
},
|
||||
})
|
||||
```
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
{
|
||||
"$schema": "https://ui.shadcn.com/schema.json",
|
||||
"style": "new-york",
|
||||
"rsc": false,
|
||||
"tsx": true,
|
||||
"tailwind": {
|
||||
"config": "tailwind.config.js",
|
||||
"css": "src/index.css",
|
||||
"baseColor": "neutral",
|
||||
"cssVariables": true,
|
||||
"prefix": ""
|
||||
},
|
||||
"aliases": {
|
||||
"components": "@/components",
|
||||
"utils": "@/lib/utils",
|
||||
"ui": "@/components/ui",
|
||||
"lib": "@/lib",
|
||||
"hooks": "@/hooks"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
import js from '@eslint/js'
|
||||
import globals from 'globals'
|
||||
import reactHooks from 'eslint-plugin-react-hooks'
|
||||
import reactRefresh from 'eslint-plugin-react-refresh'
|
||||
import tseslint from 'typescript-eslint'
|
||||
|
||||
export default tseslint.config(
|
||||
{ ignores: ['dist'] },
|
||||
{
|
||||
extends: [js.configs.recommended, ...tseslint.configs.recommended],
|
||||
files: ['**/*.{ts,tsx}'],
|
||||
languageOptions: {
|
||||
ecmaVersion: 2020,
|
||||
globals: globals.browser,
|
||||
},
|
||||
plugins: {
|
||||
'react-hooks': reactHooks,
|
||||
'react-refresh': reactRefresh,
|
||||
},
|
||||
rules: {
|
||||
...reactHooks.configs.recommended.rules,
|
||||
'react-refresh/only-export-components': [
|
||||
'warn',
|
||||
{ allowConstantExport: true },
|
||||
],
|
||||
},
|
||||
},
|
||||
)
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<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>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,47 @@
|
|||
{
|
||||
"name": "pos-notication-screen",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "tsc -b && vite build",
|
||||
"lint": "eslint .",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@dnd-kit/core": "^6.1.0",
|
||||
"@dnd-kit/sortable": "^8.0.0",
|
||||
"@dnd-kit/utilities": "^3.2.2",
|
||||
"@radix-ui/react-icons": "^1.3.0",
|
||||
"@radix-ui/react-slot": "^1.1.0",
|
||||
"axios": "^1.7.7",
|
||||
"class-variance-authority": "^0.7.0",
|
||||
"clsx": "^2.1.1",
|
||||
"lucide-react": "^0.441.0",
|
||||
"moment": "^2.30.1",
|
||||
"react": "^18.3.1",
|
||||
"react-beautiful-dnd": "^13.1.1",
|
||||
"react-dom": "^18.3.1",
|
||||
"react-icons": "^5.3.0",
|
||||
"tailwind-merge": "^2.5.2",
|
||||
"tailwindcss-animate": "^1.0.7"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/js": "^9.9.0",
|
||||
"@types/node": "^22.5.5",
|
||||
"@types/react": "^18.3.3",
|
||||
"@types/react-dom": "^18.3.0",
|
||||
"@vitejs/plugin-react": "^4.3.1",
|
||||
"autoprefixer": "^10.4.20",
|
||||
"eslint": "^9.9.0",
|
||||
"eslint-plugin-react-hooks": "^5.1.0-rc.0",
|
||||
"eslint-plugin-react-refresh": "^0.4.9",
|
||||
"globals": "^15.9.0",
|
||||
"postcss": "^8.4.45",
|
||||
"tailwindcss": "^3.4.11",
|
||||
"typescript": "^5.5.3",
|
||||
"typescript-eslint": "^8.0.1",
|
||||
"vite": "^5.4.1"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
export default {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
|
|
@ -0,0 +1,59 @@
|
|||
#root {
|
||||
max-width: 1500px;
|
||||
margin: 0 auto;
|
||||
/* padding: 2rem; */
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 6em;
|
||||
padding: 1.5em;
|
||||
will-change: filter;
|
||||
transition: filter 300ms;
|
||||
}
|
||||
.logo:hover {
|
||||
filter: drop-shadow(0 0 2em #646cffaa);
|
||||
}
|
||||
.logo.react:hover {
|
||||
filter: drop-shadow(0 0 2em #61dafbaa);
|
||||
}
|
||||
|
||||
@keyframes logo-spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
a:nth-of-type(2) .logo {
|
||||
animation: logo-spin infinite 20s linear;
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 2em;
|
||||
}
|
||||
|
||||
.read-the-docs {
|
||||
color: #888;
|
||||
}
|
||||
@keyframes shake {
|
||||
0% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
25% {
|
||||
transform: translateX(-5px);
|
||||
}
|
||||
50% {
|
||||
transform: translateX(5px);
|
||||
}
|
||||
75% {
|
||||
transform: translateX(-5px);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,408 @@
|
|||
import { useEffect, useState } from "react";
|
||||
import "./App.css";
|
||||
import Main from "./main/Main";
|
||||
import axios from "axios";
|
||||
import { useAppContext } from "./hooks/hooks";
|
||||
// import { KDS } from "./types/types";
|
||||
function App() {
|
||||
const [kds, setkds] = useState();
|
||||
const [stages, setstages] = useState();
|
||||
|
||||
const { kdsStage, updateKDSstage } = useAppContext();
|
||||
|
||||
const getOrders = async () => {
|
||||
try {
|
||||
const response = await axios.get("http://localhost:3002/get-orders");
|
||||
return response.data;
|
||||
} catch (error) {
|
||||
console.error("Error fetching orders:", error);
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
const getOrderedProducts = async () => {
|
||||
try {
|
||||
const response = await axios.get(
|
||||
"http://localhost:3002/get-product_ordered"
|
||||
);
|
||||
return response.data;
|
||||
} catch (error) {
|
||||
console.error("Error fetching ordered products:", error);
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
|
||||
// const getKDS = async () => {
|
||||
// try {
|
||||
// const response = await fetch("http://localhost:3002/api/kds"); // Adjust URL as needed
|
||||
// if (!response.ok) {
|
||||
// throw new Error("Network response was not ok");
|
||||
// }
|
||||
// return await response.json();
|
||||
// } catch (error) {
|
||||
// console.error("Failed to fetch KDS data:", error);
|
||||
// return [];
|
||||
// }
|
||||
// };
|
||||
const getKDS = async () => {
|
||||
try {
|
||||
const response = await fetch("http://localhost:3002/api/kds"); // Adjust URL as needed
|
||||
if (!response.ok) {
|
||||
throw new Error("Network response was not ok");
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
// Get today's date in 'YYYY-MM-DD' format
|
||||
const today = new Date().toISOString().split("T")[0];
|
||||
// console.log("Today's date:", data);
|
||||
|
||||
// Filter KDS data to only include items with today's date
|
||||
const filteredKDS = data;
|
||||
|
||||
// const filteredKDS = data.filter((kdsItem) => {
|
||||
// const orderDate = kdsItem.order_date.split(" ")[0]; // Extract date part "YYYY-MM-DD"
|
||||
// const isSameDay = orderDate === today;
|
||||
// console.log(`Order Date: ${orderDate}, IsSameDay: ${isSameDay} +${today} + ${kdsItem.order_date.split(" ")[0]}`); // Log the comparison
|
||||
// return isSameDay; // Keep only orders for the current day
|
||||
// });
|
||||
|
||||
return filteredKDS;
|
||||
} catch (error) {
|
||||
console.error("Failed to fetch KDS data:", error);
|
||||
return [];
|
||||
}
|
||||
};
|
||||
|
||||
// Function to create new KDS data via API POST request
|
||||
const createKDS = async (newKDS) => {
|
||||
try {
|
||||
const response = await fetch("http://localhost:3002/api/kds", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify(newKDS),
|
||||
});
|
||||
if (!response.ok) {
|
||||
// throw new Error("Network response was not ok");
|
||||
}
|
||||
return await response.json();
|
||||
} catch (error) {
|
||||
// console.error("Failed to create KDS data:", error);
|
||||
// Handle the error as needed
|
||||
}
|
||||
};
|
||||
|
||||
const createKDSArray = async () => {
|
||||
try {
|
||||
const [orders, productsOrdered] = await Promise.all([
|
||||
getOrders(),
|
||||
getOrderedProducts(),
|
||||
]);
|
||||
const KDS = orders.map((order) => {
|
||||
const items = order.lines.map((lineId) => {
|
||||
const product = productsOrdered.find((p) => p.id === lineId);
|
||||
return {
|
||||
ordered_prod_id: product.id,
|
||||
product_id: product.product_id[0],
|
||||
quantity: product.qty,
|
||||
order_id: order.id,
|
||||
product_name: product.full_product_name,
|
||||
note: product.customer_note,
|
||||
};
|
||||
});
|
||||
|
||||
return {
|
||||
order_id: order.id,
|
||||
order_name: order.name,
|
||||
order_date: order.date_order,
|
||||
cancelled: order.state === "cancel" ? true : false,
|
||||
ref_ticket: order.ticket_code,
|
||||
take_away: order.take_away,
|
||||
seat_id: order.table_id[1],
|
||||
customer_count: order.customer_count,
|
||||
ref_id: order.pos_reference,
|
||||
items: items,
|
||||
stage:
|
||||
order.state === "cancel"
|
||||
? "parked"
|
||||
: order.state === "done"
|
||||
? "served"
|
||||
: order.state === "draft"
|
||||
? "new"
|
||||
: order.state === "paid"
|
||||
? "new"
|
||||
: "new",
|
||||
state: order.state,
|
||||
duration: 0,
|
||||
};
|
||||
});
|
||||
|
||||
return KDS;
|
||||
} catch (error) {
|
||||
console.error("Error creating KDS array:", error);
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
useEffect(() => {
|
||||
getStages();
|
||||
fetchData();
|
||||
}, []);
|
||||
useEffect(() => {
|
||||
// Function to be called periodically
|
||||
const tick = () => {
|
||||
fetchData();
|
||||
};
|
||||
|
||||
const intervalId = setInterval(tick, 3000);
|
||||
|
||||
return () => {
|
||||
clearInterval(intervalId);
|
||||
};
|
||||
}, []);
|
||||
const fetchData = async () => {
|
||||
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 = [
|
||||
"order_id",
|
||||
"order_name",
|
||||
"order_date",
|
||||
"cancelled",
|
||||
"ref_ticket",
|
||||
"take_away",
|
||||
"seat_id",
|
||||
"customer_count",
|
||||
"ref_id",
|
||||
"items",
|
||||
"stage",
|
||||
"duration",
|
||||
"row_pos",
|
||||
];
|
||||
|
||||
// Loop through the newKDSArray and check if items exist in kdsData by ref_id
|
||||
for (const newItem of newKDSArray) {
|
||||
const existingItem = kdsData.find(
|
||||
(item) => item.ref_id === newItem.ref_id
|
||||
);
|
||||
|
||||
if (!existingItem) {
|
||||
// If no existing item is found, create a new KDS item
|
||||
await createKDS({ ...newItem, stage: "new" });
|
||||
} else if (existingItem) {
|
||||
// // Compare only specific keys between existingItem and newItem
|
||||
// const isDifferent = keysToCompare.some(
|
||||
// (key) => {
|
||||
// // Check if the key exists in both and compare values
|
||||
// if (key === "items") {
|
||||
// // Deep comparison for items array if necessary
|
||||
// return JSON.stringify(newItem.items) !== JSON.stringify(existingItem.items);
|
||||
// } else {
|
||||
// return newItem[key] !== existingItem[key];
|
||||
// }
|
||||
// }
|
||||
// );
|
||||
// console.log(existingItem)
|
||||
// console.log(newItem);
|
||||
|
||||
// // If there are any differences, update the KDS item
|
||||
// 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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// After looping through newKDSArray, fetch and update KDS state
|
||||
const today = new Date().toISOString().split("T")[0];
|
||||
|
||||
const updatedKDSData = await getKDS();
|
||||
const filteredKDS = updatedKDSData.filter((kdsItem) => {
|
||||
const orderDate = kdsItem.order_date.split(" ")[0]; // Extract date part "YYYY-MM-DD"
|
||||
const isSameDay = orderDate === today;
|
||||
return isSameDay; // Keep only orders for the current day
|
||||
});
|
||||
|
||||
setkds(filteredKDS);
|
||||
const groupedKDS = await groupKDSByStage(filteredKDS);
|
||||
updateKDSstage(groupedKDS);
|
||||
} catch (error) {
|
||||
console.error("Failed to fetch and process KDS data:", error);
|
||||
}
|
||||
};
|
||||
|
||||
const updateKDS = async (kdsItem, newState) => {
|
||||
try {
|
||||
const updatedKDS = {
|
||||
...kdsItem,
|
||||
stage: newState,
|
||||
};
|
||||
const updatedKDS1 = {
|
||||
...kdsItem,
|
||||
};
|
||||
const response = await axios.patch(
|
||||
`http://localhost:3002/api/kds/${kdsItem._id}`,
|
||||
newState === null ? updatedKDS1 : updatedKDS
|
||||
);
|
||||
|
||||
return response.data;
|
||||
} catch (error) {
|
||||
console.error("Failed to update KDS:", error);
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
const updateKDS1 = async (id, kdsItem, newState) => {
|
||||
try {
|
||||
const updatedKDS = {
|
||||
...kdsItem,
|
||||
stage: newState,
|
||||
};
|
||||
const updatedKDS1 = {
|
||||
...kdsItem,
|
||||
};
|
||||
|
||||
console.log(updatedKDS);
|
||||
const response = await axios.patch(
|
||||
`http://localhost:3002/api/kds/${id}`,
|
||||
newState === null ? updatedKDS1 : updatedKDS
|
||||
);
|
||||
|
||||
return response.data;
|
||||
} catch (error) {
|
||||
console.error("Failed to update KDS:", error);
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
const deleteKDS = async (kdsItem, newState = "new") => {
|
||||
try {
|
||||
const updatedKDS = {
|
||||
...kdsItem,
|
||||
stage: newState,
|
||||
};
|
||||
const response = await axios.delete(
|
||||
`http://localhost:3002/api/kds/${kdsItem._id}`,
|
||||
updatedKDS
|
||||
);
|
||||
|
||||
return response.data;
|
||||
} catch (error) {
|
||||
console.error("Failed to update KDS:", error);
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
const getStages = async () => {
|
||||
try {
|
||||
const response = await fetch("http://localhost:3002/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);
|
||||
return stages; // Return the stages so they can be used later
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Failed to fetch KDS data:", error);
|
||||
return [];
|
||||
}
|
||||
};
|
||||
|
||||
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: [],
|
||||
preparing: [],
|
||||
serve: [],
|
||||
completed: [],
|
||||
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) => {
|
||||
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 updateKDS(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);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Main />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 4.0 KiB |
|
|
@ -0,0 +1,148 @@
|
|||
import React, { useState, useEffect } from "react";
|
||||
import { useSortable } from "@dnd-kit/sortable";
|
||||
import { CSS } from "@dnd-kit/utilities";
|
||||
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 }> = ({
|
||||
task,
|
||||
containerId,
|
||||
}) => {
|
||||
const {
|
||||
attributes,
|
||||
listeners,
|
||||
setNodeRef,
|
||||
transform,
|
||||
transition,
|
||||
isDragging,
|
||||
} = useSortable({ id: task._id });
|
||||
|
||||
const [stages, setStages] = useState([]);
|
||||
const [timeLeft, setTimeLeft] = useState(0);
|
||||
const [isExpired, setIsExpired] = useState(false);
|
||||
// useEffect(() => {
|
||||
// }, [task])
|
||||
|
||||
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
|
||||
// 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();
|
||||
}, []);
|
||||
|
||||
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;
|
||||
|
||||
if (remainingTime > 0) {
|
||||
setTimeLeft(remainingTime);
|
||||
} else {
|
||||
setIsExpired(true); // Mark as expired if the time has exceeded
|
||||
}
|
||||
}
|
||||
}
|
||||
}, [task]);
|
||||
|
||||
useEffect(() => {
|
||||
if (timeLeft > 0 && !isExpired) {
|
||||
const timer = setInterval(() => {
|
||||
setTimeLeft((prevTime) => {
|
||||
const newTime = prevTime - 1000;
|
||||
if (newTime <= 0) {
|
||||
setIsExpired(true);
|
||||
clearInterval(timer);
|
||||
return 0;
|
||||
}
|
||||
return newTime;
|
||||
});
|
||||
}, 1000);
|
||||
|
||||
return () => clearInterval(timer);
|
||||
} else if (timeLeft <= 0 && !isExpired) {
|
||||
// setIsExpired(true);
|
||||
setTimeLeft(0);
|
||||
}
|
||||
}, [timeLeft, isExpired]);
|
||||
|
||||
const formatTimeLeft = (milliseconds) => {
|
||||
const minutes = Math.floor(milliseconds / 60000);
|
||||
const seconds = Math.floor((milliseconds % 60000) / 1000);
|
||||
return `${minutes}:${seconds < 10 ? "0" : ""}${seconds}`;
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={setNodeRef}
|
||||
style={style}
|
||||
{...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" : ""}`}
|
||||
>
|
||||
<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}{" "}
|
||||
<span className="text-[#6e6e6e] font-[400]">
|
||||
(Order Id: {task.order_id})
|
||||
</span>{" "}
|
||||
</h4>
|
||||
<span className="flex flex-row justify-center items-center">
|
||||
<CiClock2 />
|
||||
<h6 className="pl-1 text-[14px]">{formatTimeLeft(timeLeft)}s</h6>
|
||||
</span>
|
||||
</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}
|
||||
</h4>
|
||||
<span className="flex flex-row justify-center items-center text-[12px]">
|
||||
<FaRegUser />
|
||||
<h6 className="pl-1 text-[12px]">
|
||||
{task.customer_count !== 0 ? task.customer_count : "1"}
|
||||
</h6>
|
||||
</span>
|
||||
</div>
|
||||
<div className="pb-3 px-3 flex flex-row w-full">
|
||||
<ul className="outline-none w-full pt-1">
|
||||
{task.items.map((item, i) => (
|
||||
<li
|
||||
key={i}
|
||||
className="p-1 flex flex-row w-full justify-between items-center text-left"
|
||||
>
|
||||
<h4 className="font-semibold text-[13px]">{item.product_name}</h4>
|
||||
<h6 className="text-[14px] pl-2">x{item.quantity}</h6>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default DraggableTask;
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
import React from "react";
|
||||
import { useDroppable } from "@dnd-kit/core";
|
||||
import DraggableTask from "./DraggableTask";
|
||||
import { Task } from "../../const/types";
|
||||
|
||||
const DroppableContainer: React.FC<{ id: string; tasks }> = ({
|
||||
id,
|
||||
tasks,
|
||||
}) => {
|
||||
const { isOver, setNodeRef } = useDroppable({ id });
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={setNodeRef}
|
||||
className={`container bg-gray-100 border-2 border-gray-300 rounded-md p-4 min-h-[95vh] w-[300px] ${
|
||||
isOver ? "bg-green-200 border-green-400" : ""
|
||||
}`}
|
||||
>
|
||||
<h3 className="font-bold text-center mb-4 text-gray-700">
|
||||
{id.toUpperCase()}
|
||||
</h3>
|
||||
{tasks.length === 0 ? (
|
||||
<div className="text-center text-gray-400">Drop orders here</div>
|
||||
) : (
|
||||
tasks.map((task, index) => (
|
||||
<DraggableTask key={task._id} task={task} containerId={id} />
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default DroppableContainer;
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
import React from "react";
|
||||
import { CiClock2 } from "react-icons/ci";
|
||||
import { FaRegUser, FaUser } from "react-icons/fa";
|
||||
import { Task } from "../../const/types";
|
||||
|
||||
const TaskCard: React.FC<{ task: Task }> = ({ task }) => {
|
||||
return (
|
||||
<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}{" "}
|
||||
<span className="text-[#6e6e6e] font-[400]">
|
||||
(Order Id: {task.order_id})
|
||||
</span>{" "}
|
||||
</h4>
|
||||
<span className="flex flex-row justify-center items-center">
|
||||
<CiClock2 />
|
||||
<h6 className="pl-1 text-[14px]">0:00s</h6>
|
||||
</span>
|
||||
</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}
|
||||
</h4>
|
||||
<span className="flex flex-row justify-center items-center text-[12px]">
|
||||
<FaRegUser />
|
||||
<h6 className="pl-1 text-[12px]">
|
||||
{task.customer_count !== 0 ? task.customer_count : "1"}
|
||||
</h6>
|
||||
</span>
|
||||
</div>
|
||||
<div className="pb-3 px-3 flex flex-row w-full">
|
||||
<ul className="outline-none w-full pt-1">
|
||||
{task.items.map((item, i) => (
|
||||
<li
|
||||
key={i}
|
||||
className="p-1 flex flex-row w-full justify-between items-center text-left "
|
||||
>
|
||||
<h4 className="font-semibold text-[13px]">{item.product_name}</h4>
|
||||
<h6 className="text-[14px] pl-2">x{item.quantity}</h6>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default TaskCard;
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
import * as React from "react"
|
||||
import { Slot } from "@radix-ui/react-slot"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const buttonVariants = cva(
|
||||
"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default:
|
||||
"bg-primary text-primary-foreground shadow hover:bg-primary/90",
|
||||
destructive:
|
||||
"bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
|
||||
outline:
|
||||
"border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
|
||||
secondary:
|
||||
"bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
|
||||
ghost: "hover:bg-accent hover:text-accent-foreground",
|
||||
link: "text-primary underline-offset-4 hover:underline",
|
||||
},
|
||||
size: {
|
||||
default: "h-9 px-4 py-2",
|
||||
sm: "h-8 rounded-md px-3 text-xs",
|
||||
lg: "h-10 rounded-md px-8",
|
||||
icon: "h-9 w-9",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
size: "default",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
export interface ButtonProps
|
||||
extends React.ButtonHTMLAttributes<HTMLButtonElement>,
|
||||
VariantProps<typeof buttonVariants> {
|
||||
asChild?: boolean
|
||||
}
|
||||
|
||||
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
|
||||
({ className, variant, size, asChild = false, ...props }, ref) => {
|
||||
const Comp = asChild ? Slot : "button"
|
||||
return (
|
||||
<Comp
|
||||
className={cn(buttonVariants({ variant, size, className }))}
|
||||
ref={ref}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
)
|
||||
Button.displayName = "Button"
|
||||
|
||||
export { Button, buttonVariants }
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
export type Task = {
|
||||
id: string;
|
||||
text: string;
|
||||
};
|
||||
|
||||
export const initialTasks: { [key: string]: Task[] } = {
|
||||
new: [
|
||||
{ id: "1", text: "Task 1" },
|
||||
{ id: "2", text: "Task 2" },
|
||||
{ id: "7", text: "Task 7" },
|
||||
{ id: "8", text: "Task 8" },
|
||||
{ id: "9", text: "Task 9" },
|
||||
],
|
||||
preparing: [
|
||||
{ id: "3", text: "Task 3" },
|
||||
{ id: "10", text: "Task 10" },
|
||||
],
|
||||
serve: [{ id: "4", text: "Task 4" }],
|
||||
completed: [{ id: "5", text: "Task 5" }],
|
||||
parked: [{ id: "6", text: "Task 6" }],
|
||||
};
|
||||
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
import { GISdata } from "@/types/gis";
|
||||
import { KDS } from "@/types/types";
|
||||
import React, {
|
||||
useState,
|
||||
ReactNode,
|
||||
FC,
|
||||
createContext,
|
||||
useContext,
|
||||
} from "react";
|
||||
// Define the AppContext properties interface
|
||||
interface AppContextProps {
|
||||
kdsStage: KDS | null;
|
||||
|
||||
updateKDSstage: (newKDS: KDS) => void;
|
||||
}
|
||||
|
||||
// Create the context with a default value of undefined
|
||||
const AppContext = createContext<AppContextProps | undefined>(undefined);
|
||||
|
||||
// Define the AppProviderProps interface
|
||||
interface AppProviderProps {
|
||||
children: ReactNode;
|
||||
}
|
||||
|
||||
// Define the AppProvider component
|
||||
const AppProvider: FC<AppProviderProps> = ({ children }) => {
|
||||
const [kdsStage, setkds] = useState<KDS[] | null>(null);
|
||||
|
||||
const updateKDSstage = (newKDSs: KDS[]) => {
|
||||
setkds(newKDSs);
|
||||
};
|
||||
|
||||
return (
|
||||
<AppContext.Provider
|
||||
value={{
|
||||
kdsStage,
|
||||
updateKDSstage,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</AppContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
// Custom hook to use the AppContext
|
||||
const useAppContext = (): AppContextProps => {
|
||||
const context = useContext(AppContext);
|
||||
if (context === undefined) {
|
||||
throw new Error("useAppContext must be used within an AppProvider");
|
||||
}
|
||||
return context;
|
||||
};
|
||||
|
||||
export { AppProvider, useAppContext };
|
||||
|
|
@ -0,0 +1,183 @@
|
|||
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
:root {
|
||||
/* font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; */
|
||||
font-family: "Poppins", system-ui;
|
||||
line-height: 1.5;
|
||||
font-weight: 400;
|
||||
color-scheme: light dark;
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
background-color: #ddd;
|
||||
box-sizing: border-box;
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
a {
|
||||
font-weight: 500;
|
||||
color: #646cff;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
a:hover {
|
||||
color: #535bf2;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
background-color: #ddd;
|
||||
|
||||
display: flex;
|
||||
place-items: center;
|
||||
min-width: 320px;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3.2em;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
button {
|
||||
border-radius: 8px;
|
||||
border: 1px solid transparent;
|
||||
padding: 0.6em 1.2em;
|
||||
font-size: 1em;
|
||||
font-weight: 500;
|
||||
font-family: inherit;
|
||||
background-color: #1a1a1a;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.25s;
|
||||
}
|
||||
button:hover {
|
||||
border-color: #646cff;
|
||||
}
|
||||
button:focus,
|
||||
button:focus-visible {
|
||||
outline: 4px auto -webkit-focus-ring-color;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
color: #213547;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
a:hover {
|
||||
color: #747bff;
|
||||
}
|
||||
button {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
}
|
||||
|
||||
.board {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.card {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin: 5px;
|
||||
background-color: lightblue;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: grab;
|
||||
}
|
||||
|
||||
.empty-space {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin: 5px;
|
||||
background-color: lightgray;
|
||||
}
|
||||
|
||||
@layer base {
|
||||
:root {
|
||||
--background: 0 0% 100%;
|
||||
--foreground: 0 0% 3.9%;
|
||||
--card: 0 0% 100%;
|
||||
--card-foreground: 0 0% 3.9%;
|
||||
--popover: 0 0% 100%;
|
||||
--popover-foreground: 0 0% 3.9%;
|
||||
--primary: 0 0% 9%;
|
||||
--primary-foreground: 0 0% 98%;
|
||||
--secondary: 0 0% 96.1%;
|
||||
--secondary-foreground: 0 0% 9%;
|
||||
--muted: 0 0% 96.1%;
|
||||
--muted-foreground: 0 0% 45.1%;
|
||||
--accent: 0 0% 96.1%;
|
||||
--accent-foreground: 0 0% 9%;
|
||||
--destructive: 0 84.2% 60.2%;
|
||||
--destructive-foreground: 0 0% 98%;
|
||||
--border: 0 0% 89.8%;
|
||||
--input: 0 0% 89.8%;
|
||||
--ring: 0 0% 3.9%;
|
||||
--chart-1: 12 76% 61%;
|
||||
--chart-2: 173 58% 39%;
|
||||
--chart-3: 197 37% 24%;
|
||||
--chart-4: 43 74% 66%;
|
||||
--chart-5: 27 87% 67%;
|
||||
--radius: 0.5rem;
|
||||
}
|
||||
.dark {
|
||||
--background: 0 0% 3.9%;
|
||||
--foreground: 0 0% 98%;
|
||||
--card: 0 0% 3.9%;
|
||||
--card-foreground: 0 0% 98%;
|
||||
--popover: 0 0% 3.9%;
|
||||
--popover-foreground: 0 0% 98%;
|
||||
--primary: 0 0% 98%;
|
||||
--primary-foreground: 0 0% 9%;
|
||||
--secondary: 0 0% 14.9%;
|
||||
--secondary-foreground: 0 0% 98%;
|
||||
--muted: 0 0% 14.9%;
|
||||
--muted-foreground: 0 0% 63.9%;
|
||||
--accent: 0 0% 14.9%;
|
||||
--accent-foreground: 0 0% 98%;
|
||||
--destructive: 0 62.8% 30.6%;
|
||||
--destructive-foreground: 0 0% 98%;
|
||||
--border: 0 0% 14.9%;
|
||||
--input: 0 0% 14.9%;
|
||||
--ring: 0 0% 83.1%;
|
||||
--chart-1: 220 70% 50%;
|
||||
--chart-2: 160 60% 45%;
|
||||
--chart-3: 30 80% 55%;
|
||||
--chart-4: 280 65% 60%;
|
||||
--chart-5: 340 75% 55%;
|
||||
}
|
||||
}
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border;
|
||||
}
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
}
|
||||
}
|
||||
@keyframes shake {
|
||||
0% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
25% {
|
||||
transform: translateX(-5px);
|
||||
}
|
||||
50% {
|
||||
transform: translateX(5px);
|
||||
}
|
||||
75% {
|
||||
transform: translateX(-5px);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
import { clsx, type ClassValue } from "clsx"
|
||||
import { twMerge } from "tailwind-merge"
|
||||
|
||||
export function cn(...inputs: ClassValue[]) {
|
||||
return twMerge(clsx(inputs))
|
||||
}
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
import { StrictMode } from "react";
|
||||
import { createRoot } from "react-dom/client";
|
||||
import App from "./App.tsx";
|
||||
import "./index.css";
|
||||
import { AppProvider } from "./hooks/hooks.tsx";
|
||||
|
||||
createRoot(document.getElementById("root")!).render(
|
||||
<StrictMode>
|
||||
<AppProvider>
|
||||
<App />
|
||||
</AppProvider>
|
||||
</StrictMode>
|
||||
);
|
||||
|
|
@ -0,0 +1,304 @@
|
|||
import React, { useEffect, useState } from "react";
|
||||
import { DndContext, DragOverlay } from "@dnd-kit/core";
|
||||
import { SortableContext } from "@dnd-kit/sortable";
|
||||
import { arrayMove } from "@dnd-kit/sortable";
|
||||
import { Task } from "../const/types";
|
||||
import DroppableContainer from "../components/main/DroppableContainer";
|
||||
import TaskCard from "../components/main/TaskCard";
|
||||
import { useAppContext } from "@/hooks/hooks";
|
||||
import axios from "axios";
|
||||
|
||||
const Main: React.FC = () => {
|
||||
const [activeTask, setActiveTask] = useState<Task | null>(null);
|
||||
const { kdsStage, updateKDSstage } = useAppContext();
|
||||
const [tasks, setTasks] = useState(kdsStage);
|
||||
|
||||
useEffect(() => {
|
||||
setTasks(kdsStage);
|
||||
}, [kdsStage]);
|
||||
|
||||
const handleDragStart = (event: any) => {
|
||||
const { id } = event.active;
|
||||
const task = findTaskById(id);
|
||||
setActiveTask(task);
|
||||
};
|
||||
|
||||
// const updateKDS = async (kdsItem, newState, pos) => {
|
||||
// try {
|
||||
// const updatedKDS = {
|
||||
// ...kdsItem,
|
||||
// stage: newState,
|
||||
// row_pos: pos,
|
||||
// };
|
||||
// const response = await axios.patch(
|
||||
// `http://localhost:3002/api/kds/${kdsItem._id}`,
|
||||
// updatedKDS
|
||||
// );
|
||||
|
||||
// return response.data;
|
||||
// } catch (error) {
|
||||
// console.error("Failed to update KDS:", error);
|
||||
// throw error;
|
||||
// }
|
||||
// };
|
||||
const updateKDS = async (kdsItem, newState, pos) => {
|
||||
try {
|
||||
const updatedKDS = {
|
||||
...kdsItem,
|
||||
stage: newState,
|
||||
row_pos: pos,
|
||||
};
|
||||
|
||||
// First API call to update KDS item
|
||||
const response = await axios.patch(
|
||||
`http://localhost:3002/api/kds/${kdsItem._id}`,
|
||||
updatedKDS
|
||||
);
|
||||
console.log(newState);
|
||||
// If the new state is "serve", make the second API call to update the order state
|
||||
if (newState === "served") {
|
||||
const body = {
|
||||
id: kdsItem.order_id, // Assuming order_id is available in kdsItem
|
||||
state: "done",
|
||||
};
|
||||
|
||||
const orderResponse = await axios.post(
|
||||
`http://localhost:3002/update-order-state`,
|
||||
body
|
||||
);
|
||||
|
||||
console.log("Order state updated:", orderResponse.data);
|
||||
}
|
||||
|
||||
return response.data; // Return the response from the KDS update
|
||||
} catch (error) {
|
||||
console.error("Failed to update KDS or order state:", error);
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
|
||||
const handleDragEnd = async (event: any) => {
|
||||
const { active, over } = event;
|
||||
|
||||
if (!over) {
|
||||
setActiveTask(null);
|
||||
return;
|
||||
}
|
||||
|
||||
const activeId = active.id;
|
||||
const overId = over.id;
|
||||
|
||||
const activeContainer = findContainer(activeId);
|
||||
const overContainer = findContainer(overId) || overId;
|
||||
|
||||
const activeIndex = tasks[activeContainer].findIndex(
|
||||
(task) => task._id === activeId
|
||||
);
|
||||
const activeTask = tasks[activeContainer][activeIndex];
|
||||
|
||||
// Update state first
|
||||
let newTasks;
|
||||
|
||||
if (activeContainer === overContainer) {
|
||||
const overIndex = tasks[overContainer].findIndex(
|
||||
(task) => task._id === overId
|
||||
);
|
||||
|
||||
// Rearrange within the same container
|
||||
newTasks = {
|
||||
...tasks,
|
||||
[activeContainer]: arrayMove(
|
||||
tasks[activeContainer],
|
||||
activeIndex,
|
||||
overIndex
|
||||
),
|
||||
};
|
||||
|
||||
setTasks(newTasks);
|
||||
|
||||
// Update API for the same container
|
||||
try {
|
||||
await updateKDS(activeTask, activeTask.stage, overIndex);
|
||||
} catch (error) {
|
||||
console.error("Failed to update KDS stage:", error);
|
||||
// Optionally revert back to previous state here if needed
|
||||
}
|
||||
} else {
|
||||
// Move task to another container
|
||||
const overIndex = tasks[overContainer].findIndex(
|
||||
(task) => task._id === overId
|
||||
);
|
||||
const updatedActiveContainer = tasks[activeContainer].filter(
|
||||
(task) => task._id !== activeId
|
||||
);
|
||||
const updatedOverContainer = [...tasks[overContainer]];
|
||||
|
||||
if (overIndex === -1) {
|
||||
updatedOverContainer.push(activeTask);
|
||||
} else {
|
||||
updatedOverContainer.splice(overIndex, 0, activeTask);
|
||||
}
|
||||
|
||||
newTasks = {
|
||||
...tasks,
|
||||
[activeContainer]: updatedActiveContainer,
|
||||
[overContainer]: updatedOverContainer,
|
||||
};
|
||||
|
||||
setTasks(newTasks);
|
||||
|
||||
// Update API for moving to another container
|
||||
try {
|
||||
const newOverIndex =
|
||||
overIndex === -1 ? tasks[overContainer].length : overIndex;
|
||||
await updateKDS(activeTask, overContainer, newOverIndex);
|
||||
} catch (error) {
|
||||
console.error("Failed to update KDS stage:", error);
|
||||
// Optionally revert back to previous state here if needed
|
||||
}
|
||||
}
|
||||
|
||||
setActiveTask(null);
|
||||
};
|
||||
|
||||
// const handleDragEnd = async (event: any) => {
|
||||
// const { active, over } = event;
|
||||
|
||||
// if (!over) {
|
||||
// setActiveTask(null);
|
||||
// return;
|
||||
// }
|
||||
|
||||
// const { id: activeId } = active;
|
||||
// const overId = over.id;
|
||||
|
||||
// const activeContainer = findContainer(activeId);
|
||||
// const overContainer = findContainer(overId) || overId;
|
||||
|
||||
// if (activeContainer && overContainer) {
|
||||
// const activeIndex = tasks[activeContainer].findIndex(
|
||||
// (task) => task._id === activeId
|
||||
// );
|
||||
|
||||
// const activeTask = tasks[activeContainer][activeIndex];
|
||||
|
||||
// if (activeContainer === overContainer) {
|
||||
// // Rearrange tasks within the same container
|
||||
// const overIndex = tasks[overContainer].findIndex(
|
||||
// (task) => task._id === overId
|
||||
// );
|
||||
// setTasks((prevTasks) => ({
|
||||
// ...prevTasks,
|
||||
// [activeContainer]: arrayMove(
|
||||
// prevTasks[activeContainer],
|
||||
// activeIndex,
|
||||
// overIndex
|
||||
// ),
|
||||
// }));
|
||||
|
||||
// // Call API to update KDS with the same container and new index
|
||||
// try {
|
||||
// await updateKDS(activeTask, overContainer, overIndex);
|
||||
// } catch (error) {
|
||||
// console.error("Failed to update KDS stage:", error);
|
||||
// }
|
||||
|
||||
// } else {
|
||||
// // Move task between containers
|
||||
// const overIndex = tasks[overContainer].findIndex(
|
||||
// (task) => task._id === overId
|
||||
// );
|
||||
|
||||
// setTasks((prevTasks) => {
|
||||
// const updatedActiveContainer = [...prevTasks[activeContainer]];
|
||||
// updatedActiveContainer.splice(activeIndex, 1);
|
||||
|
||||
// const updatedOverContainer = [...prevTasks[overContainer]];
|
||||
// if (overIndex === -1) {
|
||||
// updatedOverContainer.push(activeTask);
|
||||
// } else {
|
||||
// updatedOverContainer.splice(overIndex, 0, activeTask);
|
||||
// }
|
||||
|
||||
// return {
|
||||
// ...prevTasks,
|
||||
// [activeContainer]: updatedActiveContainer,
|
||||
// [overContainer]: updatedOverContainer,
|
||||
// };
|
||||
// });
|
||||
|
||||
// // Call API to update KDS with new container and index
|
||||
// try {
|
||||
// const newOverIndex = overIndex === -1 ? tasks[overContainer].length : overIndex; // Calculate the correct index
|
||||
// await updateKDS(activeTask, overContainer, newOverIndex);
|
||||
// } catch (error) {
|
||||
// console.error("Failed to update KDS stage:", error);
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
// setActiveTask(null);
|
||||
// };
|
||||
|
||||
const findTaskById = (id: string) => {
|
||||
for (const container in tasks) {
|
||||
const task = tasks[container].find((task) => task._id === id);
|
||||
if (task) return task;
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
const findContainer = (id: string) => {
|
||||
for (const container in tasks) {
|
||||
if (tasks[container].some((task) => task._id === id)) {
|
||||
return container;
|
||||
}
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
return (
|
||||
<DndContext onDragStart={handleDragStart} onDragEnd={handleDragEnd}>
|
||||
<div className="flex flex-row w-full bg-customGray-light space-x-2 py-5">
|
||||
{Object.keys(tasks ?? []).length > 0
|
||||
? Object.keys(tasks ?? []).map((containerId) => (
|
||||
<SortableContext key={containerId} items={tasks[containerId]}>
|
||||
<DroppableContainer
|
||||
id={containerId}
|
||||
tasks={tasks[containerId]}
|
||||
/>
|
||||
</SortableContext>
|
||||
))
|
||||
: // Skeleton loader when tasks are empty
|
||||
Array.from({ length: 5 }).map((_, idx) => (
|
||||
<div
|
||||
key={idx}
|
||||
className="container-skeleton animate-pulse bg-gray-100 border-2 border-gray-300 rounded-md p-4 min-h-[95vh] w-[300px] "
|
||||
>
|
||||
{/* Create few cards for each container */}
|
||||
<h3 className="font-bold text-center mb-4 text-gray-300">
|
||||
STAGE
|
||||
</h3>
|
||||
{Array.from({ length: 3 }).map((_, cardIdx) => (
|
||||
<div
|
||||
key={cardIdx}
|
||||
className="skeleton-card h-[100px] bg-white mb-2 animate-pulse rounded-[16px]"
|
||||
></div>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
|
||||
<DragOverlay
|
||||
dropAnimation={{
|
||||
duration: 300,
|
||||
easing: "ease-in-out",
|
||||
}}
|
||||
>
|
||||
{activeTask ? <TaskCard task={activeTask} /> : null}
|
||||
</DragOverlay>
|
||||
</div>
|
||||
</DndContext>
|
||||
);
|
||||
};
|
||||
|
||||
export default Main;
|
||||
|
|
@ -0,0 +1,134 @@
|
|||
// Define the structure of the order
|
||||
interface Order {
|
||||
id: number;
|
||||
access_url: string;
|
||||
access_token: string;
|
||||
access_warning: string;
|
||||
name: string;
|
||||
last_order_preparation_change: string;
|
||||
date_order: string;
|
||||
user_id: [number, string];
|
||||
amount_tax: number;
|
||||
amount_total: number;
|
||||
amount_paid: number;
|
||||
amount_return: number;
|
||||
margin: number;
|
||||
margin_percent: number;
|
||||
is_total_cost_computed: boolean;
|
||||
lines: number[];
|
||||
company_id: [number, string];
|
||||
country_code: string;
|
||||
pricelist_id: boolean;
|
||||
partner_id: boolean;
|
||||
sequence_number: number;
|
||||
session_id: [number, string];
|
||||
config_id: [number, string];
|
||||
currency_id: [number, string];
|
||||
currency_rate: number;
|
||||
state: string;
|
||||
account_move: boolean;
|
||||
picking_ids: any[];
|
||||
picking_count: number;
|
||||
failed_pickings: boolean;
|
||||
picking_type_id: [number, string];
|
||||
procurement_group_id: boolean;
|
||||
note: boolean;
|
||||
nb_print: number;
|
||||
pos_reference: string;
|
||||
sale_journal: [number, string];
|
||||
fiscal_position_id: boolean;
|
||||
payment_ids: any[];
|
||||
session_move_id: boolean;
|
||||
to_invoice: boolean;
|
||||
shipping_date: boolean;
|
||||
is_invoiced: boolean;
|
||||
is_tipped: boolean;
|
||||
tip_amount: number;
|
||||
refund_orders_count: number;
|
||||
is_refunded: boolean;
|
||||
refunded_order_ids: any[];
|
||||
has_refundable_lines: boolean;
|
||||
refunded_orders_count: number;
|
||||
ticket_code: string;
|
||||
tracking_number: string;
|
||||
display_name: string;
|
||||
create_uid: [number, string];
|
||||
create_date: string;
|
||||
write_uid: [number, string];
|
||||
write_date: string;
|
||||
online_payment_method_id: boolean;
|
||||
next_online_payment_amount: number;
|
||||
table_id: [number, string];
|
||||
customer_count: number;
|
||||
table_stand_number: boolean;
|
||||
take_away: boolean;
|
||||
use_self_order_online_payment: boolean;
|
||||
}
|
||||
|
||||
// Define the structure of the ordered products
|
||||
interface OrderedProduct {
|
||||
id: number;
|
||||
company_id: [number, string];
|
||||
name: string;
|
||||
skip_change: boolean;
|
||||
notice: boolean;
|
||||
product_id: [number, string];
|
||||
attribute_value_ids: any[];
|
||||
custom_attribute_value_ids: any[];
|
||||
price_unit: number;
|
||||
qty: number;
|
||||
price_subtotal: number;
|
||||
price_subtotal_incl: number;
|
||||
price_extra: number;
|
||||
margin: number;
|
||||
margin_percent: number;
|
||||
total_cost: number;
|
||||
is_total_cost_computed: boolean;
|
||||
discount: number;
|
||||
order_id: [number, string];
|
||||
tax_ids: any[];
|
||||
tax_ids_after_fiscal_position: any[];
|
||||
pack_lot_ids: any[];
|
||||
product_uom_id: [number, string];
|
||||
currency_id: [number, string];
|
||||
full_product_name: string;
|
||||
customer_note: boolean;
|
||||
refund_orderline_ids: any[];
|
||||
refunded_orderline_id: boolean;
|
||||
refunded_qty: number;
|
||||
uuid: boolean;
|
||||
combo_parent_id: boolean;
|
||||
combo_line_ids: any[];
|
||||
display_name: string;
|
||||
create_uid: [number, string];
|
||||
create_date: string;
|
||||
write_uid: [number, string];
|
||||
write_date: string;
|
||||
note: boolean;
|
||||
combo_id: boolean;
|
||||
}
|
||||
// Define the structure of an item in the KDS array
|
||||
interface KDSItem {
|
||||
ordered_prod_id: number;
|
||||
product_id: number;
|
||||
quantity: number;
|
||||
order_id: number;
|
||||
product_name: string;
|
||||
note: boolean;
|
||||
}
|
||||
|
||||
// Define the structure of the KDS array
|
||||
export interface KDS {
|
||||
order_id: number;
|
||||
order_name: string;
|
||||
order_date: string;
|
||||
cancelled: boolean;
|
||||
ref_ticket: string;
|
||||
take_away: boolean;
|
||||
seat_id: string;
|
||||
customer_count: number;
|
||||
ref_id: string;
|
||||
items: KDSItem[];
|
||||
stage: string;
|
||||
duration: number;
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
/// <reference types="vite/client" />
|
||||
|
|
@ -0,0 +1,78 @@
|
|||
/** @type {import('tailwindcss').Config} */
|
||||
export default {
|
||||
darkMode: ["class"],
|
||||
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
|
||||
theme: {
|
||||
extend: {
|
||||
keyframes: {
|
||||
shake: {
|
||||
"0%": { transform: "translateX(0)" },
|
||||
"25%": { transform: "translateX(-5px)" },
|
||||
"50%": { transform: "translateX(5px)" },
|
||||
"75%": { transform: "translateX(-5px)" },
|
||||
"100%": { transform: "translateX(0)" },
|
||||
},
|
||||
},
|
||||
animation: {
|
||||
shake: "shake .5s ease-in-out",
|
||||
},
|
||||
colors: {
|
||||
customGray: {
|
||||
light: "#ddd",
|
||||
DEFAULT: "#303030",
|
||||
},
|
||||
customYellow: {
|
||||
light: "#fff176",
|
||||
},
|
||||
customWhite: "#fff",
|
||||
customBlack: "#000",
|
||||
background: "hsl(var(--background))",
|
||||
foreground: "hsl(var(--foreground))",
|
||||
card: {
|
||||
DEFAULT: "hsl(var(--card))",
|
||||
foreground: "hsl(var(--card-foreground))",
|
||||
},
|
||||
popover: {
|
||||
DEFAULT: "hsl(var(--popover))",
|
||||
foreground: "hsl(var(--popover-foreground))",
|
||||
},
|
||||
primary: {
|
||||
DEFAULT: "hsl(var(--primary))",
|
||||
foreground: "hsl(var(--primary-foreground))",
|
||||
},
|
||||
secondary: {
|
||||
DEFAULT: "hsl(var(--secondary))",
|
||||
foreground: "hsl(var(--secondary-foreground))",
|
||||
},
|
||||
muted: {
|
||||
DEFAULT: "hsl(var(--muted))",
|
||||
foreground: "hsl(var(--muted-foreground))",
|
||||
},
|
||||
accent: {
|
||||
DEFAULT: "hsl(var(--accent))",
|
||||
foreground: "hsl(var(--accent-foreground))",
|
||||
},
|
||||
destructive: {
|
||||
DEFAULT: "hsl(var(--destructive))",
|
||||
foreground: "hsl(var(--destructive-foreground))",
|
||||
},
|
||||
border: "hsl(var(--border))",
|
||||
input: "hsl(var(--input))",
|
||||
ring: "hsl(var(--ring))",
|
||||
chart: {
|
||||
1: "hsl(var(--chart-1))",
|
||||
2: "hsl(var(--chart-2))",
|
||||
3: "hsl(var(--chart-3))",
|
||||
4: "hsl(var(--chart-4))",
|
||||
5: "hsl(var(--chart-5))",
|
||||
},
|
||||
},
|
||||
borderRadius: {
|
||||
lg: "var(--radius)",
|
||||
md: "calc(var(--radius) - 2px)",
|
||||
sm: "calc(var(--radius) - 4px)",
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [require("tailwindcss-animate")],
|
||||
};
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2020",
|
||||
"useDefineForClassFields": true,
|
||||
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||
"module": "ESNext",
|
||||
"skipLibCheck": true,
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@/*": [
|
||||
"./src/*"
|
||||
]
|
||||
},
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"isolatedModules": true,
|
||||
"moduleDetection": "force",
|
||||
"noEmit": true,
|
||||
"jsx": "react-jsx",
|
||||
|
||||
/* Linting */
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"noFallthroughCasesInSwitch": true
|
||||
},
|
||||
"include": ["src"]
|
||||
}
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
{
|
||||
"files": [],
|
||||
"references": [
|
||||
{
|
||||
"path": "./tsconfig.app.json"
|
||||
},
|
||||
{
|
||||
"path": "./tsconfig.node.json"
|
||||
}
|
||||
],
|
||||
"compilerOptions": {
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@/*": ["./src/*"]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2022",
|
||||
"lib": ["ES2023"],
|
||||
"module": "ESNext",
|
||||
"skipLibCheck": true,
|
||||
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"isolatedModules": true,
|
||||
"moduleDetection": "force",
|
||||
"noEmit": true,
|
||||
|
||||
/* Linting */
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"noFallthroughCasesInSwitch": true
|
||||
},
|
||||
"include": ["vite.config.ts"]
|
||||
}
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
import path from "path"
|
||||
import react from "@vitejs/plugin-react"
|
||||
import { defineConfig } from "vite"
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
resolve: {
|
||||
alias: {
|
||||
"@": path.resolve(__dirname, "./src"),
|
||||
},
|
||||
},
|
||||
})
|
||||
Loading…
Reference in New Issue