feat(lstv2 move): moved lstv2 into this app to keep them combined and easier to maintain
This commit is contained in:
24
lstV2/frontend/.gitignore
vendored
Normal file
24
lstV2/frontend/.gitignore
vendored
Normal file
@@ -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?
|
||||
50
lstV2/frontend/README.md
Normal file
50
lstV2/frontend/README.md
Normal file
@@ -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,
|
||||
},
|
||||
})
|
||||
```
|
||||
21
lstV2/frontend/components.json
Normal file
21
lstV2/frontend/components.json
Normal file
@@ -0,0 +1,21 @@
|
||||
{
|
||||
"$schema": "https://ui.shadcn.com/schema.json",
|
||||
"style": "new-york",
|
||||
"rsc": false,
|
||||
"tsx": true,
|
||||
"tailwind": {
|
||||
"config": "",
|
||||
"css": "src/style.css",
|
||||
"baseColor": "neutral",
|
||||
"cssVariables": true,
|
||||
"prefix": ""
|
||||
},
|
||||
"aliases": {
|
||||
"components": "@/components",
|
||||
"utils": "@/lib/utils",
|
||||
"ui": "@/components/ui",
|
||||
"lib": "@/lib",
|
||||
"hooks": "@/hooks"
|
||||
},
|
||||
"iconLibrary": "lucide"
|
||||
}
|
||||
26
lstV2/frontend/eslint.config.js
Normal file
26
lstV2/frontend/eslint.config.js
Normal file
@@ -0,0 +1,26 @@
|
||||
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}],
|
||||
"no-console": ["error", {allow: ["warn", "error"]}],
|
||||
},
|
||||
}
|
||||
);
|
||||
13
lstV2/frontend/index.html
Normal file
13
lstV2/frontend/index.html
Normal file
@@ -0,0 +1,13 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/lst.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Logistics Support Tool</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
7604
lstV2/frontend/package-lock.json
generated
Normal file
7604
lstV2/frontend/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
84
lstV2/frontend/package.json
Normal file
84
lstV2/frontend/package.json
Normal file
@@ -0,0 +1,84 @@
|
||||
{
|
||||
"name": "vitefix",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "rimraf dist && tsc -b && vite build",
|
||||
"lint": "eslint .",
|
||||
"preview": "vite preview",
|
||||
"shad": "npx shadcn@latest add ",
|
||||
"checkupdates": "npm-check-updates"
|
||||
},
|
||||
"dependencies": {
|
||||
"@hookform/resolvers": "^5.1.1",
|
||||
"@radix-ui/react-accordion": "^1.2.11",
|
||||
"@radix-ui/react-avatar": "^1.1.10",
|
||||
"@radix-ui/react-checkbox": "^1.3.2",
|
||||
"@radix-ui/react-collapsible": "^1.1.11",
|
||||
"@radix-ui/react-dialog": "^1.1.14",
|
||||
"@radix-ui/react-dropdown-menu": "^2.1.15",
|
||||
"@radix-ui/react-label": "^2.1.7",
|
||||
"@radix-ui/react-popover": "^1.1.14",
|
||||
"@radix-ui/react-scroll-area": "^1.2.9",
|
||||
"@radix-ui/react-select": "^2.2.5",
|
||||
"@radix-ui/react-separator": "^1.1.7",
|
||||
"@radix-ui/react-slot": "^1.2.3",
|
||||
"@radix-ui/react-switch": "^1.2.6",
|
||||
"@radix-ui/react-tabs": "^1.1.12",
|
||||
"@radix-ui/react-tooltip": "^1.2.7",
|
||||
"@react-pdf/renderer": "^4.3.0",
|
||||
"@tailwindcss/vite": "^4.1.10",
|
||||
"@tanstack/react-form": "^1.12.3",
|
||||
"@tanstack/react-query": "^5.81.2",
|
||||
"@tanstack/react-router": "^1.121.34",
|
||||
"@tanstack/react-table": "^8.21.3",
|
||||
"class-variance-authority": "^0.7.1",
|
||||
"clsx": "^2.1.1",
|
||||
"date-fns": "^4.1.0",
|
||||
"date-fns-tz": "^3.2.0",
|
||||
"dotenv": "^16.5.0",
|
||||
"hono": "^4.8.2",
|
||||
"js-cookie": "^3.0.5",
|
||||
"jsbarcode": "^3.12.1",
|
||||
"jsonwebtoken": "^9.0.2",
|
||||
"lucide-react": "^0.522.0",
|
||||
"marked": "^15.0.12",
|
||||
"next-themes": "^0.4.6",
|
||||
"npm-check-updates": "^18.0.1",
|
||||
"react": "^19.1.0",
|
||||
"react-barcode": "^1.6.1",
|
||||
"react-day-picker": "^9.7.0",
|
||||
"react-dom": "^19.1.0",
|
||||
"react-grid-layout": "^1.5.1",
|
||||
"react-hook-form": "^7.58.1",
|
||||
"react-resizable-panels": "^3.0.3",
|
||||
"recharts": "^2.15.2",
|
||||
"sonner": "^2.0.5",
|
||||
"tailwind-merge": "^3.3.1",
|
||||
"tailwindcss": "^4.1.10",
|
||||
"tailwindcss-animate": "^1.0.7",
|
||||
"zod": "^3.25.67",
|
||||
"zustand": "^5.0.5"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/js": "^9.29.0",
|
||||
"@tanstack/router-devtools": "^1.121.34",
|
||||
"@tanstack/router-plugin": "^1.121.34",
|
||||
"@types/react": "^19.1.8",
|
||||
"@types/react-dom": "^19.1.6",
|
||||
"@types/react-grid-layout": "^1.3.5",
|
||||
"@vitejs/plugin-react-swc": "^3.10.2",
|
||||
"eslint": "^9.29.0",
|
||||
"eslint-plugin-react-hooks": "^5.2.0",
|
||||
"eslint-plugin-react-refresh": "^0.4.20",
|
||||
"globals": "^16.2.0",
|
||||
"typescript": "~5.8.3",
|
||||
"typescript-eslint": "^8.35.0",
|
||||
"vite": "^6.3.5"
|
||||
},
|
||||
"overrides": {
|
||||
"react-is": "^19.0.0-rc-69d4b800-20241021"
|
||||
}
|
||||
}
|
||||
BIN
lstV2/frontend/public/imgs/card_ppo_dark.png
Normal file
BIN
lstV2/frontend/public/imgs/card_ppo_dark.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
BIN
lstV2/frontend/public/imgs/card_ppo_light.png
Normal file
BIN
lstV2/frontend/public/imgs/card_ppo_light.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
BIN
lstV2/frontend/public/imgs/dkLst.png
Normal file
BIN
lstV2/frontend/public/imgs/dkLst.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
BIN
lstV2/frontend/public/imgs/exampleforecast.png
Normal file
BIN
lstV2/frontend/public/imgs/exampleforecast.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
BIN
lstV2/frontend/public/imgs/ltLst.png
Normal file
BIN
lstV2/frontend/public/imgs/ltLst.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
BIN
lstV2/frontend/public/imgs/ordersInExample.png
Normal file
BIN
lstV2/frontend/public/imgs/ordersInExample.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
BIN
lstV2/frontend/public/imgs/web-app-manifest-192x192.png
Normal file
BIN
lstV2/frontend/public/imgs/web-app-manifest-192x192.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.9 KiB |
BIN
lstV2/frontend/public/imgs/web-app-manifest-512x512.png
Normal file
BIN
lstV2/frontend/public/imgs/web-app-manifest-512x512.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
BIN
lstV2/frontend/public/lst.ico
Normal file
BIN
lstV2/frontend/public/lst.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
1
lstV2/frontend/src/assets/react.svg
Normal file
1
lstV2/frontend/src/assets/react.svg
Normal file
@@ -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,8 @@
|
||||
export default function DataMartStats() {
|
||||
return (
|
||||
<div>
|
||||
The stats for all the data mart querys out there and whos and when
|
||||
they are last used to understand if we want to keep them or not
|
||||
</div>
|
||||
);
|
||||
}
|
||||
146
lstV2/frontend/src/components/admin/modules/ModuleForm.tsx
Normal file
146
lstV2/frontend/src/components/admin/modules/ModuleForm.tsx
Normal file
@@ -0,0 +1,146 @@
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from "@/components/ui/dialog";
|
||||
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { toast } from "sonner";
|
||||
import { useState } from "react";
|
||||
//import { z } from "zod";
|
||||
//import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { useSessionStore } from "@/lib/store/sessionStore";
|
||||
import axios from "axios";
|
||||
import { useForm } from "@tanstack/react-form";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
|
||||
import { getModules } from "@/utils/querys/admin/modules";
|
||||
|
||||
// const FormSchema = z.object({
|
||||
// subModule: z.boolean(),
|
||||
// });
|
||||
export function ChangeModule({ module }: { module: any }) {
|
||||
const { token } = useSessionStore();
|
||||
const { refetch } = useQuery(getModules(token ?? ""));
|
||||
|
||||
const [open, setOpen] = useState(false);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const form = useForm({
|
||||
defaultValues: {
|
||||
active: module.active,
|
||||
},
|
||||
onSubmit: async ({ value }) => {
|
||||
//console.log(value);
|
||||
try {
|
||||
const result = await axios.patch(
|
||||
`/api/server/modules/${module.module_id}`,
|
||||
{ active: value.active },
|
||||
{
|
||||
headers: { Authorization: `Bearer ${token}` },
|
||||
}
|
||||
);
|
||||
|
||||
if (result.data.success) {
|
||||
setOpen(!open);
|
||||
setSaving(false);
|
||||
refetch();
|
||||
toast.success(result.data.message);
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<Dialog
|
||||
open={open}
|
||||
onOpenChange={(isOpen) => {
|
||||
if (!open) {
|
||||
form.reset();
|
||||
}
|
||||
setOpen(isOpen);
|
||||
// toast.message("Model was something", {
|
||||
// description: isOpen ? "Modal is open" : "Modal is closed",
|
||||
// });
|
||||
}}
|
||||
>
|
||||
<DialogTrigger asChild>
|
||||
<Button variant="outline">Edit</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="sm:max-w-[425px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>{module.name}</DialogTitle>
|
||||
<DialogDescription>
|
||||
Set to active or deactivated.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<form
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
<>
|
||||
<form.Field
|
||||
name="active"
|
||||
// validators={{
|
||||
// // We can choose between form-wide and field-specific validators
|
||||
// onChange: ({ value }) =>
|
||||
// value.length > 3
|
||||
// ? undefined
|
||||
// : "Username must be longer than 3 letters",
|
||||
// }}
|
||||
children={(field) => {
|
||||
return (
|
||||
<div className="m-2 min-w-48 max-w-96 p-2 flex flex-row">
|
||||
<Label htmlFor="active">
|
||||
Active
|
||||
</Label>
|
||||
<Checkbox
|
||||
className="ml-2"
|
||||
name={field.name}
|
||||
onBlur={field.handleBlur}
|
||||
checked={field.state.value}
|
||||
onCheckedChange={(e) =>
|
||||
field.handleChange(e)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<div className="flex justify-end mt-2">
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={saving}
|
||||
onClick={form.handleSubmit}
|
||||
>
|
||||
{saving ? (
|
||||
<>
|
||||
<span>Saving....</span>
|
||||
</>
|
||||
) : (
|
||||
<span>Save setting</span>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</>
|
||||
);
|
||||
}
|
||||
116
lstV2/frontend/src/components/admin/modules/ModulePage.tsx
Normal file
116
lstV2/frontend/src/components/admin/modules/ModulePage.tsx
Normal file
@@ -0,0 +1,116 @@
|
||||
import { LstCard } from "@/components/extendedUI/LstCard";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
import { useSessionStore } from "@/lib/store/sessionStore";
|
||||
import { useModuleStore } from "@/lib/store/useModuleStore";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { useRouter } from "@tanstack/react-router";
|
||||
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { getModules } from "@/utils/querys/admin/modules";
|
||||
import { ChangeModule } from "./ModuleForm";
|
||||
|
||||
export type Settings = {
|
||||
settings_id?: string;
|
||||
name?: string;
|
||||
value?: string;
|
||||
description?: string;
|
||||
};
|
||||
|
||||
export default function ModulesPage() {
|
||||
const { user, token } = useSessionStore();
|
||||
const { modules } = useModuleStore();
|
||||
const router = useRouter();
|
||||
|
||||
const adminModule = modules.filter((n) => n.name === "admin");
|
||||
const userLevel =
|
||||
user?.roles.filter((r) => r.module_id === adminModule[0].module_id) ||
|
||||
[];
|
||||
|
||||
if (!adminModule[0].roles.includes(userLevel[0]?.role)) {
|
||||
router.navigate({ to: "/" });
|
||||
}
|
||||
|
||||
const { data, isError, error, isLoading } = useQuery(
|
||||
getModules(token ?? "")
|
||||
);
|
||||
|
||||
// if (isLoading) {
|
||||
// return <div>Loading.....</div>;
|
||||
// }
|
||||
if (isError) {
|
||||
return <div>{JSON.stringify(error)}</div>;
|
||||
}
|
||||
|
||||
return (
|
||||
<LstCard className="m-2 flex place-content-center w-fit">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Name</TableHead>
|
||||
<TableHead>Description</TableHead>
|
||||
<TableHead>Module In</TableHead>
|
||||
<TableHead>Roles</TableHead>
|
||||
<TableHead>Active</TableHead>
|
||||
<TableHead>Edit</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
{isLoading ? (
|
||||
<>
|
||||
<TableBody>
|
||||
{Array(10)
|
||||
.fill(0)
|
||||
.map((_, i) => (
|
||||
<TableRow key={i}>
|
||||
<TableCell className="font-medium">
|
||||
<Skeleton className="h-4" />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton className="h-4" />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton className="h-4" />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton className="h-4" />
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</>
|
||||
) : (
|
||||
<TableBody>
|
||||
{data?.map((i: any) => (
|
||||
<TableRow key={i.submodule_id}>
|
||||
<TableCell className="font-medium">
|
||||
{i.name}
|
||||
</TableCell>
|
||||
<TableCell className="font-medium">
|
||||
{i.description}
|
||||
</TableCell>
|
||||
<TableCell className="font-medium">
|
||||
{i.moduleName}
|
||||
</TableCell>
|
||||
<TableCell className="font-medium">
|
||||
{JSON.stringify(i.roles)}
|
||||
</TableCell>
|
||||
<TableCell className="font-medium">
|
||||
{i.active ? "Yes" : "No"}
|
||||
</TableCell>
|
||||
<TableCell className="font-medium">
|
||||
<ChangeModule module={i} />
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
)}
|
||||
</Table>
|
||||
</LstCard>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
import { getnotifications } from "@/utils/querys/admin/notifications";
|
||||
import { notifyColumns } from "@/utils/tableData/notifications/notifyColumns";
|
||||
import { NotifyTable } from "@/utils/tableData/notifications/notifyData";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
|
||||
export default function NotificationMGT() {
|
||||
const { data, isError, isLoading } = useQuery(getnotifications());
|
||||
|
||||
if (isLoading) return <div>Loading adjustmnet data...</div>;
|
||||
if (isError) {
|
||||
return (
|
||||
<div>
|
||||
<p>There was an error getting the adjustments.</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<div>
|
||||
<NotifyTable columns={notifyColumns} data={data} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
225
lstV2/frontend/src/components/admin/prodUser/ProdUserCard.tsx
Normal file
225
lstV2/frontend/src/components/admin/prodUser/ProdUserCard.tsx
Normal file
@@ -0,0 +1,225 @@
|
||||
import { LstCard } from "@/components/extendedUI/LstCard";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { CardHeader } from "@/components/ui/card";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectGroup,
|
||||
SelectItem,
|
||||
SelectLabel,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import { useSessionStore } from "@/lib/store/sessionStore";
|
||||
import { getProdPerms } from "@/utils/querys/prodUser/getProdPerms";
|
||||
|
||||
import { useForm } from "@tanstack/react-form";
|
||||
import { useState } from "react";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import axios from "axios";
|
||||
import { toast } from "sonner";
|
||||
|
||||
export default function ProdUserCard() {
|
||||
const { token } = useSessionStore();
|
||||
const { data, isError, isLoading } = useQuery(getProdPerms(token ?? ""));
|
||||
const [creating, setCreating] = useState(false);
|
||||
|
||||
const form = useForm({
|
||||
defaultValues: {
|
||||
username: "",
|
||||
remark: "",
|
||||
pcname: "",
|
||||
role: "",
|
||||
},
|
||||
|
||||
onSubmit: async ({ value }) => {
|
||||
setCreating(true);
|
||||
//console.log(value);
|
||||
|
||||
if (value.role === "") {
|
||||
toast.error(
|
||||
"Role is missing please select a role and try again."
|
||||
);
|
||||
}
|
||||
|
||||
try {
|
||||
const res = await axios.post("/api/produser/produser", value, {
|
||||
headers: { Authorization: `Bearer ${token}` },
|
||||
});
|
||||
|
||||
//console.log(res.data);
|
||||
|
||||
if (!res.data.success) {
|
||||
const errMSG: string = res.data.data.errors
|
||||
? res.data.data?.errors[0].message
|
||||
: res.data.data;
|
||||
|
||||
toast.error(`${errMSG}`);
|
||||
setCreating(false);
|
||||
}
|
||||
|
||||
if (res.data.success) {
|
||||
toast.success(res.data.message);
|
||||
form.reset();
|
||||
setCreating(false);
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
setCreating(false);
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
if (isError)
|
||||
return (
|
||||
<>
|
||||
<p>There was an error loading the prod Perms</p>
|
||||
</>
|
||||
);
|
||||
if (isLoading)
|
||||
return (
|
||||
<>
|
||||
<p>Loading.....</p>
|
||||
</>
|
||||
);
|
||||
return (
|
||||
<div className="m-4">
|
||||
<LstCard>
|
||||
<CardHeader>
|
||||
<p>Alpla Prod user create/update</p>
|
||||
</CardHeader>
|
||||
<div className="m-2">
|
||||
<p>
|
||||
Please enter the windows username. <br /> To check the
|
||||
user head here{" "}
|
||||
<a
|
||||
target="_blank"
|
||||
href="https://alplaservicedesk.service-now.com/sp?id=sc_cat_item&sys_id=0c266831c32f41107cba16c4e40131c0&sysparm_category=564428bdc3eb41107cba16c4e40131f2"
|
||||
>
|
||||
<u>Active Directory</u>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
<form
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
}}
|
||||
>
|
||||
{/* Windows username */}
|
||||
<form.Field
|
||||
name="username"
|
||||
validators={{
|
||||
// We can choose between form-wide and field-specific validators
|
||||
onChange: ({ value }) =>
|
||||
value.length > 3
|
||||
? undefined
|
||||
: "Username must be longer than 3 letters",
|
||||
}}
|
||||
children={(field) => {
|
||||
return (
|
||||
<div className="m-2 min-w-48 max-w-96 p-2">
|
||||
<Label htmlFor="username">Username</Label>
|
||||
<Input
|
||||
name={field.name}
|
||||
value={field.state.value}
|
||||
onBlur={field.handleBlur}
|
||||
//type="number"
|
||||
onChange={(e) =>
|
||||
field.handleChange(e.target.value)
|
||||
}
|
||||
/>
|
||||
{field.state.meta.errors.length ? (
|
||||
<em>
|
||||
{field.state.meta.errors.join(",")}
|
||||
</em>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
{/* Remark for the user */}
|
||||
<form.Field
|
||||
name="remark"
|
||||
validators={{
|
||||
// We can choose between form-wide and field-specific validators
|
||||
onChange: ({ value }) =>
|
||||
value.length > 3
|
||||
? undefined
|
||||
: "The remark should be longer than 3 letters",
|
||||
}}
|
||||
children={(field) => {
|
||||
return (
|
||||
<div className="m-2 min-w-48 max-w-96 p-2">
|
||||
<Label htmlFor="remark">Remark</Label>
|
||||
<Input
|
||||
name={field.name}
|
||||
value={field.state.value}
|
||||
onBlur={field.handleBlur}
|
||||
//type="number"
|
||||
onChange={(e) =>
|
||||
field.handleChange(e.target.value)
|
||||
}
|
||||
/>
|
||||
{field.state.meta.errors.length ? (
|
||||
<em>
|
||||
{field.state.meta.errors.join(",")}
|
||||
</em>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
{/* Select the type of role we will be granting/updating */}
|
||||
<form.Field
|
||||
name="role"
|
||||
//listeners={{onChange: ({value})=>{}}}
|
||||
children={(field) => {
|
||||
return (
|
||||
<div className="m-2 min-w-48 max-w-96 p-2">
|
||||
<Label htmlFor={field.name}>
|
||||
Select role
|
||||
</Label>
|
||||
<Select
|
||||
value={field.state.value}
|
||||
onValueChange={field.handleChange}
|
||||
>
|
||||
<SelectTrigger className="w-[180px]">
|
||||
<SelectValue
|
||||
id={field.name}
|
||||
placeholder="Select Role"
|
||||
/>
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectGroup>
|
||||
<SelectLabel>Roles</SelectLabel>
|
||||
|
||||
{data.map((i: any) => {
|
||||
return (
|
||||
<SelectItem
|
||||
key={i.prodPerm_id}
|
||||
value={i.name}
|
||||
>
|
||||
{i.name}
|
||||
</SelectItem>
|
||||
);
|
||||
})}
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<div className="flex justify-end mr-3">
|
||||
<Button onClick={form.handleSubmit} disabled={creating}>
|
||||
Submit
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</LstCard>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,75 @@
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipProvider,
|
||||
TooltipTrigger,
|
||||
} from "@/components/ui/tooltip";
|
||||
import axios from "axios";
|
||||
import { RotateCcw } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import { toast } from "sonner";
|
||||
|
||||
export default function RestartServer(data: any) {
|
||||
const token = localStorage.getItem("auth_token");
|
||||
const [disable, setDisable] = useState(false);
|
||||
|
||||
const handleRestartServer = async (plant: string) => {
|
||||
toast.success(`${plant} is being restarted please wait.`);
|
||||
setDisable(true);
|
||||
let data: any = {
|
||||
processType: "restart",
|
||||
plantToken: plant,
|
||||
};
|
||||
|
||||
const url: string = window.location.host.split(":")[0];
|
||||
if (url === "localhost" || url === "usmcd1vms036") {
|
||||
data = { ...data, remote: "true" };
|
||||
}
|
||||
|
||||
//console.log(data);
|
||||
|
||||
try {
|
||||
const res = await axios.post("/api/server/serviceprocess", data, {
|
||||
headers: { Authorization: `Bearer ${token}` },
|
||||
});
|
||||
|
||||
//console.log(res);
|
||||
if (res.status === 200) {
|
||||
setTimeout(() => {
|
||||
toast.success(`${plant} Has beed restarted.`);
|
||||
setDisable(false);
|
||||
}, 3000);
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button
|
||||
variant={"outline"}
|
||||
size={"icon"}
|
||||
disabled={disable}
|
||||
onClick={() =>
|
||||
handleRestartServer(data.plantData.plantToken)
|
||||
}
|
||||
>
|
||||
<RotateCcw />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>
|
||||
Restart Server, note you might see the screen error
|
||||
out for a second
|
||||
</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
218
lstV2/frontend/src/components/admin/servers/ServerPage.tsx
Normal file
218
lstV2/frontend/src/components/admin/servers/ServerPage.tsx
Normal file
@@ -0,0 +1,218 @@
|
||||
import { LstCard } from "@/components/extendedUI/LstCard";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
import { useSessionStore } from "@/lib/store/sessionStore";
|
||||
import { useModuleStore } from "@/lib/store/useModuleStore";
|
||||
import { getServers } from "@/utils/querys/servers";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { useRouter } from "@tanstack/react-router";
|
||||
import { format } from "date-fns";
|
||||
import UpdateServer from "./UpdateServer";
|
||||
import { adminUrlCheck } from "@/utils/adminUrlCheck";
|
||||
import RestartServer from "./RestartServer";
|
||||
import StopServer from "./StopServer";
|
||||
import StartServer from "./StartServer";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { getSettings } from "@/utils/querys/settings";
|
||||
import { toast } from "sonner";
|
||||
import axios from "axios";
|
||||
import { useEffect } from "react";
|
||||
//import { useState } from "react";
|
||||
|
||||
export type Servers = {
|
||||
server_id?: string;
|
||||
sName?: string;
|
||||
serverDNS?: string;
|
||||
plantToken?: string;
|
||||
idAddress: string;
|
||||
lastUpdated: string;
|
||||
isUpgrading: boolean;
|
||||
lstServerPort: string;
|
||||
};
|
||||
|
||||
export default function ServerPage() {
|
||||
const { user, token } = useSessionStore();
|
||||
const { modules } = useModuleStore();
|
||||
//const [upgrading, setUpgrading] = useState(false);
|
||||
const router = useRouter();
|
||||
|
||||
const { data, isError, error, isLoading } = useQuery(
|
||||
getServers(token ?? "")
|
||||
);
|
||||
|
||||
// const adminModule = modules.filter((n) => n.name === "admin");
|
||||
// const userLevel =
|
||||
// user?.roles?.filter((r) => r.module_id === adminModule[0].module_id) ||
|
||||
// [];
|
||||
|
||||
// if (!adminModule[0]?.roles?.includes(userLevel[0]?.role)) {
|
||||
// console.log("Something failed");
|
||||
// //router.navigate({ to: "/" });
|
||||
// }
|
||||
|
||||
useEffect(() => {
|
||||
if (!user || modules.length === 0) return;
|
||||
|
||||
const adminModule = modules.find((n) => n.name === "admin");
|
||||
if (!adminModule) {
|
||||
console.log("no module loaded");
|
||||
//router.navigate({ to: "/" });
|
||||
return;
|
||||
}
|
||||
|
||||
const userLevel =
|
||||
user?.roles?.filter((r) => r.module_id === adminModule.module_id) ||
|
||||
[];
|
||||
|
||||
if (!adminModule.roles?.includes(userLevel[0]?.role)) {
|
||||
console.log("Something failed");
|
||||
//router.navigate({ to: "/" });
|
||||
}
|
||||
}, [modules, user, router]);
|
||||
|
||||
if (isError) {
|
||||
return <div>{JSON.stringify(error)}</div>;
|
||||
}
|
||||
const { data: set } = useQuery(getSettings(token ?? ""));
|
||||
const upgrade = async () => {
|
||||
let devDir = set.filter((n: any) => n.name === "devDir");
|
||||
toast.success("All Servers was just triggered.");
|
||||
|
||||
try {
|
||||
const result = await axios.post(
|
||||
`/api/server/update/localhost`,
|
||||
{ devDir: devDir[0].value, all: true },
|
||||
{
|
||||
headers: { Authorization: `Bearer ${token}` },
|
||||
}
|
||||
);
|
||||
|
||||
if (result.data.success) {
|
||||
toast.success(result.data.message);
|
||||
}
|
||||
|
||||
if (!result.data.success) {
|
||||
toast.success(result.data.message);
|
||||
}
|
||||
} catch (error: any) {
|
||||
toast.error(
|
||||
`There was an error updating the server: ${error.data.message}`
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
//console.log(data);
|
||||
return (
|
||||
<LstCard className="m-2 flex place-content-center w-dvh">
|
||||
<div className="flex justify-end m-2">
|
||||
<Button
|
||||
onClick={upgrade}
|
||||
disabled={data?.some((d: any) => d.isUpgrading)}
|
||||
>
|
||||
Update All Servers
|
||||
</Button>
|
||||
</div>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Name</TableHead>
|
||||
<TableHead>Server</TableHead>
|
||||
<TableHead>PlantToken</TableHead>
|
||||
<TableHead>IP Address</TableHead>
|
||||
<TableHead>Date Last updated</TableHead>
|
||||
<TableHead>Update Server</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
{isLoading ? (
|
||||
<>
|
||||
<TableBody>
|
||||
{Array(10)
|
||||
.fill(0)
|
||||
.map((_, i) => (
|
||||
<TableRow key={i}>
|
||||
<TableCell className="font-medium">
|
||||
<Skeleton className="h-4" />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton className="h-4" />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton className="h-4" />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton className="h-4" />
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</>
|
||||
) : (
|
||||
<TableBody>
|
||||
{data?.map((server: Servers) => {
|
||||
const strippedDate = server.lastUpdated.replace(
|
||||
"Z",
|
||||
""
|
||||
); // Remove Z
|
||||
const formattedDate = format(
|
||||
strippedDate,
|
||||
"MM/dd/yyyy hh:mm a"
|
||||
);
|
||||
return (
|
||||
<TableRow key={server.server_id}>
|
||||
<TableCell className="font-medium">
|
||||
<a
|
||||
href={`http://${server.serverDNS}:${server.lstServerPort}`}
|
||||
target={"_blank"}
|
||||
>
|
||||
<span>{server.sName}</span>
|
||||
</a>
|
||||
</TableCell>
|
||||
<TableCell className="font-medium">
|
||||
{server.serverDNS}
|
||||
</TableCell>
|
||||
<TableCell className="font-medium">
|
||||
{server.plantToken}
|
||||
</TableCell>
|
||||
<TableCell className="font-medium">
|
||||
{server.idAddress}
|
||||
</TableCell>
|
||||
<TableCell className="font-medium">
|
||||
{formattedDate}
|
||||
</TableCell>
|
||||
<TableCell className="font-medium">
|
||||
{adminUrlCheck() && (
|
||||
<div className="flex flex-row">
|
||||
<UpdateServer
|
||||
server={server}
|
||||
token={token as string}
|
||||
/>
|
||||
|
||||
<StartServer
|
||||
plantData={server}
|
||||
/>
|
||||
<StopServer
|
||||
plantData={server}
|
||||
/>
|
||||
|
||||
<RestartServer
|
||||
plantData={server}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
})}
|
||||
</TableBody>
|
||||
)}
|
||||
</Table>
|
||||
</LstCard>
|
||||
);
|
||||
}
|
||||
74
lstV2/frontend/src/components/admin/servers/StartServer.tsx
Normal file
74
lstV2/frontend/src/components/admin/servers/StartServer.tsx
Normal file
@@ -0,0 +1,74 @@
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipProvider,
|
||||
TooltipTrigger,
|
||||
} from "@/components/ui/tooltip";
|
||||
import axios from "axios";
|
||||
import { Play } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import { toast } from "sonner";
|
||||
|
||||
export default function StartServer(data: any) {
|
||||
const token = localStorage.getItem("auth_token");
|
||||
const [disable, setDisable] = useState(false);
|
||||
|
||||
const handleStartServer = async (plant: string) => {
|
||||
toast.success(`${plant} is being started please wait.`);
|
||||
setDisable(true);
|
||||
let data: any = {
|
||||
processType: "start",
|
||||
plantToken: plant,
|
||||
};
|
||||
|
||||
const url: string = window.location.host.split(":")[0];
|
||||
if (url === "localhost" || url === "usmcd1vms036") {
|
||||
data = { ...data, remote: "true" };
|
||||
}
|
||||
|
||||
//console.log(data);
|
||||
|
||||
try {
|
||||
const res = await axios.post("/api/server/serviceprocess", data, {
|
||||
headers: { Authorization: `Bearer ${token}` },
|
||||
});
|
||||
|
||||
//console.log(res);
|
||||
if (res.status === 200) {
|
||||
setTimeout(() => {
|
||||
toast.success(`${plant} Has beed started.`);
|
||||
setDisable(false);
|
||||
}, 3000);
|
||||
}
|
||||
} catch (error: any) {
|
||||
if (error.status === 429) {
|
||||
toast.error(error.response.data.message);
|
||||
setDisable(false);
|
||||
}
|
||||
}
|
||||
};
|
||||
return (
|
||||
<div>
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button
|
||||
variant={"outline"}
|
||||
size={"icon"}
|
||||
disabled={disable}
|
||||
onClick={() =>
|
||||
handleStartServer(data.plantData.plantToken)
|
||||
}
|
||||
>
|
||||
<Play />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>Start Server</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
71
lstV2/frontend/src/components/admin/servers/StopServer.tsx
Normal file
71
lstV2/frontend/src/components/admin/servers/StopServer.tsx
Normal file
@@ -0,0 +1,71 @@
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipProvider,
|
||||
TooltipTrigger,
|
||||
} from "@/components/ui/tooltip";
|
||||
import axios from "axios";
|
||||
import { Octagon } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import { toast } from "sonner";
|
||||
|
||||
export default function StopServer(data: any) {
|
||||
const token = localStorage.getItem("auth_token");
|
||||
const [disable, setDisable] = useState(false);
|
||||
|
||||
const handleStopServer = async (plant: string) => {
|
||||
toast.success(`${plant} is being stopped please wait.`);
|
||||
setDisable(true);
|
||||
let data: any = {
|
||||
processType: "stop",
|
||||
plantToken: plant,
|
||||
};
|
||||
|
||||
const url: string = window.location.host.split(":")[0];
|
||||
if (url === "localhost" || url === "usmcd1vms036") {
|
||||
data = { ...data, remote: "true" };
|
||||
}
|
||||
|
||||
//console.log(data);
|
||||
|
||||
try {
|
||||
const res = await axios.post("/api/server/serviceprocess", data, {
|
||||
headers: { Authorization: `Bearer ${token}` },
|
||||
});
|
||||
|
||||
//console.log(res);
|
||||
if (res.status === 200) {
|
||||
setTimeout(() => {
|
||||
toast.success(`${plant} Has beed stopped.`);
|
||||
setDisable(false);
|
||||
}, 3000);
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
};
|
||||
return (
|
||||
<div>
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button
|
||||
variant="destructive"
|
||||
size={"icon"}
|
||||
disabled={disable}
|
||||
onClick={() =>
|
||||
handleStopServer(data.plantData.plantToken)
|
||||
}
|
||||
>
|
||||
<Octagon />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>Stop Server</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
69
lstV2/frontend/src/components/admin/servers/UpdateServer.tsx
Normal file
69
lstV2/frontend/src/components/admin/servers/UpdateServer.tsx
Normal file
@@ -0,0 +1,69 @@
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { CircleFadingArrowUp } from "lucide-react";
|
||||
import { toast } from "sonner";
|
||||
import { Servers } from "./ServerPage";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { getSettings } from "@/utils/querys/settings";
|
||||
import axios from "axios";
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipProvider,
|
||||
TooltipTrigger,
|
||||
} from "@/components/ui/tooltip";
|
||||
|
||||
export default function UpdateServer({
|
||||
server,
|
||||
token,
|
||||
}: {
|
||||
server: Servers;
|
||||
token: string;
|
||||
}) {
|
||||
const { data } = useQuery(getSettings(token ?? ""));
|
||||
const upgrade = async () => {
|
||||
let devDir = data.filter((n: any) => n.name === "devDir");
|
||||
toast.success("Server being upgraded in the background please wait.");
|
||||
try {
|
||||
const result = await axios.post(
|
||||
`/api/server/update/${server.plantToken}`,
|
||||
{ devDir: devDir[0].value },
|
||||
{
|
||||
headers: { Authorization: `Bearer ${token}` },
|
||||
}
|
||||
);
|
||||
|
||||
if (result.data.success) {
|
||||
toast.success(result.data.message);
|
||||
}
|
||||
|
||||
if (!result.data.success) {
|
||||
toast.success(result.data.message);
|
||||
}
|
||||
} catch (error: any) {
|
||||
toast.error(
|
||||
`There was an error updating the server: ${error.data.message}`
|
||||
);
|
||||
}
|
||||
};
|
||||
return (
|
||||
<div>
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button
|
||||
variant={`${server.isUpgrading ? "ghost" : "outline"}`}
|
||||
size={"icon"}
|
||||
onClick={upgrade}
|
||||
disabled={server.isUpgrading}
|
||||
>
|
||||
<CircleFadingArrowUp />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>Update {server.sName}</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
121
lstV2/frontend/src/components/admin/settings/SettingForm.tsx
Normal file
121
lstV2/frontend/src/components/admin/settings/SettingForm.tsx
Normal file
@@ -0,0 +1,121 @@
|
||||
import {Button} from "@/components/ui/button";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from "@/components/ui/dialog";
|
||||
import {Input} from "@/components/ui/input";
|
||||
import {Label} from "@/components/ui/label";
|
||||
import {Settings} from "./SettingsPage";
|
||||
import {toast} from "sonner";
|
||||
import {useState} from "react";
|
||||
import {useForm} from "react-hook-form";
|
||||
import {z} from "zod";
|
||||
import {zodResolver} from "@hookform/resolvers/zod";
|
||||
import {useQuery} from "@tanstack/react-query";
|
||||
import {getSettings} from "@/utils/querys/settings";
|
||||
import {useSessionStore} from "@/lib/store/sessionStore";
|
||||
import axios from "axios";
|
||||
|
||||
const FormSchema = z.object({
|
||||
value: z.string().min(1, "You must enter a value greater than 0"),
|
||||
});
|
||||
export function ChangeSetting({setting}: {setting: Settings}) {
|
||||
const {token} = useSessionStore();
|
||||
const {refetch} = useQuery(getSettings(token ?? ""));
|
||||
|
||||
const [open, setOpen] = useState(false);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
reset,
|
||||
formState: {errors},
|
||||
} = useForm<z.infer<typeof FormSchema>>({
|
||||
resolver: zodResolver(FormSchema),
|
||||
defaultValues: {
|
||||
value: setting.value || "",
|
||||
},
|
||||
});
|
||||
|
||||
const onSubmit = async (data: z.infer<typeof FormSchema>) => {
|
||||
setSaving(!saving);
|
||||
const update = {...data, name: setting.name};
|
||||
// console.log(update);
|
||||
try {
|
||||
const result = await axios.patch("/api/server/settings", update, {
|
||||
headers: {Authorization: `Bearer ${token}`},
|
||||
});
|
||||
|
||||
if (result.data.success) {
|
||||
setOpen(!open);
|
||||
setSaving(false);
|
||||
refetch();
|
||||
toast.success(result.data.message);
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<Dialog
|
||||
open={open}
|
||||
onOpenChange={(isOpen) => {
|
||||
if (!open) {
|
||||
reset();
|
||||
}
|
||||
setOpen(isOpen);
|
||||
// toast.message("Model was something", {
|
||||
// description: isOpen ? "Modal is open" : "Modal is closed",
|
||||
// });
|
||||
}}
|
||||
>
|
||||
<DialogTrigger asChild>
|
||||
<Button variant="outline">Edit</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="sm:max-w-[425px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>{setting.name}</DialogTitle>
|
||||
<DialogDescription>
|
||||
Update the setting and press save to complete the changes.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<div>
|
||||
<>
|
||||
<Label htmlFor={"value"} className="m-1">
|
||||
Value
|
||||
</Label>
|
||||
<Input
|
||||
{...register("value")}
|
||||
className={errors.value ? "border-red-500" : ""}
|
||||
aria-invalid={!!errors.value}
|
||||
/>
|
||||
{errors.value && <p className="text-red-500 text-sm mt-1">{errors.value.message}</p>}
|
||||
</>
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<div className="flex justify-end mt-2">
|
||||
<Button type="submit" disabled={saving}>
|
||||
{saving ? (
|
||||
<>
|
||||
<span>Saving....</span>
|
||||
</>
|
||||
) : (
|
||||
<span>Save setting</span>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</>
|
||||
);
|
||||
}
|
||||
119
lstV2/frontend/src/components/admin/settings/SettingsPage.tsx
Normal file
119
lstV2/frontend/src/components/admin/settings/SettingsPage.tsx
Normal file
@@ -0,0 +1,119 @@
|
||||
import { LstCard } from "@/components/extendedUI/LstCard";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
import { useSessionStore } from "@/lib/store/sessionStore";
|
||||
import { useModuleStore } from "@/lib/store/useModuleStore";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { useRouter } from "@tanstack/react-router";
|
||||
import { ChangeSetting } from "./SettingForm";
|
||||
import { getSettings } from "@/utils/querys/settings";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { useEffect } from "react";
|
||||
|
||||
export type Settings = {
|
||||
settings_id?: string;
|
||||
name?: string;
|
||||
value?: string;
|
||||
description?: string;
|
||||
};
|
||||
|
||||
export default function SettingsPage() {
|
||||
const { user, token } = useSessionStore();
|
||||
const { modules } = useModuleStore();
|
||||
const router = useRouter();
|
||||
|
||||
useEffect(() => {
|
||||
if (!user || modules.length === 0) return;
|
||||
|
||||
const adminModule = modules.find((n) => n.name === "admin");
|
||||
if (!adminModule) {
|
||||
console.log("no module loaded");
|
||||
//router.navigate({ to: "/" });
|
||||
return;
|
||||
}
|
||||
|
||||
const userLevel =
|
||||
user?.roles?.filter((r) => r.module_id === adminModule.module_id) ||
|
||||
[];
|
||||
|
||||
if (!adminModule.roles?.includes(userLevel[0]?.role)) {
|
||||
console.log("Something failed");
|
||||
//router.navigate({ to: "/" });
|
||||
}
|
||||
}, [modules, user, router]);
|
||||
|
||||
const { data, isError, error, isLoading } = useQuery(
|
||||
getSettings(token ?? "")
|
||||
);
|
||||
|
||||
// if (isLoading) {
|
||||
// return <div>Loading.....</div>;
|
||||
// }
|
||||
if (isError) {
|
||||
return <div>{JSON.stringify(error)}</div>;
|
||||
}
|
||||
|
||||
return (
|
||||
<LstCard className="m-2 flex place-content-center w-fit">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Name</TableHead>
|
||||
<TableHead>Value</TableHead>
|
||||
<TableHead>Description</TableHead>
|
||||
<TableHead>Change</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
{isLoading ? (
|
||||
<>
|
||||
<TableBody>
|
||||
{Array(10)
|
||||
.fill(0)
|
||||
.map((_, i) => (
|
||||
<TableRow key={i}>
|
||||
<TableCell className="font-medium">
|
||||
<Skeleton className="h-4" />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton className="h-4" />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton className="h-4" />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton className="h-4" />
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</>
|
||||
) : (
|
||||
<TableBody>
|
||||
{data?.map((setting: Settings) => (
|
||||
<TableRow key={setting.settings_id}>
|
||||
<TableCell className="font-medium">
|
||||
{setting.name}
|
||||
</TableCell>
|
||||
<TableCell className="font-medium">
|
||||
{setting.value}
|
||||
</TableCell>
|
||||
<TableCell className="font-medium">
|
||||
{setting.description}
|
||||
</TableCell>
|
||||
<TableCell className="font-medium">
|
||||
<ChangeSetting setting={setting} />
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
)}
|
||||
</Table>
|
||||
</LstCard>
|
||||
);
|
||||
}
|
||||
145
lstV2/frontend/src/components/admin/supModules/SubModuleForm.tsx
Normal file
145
lstV2/frontend/src/components/admin/supModules/SubModuleForm.tsx
Normal file
@@ -0,0 +1,145 @@
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from "@/components/ui/dialog";
|
||||
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { toast } from "sonner";
|
||||
import { useState } from "react";
|
||||
//import { z } from "zod";
|
||||
//import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { useSessionStore } from "@/lib/store/sessionStore";
|
||||
import axios from "axios";
|
||||
import { useForm } from "@tanstack/react-form";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import { getSubModules } from "@/utils/querys/admin/subModules";
|
||||
|
||||
// const FormSchema = z.object({
|
||||
// subModule: z.boolean(),
|
||||
// });
|
||||
export function ChangeSubModule({ subModule }: { subModule: any }) {
|
||||
const { token } = useSessionStore();
|
||||
const { refetch } = useQuery(getSubModules(token ?? ""));
|
||||
|
||||
const [open, setOpen] = useState(false);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const form = useForm({
|
||||
defaultValues: {
|
||||
active: subModule.active,
|
||||
},
|
||||
onSubmit: async ({ value }) => {
|
||||
console.log(value);
|
||||
try {
|
||||
const result = await axios.patch(
|
||||
`/api/server/submodules/${subModule.submodule_id}`,
|
||||
{ active: value.active },
|
||||
{
|
||||
headers: { Authorization: `Bearer ${token}` },
|
||||
}
|
||||
);
|
||||
|
||||
if (result.data.success) {
|
||||
setOpen(!open);
|
||||
setSaving(false);
|
||||
refetch();
|
||||
toast.success(result.data.message);
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<Dialog
|
||||
open={open}
|
||||
onOpenChange={(isOpen) => {
|
||||
if (!open) {
|
||||
form.reset();
|
||||
}
|
||||
setOpen(isOpen);
|
||||
// toast.message("Model was something", {
|
||||
// description: isOpen ? "Modal is open" : "Modal is closed",
|
||||
// });
|
||||
}}
|
||||
>
|
||||
<DialogTrigger asChild>
|
||||
<Button variant="outline">Edit</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="sm:max-w-[425px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>{subModule.name}</DialogTitle>
|
||||
<DialogDescription>
|
||||
Set to active or deactivated.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<form
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
<>
|
||||
<form.Field
|
||||
name="active"
|
||||
// validators={{
|
||||
// // We can choose between form-wide and field-specific validators
|
||||
// onChange: ({ value }) =>
|
||||
// value.length > 3
|
||||
// ? undefined
|
||||
// : "Username must be longer than 3 letters",
|
||||
// }}
|
||||
children={(field) => {
|
||||
return (
|
||||
<div className="m-2 min-w-48 max-w-96 p-2 flex flex-row">
|
||||
<Label htmlFor="active">
|
||||
Active
|
||||
</Label>
|
||||
<Checkbox
|
||||
className="ml-2"
|
||||
name={field.name}
|
||||
onBlur={field.handleBlur}
|
||||
checked={field.state.value}
|
||||
onCheckedChange={(e) =>
|
||||
field.handleChange(e)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<div className="flex justify-end mt-2">
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={saving}
|
||||
onClick={form.handleSubmit}
|
||||
>
|
||||
{saving ? (
|
||||
<>
|
||||
<span>Saving....</span>
|
||||
</>
|
||||
) : (
|
||||
<span>Save setting</span>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</>
|
||||
);
|
||||
}
|
||||
146
lstV2/frontend/src/components/admin/supModules/SubModulePage.tsx
Normal file
146
lstV2/frontend/src/components/admin/supModules/SubModulePage.tsx
Normal file
@@ -0,0 +1,146 @@
|
||||
import { LstCard } from "@/components/extendedUI/LstCard";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
import { useSessionStore } from "@/lib/store/sessionStore";
|
||||
import { useModuleStore } from "@/lib/store/useModuleStore";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { useRouter } from "@tanstack/react-router";
|
||||
import { ChangeSubModule } from "./SubModuleForm";
|
||||
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { getSubModules } from "@/utils/querys/admin/subModules";
|
||||
import { useEffect } from "react";
|
||||
|
||||
export type Settings = {
|
||||
settings_id?: string;
|
||||
name?: string;
|
||||
value?: string;
|
||||
description?: string;
|
||||
};
|
||||
|
||||
export default function SubModulePage() {
|
||||
const { user, token } = useSessionStore();
|
||||
const { modules } = useModuleStore();
|
||||
const router = useRouter();
|
||||
|
||||
// const adminModule = modules.filter((n) => n.name === "admin");
|
||||
// const userLevel =
|
||||
// user?.roles.filter((r) => r.module_id === adminModule[0].module_id) ||
|
||||
// [];
|
||||
|
||||
// if (!adminModule[0]?.roles.includes(userLevel[0]?.role)) {
|
||||
// //router.navigate({ to: "/" });
|
||||
// }
|
||||
|
||||
useEffect(() => {
|
||||
if (!user || modules.length === 0) return;
|
||||
|
||||
const adminModule = modules.find((n) => n.name === "admin");
|
||||
if (!adminModule) {
|
||||
console.log("no module loaded");
|
||||
//router.navigate({ to: "/" });
|
||||
return;
|
||||
}
|
||||
|
||||
const userLevel =
|
||||
user?.roles?.filter((r) => r.module_id === adminModule.module_id) ||
|
||||
[];
|
||||
|
||||
if (!adminModule.roles?.includes(userLevel[0]?.role)) {
|
||||
console.log("Something failed");
|
||||
//router.navigate({ to: "/" });
|
||||
}
|
||||
}, [modules, user, router]);
|
||||
|
||||
const { data, isError, error, isLoading } = useQuery(
|
||||
getSubModules(token ?? "")
|
||||
);
|
||||
|
||||
// if (isLoading) {
|
||||
// return <div>Loading.....</div>;
|
||||
// }
|
||||
if (isError) {
|
||||
return <div>{JSON.stringify(error)}</div>;
|
||||
}
|
||||
|
||||
return (
|
||||
<LstCard className="m-2 flex place-content-center w-fit">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Name</TableHead>
|
||||
<TableHead>Description</TableHead>
|
||||
<TableHead>Module In</TableHead>
|
||||
<TableHead>Roles</TableHead>
|
||||
<TableHead>Active</TableHead>
|
||||
<TableHead>Edit</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
{isLoading ? (
|
||||
<>
|
||||
<TableBody>
|
||||
{Array(10)
|
||||
.fill(0)
|
||||
.map((_, i) => (
|
||||
<TableRow key={i}>
|
||||
<TableCell className="font-medium">
|
||||
<Skeleton className="h-4" />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton className="h-4" />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton className="h-4" />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton className="h-4" />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton className="h-4" />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton className="h-4" />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton className="h-4" />
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</>
|
||||
) : (
|
||||
<TableBody>
|
||||
{data?.map((i: any) => (
|
||||
<TableRow key={i.submodule_id}>
|
||||
<TableCell className="font-medium">
|
||||
{i.name}
|
||||
</TableCell>
|
||||
<TableCell className="font-medium">
|
||||
{i.description}
|
||||
</TableCell>
|
||||
<TableCell className="font-medium">
|
||||
{i.moduleName}
|
||||
</TableCell>
|
||||
<TableCell className="font-medium">
|
||||
{JSON.stringify(i.roles)}
|
||||
</TableCell>
|
||||
<TableCell className="font-medium">
|
||||
{i.active ? "Yes" : "No"}
|
||||
</TableCell>
|
||||
<TableCell className="font-medium">
|
||||
<ChangeSubModule subModule={i} />
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
)}
|
||||
</Table>
|
||||
</LstCard>
|
||||
);
|
||||
}
|
||||
28
lstV2/frontend/src/components/admin/user/UserPage.tsx
Normal file
28
lstV2/frontend/src/components/admin/user/UserPage.tsx
Normal file
@@ -0,0 +1,28 @@
|
||||
import { getUsers } from "@/utils/querys/admin/users";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import UserCard from "./components/UserCard";
|
||||
|
||||
export default function UserPage() {
|
||||
const { data, isError, error, isLoading } = useQuery(getUsers());
|
||||
|
||||
if (isLoading) return <div className="m-auto">Loading users...</div>;
|
||||
|
||||
if (isError)
|
||||
return (
|
||||
<div className="m-auto">
|
||||
There was an error getting the users.... {JSON.stringify(error)}
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="m-2 w-dvw">
|
||||
{data.map((u: any) => {
|
||||
return (
|
||||
<div>
|
||||
<UserCard user={u} />
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
import ModuleForm from "./ModuleForm";
|
||||
import { getModules } from "@/utils/querys/admin/modules";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
//import { getUserRoles } from "@/utils/querys/admin/userRoles";
|
||||
//import { Checkbox } from "@radix-ui/react-checkbox";
|
||||
|
||||
export default function ModuleAccess(data: any) {
|
||||
const token = localStorage.getItem("auth_token");
|
||||
// const { data: userRoles } = useQuery(getUserRoles());
|
||||
const {
|
||||
data: modules,
|
||||
isError,
|
||||
isLoading,
|
||||
} = useQuery(getModules(token ?? ""));
|
||||
|
||||
if (isError) return <div>Error gettings Roles</div>;
|
||||
if (isLoading) return <div>Loading modules</div>;
|
||||
return (
|
||||
<div className="flex flex-row flex-wrap">
|
||||
{modules?.map((m: any) => {
|
||||
return (
|
||||
<div key={m.module_id}>
|
||||
<ModuleForm
|
||||
module={m}
|
||||
user={data.user}
|
||||
refetch={data.refetch}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,119 @@
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectGroup,
|
||||
SelectItem,
|
||||
SelectLabel,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
|
||||
import { useForm } from "@tanstack/react-form";
|
||||
|
||||
import axios from "axios";
|
||||
import { toast } from "sonner";
|
||||
|
||||
export default function ModuleForm(props: any) {
|
||||
const token = localStorage.getItem("auth_token");
|
||||
const role =
|
||||
props.user?.moduleRoles?.filter(
|
||||
(m: any) => m.module_id === props.module.module_id
|
||||
)[0]?.role ?? " ";
|
||||
const form = useForm({
|
||||
defaultValues: {
|
||||
role: role,
|
||||
},
|
||||
onSubmit: async ({ value }) => {
|
||||
const data: any = {
|
||||
username: props.user.username,
|
||||
module: props.module.name,
|
||||
role: value.role,
|
||||
};
|
||||
console.log(data);
|
||||
try {
|
||||
const res = await axios.post("/api/auth/setuseraccess", data, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
});
|
||||
|
||||
if (res.data.success) {
|
||||
toast.success(res.data.message);
|
||||
props.refetch();
|
||||
form.reset();
|
||||
} else {
|
||||
res.data.message;
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="">
|
||||
<form
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
}}
|
||||
className="flex flex-row"
|
||||
>
|
||||
<form.Field
|
||||
name="role"
|
||||
//listeners={{onChange: ({value})=>{}}}
|
||||
children={(field) => {
|
||||
return (
|
||||
<div className="m-2 min-w-48 max-w-96 p-2">
|
||||
<Label htmlFor={field.name}>
|
||||
Module: {props.module.name}
|
||||
</Label>
|
||||
<Select
|
||||
value={field.state.value}
|
||||
onValueChange={field.handleChange}
|
||||
>
|
||||
<SelectTrigger className="w-[180px]">
|
||||
<SelectValue
|
||||
id={field.name}
|
||||
placeholder="Select Role"
|
||||
/>
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectGroup>
|
||||
<SelectLabel>Roles</SelectLabel>
|
||||
<SelectItem value="viewer">
|
||||
Viewer
|
||||
</SelectItem>
|
||||
<SelectItem value="technician">
|
||||
Technician
|
||||
</SelectItem>
|
||||
<SelectItem value="supervisor">
|
||||
Supervisor
|
||||
</SelectItem>
|
||||
<SelectItem value="manager">
|
||||
Manager
|
||||
</SelectItem>
|
||||
<SelectItem value="tester">
|
||||
Tester
|
||||
</SelectItem>
|
||||
<SelectItem value="admin">
|
||||
Admin
|
||||
</SelectItem>
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<div className="mt-4">
|
||||
<Button type="submit" onClick={form.handleSubmit}>
|
||||
Save
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
import { useGetUserRoles } from "@/lib/store/useGetRoles";
|
||||
import { useSubModuleStore } from "@/lib/store/useSubModuleStore";
|
||||
|
||||
import SubModuleForm from "./SubmoduleForm";
|
||||
//import { Checkbox } from "@radix-ui/react-checkbox";
|
||||
|
||||
export default function UserSubRoles(data: any) {
|
||||
const { userRoles } = useGetUserRoles();
|
||||
const { subModules } = useSubModuleStore();
|
||||
|
||||
return (
|
||||
<div className="flex flex-row flex-wrap">
|
||||
{subModules?.map((m: any) => {
|
||||
const hasRole: any = userRoles.filter(
|
||||
(r: any) =>
|
||||
r.user_id.includes(data.user.user_id) &&
|
||||
r.module_id === m.module_id
|
||||
);
|
||||
return (
|
||||
<div key={m.module_id}>
|
||||
<SubModuleForm
|
||||
i={m}
|
||||
hasRole={hasRole}
|
||||
user={data.user}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,93 @@
|
||||
import { LstCard } from "@/components/extendedUI/LstCard";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectGroup,
|
||||
SelectItem,
|
||||
SelectLabel,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import { useForm } from "@tanstack/react-form";
|
||||
|
||||
export default function SubModuleForm(props: any) {
|
||||
const form = useForm({
|
||||
defaultValues: { role: "" },
|
||||
onSubmit: async ({ value }) => {
|
||||
console.log(value);
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="m-2 p-1">
|
||||
<LstCard>
|
||||
<p className="text-center">
|
||||
Module: {props.i.moduleName}, <br />
|
||||
SubModule: {props.i.name}
|
||||
</p>
|
||||
|
||||
<p className="p-1">
|
||||
Current role:{" "}
|
||||
{props.hasRole[0]?.role
|
||||
? props.hasRole[0].role
|
||||
: "not assigned"}
|
||||
</p>
|
||||
<form
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
}}
|
||||
>
|
||||
<form.Field
|
||||
name="role"
|
||||
//listeners={{onChange: ({value})=>{}}}
|
||||
children={(field) => {
|
||||
return (
|
||||
<div className="m-2 min-w-48 max-w-96 p-2">
|
||||
<Label htmlFor={field.name}>
|
||||
Select role
|
||||
</Label>
|
||||
<Select
|
||||
value={field.state.value}
|
||||
onValueChange={field.handleChange}
|
||||
>
|
||||
<SelectTrigger className="w-[180px]">
|
||||
<SelectValue
|
||||
id={field.name}
|
||||
placeholder="Select Role"
|
||||
/>
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectGroup>
|
||||
<SelectLabel>Roles</SelectLabel>
|
||||
<SelectItem value="viewer">
|
||||
Viewer
|
||||
</SelectItem>
|
||||
<SelectItem value="technician">
|
||||
Technician
|
||||
</SelectItem>
|
||||
<SelectItem value="supervisor">
|
||||
Supervisor
|
||||
</SelectItem>
|
||||
<SelectItem value="manager">
|
||||
Manager
|
||||
</SelectItem>
|
||||
<SelectItem value="tester">
|
||||
Tester
|
||||
</SelectItem>
|
||||
<SelectItem value="admin">
|
||||
Admin
|
||||
</SelectItem>
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</form>
|
||||
</LstCard>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
283
lstV2/frontend/src/components/admin/user/components/UserCard.tsx
Normal file
283
lstV2/frontend/src/components/admin/user/components/UserCard.tsx
Normal file
@@ -0,0 +1,283 @@
|
||||
import { LstCard } from "@/components/extendedUI/LstCard";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
// import {
|
||||
// Select,
|
||||
// SelectContent,
|
||||
// SelectGroup,
|
||||
// SelectItem,
|
||||
// SelectLabel,
|
||||
// SelectTrigger,
|
||||
// SelectValue,
|
||||
// } from "@/components/ui/select";
|
||||
|
||||
import { DebugButton } from "@/utils/formStuff/debugButton";
|
||||
import { userFormOptions } from "@/utils/formStuff/options/userformOptions";
|
||||
import { generatePassword } from "@/utils/passwordGen";
|
||||
import { getUsers } from "@/utils/querys/admin/users";
|
||||
import { useForm } from "@tanstack/react-form";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import axios from "axios";
|
||||
import { toast } from "sonner";
|
||||
|
||||
import { CardHeader } from "@/components/ui/card";
|
||||
import ModuleAccess from "./ModuleAccess";
|
||||
|
||||
export default function UserCard(data: any) {
|
||||
const token = localStorage.getItem("auth_token");
|
||||
const { refetch } = useQuery(getUsers());
|
||||
|
||||
//console.log(userRoles);
|
||||
const form = useForm({
|
||||
...userFormOptions(data.user),
|
||||
onSubmit: async ({ value }) => {
|
||||
// Do something with form data
|
||||
|
||||
const userData = { ...value, user_id: data.user.user_id };
|
||||
|
||||
try {
|
||||
const res = await axios.patch(
|
||||
"/api/auth/updateuser",
|
||||
userData,
|
||||
{
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
if (res.data.success) {
|
||||
toast.success(res.data.message);
|
||||
refetch();
|
||||
form.reset();
|
||||
} else {
|
||||
res.data.message;
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
},
|
||||
});
|
||||
return (
|
||||
<div className="flex flex-row">
|
||||
<div className="m-2">
|
||||
<LstCard>
|
||||
<CardHeader>User Profile</CardHeader>
|
||||
<form
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
}}
|
||||
>
|
||||
<form.Field
|
||||
name="username"
|
||||
validators={{
|
||||
// We can choose between form-wide and field-specific validators
|
||||
onChange: ({ value }) =>
|
||||
value.length > 3
|
||||
? undefined
|
||||
: "Username must be longer than 3 letters",
|
||||
}}
|
||||
children={(field) => {
|
||||
return (
|
||||
<div className="m-2 min-w-48 max-w-96 p-2">
|
||||
<Label htmlFor="username">
|
||||
Username
|
||||
</Label>
|
||||
<Input
|
||||
name={field.name}
|
||||
value={field.state.value}
|
||||
onBlur={field.handleBlur}
|
||||
//type="number"
|
||||
onChange={(e) =>
|
||||
field.handleChange(
|
||||
e.target.value
|
||||
)
|
||||
}
|
||||
/>
|
||||
{field.state.meta.errors.length ? (
|
||||
<em>
|
||||
{field.state.meta.errors.join(
|
||||
","
|
||||
)}
|
||||
</em>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<form.Field
|
||||
name="email"
|
||||
validators={{
|
||||
// We can choose between form-wide and field-specific validators
|
||||
onChange: ({ value }) =>
|
||||
value.length > 3
|
||||
? undefined
|
||||
: "You must enter a correct ",
|
||||
}}
|
||||
children={(field) => {
|
||||
return (
|
||||
<div className="m-2 min-w-48 max-w-96 p-2">
|
||||
<Label htmlFor="email">Email</Label>
|
||||
<Input
|
||||
name={field.name}
|
||||
value={field.state.value}
|
||||
onBlur={field.handleBlur}
|
||||
//type="number"
|
||||
onChange={(e) =>
|
||||
field.handleChange(
|
||||
e.target.value
|
||||
)
|
||||
}
|
||||
/>
|
||||
{field.state.meta.errors.length ? (
|
||||
<em>
|
||||
{field.state.meta.errors.join(
|
||||
","
|
||||
)}
|
||||
</em>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
{/* <form.Field
|
||||
name="role"
|
||||
//listeners={{onChange: ({value})=>{}}}
|
||||
children={(field) => {
|
||||
return (
|
||||
<div className="m-2 min-w-48 max-w-96 p-2">
|
||||
<Label htmlFor={field.name}>
|
||||
Select role
|
||||
</Label>
|
||||
<Select
|
||||
value={field.state.value}
|
||||
onValueChange={field.handleChange}
|
||||
>
|
||||
<SelectTrigger className="w-[180px]">
|
||||
<SelectValue
|
||||
id={field.name}
|
||||
placeholder="Select Role"
|
||||
/>
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectGroup>
|
||||
<SelectLabel>
|
||||
Roles
|
||||
</SelectLabel>
|
||||
<SelectItem value="viewer">
|
||||
Viewer
|
||||
</SelectItem>
|
||||
<SelectItem value="operator">
|
||||
Operator
|
||||
</SelectItem>
|
||||
<SelectItem value="manager">
|
||||
Manager
|
||||
</SelectItem>
|
||||
<SelectItem value="admin">
|
||||
Admin
|
||||
</SelectItem>
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
/> */}
|
||||
<form.Field
|
||||
name="password"
|
||||
validators={{
|
||||
onChangeAsyncDebounceMs: 500,
|
||||
onChangeAsync: ({ value }) => {
|
||||
if (
|
||||
window.location.pathname.includes(
|
||||
"/users"
|
||||
) &&
|
||||
value.length === 0
|
||||
) {
|
||||
return;
|
||||
}
|
||||
if (value.length < 4) {
|
||||
return "Password must be at least 4 characters long.";
|
||||
}
|
||||
|
||||
if (!/[A-Z]/.test(value)) {
|
||||
return "Password must contain at least one uppercase letter.";
|
||||
}
|
||||
|
||||
if (!/[a-z]/.test(value)) {
|
||||
return "Password must contain at least one lower case letter.";
|
||||
}
|
||||
|
||||
if (!/[0-9]/.test(value)) {
|
||||
return "Password must contain at least one number.";
|
||||
}
|
||||
|
||||
if (
|
||||
!/[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/.test(
|
||||
value
|
||||
)
|
||||
) {
|
||||
return "Password must contain at least one special character.";
|
||||
}
|
||||
},
|
||||
}}
|
||||
children={(field) => {
|
||||
return (
|
||||
<div className="m-2 p-2">
|
||||
<Label htmlFor="password">
|
||||
Change Password
|
||||
</Label>
|
||||
<div className="mt-2 flex flex-row">
|
||||
<Input
|
||||
className="min-w-48 max-w-96"
|
||||
name={field.name}
|
||||
value={field.state.value}
|
||||
onBlur={field.handleBlur}
|
||||
//type="number"
|
||||
onChange={(e) =>
|
||||
field.handleChange(
|
||||
e.target.value
|
||||
)
|
||||
}
|
||||
/>
|
||||
<Button
|
||||
className="ml-2"
|
||||
onClick={() =>
|
||||
field.handleChange(
|
||||
generatePassword(8)
|
||||
)
|
||||
}
|
||||
>
|
||||
Random password
|
||||
</Button>
|
||||
<DebugButton
|
||||
data={form.state.values}
|
||||
/>
|
||||
</div>
|
||||
{field.state.meta.errors.length ? (
|
||||
<em>
|
||||
{field.state.meta.errors.join(
|
||||
","
|
||||
)}
|
||||
</em>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<div className="mt-4 ml-4">
|
||||
<Button onClick={form.handleSubmit}>Save</Button>
|
||||
</div>
|
||||
</form>
|
||||
</LstCard>
|
||||
</div>
|
||||
<div>
|
||||
<LstCard>
|
||||
<ModuleAccess user={data.user} refetch={refetch} />
|
||||
</LstCard>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
171
lstV2/frontend/src/components/auth/LoginForm.tsx
Normal file
171
lstV2/frontend/src/components/auth/LoginForm.tsx
Normal file
@@ -0,0 +1,171 @@
|
||||
import { useSessionStore } from "../../lib/store/sessionStore";
|
||||
import { LstCard } from "../extendedUI/LstCard";
|
||||
import { CardHeader } from "../ui/card";
|
||||
import { toast } from "sonner";
|
||||
import { z } from "zod";
|
||||
import { useRouter, useSearch } from "@tanstack/react-router";
|
||||
import { Controller, useForm } from "react-hook-form";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { Label } from "../ui/label";
|
||||
import { Input } from "../ui/input";
|
||||
import { Checkbox } from "../ui/checkbox";
|
||||
import { Button } from "../ui/button";
|
||||
|
||||
const FormSchema = z.object({
|
||||
username: z.string().min(1, "You must enter a valid username"),
|
||||
password: z.string().min(4, "You must enter a valid password"),
|
||||
rememberMe: z.boolean(),
|
||||
});
|
||||
|
||||
const LoginForm = () => {
|
||||
const { setSession } = useSessionStore();
|
||||
const rememeberMe = localStorage.getItem("rememberMe") === "true";
|
||||
const username = localStorage.getItem("username") || "";
|
||||
const router = useRouter();
|
||||
const search = useSearch({ from: "/login" });
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
control,
|
||||
formState: { errors },
|
||||
} = useForm<z.infer<typeof FormSchema>>({
|
||||
resolver: zodResolver(FormSchema),
|
||||
defaultValues: {
|
||||
username: username || "",
|
||||
password: "",
|
||||
rememberMe: rememeberMe,
|
||||
},
|
||||
});
|
||||
|
||||
const onSubmitLogin = async (value: z.infer<typeof FormSchema>) => {
|
||||
// Do something with form data
|
||||
|
||||
// first update the rememberMe incase it was selected
|
||||
if (value.rememberMe) {
|
||||
localStorage.setItem("rememberMe", value.rememberMe.toString());
|
||||
localStorage.setItem("username", value.username);
|
||||
} else {
|
||||
localStorage.removeItem("rememberMe");
|
||||
localStorage.removeItem("username");
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch("/api/auth/login", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
username: value.username,
|
||||
password: value.password,
|
||||
}),
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
// Store token in localStorage
|
||||
// localStorage.setItem("auth_token", data.data.token);
|
||||
if (data.success) {
|
||||
const prod = btoa(
|
||||
`${value.username.toLowerCase()}:${value.password}`
|
||||
);
|
||||
const prodUser = { ...data.user, prod: prod };
|
||||
|
||||
setSession(prodUser, data.token);
|
||||
toast.success(`You are logged in as ${data.user.username}`);
|
||||
|
||||
console.log(search.redirect ? search.redirect : "oops");
|
||||
router.history.push(search.redirect ? search.redirect : "/");
|
||||
}
|
||||
|
||||
if (!data.success) {
|
||||
toast.error(`${data.message}`);
|
||||
}
|
||||
|
||||
//console.log(data);
|
||||
} catch (err) {
|
||||
toast.error("Invalid credentials");
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="ml-[25%]">
|
||||
<LstCard className="p-3 w-96">
|
||||
<CardHeader>
|
||||
<div>
|
||||
<p className="text-2xl">Login to LST</p>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<hr className="rounded"></hr>
|
||||
<form onSubmit={handleSubmit(onSubmitLogin)}>
|
||||
<div>
|
||||
<Label htmlFor="username" className="m-1">
|
||||
Username
|
||||
</Label>
|
||||
<Input
|
||||
placeholder="smith001"
|
||||
{...register("username")}
|
||||
className={errors.username ? "border-red-500" : ""}
|
||||
aria-invalid={!!errors.username}
|
||||
/>
|
||||
{errors.username && (
|
||||
<p className="text-red-500 text-sm mt-1">
|
||||
{errors.username.message}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<>
|
||||
<Label htmlFor={"password"} className="m-1">
|
||||
Password
|
||||
</Label>
|
||||
<Input
|
||||
type="password"
|
||||
{...register("password")}
|
||||
className={
|
||||
errors.password ? "border-red-500" : ""
|
||||
}
|
||||
aria-invalid={!!errors.password}
|
||||
/>
|
||||
{errors.password && (
|
||||
<p className="text-red-500 text-sm mt-1">
|
||||
{errors.password.message}
|
||||
</p>
|
||||
)}
|
||||
</>
|
||||
</div>
|
||||
<div className="flex justify-between pt-2">
|
||||
<div className="flex">
|
||||
<Controller
|
||||
render={({ field }) => (
|
||||
<>
|
||||
<Checkbox
|
||||
id="remember"
|
||||
checked={field.value}
|
||||
onCheckedChange={field.onChange}
|
||||
/>
|
||||
<label
|
||||
htmlFor="remember"
|
||||
className="pl-2 text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
||||
>
|
||||
remember me
|
||||
</label>
|
||||
</>
|
||||
)}
|
||||
control={control}
|
||||
name="rememberMe"
|
||||
defaultValue={rememeberMe}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end">
|
||||
<Button type="submit">Submit</Button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</LstCard>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default LoginForm;
|
||||
213
lstV2/frontend/src/components/auth/Register.tsx
Normal file
213
lstV2/frontend/src/components/auth/Register.tsx
Normal file
@@ -0,0 +1,213 @@
|
||||
import { LstCard } from "../extendedUI/LstCard";
|
||||
import { CardHeader } from "../ui/card";
|
||||
import { toast } from "sonner";
|
||||
|
||||
import { Label } from "../ui/label";
|
||||
import { Input } from "../ui/input";
|
||||
import { Button } from "../ui/button";
|
||||
import { useForm } from "@tanstack/react-form";
|
||||
import { Separator } from "../ui/separator";
|
||||
import { useNavigate } from "@tanstack/react-router";
|
||||
import { useState } from "react";
|
||||
import axios from "axios";
|
||||
|
||||
export default function RegisterForm() {
|
||||
const navigate = useNavigate();
|
||||
const [registering, setRegistering] = useState(false);
|
||||
const form = useForm({
|
||||
defaultValues: {
|
||||
username: "",
|
||||
password: "",
|
||||
email: "",
|
||||
},
|
||||
onSubmit: async ({ value }) => {
|
||||
setRegistering(true);
|
||||
try {
|
||||
const res = await axios.post("/api/auth/register", value);
|
||||
|
||||
if (res.data.success) {
|
||||
navigate({ to: "/login" });
|
||||
form.reset();
|
||||
toast.success(
|
||||
`${value.username} was just created please login`
|
||||
);
|
||||
setRegistering(false);
|
||||
}
|
||||
|
||||
if (!res.data.success) {
|
||||
toast.error(res.data.message);
|
||||
setRegistering(false);
|
||||
}
|
||||
} catch (error) {
|
||||
//console.log(error);
|
||||
toast.error("There was an error registering");
|
||||
setRegistering(false);
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="ml-[25%]">
|
||||
<LstCard className="p-3 w-96">
|
||||
<CardHeader>
|
||||
<div>
|
||||
<p className="text-2xl">Login to register</p>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<hr className="rounded"></hr>
|
||||
<form
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
}}
|
||||
>
|
||||
<Separator />
|
||||
<form.Field
|
||||
name="username"
|
||||
validators={{
|
||||
// We can choose between form-wide and field-specific validators
|
||||
onChange: ({ value }) =>
|
||||
value.length > 3
|
||||
? undefined
|
||||
: "Username must be longer than 3 letters",
|
||||
}}
|
||||
children={(field) => {
|
||||
return (
|
||||
<div className="m-2 min-w-48 max-w-96 p-2">
|
||||
<Label htmlFor="username" className="mb-2">
|
||||
Username
|
||||
</Label>
|
||||
<Input
|
||||
name={field.name}
|
||||
value={field.state.value}
|
||||
onBlur={field.handleBlur}
|
||||
//type="number"
|
||||
onChange={(e) =>
|
||||
field.handleChange(e.target.value)
|
||||
}
|
||||
/>
|
||||
{field.state.meta.errors.length ? (
|
||||
<em>
|
||||
{field.state.meta.errors.join(",")}
|
||||
</em>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<Separator />
|
||||
<form.Field
|
||||
name="email"
|
||||
validators={{
|
||||
// We can choose between form-wide and field-specific validators
|
||||
onChange: ({ value }) =>
|
||||
value.length > 3
|
||||
? undefined
|
||||
: "You must enter a valid email",
|
||||
}}
|
||||
children={(field) => {
|
||||
return (
|
||||
<div className="m-2 min-w-48 max-w-96 p-2">
|
||||
<Label htmlFor="email" className="mb-2">
|
||||
Alpla Email
|
||||
</Label>
|
||||
<Input
|
||||
name={field.name}
|
||||
value={field.state.value}
|
||||
onBlur={field.handleBlur}
|
||||
//type="number"
|
||||
onChange={(e) =>
|
||||
field.handleChange(e.target.value)
|
||||
}
|
||||
/>
|
||||
{field.state.meta.errors.length ? (
|
||||
<em>
|
||||
{field.state.meta.errors.join(",")}
|
||||
</em>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<Separator className="m-2" />
|
||||
<p>
|
||||
Your password Should be your windows password, as this
|
||||
is how you will interact with alplaprod
|
||||
</p>
|
||||
<form.Field
|
||||
name="password"
|
||||
// We can choose between form-wide and field-specific validators
|
||||
validators={{
|
||||
onChangeAsyncDebounceMs: 500,
|
||||
onChangeAsync: ({ value }) => {
|
||||
// if (
|
||||
// window.location.pathname.includes(
|
||||
// "/users"
|
||||
// ) &&
|
||||
// value.length === 0
|
||||
// ) {
|
||||
// return;
|
||||
// }
|
||||
if (value.length < 4) {
|
||||
return "Password must be at least 4 characters long.";
|
||||
}
|
||||
|
||||
if (!/[A-Z]/.test(value)) {
|
||||
return "Password must contain at least one uppercase letter.";
|
||||
}
|
||||
|
||||
if (!/[a-z]/.test(value)) {
|
||||
return "Password must contain at least one lower case letter.";
|
||||
}
|
||||
|
||||
if (!/[0-9]/.test(value)) {
|
||||
return "Password must contain at least one number.";
|
||||
}
|
||||
|
||||
if (
|
||||
!/[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/.test(
|
||||
value
|
||||
)
|
||||
) {
|
||||
return "Password must contain at least one special character.";
|
||||
}
|
||||
},
|
||||
}}
|
||||
children={(field) => {
|
||||
return (
|
||||
<div className="m-2 min-w-48 max-w-96 p-2">
|
||||
<Label htmlFor="password1" className="mb-2">
|
||||
Password
|
||||
</Label>
|
||||
<Input
|
||||
name={field.name}
|
||||
value={field.state.value}
|
||||
onBlur={field.handleBlur}
|
||||
type="password"
|
||||
onChange={(e) =>
|
||||
field.handleChange(e.target.value)
|
||||
}
|
||||
/>
|
||||
{field.state.meta.errors.length ? (
|
||||
<em>
|
||||
{field.state.meta.errors.join(",")}
|
||||
</em>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<div className="mt-4 ml-4 flex justify-end">
|
||||
<Button
|
||||
type="submit"
|
||||
onClick={form.handleSubmit}
|
||||
disabled={registering}
|
||||
>
|
||||
Register
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</LstCard>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
33
lstV2/frontend/src/components/changelog/ChangeLog.tsx
Normal file
33
lstV2/frontend/src/components/changelog/ChangeLog.tsx
Normal file
@@ -0,0 +1,33 @@
|
||||
// src/components/Changelog.jsx
|
||||
import { marked } from "marked";
|
||||
import changelog from "../../../../CHANGELOG.md?raw"; // assuming changelog.md is in root
|
||||
|
||||
const Changelog = () => {
|
||||
const html: any = marked.parse(changelog);
|
||||
const recentChanges = html.split("<h2>")[1];
|
||||
// const [htmlContent, setHtmlContent] = useState("");
|
||||
|
||||
// useEffect(() => {
|
||||
// fetch("/changelog.md")
|
||||
// .then((res) => res.text())
|
||||
// .then((md) => {
|
||||
// const versionBlocks = md.split(/^##\s+/gm); // Split on headings
|
||||
// if (versionBlocks.length > 1) {
|
||||
// const latestBlock = `## ${versionBlocks[1]}`;
|
||||
// const html: any = marked.parse(latestBlock, {
|
||||
// breaks: true,
|
||||
// gfm: true,
|
||||
// });
|
||||
// setHtmlContent(html);
|
||||
// }
|
||||
// });
|
||||
// }, []);
|
||||
return (
|
||||
<div
|
||||
className="prose m-3"
|
||||
dangerouslySetInnerHTML={{ __html: `<h2>${recentChanges}` }}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default Changelog;
|
||||
47
lstV2/frontend/src/components/dashboard/AddCards.tsx
Normal file
47
lstV2/frontend/src/components/dashboard/AddCards.tsx
Normal file
@@ -0,0 +1,47 @@
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from "@/components/ui/dialog";
|
||||
import Cards from "./Cards";
|
||||
//import { toast } from "sonner";
|
||||
|
||||
export function AddCards() {
|
||||
return (
|
||||
<Dialog>
|
||||
<DialogTrigger asChild>
|
||||
<Button variant="outline">Add Cards</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="min-w-fit ">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Cards</DialogTitle>
|
||||
<DialogDescription>
|
||||
Manage Cards and there settings.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="flex flex-row">
|
||||
<div className="">
|
||||
<Cards name={"ppoo"} inventory />
|
||||
<Cards name={"inv-empty"} rowType={"empty"} />
|
||||
<Cards name={"inv-fg"} rowType={"fg"} />
|
||||
</div>
|
||||
<div className="">
|
||||
<Cards name={"inv-materials"} rowType={"materials"} />
|
||||
<Cards name={"inv-packaging"} rowType={"packaging"} />
|
||||
<Cards name={"inv-waste"} rowType={"waste"} />
|
||||
<Cards name={"openOrder"} inventory />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* <DialogFooter>
|
||||
<Button type="submit">Save changes</Button>
|
||||
</DialogFooter> */}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
108
lstV2/frontend/src/components/dashboard/Cards.tsx
Normal file
108
lstV2/frontend/src/components/dashboard/Cards.tsx
Normal file
@@ -0,0 +1,108 @@
|
||||
import { useCardStore } from "@/lib/store/useCardStore";
|
||||
import { Label } from "../ui/label";
|
||||
import { Checkbox } from "../ui/checkbox";
|
||||
import { Button } from "../ui/button";
|
||||
import { useAppForm } from "@/utils/formStuff";
|
||||
|
||||
export default function Cards(card: any) {
|
||||
const { addCard, removeCard, cards } = useCardStore();
|
||||
let existing: any = cards.filter((n: any) => n.name === card.name);
|
||||
|
||||
//console.log(existing);
|
||||
const form = useAppForm({
|
||||
defaultValues: {
|
||||
name: existing[0]?.name || card.name,
|
||||
rowType: existing[0]?.type ?? card.rowType,
|
||||
age: existing[0]?.age ?? 90,
|
||||
active: existing[0]?.active ?? false,
|
||||
},
|
||||
onSubmit: async ({ value }) => {
|
||||
console.log(value);
|
||||
const testCard: any = cards.filter(
|
||||
(i: any) => i.name === value.name
|
||||
);
|
||||
|
||||
if (value.active) {
|
||||
const newCard = {
|
||||
name: `${value.name}`,
|
||||
rowType: value.rowType,
|
||||
age: value.age ?? 90,
|
||||
active: value.active,
|
||||
};
|
||||
if (testCard.length > 0) {
|
||||
removeCard(value.name);
|
||||
addCard(newCard);
|
||||
return;
|
||||
}
|
||||
// change the name for a type card
|
||||
|
||||
addCard(newCard);
|
||||
} else {
|
||||
removeCard(value.name);
|
||||
}
|
||||
},
|
||||
});
|
||||
return (
|
||||
<div className="border-solid border-2 m-2">
|
||||
<p>{card.name}</p>
|
||||
<form
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
}}
|
||||
className="flex flex-row"
|
||||
>
|
||||
<form.AppField
|
||||
name="active"
|
||||
// validators={{
|
||||
// // We can choose between form-wide and field-specific validators
|
||||
// onChange: ({ value }) =>
|
||||
// value.length > 3
|
||||
// ? undefined
|
||||
// : "Username must be longer than 3 letters",
|
||||
// }}
|
||||
children={(field) => {
|
||||
return (
|
||||
<div className="m-2 p-2 flex flex-row">
|
||||
<div>
|
||||
<Label htmlFor="active">
|
||||
<span>Active</span>
|
||||
</Label>
|
||||
</div>
|
||||
|
||||
<Checkbox
|
||||
className="ml-2"
|
||||
name={field.name}
|
||||
onBlur={field.handleBlur}
|
||||
checked={field.state.value}
|
||||
onCheckedChange={(e) =>
|
||||
field.handleChange(e)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
{!card.inventory && (
|
||||
<>
|
||||
<form.AppField
|
||||
name="age"
|
||||
children={(field) => (
|
||||
<field.InputField
|
||||
label="Age"
|
||||
inputType="number"
|
||||
required={true}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
<div className="mt-7">
|
||||
<Button type="submit" onClick={() => form.handleSubmit()}>
|
||||
Save Card
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
84
lstV2/frontend/src/components/dashboard/DashBoard.tsx
Normal file
84
lstV2/frontend/src/components/dashboard/DashBoard.tsx
Normal file
@@ -0,0 +1,84 @@
|
||||
import { useCardStore } from "@/lib/store/useCardStore";
|
||||
import INVCheckCard from "../logistics/warehouse/InventoryCard";
|
||||
import PPOO from "../logistics/warehouse/PPOOCard";
|
||||
import OpenOrders from "../logistics/warehouse/openOrders";
|
||||
|
||||
const componentsMap: any = {
|
||||
ppoo: PPOO,
|
||||
inv: INVCheckCard,
|
||||
openOrder: OpenOrders,
|
||||
//QualityRequest,
|
||||
};
|
||||
|
||||
export default function DashBoard() {
|
||||
const { cards } = useCardStore();
|
||||
|
||||
//console.log(cards);
|
||||
return (
|
||||
<div className="ml-5 w-11/12 h-9/10 grid grid-cols-12 gap-1">
|
||||
{cards.map((a: any) => {
|
||||
const name = a.name; //.filter((c) => c.i === card.i)[0].i || "name";
|
||||
|
||||
const Component = componentsMap[name.split("-")[0]];
|
||||
if (name === "openOrder") {
|
||||
return (
|
||||
<div key={a.name} className="col-span-6">
|
||||
<Component age={a.age} type={a.rowType} />
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
//console.log(name.split("-")[0], a);
|
||||
return (
|
||||
<div key={a.name} className="col-span-3">
|
||||
<Component data={a} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
|
||||
// return (
|
||||
// <div className="ml-5 w-11/12 h-9/10 grid grid-cols-12 gap-1">
|
||||
// <div className="col-span-3">
|
||||
// <PPOO />
|
||||
// </div>
|
||||
// <div className="col-span-3">
|
||||
// <INVCheckCard age={90} type={"empty"} />
|
||||
// </div>
|
||||
// <div className="col-span-3">
|
||||
// <INVCheckCard age={75} type={"fg"} />
|
||||
// </div>
|
||||
// <div className="col-span-3">
|
||||
// <INVCheckCard age={30} type={"materials"} />
|
||||
// </div>
|
||||
// <div className="col-span-3">
|
||||
// <INVCheckCard age={7} type={"waste"} />
|
||||
// </div>
|
||||
// <div className="col-span-3">
|
||||
// <INVCheckCard age={7} type={"packaging"} />
|
||||
// </div>
|
||||
// </div>
|
||||
// );
|
||||
}
|
||||
|
||||
/*
|
||||
<div className="col-span-3">
|
||||
<PPOO />
|
||||
</div>
|
||||
<div className="col-span-3">
|
||||
<INVCheckCard age={30} type={"empty"} />
|
||||
</div>
|
||||
<div className="col-span-3">
|
||||
<INVCheckCard age={30} type={"fg"} />
|
||||
</div>
|
||||
<div className="col-span-3">
|
||||
<INVCheckCard age={30} type={"materials"} />
|
||||
</div>
|
||||
<div className="col-span-3">
|
||||
<INVCheckCard age={30} type={"waste"} />
|
||||
</div>
|
||||
<div className="col-span-3">
|
||||
<INVCheckCard age={30} type={"packaging"} />
|
||||
</div>
|
||||
*/
|
||||
9
lstV2/frontend/src/components/eom/EomPage.tsx
Normal file
9
lstV2/frontend/src/components/eom/EomPage.tsx
Normal file
@@ -0,0 +1,9 @@
|
||||
import MaterialCheck from "./materialCheck/MaterialCheck";
|
||||
|
||||
export default function EomPage() {
|
||||
return (
|
||||
<div className="m-2 w-screen">
|
||||
<MaterialCheck />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
68
lstV2/frontend/src/components/eom/KFP.tsx
Normal file
68
lstV2/frontend/src/components/eom/KFP.tsx
Normal file
@@ -0,0 +1,68 @@
|
||||
import {useModuleStore} from "@/lib/store/useModuleStore";
|
||||
import {LstCard} from "../extendedUI/LstCard";
|
||||
import {CardHeader} from "../ui/card";
|
||||
import {Tabs, TabsContent, TabsList, TabsTrigger} from "../ui/tabs";
|
||||
import {useSessionStore} from "@/lib/store/sessionStore";
|
||||
|
||||
export default function KFP() {
|
||||
const {modules} = useModuleStore();
|
||||
const {user} = useSessionStore();
|
||||
const eomMod = modules.filter((m) => m.name === "eom");
|
||||
// the users current role for eom is?
|
||||
const role: any = user?.roles.filter((r) => r.module_id === eomMod[0].module_id) || "";
|
||||
const tabs = [
|
||||
{key: "mat", label: "Materials", roles: ["admin", "systemAdmin"], content: <Materials />},
|
||||
{key: "sbm", label: "Stretch Blow", roles: ["admin", "systemAdmin"]},
|
||||
];
|
||||
return (
|
||||
<div className="flex flex-row w-full">
|
||||
<Tabs defaultValue="mat">
|
||||
<TabsList>
|
||||
{tabs.map((tab) => {
|
||||
if (tab.roles.includes(role[0].role))
|
||||
return <TabsTrigger value={tab.key}>{tab.label}</TabsTrigger>;
|
||||
})}
|
||||
</TabsList>
|
||||
{tabs.map((tab) => {
|
||||
if (tab.roles.includes(role[0].role))
|
||||
return (
|
||||
<TabsContent value={tab.key} className="w-screen">
|
||||
{tab.content}
|
||||
</TabsContent>
|
||||
);
|
||||
})}
|
||||
</Tabs>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Materials() {
|
||||
return (
|
||||
<div className="flex flex-row w-[90%]">
|
||||
<div className="w-1/5">
|
||||
<LstCard className="m-1">
|
||||
<CardHeader>Resin</CardHeader>
|
||||
</LstCard>
|
||||
<LstCard className="m-1">
|
||||
<CardHeader>MasterBatch</CardHeader>
|
||||
</LstCard>
|
||||
<LstCard className="m-1">
|
||||
<CardHeader>Additive</CardHeader>
|
||||
</LstCard>
|
||||
<LstCard className="m-1">
|
||||
<CardHeader>Dose cups / Spigots / Spouts</CardHeader>
|
||||
</LstCard>
|
||||
</div>
|
||||
<div className="w-1/2">
|
||||
<LstCard className="m-1">
|
||||
<CardHeader>Pre-Emis Material Consistency report</CardHeader>
|
||||
</LstCard>
|
||||
</div>
|
||||
<div className="w-1/6">
|
||||
<LstCard className="m-1">
|
||||
<CardHeader>Regrind Report in kg</CardHeader>
|
||||
</LstCard>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
export default function MaterialCheck() {
|
||||
return <div>MaterialCheck</div>;
|
||||
}
|
||||
211
lstV2/frontend/src/components/eom/materialsData/MaterialData.tsx
Normal file
211
lstV2/frontend/src/components/eom/materialsData/MaterialData.tsx
Normal file
@@ -0,0 +1,211 @@
|
||||
import { LstCard } from "@/components/extendedUI/LstCard";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Calendar } from "@/components/ui/calendar";
|
||||
import { Popover, PopoverTrigger } from "@/components/ui/popover";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||
import { useSessionStore } from "@/lib/store/sessionStore";
|
||||
import { useModuleStore } from "@/lib/store/useModuleStore";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { PopoverContent } from "@radix-ui/react-popover";
|
||||
import { Link, useRouter } from "@tanstack/react-router";
|
||||
import { startOfMonth } from "date-fns";
|
||||
import { format } from "date-fns-tz";
|
||||
import { CalendarIcon } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import { toast } from "sonner";
|
||||
import KFP from "../KFP";
|
||||
|
||||
export default function MaterialData() {
|
||||
const { modules } = useModuleStore();
|
||||
const { user } = useSessionStore();
|
||||
const router = useRouter();
|
||||
const [date, setDate] = useState<Date>();
|
||||
|
||||
if (!user) {
|
||||
router.navigate({ to: "/" });
|
||||
}
|
||||
const eomMod = modules.filter((m) => m.name === "eom");
|
||||
// the users current role for eom is?
|
||||
const role: any =
|
||||
user?.roles.filter((r) => r.module_id === eomMod[0].module_id) || "";
|
||||
|
||||
const tabs = [
|
||||
{
|
||||
key: "kfp",
|
||||
label: "Key Figures",
|
||||
roles: ["admin", "systemAdmin"],
|
||||
content: <KFP />,
|
||||
},
|
||||
{
|
||||
key: "fg",
|
||||
label: "Finished Goods",
|
||||
roles: ["admin", "systemAdmin"],
|
||||
content: <DummyContent />,
|
||||
},
|
||||
{
|
||||
key: "mm",
|
||||
label: "Main Material",
|
||||
roles: ["admin", "systemAdmin"],
|
||||
content: <DummyContent />,
|
||||
},
|
||||
{
|
||||
key: "mb",
|
||||
label: "Master Batch",
|
||||
roles: ["admin", "systemAdmin"],
|
||||
content: <DummyContent />,
|
||||
},
|
||||
{
|
||||
key: "ab",
|
||||
label: "Additive",
|
||||
roles: ["admin", "systemAdmin"],
|
||||
content: <DummyContent />,
|
||||
},
|
||||
{
|
||||
key: "pp",
|
||||
label: "Purchased Preforms",
|
||||
roles: ["admin", "systemAdmin"],
|
||||
content: <DummyContent />,
|
||||
},
|
||||
{
|
||||
key: "pre",
|
||||
label: "Preforms",
|
||||
roles: ["admin", "systemAdmin"],
|
||||
content: <DummyContent />,
|
||||
},
|
||||
{
|
||||
key: "pkg",
|
||||
label: "Packaging",
|
||||
roles: ["admin", "systemAdmin"],
|
||||
content: <DummyContent />,
|
||||
},
|
||||
{
|
||||
key: "ui",
|
||||
label: "Undefined Items",
|
||||
roles: ["admin"],
|
||||
content: <DummyContent />,
|
||||
},
|
||||
];
|
||||
return (
|
||||
<div className="m-2 w-screen">
|
||||
<div className="mb-2 flex flex-row">
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant={"outline"}
|
||||
className={cn(
|
||||
"w-[280px] justify-start text-left font-normal",
|
||||
!date && "text-muted-foreground"
|
||||
)}
|
||||
>
|
||||
<CalendarIcon className="mr-2 h-4 w-4" />
|
||||
{date ? (
|
||||
format(date, "PPP")
|
||||
) : (
|
||||
<span>Pick a date</span>
|
||||
)}
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-auto p-0">
|
||||
<Calendar
|
||||
mode="single"
|
||||
selected={date}
|
||||
onSelect={setDate}
|
||||
initialFocus
|
||||
/>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
<div className="ml-2">
|
||||
<Button
|
||||
onClick={() =>
|
||||
toast.success(
|
||||
`Getting data for ${startOfMonth(date!)}-${date}`
|
||||
)
|
||||
}
|
||||
>
|
||||
<span className="text-sm">Update Data</span>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Tabs defaultValue="mm">
|
||||
<TabsList>
|
||||
{tabs.map((tab) => {
|
||||
if (tab.roles.includes(role[0].role))
|
||||
return (
|
||||
<TabsTrigger value={tab.key}>
|
||||
{tab.label}
|
||||
</TabsTrigger>
|
||||
);
|
||||
})}
|
||||
</TabsList>
|
||||
{tabs.map((tab) => {
|
||||
if (tab.roles.includes(role[0].role))
|
||||
return (
|
||||
<TabsContent value={tab.key}>
|
||||
{tab.content}
|
||||
</TabsContent>
|
||||
);
|
||||
})}
|
||||
</Tabs>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function DummyContent() {
|
||||
return (
|
||||
<LstCard className="w-5/6">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Av</TableHead>
|
||||
<TableHead>Description</TableHead>
|
||||
<TableHead>Material Type</TableHead>
|
||||
<TableHead>Waste</TableHead>
|
||||
<TableHead>Loss / Gain $$</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
|
||||
<TableBody>
|
||||
{Array(10)
|
||||
.fill(0)
|
||||
.map((_, i) => (
|
||||
<TableRow key={i}>
|
||||
<TableCell className="font-medium m-2">
|
||||
<Link
|
||||
to="/article/$av"
|
||||
params={{ av: `${i}` }}
|
||||
>
|
||||
{i}
|
||||
</Link>
|
||||
</TableCell>
|
||||
<TableCell className="font-medium">
|
||||
<Skeleton className="h-4" />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton className="h-4" />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton className="h-4" />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton className="h-4" />
|
||||
</TableCell>
|
||||
{/* <TableCell>
|
||||
<Skeleton className="h-4" />
|
||||
</TableCell> */}
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</LstCard>
|
||||
);
|
||||
}
|
||||
23
lstV2/frontend/src/components/extendedUI/LstCard.tsx
Normal file
23
lstV2/frontend/src/components/extendedUI/LstCard.tsx
Normal file
@@ -0,0 +1,23 @@
|
||||
import { ReactNode } from "react";
|
||||
import { Card } from "../ui/card";
|
||||
|
||||
interface LstCardProps {
|
||||
children?: ReactNode;
|
||||
className?: string;
|
||||
style?: React.CSSProperties;
|
||||
}
|
||||
|
||||
export function LstCard({
|
||||
children,
|
||||
className = "",
|
||||
style = {},
|
||||
}: LstCardProps) {
|
||||
return (
|
||||
<Card
|
||||
className={`border-solid border-1 border-[#00659c] ${className}`}
|
||||
style={style}
|
||||
>
|
||||
{children}
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
61
lstV2/frontend/src/components/layout/lst-sidebar.tsx
Normal file
61
lstV2/frontend/src/components/layout/lst-sidebar.tsx
Normal file
@@ -0,0 +1,61 @@
|
||||
import {
|
||||
Sidebar,
|
||||
SidebarContent,
|
||||
SidebarFooter,
|
||||
SidebarTrigger,
|
||||
} from "../ui/sidebar";
|
||||
import { ProductionSideBar } from "./side-components/production";
|
||||
import { Header } from "./side-components/header";
|
||||
import { LogisticsSideBar } from "./side-components/logistics";
|
||||
import { QualitySideBar } from "./side-components/quality";
|
||||
import { ForkliftSideBar } from "./side-components/forklift";
|
||||
import { EomSideBar } from "./side-components/eom";
|
||||
import { AdminSideBar } from "./side-components/admin";
|
||||
import { useSessionStore } from "../../lib/store/sessionStore";
|
||||
import { hasAccess } from "../../utils/userAccess";
|
||||
import { moduleActive } from "../../utils/moduleActive";
|
||||
import { useModuleStore } from "../../lib/store/useModuleStore";
|
||||
|
||||
export function AppSidebar() {
|
||||
const { user } = useSessionStore();
|
||||
const { modules } = useModuleStore();
|
||||
|
||||
return (
|
||||
<Sidebar collapsible="icon">
|
||||
<SidebarContent>
|
||||
<Header />
|
||||
{moduleActive("production") && (
|
||||
<ProductionSideBar
|
||||
user={user}
|
||||
moduleID={
|
||||
modules.filter((n) => n.name === "production")[0]
|
||||
.module_id as string
|
||||
}
|
||||
/>
|
||||
)}
|
||||
{moduleActive("logistics") && (
|
||||
<LogisticsSideBar
|
||||
user={user}
|
||||
moduleID={
|
||||
modules.filter((n) => n.name === "logistics")[0]
|
||||
.module_id as string
|
||||
}
|
||||
/>
|
||||
)}
|
||||
{moduleActive("forklift") &&
|
||||
hasAccess(user, "forklift", modules) && <ForkliftSideBar />}
|
||||
{moduleActive("eom") && hasAccess(user, "eom", modules) && (
|
||||
<EomSideBar />
|
||||
)}
|
||||
{moduleActive("quality") &&
|
||||
hasAccess(user, "quality", modules) && <QualitySideBar />}
|
||||
{moduleActive("admin") && hasAccess(user, "admin", modules) && (
|
||||
<AdminSideBar />
|
||||
)}
|
||||
</SidebarContent>
|
||||
<SidebarFooter>
|
||||
<SidebarTrigger />
|
||||
</SidebarFooter>
|
||||
</Sidebar>
|
||||
);
|
||||
}
|
||||
26
lstV2/frontend/src/components/layout/mode-toggle.tsx
Normal file
26
lstV2/frontend/src/components/layout/mode-toggle.tsx
Normal file
@@ -0,0 +1,26 @@
|
||||
import {Moon, Sun} from "lucide-react";
|
||||
|
||||
import {Button} from "../ui/button";
|
||||
import {DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger} from "../ui/dropdown-menu";
|
||||
import {useTheme} from "../layout/theme-provider";
|
||||
|
||||
export function ModeToggle() {
|
||||
const {setTheme} = useTheme();
|
||||
|
||||
return (
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="outline" size="icon">
|
||||
<Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
|
||||
<Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
|
||||
<span className="sr-only">Toggle theme</span>
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem onClick={() => setTheme("light")}>Light</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={() => setTheme("dark")}>Dark</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={() => setTheme("system")}>System</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
);
|
||||
}
|
||||
212
lstV2/frontend/src/components/layout/side-components/admin.tsx
Normal file
212
lstV2/frontend/src/components/layout/side-components/admin.tsx
Normal file
@@ -0,0 +1,212 @@
|
||||
import {
|
||||
AlignJustify,
|
||||
Atom,
|
||||
Logs,
|
||||
Minus,
|
||||
Plus,
|
||||
Server,
|
||||
Settings,
|
||||
ShieldCheck,
|
||||
Users,
|
||||
Webhook,
|
||||
} from "lucide-react";
|
||||
import {
|
||||
SidebarGroup,
|
||||
SidebarGroupContent,
|
||||
SidebarGroupLabel,
|
||||
SidebarMenu,
|
||||
SidebarMenuButton,
|
||||
SidebarMenuItem,
|
||||
SidebarMenuSub,
|
||||
SidebarMenuSubButton,
|
||||
SidebarMenuSubItem,
|
||||
} from "../../ui/sidebar";
|
||||
import {
|
||||
Collapsible,
|
||||
CollapsibleContent,
|
||||
CollapsibleTrigger,
|
||||
} from "../../ui/collapsible";
|
||||
import { useSubModuleStore } from "@/lib/store/useSubModuleStore";
|
||||
import { useSettingStore } from "@/lib/store/useSettings";
|
||||
|
||||
const iconMap: any = {
|
||||
ShieldCheck: ShieldCheck,
|
||||
AlignJustify: AlignJustify,
|
||||
Settings: Settings,
|
||||
Atom: Atom,
|
||||
Logs: Logs,
|
||||
Users: Users,
|
||||
Webhook: Webhook,
|
||||
Server: Server,
|
||||
};
|
||||
|
||||
export function AdminSideBar() {
|
||||
const { subModules } = useSubModuleStore();
|
||||
const { settings } = useSettingStore();
|
||||
|
||||
const plantToken = settings.filter((n) => n.name === "plantToken");
|
||||
|
||||
const items = subModules.filter((m) => m.moduleName === "admin");
|
||||
return (
|
||||
<SidebarGroup>
|
||||
<SidebarGroupLabel>Admin section</SidebarGroupLabel>
|
||||
<SidebarGroupContent>
|
||||
{items.map((item: any, index) => {
|
||||
const Icon = iconMap[item.icon] || AlignJustify;
|
||||
// drop down menu setup
|
||||
return (
|
||||
<SidebarMenu key={item.name}>
|
||||
{item.link === "#" ? (
|
||||
<Collapsible
|
||||
key={item.name}
|
||||
defaultOpen={index === 1}
|
||||
className="group/collapsible"
|
||||
>
|
||||
<SidebarMenuItem>
|
||||
<CollapsibleTrigger asChild>
|
||||
<SidebarMenuButton>
|
||||
<Icon />
|
||||
{item.name}{" "}
|
||||
<Plus className="ml-auto group-data-[state=open]/collapsible:hidden" />
|
||||
<Minus className="ml-auto group-data-[state=closed]/collapsible:hidden" />
|
||||
</SidebarMenuButton>
|
||||
</CollapsibleTrigger>
|
||||
{item.subSubModule?.length > 0 ? (
|
||||
<CollapsibleContent>
|
||||
<SidebarMenuSub>
|
||||
{item.subSubModule.map(
|
||||
(i: any) => {
|
||||
const SubIcon =
|
||||
iconMap[
|
||||
i.icon
|
||||
] ||
|
||||
AlignJustify;
|
||||
return (
|
||||
<SidebarMenuSubItem
|
||||
key={i.name}
|
||||
>
|
||||
{i.isActive && (
|
||||
<SidebarMenuSubButton
|
||||
asChild
|
||||
>
|
||||
<a
|
||||
href={
|
||||
i.name ===
|
||||
"Swagger"
|
||||
? `https://${plantToken[0].value}prod.alpla.net/application/swagger/index.html`
|
||||
: i.link
|
||||
}
|
||||
target={
|
||||
i.newWindow
|
||||
? "_blank"
|
||||
: "_self"
|
||||
}
|
||||
>
|
||||
<SubIcon />
|
||||
<span>
|
||||
{
|
||||
i.name
|
||||
}
|
||||
</span>
|
||||
</a>
|
||||
</SidebarMenuSubButton>
|
||||
)}
|
||||
</SidebarMenuSubItem>
|
||||
);
|
||||
}
|
||||
)}
|
||||
</SidebarMenuSub>
|
||||
</CollapsibleContent>
|
||||
) : null}
|
||||
</SidebarMenuItem>
|
||||
</Collapsible>
|
||||
) : (
|
||||
<SidebarMenu>
|
||||
{items.map((item) => {
|
||||
if (item.link === "#") return;
|
||||
return (
|
||||
<SidebarMenuItem key={item.name}>
|
||||
<SidebarMenuButton asChild>
|
||||
<a href={item.link}>
|
||||
<Icon />
|
||||
<span>{item.name}</span>
|
||||
</a>
|
||||
</SidebarMenuButton>
|
||||
</SidebarMenuItem>
|
||||
);
|
||||
})}
|
||||
</SidebarMenu>
|
||||
)}
|
||||
</SidebarMenu>
|
||||
);
|
||||
})}
|
||||
</SidebarGroupContent>
|
||||
</SidebarGroup>
|
||||
);
|
||||
}
|
||||
|
||||
{
|
||||
/* <SidebarMenu>
|
||||
{data.navMain.map((item, index) => (
|
||||
<Collapsible
|
||||
key={item.title}
|
||||
defaultOpen={index === 1}
|
||||
className="group/collapsible"
|
||||
>
|
||||
<SidebarMenuItem>
|
||||
<CollapsibleTrigger asChild>
|
||||
<SidebarMenuButton>
|
||||
<item.icon />
|
||||
{item.title}{" "}
|
||||
<Plus className="ml-auto group-data-[state=open]/collapsible:hidden" />
|
||||
<Minus className="ml-auto group-data-[state=closed]/collapsible:hidden" />
|
||||
</SidebarMenuButton>
|
||||
</CollapsibleTrigger>
|
||||
{item.items?.length ? (
|
||||
<CollapsibleContent>
|
||||
<SidebarMenuSub>
|
||||
{item.items.map((item) => (
|
||||
<SidebarMenuSubItem
|
||||
key={item.title}
|
||||
>
|
||||
{item.isActive && (
|
||||
<SidebarMenuSubButton
|
||||
asChild
|
||||
>
|
||||
<a
|
||||
href={item.url}
|
||||
target={
|
||||
item.newWindow
|
||||
? "_blank"
|
||||
: "_self"
|
||||
}
|
||||
>
|
||||
<item.icon />
|
||||
<span>
|
||||
{item.title}
|
||||
</span>
|
||||
</a>
|
||||
</SidebarMenuSubButton>
|
||||
)}
|
||||
</SidebarMenuSubItem>
|
||||
))}
|
||||
</SidebarMenuSub>
|
||||
</CollapsibleContent>
|
||||
) : null}
|
||||
</SidebarMenuItem>
|
||||
</Collapsible>
|
||||
))}
|
||||
</SidebarMenu>
|
||||
<SidebarMenu>
|
||||
{items.map((item) => (
|
||||
<SidebarMenuItem key={item.title}>
|
||||
<SidebarMenuButton asChild>
|
||||
<a href={item.url}>
|
||||
<item.icon />
|
||||
<span>{item.title}</span>
|
||||
</a>
|
||||
</SidebarMenuButton>
|
||||
</SidebarMenuItem>
|
||||
))}
|
||||
</SidebarMenu> */
|
||||
}
|
||||
39
lstV2/frontend/src/components/layout/side-components/eom.tsx
Normal file
39
lstV2/frontend/src/components/layout/side-components/eom.tsx
Normal file
@@ -0,0 +1,39 @@
|
||||
import {FileText} from "lucide-react";
|
||||
import {
|
||||
SidebarGroup,
|
||||
SidebarGroupContent,
|
||||
SidebarGroupLabel,
|
||||
SidebarMenu,
|
||||
SidebarMenuButton,
|
||||
SidebarMenuItem,
|
||||
} from "../../ui/sidebar";
|
||||
|
||||
const items = [
|
||||
{
|
||||
title: "End Of Month",
|
||||
url: "/eom",
|
||||
icon: FileText,
|
||||
},
|
||||
];
|
||||
|
||||
export function EomSideBar() {
|
||||
return (
|
||||
<SidebarGroup>
|
||||
<SidebarGroupLabel>End of month</SidebarGroupLabel>
|
||||
<SidebarGroupContent>
|
||||
<SidebarMenu>
|
||||
{items.map((item) => (
|
||||
<SidebarMenuItem key={item.title}>
|
||||
<SidebarMenuButton asChild>
|
||||
<a href={item.url}>
|
||||
<item.icon />
|
||||
<span>{item.title}</span>
|
||||
</a>
|
||||
</SidebarMenuButton>
|
||||
</SidebarMenuItem>
|
||||
))}
|
||||
</SidebarMenu>
|
||||
</SidebarGroupContent>
|
||||
</SidebarGroup>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,106 @@
|
||||
import {Forklift, Hourglass, Minus, Plus, Signature} from "lucide-react";
|
||||
import {
|
||||
SidebarGroup,
|
||||
SidebarGroupContent,
|
||||
SidebarGroupLabel,
|
||||
SidebarMenu,
|
||||
SidebarMenuButton,
|
||||
SidebarMenuItem,
|
||||
SidebarMenuSub,
|
||||
SidebarMenuSubButton,
|
||||
SidebarMenuSubItem,
|
||||
} from "../../ui/sidebar";
|
||||
import {Collapsible, CollapsibleTrigger} from "../../ui/collapsible";
|
||||
import {CollapsibleContent} from "@radix-ui/react-collapsible";
|
||||
|
||||
const items = [
|
||||
{
|
||||
title: "Gemone",
|
||||
url: "#",
|
||||
icon: Forklift,
|
||||
isActive: false,
|
||||
},
|
||||
];
|
||||
|
||||
const data = {
|
||||
navMain: [
|
||||
{
|
||||
title: "Forklift Management",
|
||||
url: "#",
|
||||
icon: Forklift,
|
||||
items: [
|
||||
{
|
||||
title: "All Forklifts",
|
||||
url: "#",
|
||||
icon: Forklift,
|
||||
},
|
||||
{
|
||||
title: "Leasing data",
|
||||
url: "#",
|
||||
isActive: false,
|
||||
icon: Signature,
|
||||
},
|
||||
{
|
||||
title: "Forklift Hours",
|
||||
url: "#",
|
||||
isActive: false,
|
||||
icon: Hourglass,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
export function ForkliftSideBar() {
|
||||
return (
|
||||
<SidebarGroup>
|
||||
<SidebarGroupLabel>Forklift Section</SidebarGroupLabel>
|
||||
<SidebarGroupContent>
|
||||
<SidebarMenu>
|
||||
{data.navMain.map((item, index) => (
|
||||
<Collapsible key={item.title} defaultOpen={index === 1} className="group/collapsible">
|
||||
<SidebarMenuItem>
|
||||
<CollapsibleTrigger asChild>
|
||||
<SidebarMenuButton>
|
||||
<item.icon />
|
||||
{item.title}{" "}
|
||||
<Plus className="ml-auto group-data-[state=open]/collapsible:hidden" />
|
||||
<Minus className="ml-auto group-data-[state=closed]/collapsible:hidden" />
|
||||
</SidebarMenuButton>
|
||||
</CollapsibleTrigger>
|
||||
{item.items?.length ? (
|
||||
<CollapsibleContent>
|
||||
<SidebarMenuSub>
|
||||
{item.items.map((item) => (
|
||||
<SidebarMenuSubItem key={item.title}>
|
||||
<SidebarMenuSubButton asChild isActive={item.isActive}>
|
||||
<a href={item.url}>
|
||||
<item.icon />
|
||||
<span>{item.title}</span>
|
||||
</a>
|
||||
</SidebarMenuSubButton>
|
||||
</SidebarMenuSubItem>
|
||||
))}
|
||||
</SidebarMenuSub>
|
||||
</CollapsibleContent>
|
||||
) : null}
|
||||
</SidebarMenuItem>
|
||||
</Collapsible>
|
||||
))}
|
||||
</SidebarMenu>
|
||||
<SidebarMenu>
|
||||
{items.map((item) => (
|
||||
<SidebarMenuItem key={item.title}>
|
||||
<SidebarMenuButton asChild>
|
||||
<a href={item.url}>
|
||||
<item.icon />
|
||||
<span>{item.title}</span>
|
||||
</a>
|
||||
</SidebarMenuButton>
|
||||
</SidebarMenuItem>
|
||||
))}
|
||||
</SidebarMenu>
|
||||
</SidebarGroupContent>
|
||||
</SidebarGroup>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
import { Link } from "@tanstack/react-router";
|
||||
import {
|
||||
SidebarHeader,
|
||||
SidebarMenu,
|
||||
SidebarMenuButton,
|
||||
SidebarMenuItem,
|
||||
} from "../../ui/sidebar";
|
||||
|
||||
export function Header() {
|
||||
return (
|
||||
<SidebarHeader>
|
||||
<SidebarMenu>
|
||||
<SidebarMenuItem>
|
||||
<Link to="/">
|
||||
<SidebarMenuButton size="lg" asChild>
|
||||
<div className="flex flex-row">
|
||||
<img
|
||||
src={"imgs/dkLst.png"}
|
||||
alt="Description"
|
||||
className="size-8"
|
||||
/>
|
||||
|
||||
<div className="flex flex-col gap-0.5 leading-none">
|
||||
<span className="font-semibold">
|
||||
Logistics Support Tool
|
||||
</span>
|
||||
<span className="">v2.0.0</span>
|
||||
</div>
|
||||
</div>
|
||||
</SidebarMenuButton>
|
||||
</Link>
|
||||
</SidebarMenuItem>
|
||||
</SidebarMenu>
|
||||
</SidebarHeader>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,64 @@
|
||||
import { Barcode, Cylinder, Package, Truck, Command } from "lucide-react";
|
||||
import {
|
||||
SidebarGroup,
|
||||
SidebarGroupContent,
|
||||
SidebarGroupLabel,
|
||||
SidebarMenu,
|
||||
SidebarMenuButton,
|
||||
SidebarMenuItem,
|
||||
} from "../../ui/sidebar";
|
||||
import { hasPageAccess } from "@/utils/userAccess";
|
||||
import { User } from "@/types/users";
|
||||
import { useSubModuleStore } from "@/lib/store/useSubModuleStore";
|
||||
|
||||
const iconMap: any = {
|
||||
Package: Package,
|
||||
Truck: Truck,
|
||||
Cylinder: Cylinder,
|
||||
Barcode: Barcode,
|
||||
Command: Command,
|
||||
};
|
||||
|
||||
export function LogisticsSideBar({
|
||||
user,
|
||||
moduleID,
|
||||
}: {
|
||||
user: User | null;
|
||||
moduleID: string;
|
||||
}) {
|
||||
const { subModules } = useSubModuleStore();
|
||||
|
||||
const items = subModules.filter((m) => m.moduleName === "logistics");
|
||||
|
||||
return (
|
||||
<SidebarGroup>
|
||||
<SidebarGroupLabel>Logistics</SidebarGroupLabel>
|
||||
<SidebarGroupContent>
|
||||
<SidebarMenu>
|
||||
{items.map((item) => {
|
||||
const Icon = iconMap[item.icon];
|
||||
return (
|
||||
<SidebarMenuItem key={item.submodule_id}>
|
||||
<>
|
||||
{hasPageAccess(
|
||||
user,
|
||||
item.roles,
|
||||
moduleID
|
||||
) &&
|
||||
item.active && (
|
||||
<SidebarMenuButton asChild>
|
||||
<a href={item.link}>
|
||||
<Icon />
|
||||
<span>{item.name}</span>
|
||||
</a>
|
||||
</SidebarMenuButton>
|
||||
)}
|
||||
</>
|
||||
</SidebarMenuItem>
|
||||
);
|
||||
})}
|
||||
</SidebarMenu>
|
||||
</SidebarGroupContent>
|
||||
</SidebarGroup>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,64 @@
|
||||
import { Printer, Tag } from "lucide-react";
|
||||
import {
|
||||
SidebarGroup,
|
||||
SidebarGroupContent,
|
||||
SidebarGroupLabel,
|
||||
SidebarMenu,
|
||||
SidebarMenuButton,
|
||||
SidebarMenuItem,
|
||||
} from "../../ui/sidebar";
|
||||
import { hasPageAccess } from "@/utils/userAccess";
|
||||
import { User } from "@/types/users";
|
||||
|
||||
export function ProductionSideBar({
|
||||
user,
|
||||
moduleID,
|
||||
}: {
|
||||
user: User | null;
|
||||
moduleID: string;
|
||||
}) {
|
||||
const url: string = window.location.host.split(":")[0];
|
||||
const items = [
|
||||
{
|
||||
title: "One Click Print",
|
||||
url: "/ocp",
|
||||
icon: Printer,
|
||||
role: ["viewer"],
|
||||
module: "ocp",
|
||||
active: true,
|
||||
},
|
||||
{
|
||||
title: "Rfid Readers",
|
||||
url: "/rfid",
|
||||
icon: Tag,
|
||||
role: ["viewer"],
|
||||
module: "production",
|
||||
active:
|
||||
url === "usday1vms006" || url === "localhost" ? true : false,
|
||||
},
|
||||
];
|
||||
return (
|
||||
<SidebarGroup>
|
||||
<SidebarGroupLabel>Production</SidebarGroupLabel>
|
||||
<SidebarGroupContent>
|
||||
<SidebarMenu>
|
||||
{items.map((item) => (
|
||||
<SidebarMenuItem key={item.title}>
|
||||
<>
|
||||
{hasPageAccess(user, item.role, moduleID) &&
|
||||
item.active && (
|
||||
<SidebarMenuButton asChild>
|
||||
<a href={item.url}>
|
||||
<item.icon />
|
||||
<span>{item.title}</span>
|
||||
</a>
|
||||
</SidebarMenuButton>
|
||||
)}
|
||||
</>
|
||||
</SidebarMenuItem>
|
||||
))}
|
||||
</SidebarMenu>
|
||||
</SidebarGroupContent>
|
||||
</SidebarGroup>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
import {Printer} from "lucide-react";
|
||||
import {
|
||||
SidebarGroup,
|
||||
SidebarGroupContent,
|
||||
SidebarGroupLabel,
|
||||
SidebarMenu,
|
||||
SidebarMenuButton,
|
||||
SidebarMenuItem,
|
||||
} from "../../ui/sidebar";
|
||||
|
||||
const items = [
|
||||
{
|
||||
title: "Qaulity Request",
|
||||
url: "#",
|
||||
icon: Printer,
|
||||
},
|
||||
];
|
||||
|
||||
export function QualitySideBar() {
|
||||
return (
|
||||
<SidebarGroup>
|
||||
<SidebarGroupLabel>Quality</SidebarGroupLabel>
|
||||
<SidebarGroupContent>
|
||||
<SidebarMenu>
|
||||
{items.map((item) => (
|
||||
<SidebarMenuItem key={item.title}>
|
||||
<SidebarMenuButton asChild>
|
||||
<a href={item.url}>
|
||||
<item.icon />
|
||||
<span>{item.title}</span>
|
||||
</a>
|
||||
</SidebarMenuButton>
|
||||
</SidebarMenuItem>
|
||||
))}
|
||||
</SidebarMenu>
|
||||
</SidebarGroupContent>
|
||||
</SidebarGroup>
|
||||
);
|
||||
}
|
||||
67
lstV2/frontend/src/components/layout/theme-provider.tsx
Normal file
67
lstV2/frontend/src/components/layout/theme-provider.tsx
Normal file
@@ -0,0 +1,67 @@
|
||||
import {createContext, useContext, useEffect, useState} from "react";
|
||||
|
||||
type Theme = "dark" | "light" | "system";
|
||||
|
||||
type ThemeProviderProps = {
|
||||
children: React.ReactNode;
|
||||
defaultTheme?: Theme;
|
||||
storageKey?: string;
|
||||
};
|
||||
|
||||
type ThemeProviderState = {
|
||||
theme: Theme;
|
||||
setTheme: (theme: Theme) => void;
|
||||
};
|
||||
|
||||
const initialState: ThemeProviderState = {
|
||||
theme: "system",
|
||||
setTheme: () => null,
|
||||
};
|
||||
|
||||
const ThemeProviderContext = createContext<ThemeProviderState>(initialState);
|
||||
|
||||
export function ThemeProvider({
|
||||
children,
|
||||
defaultTheme = "system",
|
||||
storageKey = "vite-ui-theme",
|
||||
...props
|
||||
}: ThemeProviderProps) {
|
||||
const [theme, setTheme] = useState<Theme>(() => (localStorage.getItem(storageKey) as Theme) || defaultTheme);
|
||||
|
||||
useEffect(() => {
|
||||
const root = window.document.documentElement;
|
||||
|
||||
root.classList.remove("light", "dark");
|
||||
|
||||
if (theme === "system") {
|
||||
const systemTheme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
|
||||
|
||||
root.classList.add(systemTheme);
|
||||
return;
|
||||
}
|
||||
|
||||
root.classList.add(theme);
|
||||
}, [theme]);
|
||||
|
||||
const value = {
|
||||
theme,
|
||||
setTheme: (theme: Theme) => {
|
||||
localStorage.setItem(storageKey, theme);
|
||||
setTheme(theme);
|
||||
},
|
||||
};
|
||||
|
||||
return (
|
||||
<ThemeProviderContext.Provider {...props} value={value}>
|
||||
{children}
|
||||
</ThemeProviderContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
export const useTheme = () => {
|
||||
const context = useContext(ThemeProviderContext);
|
||||
|
||||
if (context === undefined) throw new Error("useTheme must be used within a ThemeProvider");
|
||||
|
||||
return context;
|
||||
};
|
||||
@@ -0,0 +1,165 @@
|
||||
import { LstCard } from "@/components/extendedUI/LstCard";
|
||||
import { CardContent, CardFooter, CardHeader } from "@/components/ui/card";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import { Collapsible, CollapsibleContent } from "@/components/ui/collapsible";
|
||||
import { getLanes } from "@/utils/querys/logistics/getWarehouseLanes";
|
||||
import { CollapsibleTrigger } from "@radix-ui/react-collapsible";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { useState } from "react";
|
||||
import Barcode from "react-barcode";
|
||||
import { BarcodePDFExport } from "./BarcodeExport";
|
||||
import { BulkBarcodePDFExport } from "./BulkExport";
|
||||
import CommonCommands from "./CommonCommands";
|
||||
|
||||
export default function BGPage() {
|
||||
const { data, isError, isLoading } = useQuery(getLanes());
|
||||
const [checked, setChecked] = useState([]);
|
||||
|
||||
if (isLoading) return <div>Loading Data</div>;
|
||||
|
||||
if (isError)
|
||||
return <div>There was an error getting the warehouse lane data.</div>;
|
||||
|
||||
/**
|
||||
* get the warehouse names only
|
||||
*/
|
||||
|
||||
const warhouses = new Map();
|
||||
|
||||
data?.forEach((item: any) => {
|
||||
// if the warhouse is not already included add it to the map
|
||||
if (!warhouses.has(item.warehouseId)) {
|
||||
warhouses.set(item.warehouseId, item.warehouseDescription);
|
||||
}
|
||||
});
|
||||
|
||||
// convert the map to an array
|
||||
const warehouseArray = Array.from(warhouses).map(([wid, wname]) => ({
|
||||
warehouseId: wid,
|
||||
warehouseDescription: wname,
|
||||
}));
|
||||
|
||||
//console.log(warehouseArray);
|
||||
|
||||
// handle the onchange
|
||||
const changeBox = (d: any) => {
|
||||
setChecked((prev: any) => {
|
||||
if (prev.includes(d)) {
|
||||
return prev.filter((name: any) => name !== d);
|
||||
} else {
|
||||
return [...prev, d];
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-row m-2">
|
||||
<div className="flex flex-row">
|
||||
<div className="m-2">
|
||||
<LstCard>
|
||||
<CardHeader>Warehouse Barcodes</CardHeader>
|
||||
<CardContent>
|
||||
{warehouseArray.map((i: any) => {
|
||||
const lanes = data?.filter(
|
||||
(wid: any) =>
|
||||
wid.warehouseId === i.warehouseId
|
||||
);
|
||||
return (
|
||||
<div className="m-2" key={i.warehouseId}>
|
||||
<Collapsible>
|
||||
<CollapsibleTrigger>
|
||||
{i.warehouseDescription}
|
||||
</CollapsibleTrigger>
|
||||
<CollapsibleContent>
|
||||
<div className="ml-2">
|
||||
{lanes?.map((l: any) => {
|
||||
return (
|
||||
<div key={l.laneId}>
|
||||
<Checkbox
|
||||
id={
|
||||
l.laneId
|
||||
}
|
||||
// checked={checked.includes(
|
||||
// l
|
||||
// )}
|
||||
onCheckedChange={() =>
|
||||
changeBox(
|
||||
l
|
||||
)
|
||||
}
|
||||
/>
|
||||
<label
|
||||
id={
|
||||
l.laneId
|
||||
}
|
||||
className="ml-2"
|
||||
>
|
||||
{
|
||||
l.laneDescription
|
||||
}
|
||||
</label>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</CollapsibleContent>
|
||||
</Collapsible>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</CardContent>
|
||||
</LstCard>
|
||||
</div>
|
||||
{checked.length > 0 && (
|
||||
<div className="m-2">
|
||||
<LstCard>
|
||||
<CardHeader>Current selected lanes</CardHeader>
|
||||
<CardContent>
|
||||
{checked.map((c: any) => {
|
||||
return (
|
||||
<div
|
||||
className="flex justify-center"
|
||||
key={`${c.warehouseId}-${c.laneId}`}
|
||||
>
|
||||
<div>
|
||||
<Barcode
|
||||
value={`loc#${c.warehouseId}#${c.laneId}`}
|
||||
width={2}
|
||||
height={50}
|
||||
displayValue={false}
|
||||
/>
|
||||
<p className="flex justify-center">
|
||||
Lane: {c.laneDescription}
|
||||
</p>
|
||||
</div>
|
||||
<div className="ml-2 mt-4">
|
||||
<BarcodePDFExport
|
||||
barcodeValue={`loc#${c.warehouseId}#${c.laneId}`}
|
||||
data={c}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</CardContent>
|
||||
<CardFooter>
|
||||
<div className="flex justify-end">
|
||||
{checked.length > 1 && (
|
||||
<div>
|
||||
<BulkBarcodePDFExport
|
||||
data={checked}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</CardFooter>
|
||||
</LstCard>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="m-2">
|
||||
<CommonCommands />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,100 @@
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
pdf,
|
||||
Page,
|
||||
Text,
|
||||
View,
|
||||
Document,
|
||||
StyleSheet,
|
||||
Image,
|
||||
} from "@react-pdf/renderer";
|
||||
import JsBarcode from "jsbarcode";
|
||||
|
||||
export const BarcodePDFExport = ({
|
||||
barcodeValue,
|
||||
data,
|
||||
}: {
|
||||
barcodeValue: any;
|
||||
data: any;
|
||||
}) => {
|
||||
const generatePDF = () => {
|
||||
//const barcodeValue = data; // Barcode value
|
||||
const canvas = document.createElement("canvas");
|
||||
|
||||
// Generate barcode on the canvas
|
||||
JsBarcode(canvas, barcodeValue, {
|
||||
format: "CODE128",
|
||||
displayValue: false,
|
||||
});
|
||||
|
||||
// Convert canvas to base64 image data
|
||||
const barcodeImage = canvas.toDataURL("image/png");
|
||||
|
||||
// Define the document styles using @react-pdf/renderer
|
||||
const styles = StyleSheet.create({
|
||||
page: {
|
||||
padding: 30,
|
||||
},
|
||||
centerContent: {
|
||||
display: "flex",
|
||||
justifyContent: "center", // Center horizontally
|
||||
alignItems: "center", // Center vertically
|
||||
flexDirection: "column", // Stack items (barcode and description) vertically
|
||||
height: "75%", // Ensure the container takes full page height
|
||||
textAlign: "center",
|
||||
},
|
||||
section: {
|
||||
marginBottom: 10,
|
||||
textAlign: "center",
|
||||
},
|
||||
barcode: {
|
||||
width: 800, // Width of the barcode
|
||||
height: 200, // Height of the barcode
|
||||
marginBottom: 10,
|
||||
},
|
||||
description: {
|
||||
fontSize: 28,
|
||||
fontWeight: "bold",
|
||||
marginTop: 10,
|
||||
marginBottom: 20, // Ensure there's space below the text
|
||||
},
|
||||
});
|
||||
|
||||
// Create the document
|
||||
const MyDocument = (
|
||||
<Document>
|
||||
<Page style={styles.page} orientation="landscape" size="A4">
|
||||
<View style={styles.centerContent}>
|
||||
<View style={styles.section}>
|
||||
<Image src={barcodeImage} style={styles.barcode} />
|
||||
</View>
|
||||
|
||||
<View style={styles.section}>
|
||||
<Text style={styles.description}>
|
||||
Lane: {data.laneDescription}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
</Page>
|
||||
</Document>
|
||||
);
|
||||
|
||||
// Generate the PDF and trigger download
|
||||
pdf(MyDocument)
|
||||
.toBlob()
|
||||
.then((blob) => {
|
||||
const link = document.createElement("a");
|
||||
link.href = URL.createObjectURL(blob);
|
||||
link.download = `${data.warehouseDescription}-${data.laneDescription}.pdf`;
|
||||
link.click();
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Button onClick={() => generatePDF()} color="primary">
|
||||
Export
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,127 @@
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
pdf,
|
||||
Page,
|
||||
Text,
|
||||
View,
|
||||
Document,
|
||||
StyleSheet,
|
||||
Image,
|
||||
} from "@react-pdf/renderer";
|
||||
import JsBarcode from "jsbarcode";
|
||||
|
||||
export const BulkBarcodePDFExport = ({ data }: { data: any }) => {
|
||||
const createBarcode = (barcodeValue: any) => {
|
||||
//const barcodeValue = data; // Barcode value
|
||||
const canvas = document.createElement("canvas");
|
||||
|
||||
// Generate barcode on the canvas
|
||||
JsBarcode(canvas, barcodeValue, {
|
||||
format: "CODE128",
|
||||
displayValue: false,
|
||||
});
|
||||
|
||||
// Convert canvas to base64 image data
|
||||
const barcodeImage = canvas.toDataURL("image/png");
|
||||
|
||||
return barcodeImage;
|
||||
};
|
||||
const generatePDF = () => {
|
||||
// Define the document styles using @react-pdf/renderer
|
||||
const styles = StyleSheet.create({
|
||||
page: {
|
||||
padding: 30,
|
||||
},
|
||||
centerContent: {
|
||||
display: "flex",
|
||||
justifyContent: "flex-start", // Center horizontally
|
||||
alignItems: "center", // Center vertically
|
||||
flexDirection: "row", // Stack items (barcode and description) vertically
|
||||
//height: "5%", // Ensure the container takes full page height
|
||||
textAlign: "center",
|
||||
},
|
||||
section: {
|
||||
marginBottom: 10,
|
||||
textAlign: "center",
|
||||
},
|
||||
barcode: {
|
||||
width: 275, // Width of the barcode
|
||||
height: 75, // Height of the barcode
|
||||
marginBottom: 10,
|
||||
},
|
||||
description: {
|
||||
fontSize: 14,
|
||||
fontWeight: "bold",
|
||||
marginTop: 10,
|
||||
marginBottom: 20, // Ensure there's space below the text
|
||||
},
|
||||
|
||||
headerText: {
|
||||
fontSize: 28,
|
||||
fontWeight: "bold",
|
||||
marginTop: 10,
|
||||
marginBottom: 20, // Ensure there's space below the text
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
//height: "15%", // Ensure the container takes full page height
|
||||
textAlign: "center",
|
||||
},
|
||||
|
||||
horizontalLine: {
|
||||
borderBottom: "#000000",
|
||||
borderBottomWidth: 1,
|
||||
},
|
||||
});
|
||||
|
||||
// Create the document
|
||||
const MyDocument = (
|
||||
<Document>
|
||||
<Page style={styles.page} orientation="portrait" size="A4">
|
||||
<View style={styles.headerText}>
|
||||
<Text>Multi Lane export.</Text>
|
||||
</View>
|
||||
<View style={styles.horizontalLine} />
|
||||
|
||||
{data.map((i: any, index: any) => {
|
||||
return (
|
||||
<View style={styles.centerContent} key={index}>
|
||||
<View style={styles.section}>
|
||||
<Image
|
||||
src={createBarcode(
|
||||
`loc#${i.warehouseId}#${i.laneId}`
|
||||
)}
|
||||
style={styles.barcode}
|
||||
/>
|
||||
</View>
|
||||
|
||||
<View style={styles.section}>
|
||||
<Text style={styles.description}>
|
||||
Lane: {i.laneDescription}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
})}
|
||||
</Page>
|
||||
</Document>
|
||||
);
|
||||
|
||||
// Generate the PDF and trigger download
|
||||
pdf(MyDocument)
|
||||
.toBlob()
|
||||
.then((blob) => {
|
||||
const link = document.createElement("a");
|
||||
link.href = URL.createObjectURL(blob);
|
||||
link.download = `MultipleBarcodes.pdf`;
|
||||
link.click();
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Button onClick={() => generatePDF()} color="primary">
|
||||
Export All Selected
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,107 @@
|
||||
import { LstCard } from "@/components/extendedUI/LstCard";
|
||||
import { CardContent, CardFooter, CardHeader } from "@/components/ui/card";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import { useState } from "react";
|
||||
import Barcode from "react-barcode";
|
||||
import { BarcodePDFExport } from "./BarcodeExport";
|
||||
import { BulkBarcodePDFExport } from "./BulkExport";
|
||||
|
||||
const commoncmd = [
|
||||
{ name: "Relocate", commandId: 33 },
|
||||
//-{ name: "Stock in", commandId: 22 },
|
||||
];
|
||||
export default function CommonCommands() {
|
||||
const [checked, setChecked] = useState([]);
|
||||
|
||||
// handle the onchange
|
||||
const changeBox = (d: any) => {
|
||||
setChecked((prev: any) => {
|
||||
if (prev.includes(d)) {
|
||||
return prev.filter((name: any) => name !== d);
|
||||
} else {
|
||||
return [...prev, d];
|
||||
}
|
||||
});
|
||||
};
|
||||
return (
|
||||
<div>
|
||||
<div>
|
||||
<LstCard>
|
||||
<CardHeader>Common Barcodes</CardHeader>
|
||||
<CardContent>
|
||||
{commoncmd.map((i: any) => {
|
||||
return (
|
||||
<div className="flex flex-row">
|
||||
<div>
|
||||
<Checkbox
|
||||
id={i.commandId}
|
||||
// checked={checked.includes(
|
||||
// l
|
||||
// )}
|
||||
onCheckedChange={() => changeBox(i)}
|
||||
/>
|
||||
<label
|
||||
id={i.commandId}
|
||||
className="ml-2"
|
||||
>
|
||||
{i.name}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</CardContent>
|
||||
</LstCard>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
{checked.length > 0 && (
|
||||
<div className="m-2">
|
||||
<LstCard>
|
||||
<CardHeader>Current selected Barcodes</CardHeader>
|
||||
<CardContent>
|
||||
{checked.map((c: any) => {
|
||||
return (
|
||||
<div
|
||||
className="flex justify-center"
|
||||
key={`${c.name}`}
|
||||
>
|
||||
<div>
|
||||
<Barcode
|
||||
value={`AlplaPRODcmd${c.commandId}`}
|
||||
width={2}
|
||||
height={50}
|
||||
displayValue={false}
|
||||
/>
|
||||
<p className="flex justify-center">
|
||||
Bacrode: {c.name}
|
||||
</p>
|
||||
</div>
|
||||
<div className="ml-2 mt-4">
|
||||
<BarcodePDFExport
|
||||
barcodeValue={`AlplaPRODcmd${c.commandId}`}
|
||||
data={c}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</CardContent>
|
||||
<CardFooter>
|
||||
<div className="flex justify-end">
|
||||
{checked.length > 1 && (
|
||||
<div>
|
||||
<BulkBarcodePDFExport
|
||||
data={checked}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</CardFooter>
|
||||
</LstCard>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
65
lstV2/frontend/src/components/logistics/dm/DMButtons.tsx
Normal file
65
lstV2/frontend/src/components/logistics/dm/DMButtons.tsx
Normal file
@@ -0,0 +1,65 @@
|
||||
import ForecastImport from "./ForecastImport";
|
||||
import OrderImport from "./OrderImport";
|
||||
import { useSettingStore } from "@/lib/store/useSettings";
|
||||
|
||||
export default function DMButtons() {
|
||||
const { settings } = useSettingStore();
|
||||
const testServers = ["test1", "test2", "test3"];
|
||||
const plantToken = settings.filter((n) => n.name === "plantToken");
|
||||
//console.log(plantToken);
|
||||
return (
|
||||
<div className="flex flex-row-reverse gap-1">
|
||||
<OrderImport fileType={"macro"} name={"Macro Import"} />
|
||||
{/* dev and testserver sees all */}
|
||||
{testServers.includes(plantToken[0]?.value) && (
|
||||
<div className="flex flex-row gap-2">
|
||||
<OrderImport
|
||||
fileType={"abbott"}
|
||||
name={"Abbott truck list"}
|
||||
/>
|
||||
<OrderImport
|
||||
fileType={"energizer"}
|
||||
name={"Energizer Truck List"}
|
||||
/>
|
||||
<ForecastImport fileType={"loreal"} name={"VMI Import"} />
|
||||
<ForecastImport fileType={"pg"} name={"P&G"} />
|
||||
</div>
|
||||
)}
|
||||
{plantToken[0]?.value === "usday1" && (
|
||||
<div className="flex flex-row gap-2">
|
||||
<OrderImport
|
||||
fileType={"abbott"}
|
||||
name={"Abbott truck list"}
|
||||
/>
|
||||
<OrderImport
|
||||
fileType={"energizer"}
|
||||
name={"Energizer Truck List"}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{plantToken[0]?.value === "usflo1" && (
|
||||
<div className="flex flex-row gap-2">
|
||||
<ForecastImport fileType={"loreal"} name={"VMI Import"} />
|
||||
</div>
|
||||
)}
|
||||
{plantToken[0]?.value === "usstp1" && (
|
||||
<div className="flex flex-row gap-2"></div>
|
||||
)}
|
||||
{plantToken[0]?.value === "usiow1" && (
|
||||
<div className="flex flex-row gap-2">
|
||||
<ForecastImport fileType={"pg"} name={"P&G"} />
|
||||
</div>
|
||||
)}
|
||||
{plantToken[0]?.value === "usiow2" && (
|
||||
<div className="flex flex-row gap-2">
|
||||
<ForecastImport fileType={"pg"} name={"P&G"} />
|
||||
</div>
|
||||
)}
|
||||
{plantToken[0]?.value === "usksc1" && (
|
||||
<div className="flex flex-row gap-2">
|
||||
<ForecastImport fileType={"pg"} name={"P&G"} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,69 @@
|
||||
import { Button } from "@/components/ui/button";
|
||||
import axios from "axios";
|
||||
import { useRef, useState } from "react";
|
||||
import { toast } from "sonner";
|
||||
|
||||
export default function ForecastImport(props: any) {
|
||||
const fileInputRef: any = useRef(null);
|
||||
const [posting, setPosting] = useState(false);
|
||||
const token = localStorage.getItem("auth_token");
|
||||
//const [fileType, setFileType] = useState("");
|
||||
const importOrders = async (e: any) => {
|
||||
const file = e.target.files[0];
|
||||
if (!file) {
|
||||
toast.error("Missing file please try again");
|
||||
setPosting(false);
|
||||
return;
|
||||
}
|
||||
|
||||
// create the form data with the correct fileType
|
||||
const formData = new FormData();
|
||||
formData.append("postForecast", e.target.files[0]);
|
||||
formData.append("fileType", props.fileType); // extra field
|
||||
// console.log(formData);
|
||||
toast.success("Import started.");
|
||||
try {
|
||||
const response = await axios.post(
|
||||
"/api/logistics/postforecastin",
|
||||
formData,
|
||||
{
|
||||
headers: {
|
||||
"Content-Type": "multipart/form-data",
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
}
|
||||
);
|
||||
//console.log("Upload successful:", response.data);
|
||||
toast.success(response?.data?.message);
|
||||
fileInputRef.current.value = null;
|
||||
setPosting(false);
|
||||
// toast.success(
|
||||
// "File Uploaded, please validate processing in alplaprod 2.0"
|
||||
// );
|
||||
setPosting(false);
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
toast.error("Upload failed");
|
||||
}
|
||||
setPosting(false);
|
||||
};
|
||||
|
||||
const handleButtonClick = () => {
|
||||
setPosting(true);
|
||||
fileInputRef.current.click();
|
||||
};
|
||||
return (
|
||||
<div>
|
||||
<Button onClick={handleButtonClick} disabled={posting}>
|
||||
{props.name}
|
||||
</Button>
|
||||
<input
|
||||
type="file"
|
||||
accept=".xlsx, .xls, .xlsm"
|
||||
ref={fileInputRef}
|
||||
style={{ display: "none" }}
|
||||
onChange={importOrders}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
64
lstV2/frontend/src/components/logistics/dm/OrderImport.tsx
Normal file
64
lstV2/frontend/src/components/logistics/dm/OrderImport.tsx
Normal file
@@ -0,0 +1,64 @@
|
||||
import { Button } from "@/components/ui/button";
|
||||
import axios from "axios";
|
||||
import { useRef, useState } from "react";
|
||||
import { toast } from "sonner";
|
||||
|
||||
export default function OrderImport(props: any) {
|
||||
const fileInputRef: any = useRef(null);
|
||||
const [posting, setPosting] = useState(false);
|
||||
const token = localStorage.getItem("auth_token");
|
||||
//const [fileType, setFileType] = useState("");
|
||||
const importOrders = async (e: any) => {
|
||||
const file = e.target.files[0];
|
||||
if (!file) {
|
||||
toast.error("Missing file please try again");
|
||||
setPosting(false);
|
||||
return;
|
||||
}
|
||||
|
||||
// create the form data with the correct fileType
|
||||
const formData = new FormData();
|
||||
formData.append("postOrders", e.target.files[0]);
|
||||
formData.append("fileType", props.fileType); // extra field
|
||||
|
||||
try {
|
||||
const response = await axios.post(
|
||||
"/api/logistics/postbulkorders",
|
||||
formData,
|
||||
{
|
||||
headers: {
|
||||
"Content-Type": "multipart/form-data",
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
}
|
||||
);
|
||||
//console.log("Upload successful:", response.data);
|
||||
toast.success(response?.data?.message);
|
||||
fileInputRef.current.value = null;
|
||||
setPosting(false);
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
toast.error("Upload failed");
|
||||
}
|
||||
setPosting(false);
|
||||
};
|
||||
|
||||
const handleButtonClick = () => {
|
||||
setPosting(true);
|
||||
fileInputRef.current.click();
|
||||
};
|
||||
return (
|
||||
<div>
|
||||
<Button onClick={handleButtonClick} disabled={posting}>
|
||||
{props.name}
|
||||
</Button>
|
||||
<input
|
||||
type="file"
|
||||
accept=".xlsx, .xls, .xlsm"
|
||||
ref={fileInputRef}
|
||||
style={{ display: "none" }}
|
||||
onChange={importOrders}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,41 @@
|
||||
import { Button } from "@/components/ui/button";
|
||||
import axios from "axios";
|
||||
import { format } from "date-fns";
|
||||
import { useState } from "react";
|
||||
import { toast } from "sonner";
|
||||
|
||||
export default function StandardForecastTemplate() {
|
||||
const [template, setTemplate] = useState(false);
|
||||
const getTemplate = async () => {
|
||||
setTemplate(true);
|
||||
try {
|
||||
const res = await axios.get(`/api/logistics/bulkforcasttemplate`, {
|
||||
responseType: "blob",
|
||||
});
|
||||
|
||||
const blob = new Blob([res.data], {
|
||||
type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
|
||||
});
|
||||
|
||||
const link = document.createElement("a");
|
||||
link.href = window.URL.createObjectURL(blob);
|
||||
link.download = `ForecastTemplate-${format(new Date(Date.now()), "M-d-yyyy")}.xlsx`; // You can make this dynamic
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
|
||||
// Clean up
|
||||
document.body.removeChild(link);
|
||||
window.URL.revokeObjectURL(link.href);
|
||||
toast.success(`Forecast template`);
|
||||
setTemplate(false);
|
||||
} catch (error) {
|
||||
setTemplate(false);
|
||||
toast.error("There was an error getting the template");
|
||||
}
|
||||
};
|
||||
return (
|
||||
<Button onClick={getTemplate} disabled={template}>
|
||||
Standard Forecast Template
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,41 @@
|
||||
import { Button } from "@/components/ui/button";
|
||||
import axios from "axios";
|
||||
import { format } from "date-fns";
|
||||
import { useState } from "react";
|
||||
import { toast } from "sonner";
|
||||
|
||||
export default function StandardOrderTemplate() {
|
||||
const [template, setTemplate] = useState(false);
|
||||
const getTemplate = async () => {
|
||||
setTemplate(true);
|
||||
try {
|
||||
const res = await axios.get(`/api/logistics/bulkorderstemplate`, {
|
||||
responseType: "blob",
|
||||
});
|
||||
|
||||
const blob = new Blob([res.data], {
|
||||
type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
|
||||
});
|
||||
|
||||
const link = document.createElement("a");
|
||||
link.href = window.URL.createObjectURL(blob);
|
||||
link.download = `BulkOrderTemplate-${format(new Date(Date.now()), "M-d-yyyy")}.xlsx`; // You can make this dynamic
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
|
||||
// Clean up
|
||||
document.body.removeChild(link);
|
||||
window.URL.revokeObjectURL(link.href);
|
||||
toast.success(`Bulk Order template`);
|
||||
setTemplate(false);
|
||||
} catch (error) {
|
||||
setTemplate(false);
|
||||
toast.error("There was an error getting the tempalte");
|
||||
}
|
||||
};
|
||||
return (
|
||||
<Button onClick={getTemplate} disabled={template}>
|
||||
Standard Order Template
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
152
lstV2/frontend/src/components/logistics/dm/dmPage.tsx
Normal file
152
lstV2/frontend/src/components/logistics/dm/dmPage.tsx
Normal file
@@ -0,0 +1,152 @@
|
||||
import { LstCard } from "@/components/extendedUI/LstCard";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
import OrderImport from "./OrderImport";
|
||||
import StandardOrderTemplate from "./StandardOrderTemplate";
|
||||
import ForecastImport from "./ForecastImport";
|
||||
import StandardForecastTemplate from "./StandardForecastTemplate";
|
||||
|
||||
export default function DmPage() {
|
||||
return (
|
||||
<div className="flex flex-row gap-2">
|
||||
<LstCard className="w-1/2">
|
||||
<div className="w-96">
|
||||
<h4 className="text-center underline text-2xl">
|
||||
Simple instructions for creating/updating orders
|
||||
</h4>
|
||||
<div className="flex flex-row gap-3 m-1">
|
||||
<OrderImport
|
||||
fileType={"standard"}
|
||||
name={"Standard Order Import"}
|
||||
/>
|
||||
<StandardOrderTemplate />
|
||||
</div>
|
||||
<Separator />
|
||||
</div>
|
||||
|
||||
<ul className="list-disc mr-2">
|
||||
<li>
|
||||
Download the standard template if you have not yet done
|
||||
so, Above click Standard Order Template.
|
||||
</li>
|
||||
<li>
|
||||
Add in the orders like you see in the example below.
|
||||
</li>
|
||||
<li>
|
||||
When updating orders you are required to have the
|
||||
customerOrderNumber, customerLineNumber, and
|
||||
customerReleaseNumber. Quatity and dates can change.
|
||||
</li>
|
||||
<li>
|
||||
Once you have all the orders entered, click Standard
|
||||
Order Import
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<Separator className="my-4" />
|
||||
<div className="m-5">
|
||||
<h4 className="text-center underline text-2xl">
|
||||
Some notes to consider
|
||||
</h4>
|
||||
|
||||
<ul className="list-disc mr-2">
|
||||
<li>
|
||||
No longer need to add in the invoice id, we take the
|
||||
default one.
|
||||
</li>
|
||||
<li>
|
||||
You can have as many customers you want in the file
|
||||
and in any order.
|
||||
</li>
|
||||
<li>
|
||||
Orders created Manually, can not be updated with
|
||||
this process.
|
||||
</li>
|
||||
<li>
|
||||
If you desire you can send up to 1000 orders at one
|
||||
time... or more....
|
||||
</li>
|
||||
<li>
|
||||
Customer mappings can be added, this means that you
|
||||
can upload your customer file and it will parse
|
||||
onces mapped, you need to request this.
|
||||
</li>
|
||||
<li>
|
||||
Custom imports will be at the top right under
|
||||
custom, here you will just upload the customer file
|
||||
once mapped.
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<Separator className="my-4" />
|
||||
<p className="text-center underline text-2xl">Example order</p>
|
||||
<div className="flex justify-center">
|
||||
<img
|
||||
src="/imgs/ordersInExample.png"
|
||||
alt="orders in example"
|
||||
className="w-[680px] h-[280px]"
|
||||
/>
|
||||
</div>
|
||||
</LstCard>
|
||||
<LstCard className="w-1/2">
|
||||
<div className="w-96">
|
||||
<h4 className="text-center underline text-2xl">
|
||||
Simple instructions for creating forecast
|
||||
</h4>
|
||||
<div className="flex flex-row gap-3 m-1">
|
||||
<ForecastImport
|
||||
fileType={"standard"}
|
||||
name={"Standard Forecast Import"}
|
||||
/>
|
||||
<StandardForecastTemplate />
|
||||
<Separator className="my-4" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="m-5">
|
||||
<ul className="list-disc mr-2">
|
||||
<li>
|
||||
Download the template if you have not yet done so.
|
||||
</li>
|
||||
<li>
|
||||
Add in the forecast like you see in the example
|
||||
below.
|
||||
</li>
|
||||
|
||||
<li>
|
||||
Once you have all the forecast enters click the
|
||||
upload button on the top right
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<Separator className="my-4" />
|
||||
<div className="m-5">
|
||||
<h4 className="text-center underline text-2xl">
|
||||
Some notes to consider.
|
||||
</h4>
|
||||
<ul className="list-disc mr-2">
|
||||
<li>You can only use one customer at a time.</li>
|
||||
|
||||
<li>
|
||||
If you desire you can send up to 1000 orders at one
|
||||
time...
|
||||
</li>
|
||||
<li>
|
||||
The customer MUST be set as default address in order
|
||||
for the system to validate the av.
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<Separator className="my-4" />
|
||||
<p className="text-center underline text-2xl">
|
||||
Example forecast
|
||||
</p>
|
||||
<div className="flex justify-center">
|
||||
<img
|
||||
src="/imgs/exampleforecast.png"
|
||||
alt="orders in example"
|
||||
className="w-[480px] h-[280px]"
|
||||
/>
|
||||
</div>
|
||||
</LstCard>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,100 @@
|
||||
import { LstCard } from "@/components/extendedUI/LstCard";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { CardContent, CardHeader } from "@/components/ui/card";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { useForm } from "@tanstack/react-form";
|
||||
import axios from "axios";
|
||||
import { useState } from "react";
|
||||
import { toast } from "sonner";
|
||||
|
||||
export default function Bookin() {
|
||||
const [bookingIn, setBookingIn] = useState(false);
|
||||
const form = useForm({
|
||||
defaultValues: { runningNr: " " },
|
||||
onSubmit: async ({ value }) => {
|
||||
// Do something with form data
|
||||
setBookingIn(true);
|
||||
|
||||
try {
|
||||
const res = await axios.post("/api/ocp/bookin", {
|
||||
runningNr: parseInt(value.runningNr),
|
||||
});
|
||||
|
||||
if (res.data.success) {
|
||||
toast.success(res.data.message);
|
||||
form.reset();
|
||||
setBookingIn(false);
|
||||
} else {
|
||||
console.log(res.data.data.errors);
|
||||
toast.error(res.data.data.errors[0]?.message);
|
||||
form.reset();
|
||||
setBookingIn(false);
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
toast.error(
|
||||
"There was an error booking in pallet please validate you entered the correct info and try again."
|
||||
);
|
||||
setBookingIn(false);
|
||||
}
|
||||
},
|
||||
});
|
||||
return (
|
||||
<LstCard>
|
||||
<CardHeader>
|
||||
<p>Book in a pallet by running number</p>
|
||||
</CardHeader>
|
||||
<form
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
}}
|
||||
>
|
||||
<CardContent>
|
||||
<form.Field
|
||||
name="runningNr"
|
||||
validators={{
|
||||
// We can choose between form-wide and field-specific validators
|
||||
onChange: ({ value }) =>
|
||||
value.length > 2
|
||||
? undefined
|
||||
: "Please enter a valid running number",
|
||||
}}
|
||||
children={(field) => {
|
||||
return (
|
||||
<div className="">
|
||||
<Label htmlFor="runningNr" className="mb-2">
|
||||
Runnning Number
|
||||
</Label>
|
||||
<Input
|
||||
name={field.name}
|
||||
value={field.state.value}
|
||||
onBlur={field.handleBlur}
|
||||
type="number"
|
||||
onChange={(e) =>
|
||||
field.handleChange(e.target.value)
|
||||
}
|
||||
/>
|
||||
{field.state.meta.errors.length ? (
|
||||
<em>
|
||||
{field.state.meta.errors.join(",")}
|
||||
</em>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<div className="flex mt-2 justify-end">
|
||||
<Button
|
||||
onClick={form.handleSubmit}
|
||||
disabled={bookingIn}
|
||||
>
|
||||
Book in
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</form>
|
||||
</LstCard>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,133 @@
|
||||
import { LstCard } from "@/components/extendedUI/LstCard";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { CardContent, CardHeader } from "@/components/ui/card";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { useForm } from "@tanstack/react-form";
|
||||
import axios from "axios";
|
||||
import { useState } from "react";
|
||||
import { toast } from "sonner";
|
||||
|
||||
export default function Relocate() {
|
||||
const [bookingIn, setBookingIn] = useState(false);
|
||||
const form = useForm({
|
||||
defaultValues: { runningNr: " ", lane: "" },
|
||||
onSubmit: async ({ value }) => {
|
||||
// Do something with form data
|
||||
setBookingIn(true);
|
||||
|
||||
try {
|
||||
const res = await axios.post("/api/ocp/bookin", {
|
||||
runningNr: parseInt(value.runningNr),
|
||||
});
|
||||
|
||||
if (res.data.success) {
|
||||
toast.success(res.data.message);
|
||||
form.reset();
|
||||
setBookingIn(false);
|
||||
} else {
|
||||
console.log(res.data.data.errors);
|
||||
toast.error(res.data.data.errors[0]?.message);
|
||||
form.reset();
|
||||
setBookingIn(false);
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
toast.error(
|
||||
"There was an error booking in pallet please validate you entered the correct info and try again."
|
||||
);
|
||||
setBookingIn(false);
|
||||
}
|
||||
},
|
||||
});
|
||||
return (
|
||||
<LstCard>
|
||||
<CardHeader>
|
||||
<p>Relocate a pallet to another lane</p>
|
||||
</CardHeader>
|
||||
<form
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
}}
|
||||
>
|
||||
<CardContent>
|
||||
<form.Field
|
||||
name="runningNr"
|
||||
validators={{
|
||||
// We can choose between form-wide and field-specific validators
|
||||
onChange: ({ value }) =>
|
||||
value.length > 2
|
||||
? undefined
|
||||
: "Please enter a valid running number",
|
||||
}}
|
||||
children={(field) => {
|
||||
return (
|
||||
<div className="">
|
||||
<Label htmlFor="runningNr" className="mb-2">
|
||||
Runnning Number
|
||||
</Label>
|
||||
<Input
|
||||
name={field.name}
|
||||
value={field.state.value}
|
||||
onBlur={field.handleBlur}
|
||||
type="number"
|
||||
onChange={(e) =>
|
||||
field.handleChange(e.target.value)
|
||||
}
|
||||
/>
|
||||
{field.state.meta.errors.length ? (
|
||||
<em>
|
||||
{field.state.meta.errors.join(",")}
|
||||
</em>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<form.Field
|
||||
name="lane"
|
||||
validators={{
|
||||
// We can choose between form-wide and field-specific validators
|
||||
onChange: ({ value }) =>
|
||||
value.length > 2
|
||||
? undefined
|
||||
: "Please enter a valid running number",
|
||||
}}
|
||||
children={(field) => {
|
||||
return (
|
||||
<div className="">
|
||||
<Label htmlFor="runningNr" className="mb-2">
|
||||
Enter lane
|
||||
</Label>
|
||||
<Input
|
||||
name={field.name}
|
||||
value={field.state.value}
|
||||
onBlur={field.handleBlur}
|
||||
//type="number"
|
||||
onChange={(e) =>
|
||||
field.handleChange(e.target.value)
|
||||
}
|
||||
/>
|
||||
{field.state.meta.errors.length ? (
|
||||
<em>
|
||||
{field.state.meta.errors.join(",")}
|
||||
</em>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<div className="flex mt-2 justify-end">
|
||||
<Button
|
||||
onClick={form.handleSubmit}
|
||||
disabled={bookingIn}
|
||||
>
|
||||
Relocate
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</form>
|
||||
</LstCard>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,138 @@
|
||||
import { LstCard } from "@/components/extendedUI/LstCard";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { CardContent, CardHeader } from "@/components/ui/card";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { useForm } from "@tanstack/react-form";
|
||||
import axios from "axios";
|
||||
import { useState } from "react";
|
||||
import { toast } from "sonner";
|
||||
|
||||
export default function RemoveAsNonReusable() {
|
||||
const [stockOut, setStockOut] = useState(false);
|
||||
const form = useForm({
|
||||
defaultValues: { runningNr: " ", reason: " " },
|
||||
onSubmit: async ({ value }) => {
|
||||
// Do something with form data
|
||||
setStockOut(true);
|
||||
|
||||
//console.log(value);
|
||||
|
||||
try {
|
||||
const res = await axios.post(
|
||||
"/api/logistics/removeasreusable",
|
||||
|
||||
value // this is basically the data field
|
||||
);
|
||||
|
||||
if (res.data.success) {
|
||||
toast.success(res.data.message);
|
||||
form.reset();
|
||||
setStockOut(false);
|
||||
} else {
|
||||
console.log(res.data);
|
||||
toast.error(res.data?.message);
|
||||
form.reset();
|
||||
setStockOut(false);
|
||||
}
|
||||
} catch (error: any) {
|
||||
console.log(error);
|
||||
toast.error(error.message);
|
||||
setStockOut(false);
|
||||
}
|
||||
},
|
||||
});
|
||||
return (
|
||||
<LstCard>
|
||||
<CardHeader>
|
||||
<p>Remove a pallet as non reusable</p>
|
||||
</CardHeader>
|
||||
<form
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
}}
|
||||
>
|
||||
<CardContent>
|
||||
<form.Field
|
||||
name="runningNr"
|
||||
validators={{
|
||||
// We can choose between form-wide and field-specific validators
|
||||
onChange: ({ value }) =>
|
||||
value.length > 2
|
||||
? undefined
|
||||
: "Please enter a valid running number",
|
||||
}}
|
||||
children={(field) => {
|
||||
return (
|
||||
<div className="w-96">
|
||||
<Label htmlFor="runningNr" className="mb-2">
|
||||
Runnning Number
|
||||
</Label>
|
||||
<Input
|
||||
name={field.name}
|
||||
value={field.state.value}
|
||||
onBlur={field.handleBlur}
|
||||
required
|
||||
type="number"
|
||||
onChange={(e) =>
|
||||
field.handleChange(e.target.value)
|
||||
}
|
||||
/>
|
||||
{field.state.meta.errors.length ? (
|
||||
<em>
|
||||
{field.state.meta.errors.join(",")}
|
||||
</em>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<form.Field
|
||||
name="reason"
|
||||
validators={{
|
||||
// We can choose between form-wide and field-specific validators
|
||||
onChange: ({ value }) =>
|
||||
value.length > 10
|
||||
? undefined
|
||||
: "Please enter a valid reason on why you needed to remove this pallet",
|
||||
}}
|
||||
children={(field) => {
|
||||
return (
|
||||
<div className="">
|
||||
<Label htmlFor="reason" className="mb-2">
|
||||
Reason for removing
|
||||
</Label>
|
||||
<Textarea
|
||||
name={field.name}
|
||||
value={field.state.value}
|
||||
onBlur={field.handleBlur}
|
||||
//type="number"
|
||||
onChange={(e) =>
|
||||
field.handleChange(e.target.value)
|
||||
}
|
||||
/>
|
||||
{field.state.meta.errors.length ? (
|
||||
<div className="text-pretty max-w-96">
|
||||
<em>
|
||||
{field.state.meta.errors.join(
|
||||
","
|
||||
)}
|
||||
</em>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<div className="flex mt-2 justify-end">
|
||||
<Button onClick={form.handleSubmit} disabled={stockOut}>
|
||||
Remove
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</form>
|
||||
</LstCard>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
import Bookin from "./commands/Bookin";
|
||||
import Relocate from "./commands/Relocate";
|
||||
import RemoveAsNonReusable from "./commands/RemoveAsNonReusable";
|
||||
|
||||
export default function HelperPage() {
|
||||
const url: string = window.location.host.split(":")[0];
|
||||
return (
|
||||
<div className="flex flex-wrap m-2 justify-center">
|
||||
<div className="m-1">
|
||||
<Bookin />
|
||||
</div>
|
||||
|
||||
<div className="m-1">
|
||||
<RemoveAsNonReusable />
|
||||
</div>
|
||||
<div className="m-1">{url === "localhost" && <Relocate />}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,121 @@
|
||||
import { LstCard } from "@/components/extendedUI/LstCard";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { CardHeader } from "@/components/ui/card";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
|
||||
import axios from "axios";
|
||||
import { useState } from "react";
|
||||
|
||||
import { useForm } from "react-hook-form";
|
||||
import { toast } from "sonner";
|
||||
|
||||
export default function ConsumeMaterial() {
|
||||
const {
|
||||
register: register1,
|
||||
handleSubmit: handleSubmit1,
|
||||
reset,
|
||||
} = useForm();
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
|
||||
const handleConsume = async (data: any) => {
|
||||
setSubmitting(true);
|
||||
try {
|
||||
// const result = await axios.post(`/api/logistics/consume`, data, {
|
||||
// headers: {Authorization: `Bearer ${token}`},
|
||||
// });
|
||||
const result = await axios.post(`/api/logistics/consume`, data);
|
||||
if (result.data.success) {
|
||||
toast.success(result.data.message);
|
||||
setSubmitting(false);
|
||||
reset();
|
||||
}
|
||||
if (!result.data.success) {
|
||||
//console.log(result.data);
|
||||
setSubmitting(false);
|
||||
|
||||
toast.error(result.data.message);
|
||||
}
|
||||
} catch (error: any) {
|
||||
console.log(error);
|
||||
setSubmitting(false);
|
||||
if (error.status === 401) {
|
||||
toast.error("Unauthorized to do this task.");
|
||||
} else {
|
||||
toast.error(
|
||||
"Unexpected error if this continues please constact an admin."
|
||||
);
|
||||
}
|
||||
}
|
||||
};
|
||||
return (
|
||||
<div className="m-2">
|
||||
<LstCard>
|
||||
<CardHeader>
|
||||
<p className="text-center text-lg">Consuming Material.</p>
|
||||
</CardHeader>
|
||||
<div className="flex m-1">
|
||||
<div className="w-96 m-1">
|
||||
<LstCard>
|
||||
<form onSubmit={handleSubmit1(handleConsume)}>
|
||||
<div className="m-2">
|
||||
<Label htmlFor="runningNr">
|
||||
Enter unit running number
|
||||
</Label>
|
||||
<Input
|
||||
className="mt-2"
|
||||
//defaultValue="634"
|
||||
type="number"
|
||||
{...register1("runningNr")}
|
||||
/>
|
||||
</div>
|
||||
<div className="m-2">
|
||||
<Label htmlFor="lotNum">
|
||||
Enter lot number
|
||||
</Label>
|
||||
<Input
|
||||
className="mt-2"
|
||||
//defaultValue="634"
|
||||
type="number"
|
||||
{...register1("lotNum")}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
className="m-2"
|
||||
color="primary"
|
||||
type="submit"
|
||||
disabled={submitting}
|
||||
>
|
||||
Consume materal
|
||||
</Button>
|
||||
</form>
|
||||
</LstCard>
|
||||
</div>
|
||||
<div className="m-1 p-1">
|
||||
<LstCard>
|
||||
<div className="w-96 p-1">
|
||||
<ol>
|
||||
<li>
|
||||
1. Enter the running number of the
|
||||
material you would like to consume
|
||||
</li>
|
||||
<li>
|
||||
2. Enter the lot number you will be
|
||||
consuming to
|
||||
</li>
|
||||
<li>3. Press consume material</li>
|
||||
</ol>
|
||||
<p className="text-pretty w-96">
|
||||
*This process is only for barcoded material,
|
||||
if it is set to auto consume you will
|
||||
encounter and error.
|
||||
</p>
|
||||
</div>
|
||||
</LstCard>
|
||||
</div>
|
||||
</div>
|
||||
</LstCard>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,160 @@
|
||||
import { LstCard } from "@/components/extendedUI/LstCard";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { CardHeader } from "@/components/ui/card";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { useSessionStore } from "@/lib/store/sessionStore";
|
||||
import axios from "axios";
|
||||
import { useState } from "react";
|
||||
|
||||
import { useForm } from "react-hook-form";
|
||||
import { toast } from "sonner";
|
||||
|
||||
export default function PreformReturn() {
|
||||
const {
|
||||
register: register1,
|
||||
handleSubmit: handleSubmit1,
|
||||
reset,
|
||||
} = useForm();
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
const { token } = useSessionStore();
|
||||
|
||||
const handleConsume = async (data: any) => {
|
||||
setSubmitting(true);
|
||||
try {
|
||||
const result = await axios.post(`/api/logistics/consume`, data, {
|
||||
headers: { Authorization: `Bearer ${token}` },
|
||||
});
|
||||
if (result.data.success) {
|
||||
toast.success(result.data.message);
|
||||
setSubmitting(false);
|
||||
reset();
|
||||
}
|
||||
if (!result.data.success) {
|
||||
//console.log(result.data);
|
||||
setSubmitting(false);
|
||||
|
||||
toast.error(result.data.message);
|
||||
}
|
||||
} catch (error: any) {
|
||||
//console.log(error);
|
||||
setSubmitting(false);
|
||||
if (error.status === 401) {
|
||||
toast.error("Unauthorized to do this task.");
|
||||
} else {
|
||||
toast.error(
|
||||
"Unexpected error if this continues please constact an admin."
|
||||
);
|
||||
}
|
||||
}
|
||||
};
|
||||
return (
|
||||
<div className="m-2">
|
||||
<LstCard>
|
||||
<CardHeader>
|
||||
<p className="text-center text-lg">Preform Return.</p>
|
||||
</CardHeader>
|
||||
<div className="flex m-1">
|
||||
<div className="w-96 m-1">
|
||||
<LstCard>
|
||||
<form onSubmit={handleSubmit1(handleConsume)}>
|
||||
<div className="m-2">
|
||||
<Label htmlFor="runningNr">
|
||||
Enter unit running number
|
||||
</Label>
|
||||
<Input
|
||||
className="mt-2"
|
||||
//defaultValue="634"
|
||||
type="number"
|
||||
{...register1("runningNr")}
|
||||
/>
|
||||
</div>
|
||||
<div className="m-2">
|
||||
<Label htmlFor="lotNum">
|
||||
Enter the new wight of the gaylord of
|
||||
preforms
|
||||
</Label>
|
||||
<Input
|
||||
className="mt-2"
|
||||
//defaultValue="634"
|
||||
type="number"
|
||||
{...register1("lotNum")}
|
||||
/>
|
||||
</div>
|
||||
<div className="m-2">
|
||||
<Label htmlFor="lotNum">
|
||||
Select the printer you would like to
|
||||
print to
|
||||
</Label>
|
||||
<Input
|
||||
className="mt-2"
|
||||
//defaultValue="634"
|
||||
type="number"
|
||||
{...register1("lotNum")}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="m-2">
|
||||
<Label htmlFor="lotNum">
|
||||
Select the staging location to be
|
||||
returned to.
|
||||
</Label>
|
||||
<Input
|
||||
className="mt-2"
|
||||
//defaultValue="634"
|
||||
type="number"
|
||||
{...register1("lotNum")}
|
||||
/>
|
||||
</div>
|
||||
<div className="m-2">
|
||||
<Label htmlFor="lotNum">
|
||||
Select type of material coming back.
|
||||
</Label>
|
||||
<Input
|
||||
className="mt-2"
|
||||
//defaultValue="634"
|
||||
type="number"
|
||||
{...register1("lotNum")}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
className="m-2"
|
||||
color="primary"
|
||||
type="submit"
|
||||
disabled={submitting}
|
||||
>
|
||||
Preform return
|
||||
</Button>
|
||||
</form>
|
||||
</LstCard>
|
||||
</div>
|
||||
<div className="m-1 p-1">
|
||||
<LstCard>
|
||||
<div className="w-96 p-1">
|
||||
<ol>
|
||||
<li>
|
||||
1. Enter the running number of the
|
||||
preform cage you would like to return
|
||||
</li>
|
||||
<li>
|
||||
2. Enter the new weight of the gaylord
|
||||
</li>
|
||||
<li>
|
||||
3. Select the printer you would like to
|
||||
print to
|
||||
</li>
|
||||
</ol>
|
||||
<p className="text-pretty w-96">
|
||||
*As soon as you press preform return it will
|
||||
print a new label and return to the staging
|
||||
location.
|
||||
</p>
|
||||
</div>
|
||||
</LstCard>
|
||||
</div>
|
||||
</div>
|
||||
</LstCard>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,478 @@
|
||||
import { LstCard } from "@/components/extendedUI/LstCard";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { CardContent, CardHeader } from "@/components/ui/card";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Switch } from "@/components/ui/switch";
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||
import { useAppForm } from "@/utils/formStuff";
|
||||
import axios from "axios";
|
||||
import { useState } from "react";
|
||||
import { toast } from "sonner";
|
||||
import { Info } from "lucide-react";
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipTrigger,
|
||||
} from "@/components/ui/tooltip";
|
||||
import { useSettingStore } from "@/lib/store/useSettings";
|
||||
|
||||
export default function TransferToNextLot() {
|
||||
const [gaylordFilled, setGaylordFilled] = useState([0]);
|
||||
const [actualAmount, setActualAmount] = useState(0);
|
||||
const [tab, setTab] = useState("esitmate");
|
||||
const [typeSwitch, setTypeSwitch] = useState(false);
|
||||
const { settings } = useSettingStore();
|
||||
|
||||
const server = settings.filter((n: any) => n.name === "dbServer");
|
||||
const form = useAppForm({
|
||||
defaultValues: {
|
||||
runningNumber: "",
|
||||
lotNumber: "",
|
||||
originalAmount: "",
|
||||
amount: "",
|
||||
},
|
||||
onSubmit: async ({ value }) => {
|
||||
//console.log(transferData);
|
||||
//toast.success("603468: qty: 361, was transfered to lot:24897");
|
||||
try {
|
||||
const res = await axios.post("/api/ocp/materiallottransfer", {
|
||||
runningNumber: Number(value.runningNumber),
|
||||
lotNumber: Number(value.lotNumber),
|
||||
originalAmount: Number(value.originalAmount),
|
||||
level: Number(
|
||||
gaylordFilled.length === 1
|
||||
? 0.25
|
||||
: gaylordFilled.length === 2
|
||||
? 0.5
|
||||
: gaylordFilled.length === 3
|
||||
? 0.75
|
||||
: gaylordFilled.length === 4 && 0.95
|
||||
),
|
||||
amount: actualAmount,
|
||||
type: typeSwitch ? "eom" : "lot",
|
||||
});
|
||||
|
||||
if (res.data.success) {
|
||||
toast.success(`${res.data.message}`);
|
||||
form.reset();
|
||||
setGaylordFilled([0]);
|
||||
setActualAmount(0);
|
||||
}
|
||||
//console.log(res.data);
|
||||
|
||||
if (!res.data.success) {
|
||||
toast.error(res.data.message);
|
||||
}
|
||||
} catch (error) {
|
||||
if (error) {
|
||||
console.log(error);
|
||||
//toast.error(error)
|
||||
}
|
||||
}
|
||||
},
|
||||
});
|
||||
return (
|
||||
<div>
|
||||
<LstCard>
|
||||
<CardHeader>
|
||||
<p className="text-center text-lg">
|
||||
Material Transfer to Next lot
|
||||
</p>
|
||||
</CardHeader>
|
||||
<div>
|
||||
<div className="flex flex-wrap m-2 gap-2">
|
||||
<div className="flex gap-2">
|
||||
<div>
|
||||
<LstCard className="">
|
||||
<Tabs
|
||||
defaultValue={tab}
|
||||
onValueChange={setTab}
|
||||
>
|
||||
<TabsList>
|
||||
<TabsTrigger value="esitmate">
|
||||
Estimate Amount
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="actual">
|
||||
Actual Amount
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value="esitmate">
|
||||
<div className="grid columns-1">
|
||||
<button
|
||||
className={`box-border h-16 w-96 border-3 ${
|
||||
gaylordFilled.includes(
|
||||
4
|
||||
)
|
||||
? " bg-green-500"
|
||||
: ""
|
||||
}`}
|
||||
onClick={() =>
|
||||
setGaylordFilled([
|
||||
1, 2, 3, 4,
|
||||
])
|
||||
}
|
||||
>
|
||||
<p className="text-center">
|
||||
Almost full - 95%
|
||||
</p>
|
||||
</button>
|
||||
<button
|
||||
className={`box-border h-16 w-96 border-3 ${
|
||||
gaylordFilled.includes(
|
||||
3
|
||||
)
|
||||
? " bg-green-500"
|
||||
: ""
|
||||
}`}
|
||||
onClick={() =>
|
||||
setGaylordFilled([
|
||||
1, 2, 3,
|
||||
])
|
||||
}
|
||||
>
|
||||
<p className="text-center">
|
||||
About full - 75%
|
||||
</p>
|
||||
</button>
|
||||
<button
|
||||
className={`box-border h-16 w-96 border-3 ${
|
||||
gaylordFilled.includes(
|
||||
2
|
||||
)
|
||||
? " bg-green-500"
|
||||
: ""
|
||||
}`}
|
||||
onClick={() =>
|
||||
setGaylordFilled([1, 2])
|
||||
}
|
||||
>
|
||||
<p className="text-center">
|
||||
Half full - 50%
|
||||
</p>
|
||||
</button>
|
||||
<button
|
||||
className={`box-border h-16 w-96 border-3 ${
|
||||
gaylordFilled.includes(
|
||||
1
|
||||
)
|
||||
? " bg-green-500"
|
||||
: ""
|
||||
}`}
|
||||
onClick={() =>
|
||||
setGaylordFilled(() => [
|
||||
1,
|
||||
])
|
||||
}
|
||||
>
|
||||
<p className="text-center">
|
||||
Almost empty - 25%
|
||||
</p>
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex justify-end pr-1">
|
||||
<Button
|
||||
onClick={() =>
|
||||
setGaylordFilled([0])
|
||||
}
|
||||
>
|
||||
Reset Gaylord
|
||||
</Button>
|
||||
</div>
|
||||
</TabsContent>
|
||||
<TabsContent
|
||||
value="actual"
|
||||
className="w-96"
|
||||
>
|
||||
<CardHeader>
|
||||
<p>
|
||||
Enter the total amount of
|
||||
the cage/gaylord
|
||||
</p>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Input
|
||||
type="number"
|
||||
//placeholder="35"
|
||||
onChange={(e) =>
|
||||
setActualAmount(
|
||||
Number(
|
||||
e.target.value
|
||||
)
|
||||
)
|
||||
}
|
||||
/>
|
||||
</CardContent>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</LstCard>
|
||||
</div>
|
||||
<div>
|
||||
<div className="w-96">
|
||||
<LstCard>
|
||||
<form
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
form.handleSubmit();
|
||||
}}
|
||||
>
|
||||
<div className="mt-3 p-2">
|
||||
<form.AppField
|
||||
name="runningNumber"
|
||||
children={(field) => (
|
||||
<field.InputField
|
||||
label="Running Number"
|
||||
inputType="number"
|
||||
required={true}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className="mt-3 p-2">
|
||||
<form.AppField
|
||||
name="lotNumber"
|
||||
children={(field) => (
|
||||
<field.InputField
|
||||
label="Lot Number"
|
||||
inputType="number"
|
||||
required={true}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
{tab !== "actual" && (
|
||||
<div className="mt-3 p-2">
|
||||
<form.AppField
|
||||
name="originalAmount"
|
||||
children={(
|
||||
field
|
||||
) => (
|
||||
<field.InputField
|
||||
label="Orignal Quantity"
|
||||
inputType="number"
|
||||
required={
|
||||
true
|
||||
}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex justify-between p-2">
|
||||
<div className="flex items-center space-x-2">
|
||||
<Switch
|
||||
checked={typeSwitch}
|
||||
onCheckedChange={
|
||||
setTypeSwitch
|
||||
}
|
||||
/>
|
||||
<span>
|
||||
{typeSwitch ? (
|
||||
<div className="flex items-center space-x-2">
|
||||
<span>
|
||||
"EOM
|
||||
Transfer"
|
||||
</span>
|
||||
<Tooltip>
|
||||
<TooltipTrigger>
|
||||
<Info className="h-[16px] w-[16px]" />
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>
|
||||
Click
|
||||
the
|
||||
toggle
|
||||
if
|
||||
you
|
||||
will
|
||||
be
|
||||
transfering
|
||||
at
|
||||
EOM,
|
||||
NOTE:
|
||||
This
|
||||
will
|
||||
trigger
|
||||
the
|
||||
delayed
|
||||
transfer.
|
||||
</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-center space-x-2">
|
||||
<span>
|
||||
"Lot
|
||||
Transfer"
|
||||
</span>
|
||||
<Tooltip>
|
||||
<TooltipTrigger>
|
||||
<Info className="h-[16px] w-[16px]" />
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>
|
||||
Click
|
||||
the
|
||||
toggle
|
||||
if
|
||||
you
|
||||
will
|
||||
be
|
||||
transfering
|
||||
at
|
||||
EOM,
|
||||
NOTE:
|
||||
This
|
||||
will
|
||||
trigger
|
||||
the
|
||||
delayed
|
||||
transfer.
|
||||
</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</div>
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<form.AppForm>
|
||||
<form.SubmitButton>
|
||||
Transfer To Lot
|
||||
</form.SubmitButton>
|
||||
</form.AppForm>
|
||||
</div>
|
||||
</form>
|
||||
</LstCard>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<LstCard className="p-2">
|
||||
<CardHeader>
|
||||
<p className="text-center text-lg">
|
||||
Moving material to the next lot.
|
||||
</p>
|
||||
</CardHeader>
|
||||
{tab !== "actual" ? (
|
||||
<div>
|
||||
<ol>
|
||||
<li>
|
||||
1. Grab the gaylord running
|
||||
number from the gaylord at the
|
||||
line/next to the tschritter
|
||||
</li>
|
||||
<li>
|
||||
2. Grab the next lot number you
|
||||
are going to be running (or the
|
||||
one that state no Main material
|
||||
prepared)
|
||||
</li>
|
||||
<li>
|
||||
3. Enter the total gaylord
|
||||
weight (this is how much the
|
||||
gaylord weighed when it came in
|
||||
from the supplier.)
|
||||
</li>
|
||||
<li>
|
||||
4. *Click the level of the
|
||||
gaylord (this is just an
|
||||
estimate to move to the next
|
||||
lot.)
|
||||
</li>
|
||||
<li>
|
||||
5. type in running number on the
|
||||
gaylord.
|
||||
</li>
|
||||
<li>
|
||||
6. Type in the new lot number.
|
||||
</li>
|
||||
<li>7. Press "Transfer To Lot"</li>
|
||||
</ol>
|
||||
<br></br>
|
||||
<p>
|
||||
* to reduce the time needed to get
|
||||
the lot going we will use an
|
||||
estimate of how full the gaylord is.
|
||||
</p>
|
||||
<p>
|
||||
NOTE: This is not the return
|
||||
process, this process will just get
|
||||
the gaylord to the next lot.
|
||||
</p>
|
||||
<br />
|
||||
{settings.length > 0 && (
|
||||
<p>
|
||||
For more in depth instructions
|
||||
please{" "}
|
||||
<a
|
||||
href={`https://${server[0].value}.alpla.net/lst/d/docs/ocp/ocp#tranfer-partial-estimated-quantity-to-the-next-lot`}
|
||||
target="_blank"
|
||||
>
|
||||
<em>CLICK HERE</em>
|
||||
</a>
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div>
|
||||
<ol>
|
||||
<li>
|
||||
1. Grab the gaylord running
|
||||
number from the gaylord at the
|
||||
line/next to the tschritter
|
||||
</li>
|
||||
<li>
|
||||
2. Grab the next lot number you
|
||||
are going to be running (or the
|
||||
one that state no Main material
|
||||
prepared)
|
||||
</li>
|
||||
<li>
|
||||
3. Take the gaylord to the scale
|
||||
and weight it
|
||||
</li>
|
||||
<li>
|
||||
4. Enter the weight of the
|
||||
gaylord minus the tar weight.
|
||||
</li>
|
||||
<li>
|
||||
5. type in running number on the
|
||||
gaylord.
|
||||
</li>
|
||||
<li>
|
||||
6. Type in the new lot number.
|
||||
</li>
|
||||
<li>7. Press "Transfer To Lot"</li>
|
||||
</ol>
|
||||
<br></br>
|
||||
|
||||
<p>
|
||||
NOTE: This is not the return
|
||||
process, this process will just get
|
||||
the gaylord to the next lot.
|
||||
</p>
|
||||
<br />
|
||||
{settings.length > 0 && (
|
||||
<p>
|
||||
For more in depth instructions
|
||||
please{" "}
|
||||
<a
|
||||
href={`https://${server[0].value}.alpla.net/lst/d/docs/ocp/ocp#tranfer-partial-estimated-quantity-to-the-next-lot`}
|
||||
target="_blank"
|
||||
>
|
||||
<em>CLICK HERE</em>
|
||||
</a>
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</LstCard>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</LstCard>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
export default function MaterialHelperPage() {
|
||||
return <div>materialHelperPage</div>;
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
import { Button } from "@/components/ui/button";
|
||||
import axios from "axios";
|
||||
|
||||
import { toast } from "sonner";
|
||||
|
||||
export default function ManualTrigger() {
|
||||
const rfidReaderTrigger = async () => {
|
||||
try {
|
||||
const res = await axios.post("/api/rfid/manualtrigger/wrapper1");
|
||||
|
||||
if (res.data.success) {
|
||||
toast.success(res.data.message);
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
if (!res.data.success) {
|
||||
toast.error(res.data.message);
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
|
||||
//stoast.success(error.data.message);
|
||||
}
|
||||
};
|
||||
return (
|
||||
<div>
|
||||
<Button onClick={rfidReaderTrigger}>Wrapper 1 RFID</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,163 @@
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Dialog,
|
||||
DialogClose,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from "@/components/ui/dialog";
|
||||
|
||||
import { useAppForm } from "@/utils/formStuff";
|
||||
import { getMachineConnected } from "@/utils/querys/logistics/machineConnected";
|
||||
import { getMachineNotConnected } from "@/utils/querys/logistics/notConnected";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import axios from "axios";
|
||||
import { useState } from "react";
|
||||
import { toast } from "sonner";
|
||||
|
||||
export function AttachSilo(props: any) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const { data, isError, isLoading, refetch } = useQuery(
|
||||
getMachineNotConnected({
|
||||
siloID: props.silo.LocationID,
|
||||
connectionType: "detached",
|
||||
})
|
||||
);
|
||||
const { refetch: attached } = useQuery(
|
||||
getMachineConnected({
|
||||
siloID: props.silo.LocationID,
|
||||
connectionType: "connected",
|
||||
})
|
||||
);
|
||||
|
||||
const form = useAppForm({
|
||||
defaultValues: {
|
||||
laneId: props.silo.LocationID,
|
||||
productionLotId: "",
|
||||
machineId: "",
|
||||
},
|
||||
onSubmit: async ({ value }) => {
|
||||
try {
|
||||
const res = await axios.post(
|
||||
"/api/logistics/attachsilo",
|
||||
value
|
||||
);
|
||||
|
||||
if (res.data.success) {
|
||||
toast.success(res.data.message);
|
||||
refetch();
|
||||
attached();
|
||||
form.reset();
|
||||
setOpen(!open);
|
||||
} else {
|
||||
console.log(res.data);
|
||||
toast.error(res.data.message);
|
||||
refetch();
|
||||
form.reset();
|
||||
setOpen(!open);
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
toast.error(
|
||||
"There was an error attaching the silo please try again, if persist please enter a helpdesk ticket."
|
||||
);
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
if (isError)
|
||||
return (
|
||||
<div>
|
||||
<p>There was an error loading data</p>
|
||||
</div>
|
||||
);
|
||||
|
||||
if (isLoading)
|
||||
return (
|
||||
<div>
|
||||
<p>Loading....</p>
|
||||
</div>
|
||||
);
|
||||
|
||||
// convert the array that comes over to label and value
|
||||
const tranMachine = data.map((i: any) => ({
|
||||
value: i.machineId.toString(),
|
||||
label: i.name,
|
||||
}));
|
||||
|
||||
return (
|
||||
<Dialog open={open}>
|
||||
<DialogTrigger asChild>
|
||||
<Button variant="outline" onClick={() => setOpen(!open)}>
|
||||
Attach Silo
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
|
||||
<DialogContent className="sm:max-w-[425px]">
|
||||
<form
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
form.handleSubmit();
|
||||
}}
|
||||
>
|
||||
<DialogHeader>
|
||||
<DialogTitle>
|
||||
Attach silo for: {props.silo.Description}
|
||||
</DialogTitle>
|
||||
<DialogDescription>
|
||||
Enter the new lotnumber, select the machine you
|
||||
would like to attach.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div>
|
||||
<p className="text-sm">
|
||||
NOTE: If the machine you are trying to attach is not
|
||||
showing in the drop down this means it is already
|
||||
attached to this silo.
|
||||
</p>
|
||||
</div>
|
||||
<div className="mt-3">
|
||||
<form.AppField
|
||||
name="productionLotId"
|
||||
children={(field) => (
|
||||
<field.InputField
|
||||
label="Lot Number"
|
||||
inputType="number"
|
||||
required={true}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className="mt-2">
|
||||
<form.AppField
|
||||
name="machineId"
|
||||
children={(field) => (
|
||||
<field.SelectField
|
||||
label="Select Machine"
|
||||
options={tranMachine}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<DialogFooter className="mt-2">
|
||||
<DialogClose asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => setOpen(!open)}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
</DialogClose>
|
||||
<form.AppForm>
|
||||
<form.SubmitButton>Attach</form.SubmitButton>
|
||||
</form.AppForm>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,113 @@
|
||||
import { Area, AreaChart, CartesianGrid, XAxis } from "recharts";
|
||||
|
||||
import { CardContent } from "@/components/ui/card";
|
||||
|
||||
import {
|
||||
ChartConfig,
|
||||
ChartContainer,
|
||||
ChartTooltip,
|
||||
ChartTooltipContent,
|
||||
} from "@/components/ui/chart";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { getAdjustments } from "@/utils/querys/logistics/siloAdjustments/getAdjustments";
|
||||
import { LstCard } from "@/components/extendedUI/LstCard";
|
||||
import { format } from "date-fns";
|
||||
|
||||
export default function ChartData(props: any) {
|
||||
const { data, isError, isLoading } = useQuery(getAdjustments());
|
||||
const chartConfig = {
|
||||
stock: {
|
||||
label: "Stock",
|
||||
color: "rgb(255, 99, 132)",
|
||||
},
|
||||
actual: {
|
||||
label: "Actual",
|
||||
color: "rgb(53, 162, 235)",
|
||||
},
|
||||
} satisfies ChartConfig;
|
||||
|
||||
if (isLoading) return <div>Loading chart data</div>;
|
||||
if (isError) return <div>Error in loading chart data</div>;
|
||||
|
||||
let adjustments: any = data.filter(
|
||||
(l: any) => l.locationID === props.laneId
|
||||
);
|
||||
adjustments = adjustments.splice(0, 10).map((s: any) => {
|
||||
return {
|
||||
date: format(s.dateAdjusted.replace("Z", ""), "M/d/yyyy hh:mm"),
|
||||
stock: s.currentStockLevel,
|
||||
actual: s.newLevel,
|
||||
};
|
||||
});
|
||||
|
||||
return (
|
||||
<LstCard className="w-[425px] h-[250px] m-1">
|
||||
<CardContent>
|
||||
{adjustments.length === 0 ? (
|
||||
<span>No silo data has been entered for this silo.</span>
|
||||
) : (
|
||||
<ChartContainer config={chartConfig}>
|
||||
<AreaChart
|
||||
accessibilityLayer
|
||||
data={adjustments}
|
||||
margin={{
|
||||
left: 35,
|
||||
right: 45,
|
||||
bottom: 50,
|
||||
}}
|
||||
>
|
||||
<CartesianGrid vertical={false} />
|
||||
<XAxis
|
||||
dataKey="date"
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
tickMargin={14}
|
||||
angle={-45}
|
||||
textAnchor="end"
|
||||
dy={10}
|
||||
tickFormatter={(value) =>
|
||||
format(value, "M/d/yyyy")
|
||||
}
|
||||
/>
|
||||
<ChartTooltip
|
||||
cursor={false}
|
||||
content={
|
||||
<ChartTooltipContent indicator="dot" />
|
||||
}
|
||||
/>
|
||||
<Area
|
||||
dataKey="stock"
|
||||
type="natural"
|
||||
fill="rgba(53, 162, 235, 0.5)"
|
||||
fillOpacity={0.4}
|
||||
stroke="rgba(53, 162, 235, 0.5)"
|
||||
stackId="a"
|
||||
/>
|
||||
<Area
|
||||
dataKey="actual"
|
||||
type="natural"
|
||||
fill="rgba(255, 99, 132, 0.5)"
|
||||
fillOpacity={0.4}
|
||||
stroke="rgba(255, 99, 132, 0.5)"
|
||||
stackId="a"
|
||||
/>
|
||||
</AreaChart>
|
||||
</ChartContainer>
|
||||
)}
|
||||
</CardContent>
|
||||
{/* <CardFooter>
|
||||
<div className="flex w-full items-start gap-2 text-sm">
|
||||
<div className="grid gap-2">
|
||||
<div className="flex items-center gap-2 font-medium leading-none">
|
||||
Trending up by 5.2% this month{" "}
|
||||
<TrendingUp className="h-4 w-4" />
|
||||
</div>
|
||||
<div className="flex items-center gap-2 leading-none text-muted-foreground">
|
||||
January - June 2024
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardFooter> */}
|
||||
</LstCard>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,120 @@
|
||||
import { LstCard } from "@/components/extendedUI/LstCard";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { CardContent, CardFooter, CardHeader } from "@/components/ui/card";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
|
||||
import { useForm } from "@tanstack/react-form";
|
||||
import { useRouter } from "@tanstack/react-router";
|
||||
import axios from "axios";
|
||||
import { useState } from "react";
|
||||
import { toast } from "sonner";
|
||||
|
||||
export default function Comment(data: any) {
|
||||
const token = localStorage.getItem("auth_token");
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const router = useRouter();
|
||||
|
||||
const form = useForm({
|
||||
defaultValues: {
|
||||
comment: "",
|
||||
},
|
||||
onSubmit: async ({ value }) => {
|
||||
setIsSubmitting(true);
|
||||
|
||||
try {
|
||||
const res = await axios.post(
|
||||
`/api/logistics/postcomment/${data.id.split("&")[0]}`,
|
||||
{
|
||||
comment: value.comment,
|
||||
key: data.id.split("&")[1],
|
||||
},
|
||||
{ headers: { Authorization: `Bearer ${token}` } }
|
||||
);
|
||||
|
||||
if (res.data.success) {
|
||||
toast.success(res.data.message);
|
||||
form.reset();
|
||||
router.navigate({ to: "/siloAdjustments" });
|
||||
}
|
||||
|
||||
if (!res.data.success) {
|
||||
toast.error(res.data.message);
|
||||
form.reset();
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
toast.error(`There was an error posting your comment.`);
|
||||
}
|
||||
setIsSubmitting(false);
|
||||
},
|
||||
});
|
||||
return (
|
||||
<div className="">
|
||||
<LstCard>
|
||||
<CardHeader>
|
||||
Please enter your comment for the silo adjust
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
}}
|
||||
>
|
||||
<form.Field
|
||||
name="comment"
|
||||
validators={{
|
||||
// We can choose between form-wide and field-specific validators
|
||||
onChange: ({ value }) =>
|
||||
value.length > 10
|
||||
? undefined
|
||||
: "Comment must be longer than 10 characters.",
|
||||
}}
|
||||
children={(field) => {
|
||||
return (
|
||||
<div className="m-2 min-w-48 max-w-96 p-2">
|
||||
<Label
|
||||
htmlFor="comment"
|
||||
className="mb-2"
|
||||
>
|
||||
Comment
|
||||
</Label>
|
||||
<Textarea
|
||||
name={field.name}
|
||||
value={field.state.value}
|
||||
onBlur={field.handleBlur}
|
||||
//type="number"
|
||||
onChange={(e) =>
|
||||
field.handleChange(
|
||||
e.target.value
|
||||
)
|
||||
}
|
||||
/>
|
||||
{field.state.meta.errors.length ? (
|
||||
<em>
|
||||
{field.state.meta.errors.join(
|
||||
","
|
||||
)}
|
||||
</em>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</form>
|
||||
</CardContent>
|
||||
<CardFooter>
|
||||
<div className="flex justify-end">
|
||||
<Button
|
||||
onClick={form.handleSubmit}
|
||||
disabled={isSubmitting}
|
||||
>
|
||||
Submit
|
||||
</Button>
|
||||
</div>
|
||||
</CardFooter>
|
||||
</LstCard>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,151 @@
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Dialog,
|
||||
DialogClose,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from "@/components/ui/dialog";
|
||||
|
||||
import { useAppForm } from "@/utils/formStuff";
|
||||
import { getMachineConnected } from "@/utils/querys/logistics/machineConnected";
|
||||
import { getMachineNotConnected } from "@/utils/querys/logistics/notConnected";
|
||||
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import axios from "axios";
|
||||
import { useState } from "react";
|
||||
import { toast } from "sonner";
|
||||
|
||||
export function DetachSilo(props: any) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const { data, isError, isLoading, refetch } = useQuery(
|
||||
getMachineConnected({
|
||||
siloID: props.silo.LocationID,
|
||||
connectionType: "connected",
|
||||
})
|
||||
);
|
||||
|
||||
const { refetch: notConnected } = useQuery(
|
||||
getMachineNotConnected({
|
||||
siloID: props.silo.LocationID,
|
||||
connectionType: "detached",
|
||||
})
|
||||
);
|
||||
|
||||
const form = useAppForm({
|
||||
defaultValues: {
|
||||
laneId: props.silo.LocationID,
|
||||
machineId: 0,
|
||||
},
|
||||
onSubmit: async ({ value }) => {
|
||||
try {
|
||||
const res = await axios.post(
|
||||
"/api/logistics/detachsilo",
|
||||
value
|
||||
);
|
||||
|
||||
if (res.status === 200) {
|
||||
console.log(res.data.data);
|
||||
toast.success(res.data.message);
|
||||
|
||||
refetch();
|
||||
notConnected();
|
||||
form.reset();
|
||||
setOpen(!open);
|
||||
} else {
|
||||
console.log(res.data);
|
||||
toast.error(res.data.message);
|
||||
refetch();
|
||||
form.reset();
|
||||
setOpen(!open);
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
toast.error(
|
||||
"There was an error detaching the silo please try again, if persist please enter a helpdesk ticket."
|
||||
);
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
if (isError)
|
||||
return (
|
||||
<div>
|
||||
<p>There was an error loading data</p>
|
||||
</div>
|
||||
);
|
||||
|
||||
if (isLoading)
|
||||
return (
|
||||
<div>
|
||||
<p>Loading....</p>
|
||||
</div>
|
||||
);
|
||||
|
||||
// convert the array that comes over to label and value
|
||||
const tranMachine = data.map((i: any) => ({
|
||||
value: i.machineId.toString(),
|
||||
label: i.name,
|
||||
}));
|
||||
return (
|
||||
<Dialog open={open}>
|
||||
<DialogTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => setOpen(!open)}
|
||||
disabled={data.length === 0}
|
||||
>
|
||||
Detach Silo
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="sm:max-w-[425px]">
|
||||
<form
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
form.handleSubmit();
|
||||
}}
|
||||
>
|
||||
<DialogHeader>
|
||||
<DialogTitle>
|
||||
Attach silo for: {props.silo.Description}
|
||||
</DialogTitle>
|
||||
<DialogDescription>
|
||||
Select the machine you would like to detach.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="grid gap-4">
|
||||
<div className="grid gap-3">
|
||||
<div className="mt-2">
|
||||
<form.AppField
|
||||
name="machineId"
|
||||
children={(field) => (
|
||||
<field.SelectField
|
||||
label="Select Machine"
|
||||
options={tranMachine}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<DialogClose asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => setOpen(!open)}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
</DialogClose>
|
||||
<form.AppForm>
|
||||
<form.SubmitButton>Detach</form.SubmitButton>
|
||||
</form.AppForm>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
import { getAdjustments } from "@/utils/querys/logistics/siloAdjustments/getAdjustments";
|
||||
import { columns } from "@/utils/tableData/siloAdjustmentHist/siloAdjHistColumns";
|
||||
import { SiloTable } from "@/utils/tableData/siloAdjustmentHist/siloData";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
|
||||
export default function HistoricalData(props: any) {
|
||||
const { data, isError, isLoading } = useQuery(getAdjustments());
|
||||
|
||||
if (isLoading) return <div>Loading adjustmnet data...</div>;
|
||||
if (isError) {
|
||||
return (
|
||||
<div>
|
||||
<p>There was an error getting the adjustments.</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
//console.log(data[0].locationID, parseInt(props.laneId));
|
||||
const adjustments: any = data.filter(
|
||||
(l: any) => l.locationID === parseInt(props.laneId)
|
||||
);
|
||||
return (
|
||||
<div className="container mx-auto py-10">
|
||||
<SiloTable columns={columns} data={adjustments} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,263 @@
|
||||
import { LstCard } from "@/components/extendedUI/LstCard";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { CardHeader } from "@/components/ui/card";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipProvider,
|
||||
TooltipTrigger,
|
||||
} from "@/components/ui/tooltip";
|
||||
import { getStockSilo } from "@/utils/querys/logistics/siloAdjustments/getStockSilo";
|
||||
import { useForm } from "@tanstack/react-form";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { Link } from "@tanstack/react-router";
|
||||
import axios from "axios";
|
||||
import { format } from "date-fns";
|
||||
import { CircleAlert } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import { toast } from "sonner";
|
||||
import ChartData from "./ChartData";
|
||||
import { AttachSilo } from "./AttachSilo";
|
||||
import { DetachSilo } from "./DetachSilo";
|
||||
import { useSessionStore } from "@/lib/store/sessionStore";
|
||||
import { useModuleStore } from "@/lib/store/useModuleStore";
|
||||
import { useGetUserRoles } from "@/lib/store/useGetRoles";
|
||||
|
||||
export default function SiloCard(data: any) {
|
||||
const token = localStorage.getItem("auth_token");
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
const { refetch } = useQuery(getStockSilo());
|
||||
const { user } = useSessionStore();
|
||||
const { userRoles } = useGetUserRoles();
|
||||
const { modules } = useModuleStore();
|
||||
const silo = data.silo;
|
||||
|
||||
// roles that can do the silo adjustments
|
||||
const roles = ["systemAdmin", "technician", "admin", "manager"];
|
||||
|
||||
const module = modules.filter((n) => n.name === "logistics");
|
||||
|
||||
const accessRoles = userRoles.filter(
|
||||
(n) => n.module_id === module[0]?.module_id
|
||||
) as any;
|
||||
|
||||
const form = useForm({
|
||||
defaultValues: {
|
||||
newLevel: "",
|
||||
},
|
||||
onSubmit: async ({ value }) => {
|
||||
setSubmitting(true);
|
||||
const dataToSubmit = {
|
||||
quantity: parseFloat(value.newLevel),
|
||||
warehouseId: silo.WarehouseID,
|
||||
laneId: silo.LocationID,
|
||||
};
|
||||
|
||||
try {
|
||||
const res = await axios.post(
|
||||
"/api/logistics/createsiloadjustment",
|
||||
dataToSubmit,
|
||||
{ headers: { Authorization: `Bearer ${token}` } }
|
||||
);
|
||||
//console.log(res.data);
|
||||
|
||||
if (res.data.success) {
|
||||
toast.success(res.data.message);
|
||||
refetch();
|
||||
form.reset();
|
||||
}
|
||||
if (!res.data.success && res.data.data?.status === 400) {
|
||||
if (res.data.data.status === 400) {
|
||||
toast.error(res.data.data.data.errors[0].message);
|
||||
}
|
||||
} else if (!res.data.success) {
|
||||
toast.error(res.data.message);
|
||||
}
|
||||
setSubmitting(false);
|
||||
} catch (error: any) {
|
||||
//console.log(error);
|
||||
if (error.status === 401) {
|
||||
toast.error(error.response.statusText);
|
||||
setSubmitting(false);
|
||||
}
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
console.log(accessRoles);
|
||||
return (
|
||||
<LstCard>
|
||||
<div className="flex flex-row">
|
||||
<LstCard className="grow m-1 max-w-[400px]">
|
||||
<CardHeader>{silo.Description}</CardHeader>
|
||||
<div className="m-1">
|
||||
<hr className="m-2" />
|
||||
<span>Current Stock: </span>
|
||||
{silo.Stock_Total}
|
||||
<hr className="m-2" />
|
||||
<span>Last date adjusted </span>
|
||||
{format(silo.LastAdjustment, "M/dd/yyyy")}
|
||||
<hr className="m-2" />
|
||||
</div>
|
||||
<div>
|
||||
{silo.Stock_Total === 0 ? (
|
||||
<div className="flex justify-center flex-col">
|
||||
<span>
|
||||
The silo is currently empty you will not be
|
||||
able to do an adjustment until you have
|
||||
received material in.
|
||||
</span>
|
||||
<hr />
|
||||
<ul>
|
||||
<li>
|
||||
-Someone click "Take inventory on a
|
||||
empty location" in stock.
|
||||
</li>
|
||||
<li>
|
||||
-Silo virtualy ran empty due to
|
||||
production over consumption.
|
||||
</li>
|
||||
<li>
|
||||
-Someone forgot to move a railcar
|
||||
compartment over to this location.
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{user &&
|
||||
roles.includes(accessRoles[0]?.role) && (
|
||||
<form
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
}}
|
||||
>
|
||||
<form.Field
|
||||
name="newLevel"
|
||||
validators={{
|
||||
// We can choose between form-wide and field-specific validators
|
||||
onChange: ({ value }) =>
|
||||
value.length > 1
|
||||
? undefined
|
||||
: "You must enter a value greate than 1",
|
||||
}}
|
||||
children={(field) => {
|
||||
return (
|
||||
<div className="m-2 min-w-48 max-w-96 p-2">
|
||||
<div className="flex flex-row">
|
||||
<Label htmlFor="newLevel">
|
||||
New level
|
||||
</Label>
|
||||
<div>
|
||||
<Disclaimer />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-row">
|
||||
<Input
|
||||
name={
|
||||
field.name
|
||||
}
|
||||
value={
|
||||
field
|
||||
.state
|
||||
.value
|
||||
}
|
||||
onBlur={
|
||||
field.handleBlur
|
||||
}
|
||||
type="decimal"
|
||||
onChange={(
|
||||
e
|
||||
) =>
|
||||
field.handleChange(
|
||||
e
|
||||
.target
|
||||
.value
|
||||
)
|
||||
}
|
||||
/>
|
||||
<Button
|
||||
className="ml-1"
|
||||
variant="outline"
|
||||
type="submit"
|
||||
onClick={
|
||||
form.handleSubmit
|
||||
}
|
||||
disabled={
|
||||
submitting
|
||||
}
|
||||
>
|
||||
{submitting ? (
|
||||
<span className="w-24">
|
||||
Submitting...
|
||||
</span>
|
||||
) : (
|
||||
<span className="w-24">
|
||||
Submit
|
||||
</span>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{field.state.meta
|
||||
.errors
|
||||
.length ? (
|
||||
<em>
|
||||
{field.state.meta.errors.join(
|
||||
","
|
||||
)}
|
||||
</em>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</form>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</LstCard>
|
||||
<div className="grow max-w-[600px]">
|
||||
<ChartData laneId={silo.LocationID} />
|
||||
|
||||
<div className="flex justify-end m-1 gap-3">
|
||||
<AttachSilo silo={silo} />
|
||||
<DetachSilo silo={silo} />
|
||||
<Button variant="outline">
|
||||
<Link
|
||||
to={"/siloAdjustments/$hist"}
|
||||
params={{ hist: silo.LocationID }}
|
||||
>
|
||||
Historical Data
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</LstCard>
|
||||
);
|
||||
}
|
||||
|
||||
const Disclaimer = () => {
|
||||
return (
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<CircleAlert className="ml-1 w-[14px]" />
|
||||
</TooltipTrigger>
|
||||
<TooltipContent className="max-w-48">
|
||||
<p className="text-pretty">
|
||||
If you have had this page open for a period of time
|
||||
before submitting your data, there is a chance that the
|
||||
stock levels will be different from the ones you see
|
||||
above
|
||||
</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,30 @@
|
||||
import { getStockSilo } from "@/utils/querys/logistics/siloAdjustments/getStockSilo";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import SiloCard from "./SiloCard";
|
||||
|
||||
export default function SiloPage() {
|
||||
const { data, isError, error, isLoading } = useQuery(getStockSilo());
|
||||
|
||||
if (isLoading) return;
|
||||
|
||||
if (isError) return;
|
||||
|
||||
if (error)
|
||||
return (
|
||||
<div>
|
||||
{" "}
|
||||
There was an error getting the silos please notify your admin if
|
||||
this continues to be an issue
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="flex flex-wrap">
|
||||
{data?.map((s: any) => (
|
||||
<div key={s.LocationID} className="grow m-2 max-w-[800px]">
|
||||
<SiloCard silo={s} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,153 @@
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from "@/components/ui/dialog";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
|
||||
import { useForm } from "@tanstack/react-form";
|
||||
import axios from "axios";
|
||||
import { format } from "date-fns";
|
||||
import { useState } from "react";
|
||||
import { toast } from "sonner";
|
||||
|
||||
export default function ExportInventoryData() {
|
||||
const [open, setOpen] = useState(false);
|
||||
const [saving, setSaving] = useState(false);
|
||||
|
||||
const form = useForm({
|
||||
defaultValues: {
|
||||
age: "",
|
||||
},
|
||||
onSubmit: async ({ value }) => {
|
||||
setSaving(true);
|
||||
try {
|
||||
const res = await axios.get(
|
||||
`/api/logistics/getcyclecount?age=${value.age}`,
|
||||
{
|
||||
responseType: "blob",
|
||||
}
|
||||
);
|
||||
|
||||
const blob = new Blob([res.data], {
|
||||
type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
|
||||
});
|
||||
|
||||
const link = document.createElement("a");
|
||||
link.href = window.URL.createObjectURL(blob);
|
||||
link.download = `CycleCount-${format(new Date(Date.now()), "M-d-yyyy")}.xlsx`; // You can make this dynamic
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
|
||||
// Clean up
|
||||
document.body.removeChild(link);
|
||||
window.URL.revokeObjectURL(link.href);
|
||||
toast.success(`File Downloaded`);
|
||||
setSaving(false);
|
||||
setOpen(false);
|
||||
form.reset();
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
console.log(`There was an error getting cycle counts.`);
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Dialog
|
||||
open={open}
|
||||
onOpenChange={(isOpen) => {
|
||||
if (!open) {
|
||||
form.reset();
|
||||
}
|
||||
setOpen(isOpen);
|
||||
// toast.message("Model was something", {
|
||||
// description: isOpen ? "Modal is open" : "Modal is closed",
|
||||
// });
|
||||
}}
|
||||
>
|
||||
<DialogTrigger asChild>
|
||||
<Button variant="outline">Export Inventory Check</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="sm:max-w-[425px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Export Inventory lane check</DialogTitle>
|
||||
<DialogDescription>
|
||||
Exports all lanes based on the age you enter, except
|
||||
empty lanes.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<form
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
<>
|
||||
<form.Field
|
||||
name="age"
|
||||
// validators={{
|
||||
// // We can choose between form-wide and field-specific validators
|
||||
// onChange: ({ value }) =>
|
||||
// value.length > 3
|
||||
// ? undefined
|
||||
// : "Username must be longer than 3 letters",
|
||||
// }}
|
||||
children={(field) => {
|
||||
return (
|
||||
<div className="m-2 min-w-48 max-w-96 p-2 flex flex-row">
|
||||
<Label htmlFor="active">
|
||||
Age
|
||||
</Label>
|
||||
<Input
|
||||
className="ml-2"
|
||||
name={field.name}
|
||||
onBlur={field.handleBlur}
|
||||
type="number"
|
||||
onChange={(e) =>
|
||||
field.handleChange(
|
||||
e.target.value
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<div className="flex justify-end mt-2">
|
||||
<Button onClick={() => setOpen(false)}>
|
||||
Close
|
||||
</Button>
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={saving}
|
||||
onClick={form.handleSubmit}
|
||||
>
|
||||
{saving ? (
|
||||
<>
|
||||
<span>Saving....</span>
|
||||
</>
|
||||
) : (
|
||||
<span>Save setting</span>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
//import { LstCard } from "@/components/extendedUI/LstCard";
|
||||
import { getinventoryCheck } from "@/utils/querys/logistics/getInventoryCheck";
|
||||
import { invColumns } from "@/utils/tableData/InventoryCards/inventoryColumns";
|
||||
import { InvTable } from "@/utils/tableData/InventoryCards/inventoryData";
|
||||
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
//import { CircleX } from "lucide-react";
|
||||
//import { Suspense } from "react";
|
||||
//import { toast } from "sonner";
|
||||
|
||||
export default function INVCheckCard(props: any) {
|
||||
const { age, rowType } = props.data;
|
||||
|
||||
//console.log(props.data);
|
||||
const { data, isError, isLoading } = useQuery(
|
||||
getinventoryCheck({ age: age })
|
||||
);
|
||||
|
||||
if (isLoading) return <div>Loading inventory data...</div>;
|
||||
if (isError) {
|
||||
return (
|
||||
<div>
|
||||
<p>There was an error getting the inv.</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
let laneData: any = data;
|
||||
if (props.type != "") {
|
||||
laneData = laneData.filter(
|
||||
(l: any) => l.rowType === rowType.toUpperCase()
|
||||
);
|
||||
|
||||
// age
|
||||
laneData = laneData.filter((l: any) => l.DaysSinceLast >= age);
|
||||
}
|
||||
|
||||
// const handleCloseCard = () => {
|
||||
// //removeCard("PPOO");
|
||||
|
||||
// toast.success("card removed");
|
||||
// };
|
||||
|
||||
return <InvTable columns={invColumns} data={laneData} info={props.data} />;
|
||||
}
|
||||
@@ -0,0 +1,61 @@
|
||||
//import { LstCard } from "@/components/extendedUI/LstCard";
|
||||
import { getPPOO } from "@/utils/querys/logistics/getPPOO";
|
||||
import { columns } from "@/utils/tableData/ppoo/ppooColumns";
|
||||
import { PPOOTable } from "@/utils/tableData/ppoo/ppooData";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
//import { CircleX } from "lucide-react";
|
||||
//import { Suspense } from "react";
|
||||
//import { toast } from "sonner";
|
||||
|
||||
export default function PPOO() {
|
||||
//{ style = {} }
|
||||
const { data, isError, isLoading } = useQuery(getPPOO());
|
||||
|
||||
if (isLoading) return <div>Loading adjustmnet data...</div>;
|
||||
if (isError) {
|
||||
return (
|
||||
<div>
|
||||
<p>There was an error getting the adjustments.</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// const handleCloseCard = () => {
|
||||
// //removeCard("PPOO");
|
||||
|
||||
// toast.success("card removed");
|
||||
// };
|
||||
|
||||
return (
|
||||
<PPOOTable
|
||||
columns={columns}
|
||||
data={data}
|
||||
//style={style}
|
||||
/>
|
||||
);
|
||||
// return (
|
||||
// <div style={style}>
|
||||
// <LstCard style={style}>
|
||||
// <Suspense fallback={<p>Loading PPOO...</p>}>
|
||||
// <div className={`flex justify-center`}>
|
||||
// <p
|
||||
// className={`drag-handle w-fit`}
|
||||
// style={{ cursor: "move", padding: "5px" }}
|
||||
// >
|
||||
// PPOO
|
||||
// </p>
|
||||
|
||||
// <button onClick={handleCloseCard}>
|
||||
// <CircleX />
|
||||
// </button>
|
||||
// </div>
|
||||
// <PPOOTable
|
||||
// columns={columns}
|
||||
// data={data}
|
||||
// //style={style}
|
||||
// />
|
||||
// </Suspense>
|
||||
// </LstCard>
|
||||
// </div>
|
||||
// );
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
//import { LstCard } from "@/components/extendedUI/LstCard";
|
||||
|
||||
import { getOpenOrders } from "@/utils/querys/logistics/getOpenOrders";
|
||||
import { openOrderColumns } from "@/utils/tableData/openorders/ooColumns";
|
||||
import { OpenOrderTable } from "@/utils/tableData/openorders/ooData";
|
||||
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
//import { CircleX } from "lucide-react";
|
||||
//import { Suspense } from "react";
|
||||
//import { toast } from "sonner";
|
||||
|
||||
export default function OpenOrders() {
|
||||
//{ style = {} }
|
||||
const { data, isError, isLoading } = useQuery(getOpenOrders());
|
||||
|
||||
if (isLoading) return <div>Loading openOrder data...</div>;
|
||||
if (isError) {
|
||||
return (
|
||||
<div>
|
||||
<p>There was an error getting the openorders.</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
let openOrders: any = data;
|
||||
|
||||
// const handleCloseCard = () => {
|
||||
// //removeCard("PPOO");
|
||||
|
||||
// toast.success("card removed");
|
||||
// };
|
||||
|
||||
return <OpenOrderTable columns={openOrderColumns} data={openOrders} />;
|
||||
}
|
||||
71
lstV2/frontend/src/components/ocme/CycleCountLog.tsx
Normal file
71
lstV2/frontend/src/components/ocme/CycleCountLog.tsx
Normal file
@@ -0,0 +1,71 @@
|
||||
/**
|
||||
* we will do a very sloppy way for this just keep fetching the logs we spent to much time on this :()
|
||||
*/
|
||||
|
||||
// //import {useEffect, useState} from "react";
|
||||
// import {LstCard} from "../extendedUI/LstCard";
|
||||
// import {CardContent, CardHeader} from "../ui/card";
|
||||
// import {Skeleton} from "../ui/skeleton";
|
||||
// import {Button} from "../ui/button";
|
||||
// import {toast} from "sonner";
|
||||
// import {useEffect} from "react";
|
||||
|
||||
// export default function CycleCountLog() {
|
||||
// //const [logs, setLogs] = useState([]);
|
||||
// //const [streaming, setStreaming] = useState(false); // Track if streaming is active
|
||||
|
||||
// useEffect(() => {
|
||||
// // Start streaming when the button is clicked
|
||||
// let es;
|
||||
|
||||
// const url = `http://localhost:4000/api/logger/logs/stream?service=ocme-count&level=info`;
|
||||
|
||||
// es = new EventSource(url);
|
||||
// es.onopen = () => console.log(">>> Connection opened!");
|
||||
// es.onerror = (e) => console.log("ERROR!", e);
|
||||
// es.onmessage = (e) => {
|
||||
// const data = JSON.parse(e.data);
|
||||
|
||||
// console.log(e);
|
||||
// console.log(data);
|
||||
// switch (data.type) {
|
||||
// case "time-update":
|
||||
// console.log(data);
|
||||
// break;
|
||||
// case "error":
|
||||
// console.log(data);
|
||||
// break;
|
||||
// case "done":
|
||||
// console.log(data);
|
||||
// es.close(); // Close the connection when done
|
||||
|
||||
// break;
|
||||
// default:
|
||||
// break;
|
||||
// }
|
||||
// };
|
||||
|
||||
// return () => es.close();
|
||||
// }, []);
|
||||
|
||||
// // const handleStartStreaming = () => {
|
||||
// // setStreaming(true); // Start streaming when button is clicked
|
||||
// // };
|
||||
// return (
|
||||
// <LstCard className="w-48">
|
||||
// <CardHeader className="flex justify-center">
|
||||
// <span>Cycle Count logs</span>
|
||||
// </CardHeader>
|
||||
// <CardContent>
|
||||
// {Array(10)
|
||||
// .fill(0)
|
||||
// .map((_, i) => (
|
||||
// <div key={i}>
|
||||
// <Skeleton className="m-2 h-4" />
|
||||
// </div>
|
||||
// ))}
|
||||
// </CardContent>
|
||||
// <Button onClick={() => toast.success("SOmething")}>Start Stream</Button>
|
||||
// </LstCard>
|
||||
// );
|
||||
// }
|
||||
106
lstV2/frontend/src/components/ocme/ManuallyEnterRn.tsx
Normal file
106
lstV2/frontend/src/components/ocme/ManuallyEnterRn.tsx
Normal file
@@ -0,0 +1,106 @@
|
||||
import { useForm } from "@tanstack/react-form";
|
||||
import { Input } from "../ui/input";
|
||||
import { Label } from "../ui/label";
|
||||
import axios from "axios";
|
||||
import { toast } from "sonner";
|
||||
import { Button } from "../ui/button";
|
||||
import { useState } from "react";
|
||||
|
||||
export default function ManuallyEnterRn() {
|
||||
const [sending, setSendingRn] = useState(false);
|
||||
const form = useForm({
|
||||
defaultValues: {
|
||||
runningNr: "",
|
||||
},
|
||||
onSubmit: async ({ value }) => {
|
||||
console.log(value);
|
||||
setSendingRn(true);
|
||||
try {
|
||||
const res = await axios.post("/ocme/api/v1/postRunningNumber", {
|
||||
runningNr: value.runningNr,
|
||||
areaFrom: "wrapper_1",
|
||||
completed: true,
|
||||
});
|
||||
|
||||
if (res.data.success) {
|
||||
form.reset();
|
||||
toast.success(
|
||||
`${value.runningNr} was just created please login`
|
||||
);
|
||||
setTimeout(() => {
|
||||
setSendingRn(false);
|
||||
}, 3 * 1000);
|
||||
}
|
||||
|
||||
if (!res.data.success) {
|
||||
toast.error(res.data.message);
|
||||
setTimeout(() => {
|
||||
setSendingRn(false);
|
||||
}, 3 * 1000);
|
||||
}
|
||||
} catch (error) {
|
||||
//console.log(error);
|
||||
toast.error("There was an error registering");
|
||||
setTimeout(() => {
|
||||
setSendingRn(false);
|
||||
}, 3 * 1000);
|
||||
}
|
||||
},
|
||||
});
|
||||
return (
|
||||
<div>
|
||||
<form
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
//e.stopPropagation();
|
||||
}}
|
||||
>
|
||||
<form.Field
|
||||
name="runningNr"
|
||||
validators={{
|
||||
// We can choose between form-wide and field-specific validators
|
||||
onChange: ({ value }) =>
|
||||
value.length > 3
|
||||
? undefined
|
||||
: "pallet number must be greater than 4 numbers",
|
||||
}}
|
||||
children={(field) => {
|
||||
return (
|
||||
<div className="m-2 min-w-48 max-w-96 p-2 flex flex-row">
|
||||
<div>
|
||||
<Label htmlFor="runningNr" className="mb-2">
|
||||
Running Number
|
||||
</Label>
|
||||
<Input
|
||||
name={field.name}
|
||||
value={field.state.value}
|
||||
onBlur={field.handleBlur}
|
||||
type="number"
|
||||
onChange={(e) =>
|
||||
field.handleChange(e.target.value)
|
||||
}
|
||||
/>
|
||||
{field.state.meta.errors.length ? (
|
||||
<em>
|
||||
{field.state.meta.errors.join(",")}
|
||||
</em>
|
||||
) : null}
|
||||
</div>
|
||||
<div className="ml-1 mt-5">
|
||||
<Button
|
||||
className="ml-1"
|
||||
type="submit"
|
||||
onClick={form.handleSubmit}
|
||||
disabled={sending}
|
||||
>
|
||||
Submit
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
172
lstV2/frontend/src/components/ocme/WrapperCard.tsx
Normal file
172
lstV2/frontend/src/components/ocme/WrapperCard.tsx
Normal file
@@ -0,0 +1,172 @@
|
||||
import axios from "axios";
|
||||
import { LstCard } from "../extendedUI/LstCard";
|
||||
import { Button } from "../ui/button";
|
||||
import { ScrollArea } from "../ui/scroll-area";
|
||||
import { Skeleton } from "../ui/skeleton";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "../ui/table";
|
||||
import { toast } from "sonner";
|
||||
import { getOcmeInfo } from "@/utils/querys/production/getOcmeInfo";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { format } from "date-fns";
|
||||
import { Trash } from "lucide-react";
|
||||
import ManualTrigger from "../logistics/rfid/ManualTrigger";
|
||||
|
||||
const currentPallets = [
|
||||
{ key: "line", label: "Line" },
|
||||
{ key: "runningNumber", label: "Running #" },
|
||||
{ key: "upd_date", label: "Date Scanned" },
|
||||
{ key: "waitingfor", label: "Waiting For" },
|
||||
{ key: "clear", label: "Clear" },
|
||||
];
|
||||
|
||||
// const currentTags = [
|
||||
// { key: "line", label: "Line" },
|
||||
// { key: "printerName", label: "Printer" },
|
||||
// { key: "runningNr", label: "Running #" },
|
||||
// { key: "upd_date", label: "Label date" },
|
||||
// { key: "status", label: "Label Status" },
|
||||
// ];
|
||||
export default function WrapperManualTrigger() {
|
||||
const { data, isError, isLoading } = useQuery(getOcmeInfo());
|
||||
const cameraTrigger = async () => {
|
||||
try {
|
||||
const res = await axios.get("/ocme/api/v1/manualCameraTrigger");
|
||||
|
||||
if (res.data.success) {
|
||||
toast.success(res.data.message);
|
||||
return;
|
||||
}
|
||||
|
||||
if (!res.data.success) {
|
||||
toast.error(res.data.message);
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
//stoast.success(error.data.message);
|
||||
}
|
||||
};
|
||||
|
||||
const clearLabel = async (d: any) => {
|
||||
const data = {
|
||||
runningNr: d.runningNr,
|
||||
};
|
||||
|
||||
try {
|
||||
const res = await axios.patch("/ocme/api/v1/pickedUp", data);
|
||||
|
||||
if (res.data.success) {
|
||||
toast.success(
|
||||
`${d.runningNr} was just removed from being picked up.`
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
if (!res.data.success) {
|
||||
toast.error(res.data.message);
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
//stoast.success(error.data.message);
|
||||
}
|
||||
};
|
||||
|
||||
if (isError) {
|
||||
return (
|
||||
<div>
|
||||
<p className="text-center text-pretty">
|
||||
There was an error getting wrapper scans
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const info = data?.filter((r: any) => r.areaFrom === "wrapper_1");
|
||||
return (
|
||||
<LstCard className="m-2 p-2 w-auto">
|
||||
<ScrollArea className="max-h-[200px]">
|
||||
<span>Wrapper Pallet Info</span>
|
||||
<div>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
{currentPallets.map((l) => (
|
||||
<TableHead key={l.key}>{l.label}</TableHead>
|
||||
))}
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
{isLoading ? (
|
||||
<TableBody>
|
||||
{Array(3)
|
||||
.fill(0)
|
||||
.map((_, i) => (
|
||||
<TableRow key={i}>
|
||||
<TableCell className="font-medium">
|
||||
<Skeleton className="h-4" />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton className="h-4" />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton className="h-4" />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton className="h-4" />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton className="h-4" />
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
) : (
|
||||
<TableBody>
|
||||
{info.map((i: any) => (
|
||||
<TableRow key={i.runningNr}>
|
||||
<TableCell className="font-medium">
|
||||
{i.lineNum}
|
||||
</TableCell>
|
||||
<TableCell>{i.runningNr}</TableCell>
|
||||
<TableCell>
|
||||
{format(
|
||||
i?.upd_date.replace("Z", ""),
|
||||
"M/d/yyyy hh:mm"
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell>{i.waitingFor}</TableCell>
|
||||
<TableCell>
|
||||
<Button
|
||||
variant="destructive"
|
||||
size="icon"
|
||||
onClick={() => clearLabel(i)}
|
||||
>
|
||||
<Trash />
|
||||
</Button>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
)}
|
||||
</Table>
|
||||
</div>
|
||||
</ScrollArea>
|
||||
|
||||
<div>
|
||||
<hr />
|
||||
{/* <p className="text-center mb-3">Manual Trigger</p>
|
||||
<ManuallyEnterRn />
|
||||
<Separator className="m-1" /> */}
|
||||
<div className="flex flex-row justify-between m-2">
|
||||
<Button onClick={cameraTrigger}>Camera</Button>
|
||||
<ManualTrigger />
|
||||
</div>
|
||||
</div>
|
||||
</LstCard>
|
||||
);
|
||||
}
|
||||
260
lstV2/frontend/src/components/ocme/ocmeCycleCount.tsx
Normal file
260
lstV2/frontend/src/components/ocme/ocmeCycleCount.tsx
Normal file
@@ -0,0 +1,260 @@
|
||||
import { toast } from "sonner";
|
||||
import { LstCard } from "../extendedUI/LstCard";
|
||||
import { Button } from "../ui/button";
|
||||
import { Input } from "../ui/input";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "../ui/table";
|
||||
import { Skeleton } from "../ui/skeleton";
|
||||
//import CycleCountLog from "./CycleCountLog";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "../ui/select";
|
||||
import { Controller, useForm } from "react-hook-form";
|
||||
import axios from "axios";
|
||||
import { useState } from "react";
|
||||
|
||||
export default function OcmeCycleCount() {
|
||||
const token = localStorage.getItem("auth_token");
|
||||
const [data, setData] = useState([]);
|
||||
const [counting, setCounting] = useState(false);
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
//watch,
|
||||
formState: { errors },
|
||||
reset,
|
||||
control,
|
||||
} = useForm({
|
||||
defaultValues: {
|
||||
lane: "",
|
||||
laneType: "name",
|
||||
},
|
||||
});
|
||||
|
||||
const onSubmit = async (data: any) => {
|
||||
setData([]);
|
||||
setCounting(true);
|
||||
|
||||
if (data.laneType === "") {
|
||||
toast.error("Please select a type");
|
||||
setCounting(false);
|
||||
return;
|
||||
}
|
||||
toast.success(`Cycle count started`);
|
||||
try {
|
||||
const res = await axios.post("/ocme/api/v1/cycleCount", data, {
|
||||
headers: { Authorization: `Bearer ${token}` },
|
||||
});
|
||||
|
||||
if (res.data.success) {
|
||||
toast.success(res.data.message);
|
||||
setData(res.data.data);
|
||||
setCounting(false);
|
||||
reset();
|
||||
}
|
||||
|
||||
if (!res.data.success) {
|
||||
toast.success(res.data.message);
|
||||
|
||||
setCounting(false);
|
||||
}
|
||||
} catch (error) {
|
||||
toast.error("There was an error cycle counting");
|
||||
setCounting(false);
|
||||
reset();
|
||||
}
|
||||
};
|
||||
return (
|
||||
<div className="flex flex-row w-screen">
|
||||
<div className="m-2 w-5/6">
|
||||
<LstCard>
|
||||
<p className="ml-2">
|
||||
Please enter the name or laneID you want to cycle count.
|
||||
</p>
|
||||
<div>
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<div className="flex justify-between">
|
||||
<div className="m-2 flex flex-row">
|
||||
<Input
|
||||
placeholder="enter lane: L064"
|
||||
className={
|
||||
errors.lane ? "border-red-500" : ""
|
||||
}
|
||||
aria-invalid={!!errors.lane}
|
||||
{...register("lane", {
|
||||
required: true,
|
||||
minLength: {
|
||||
value: 3,
|
||||
message:
|
||||
"The lane is too short!",
|
||||
},
|
||||
})}
|
||||
/>
|
||||
<div className="ml-2">
|
||||
<Controller
|
||||
control={control}
|
||||
name="laneType"
|
||||
render={({
|
||||
field: { onChange },
|
||||
fieldState: {},
|
||||
//formState,
|
||||
}) => (
|
||||
<Select
|
||||
onValueChange={onChange}
|
||||
>
|
||||
<SelectTrigger className="w-[180px]">
|
||||
<SelectValue placeholder="Select name or id" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="name">
|
||||
Name
|
||||
</SelectItem>
|
||||
<SelectItem value="laneID">
|
||||
Lane ID
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
className="m-2"
|
||||
type="submit"
|
||||
disabled={counting}
|
||||
>
|
||||
{counting ? (
|
||||
<span>Counting...</span>
|
||||
) : (
|
||||
<span>CycleCount</span>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>LaneID</TableHead>
|
||||
<TableHead>Lane</TableHead>
|
||||
<TableHead>AV</TableHead>
|
||||
<TableHead>Description</TableHead>
|
||||
<TableHead>Running Number</TableHead>
|
||||
<TableHead>In Ocme</TableHead>
|
||||
<TableHead>In Stock</TableHead>
|
||||
<TableHead>Result</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
{data?.length === 0 ? (
|
||||
<TableBody>
|
||||
{Array(10)
|
||||
.fill(0)
|
||||
.map((_, i) => (
|
||||
<TableRow key={i}>
|
||||
<TableCell className="font-medium">
|
||||
<Skeleton className="h-4" />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton className="h-4" />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton className="h-4" />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton className="h-4" />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton className="h-4" />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton className="h-4" />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton className="h-4" />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton className="h-4" />
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
) : (
|
||||
<>
|
||||
{data.map((i: any) => {
|
||||
let classname = ``;
|
||||
if (
|
||||
i.info === "Validate pallet is ok."
|
||||
) {
|
||||
classname = `bg-red-500`;
|
||||
}
|
||||
if (i.info === "Sent to Inv") {
|
||||
classname = `bg-amber-700`;
|
||||
}
|
||||
return (
|
||||
<TableRow key={i.runningNumber}>
|
||||
<TableCell
|
||||
className={`font-medium ${classname}`}
|
||||
>
|
||||
{i.alpla_laneID}
|
||||
</TableCell>
|
||||
<TableCell
|
||||
className={`font-medium ${classname}`}
|
||||
>
|
||||
{i.alpla_laneDescription}
|
||||
</TableCell>
|
||||
<TableCell
|
||||
className={`font-medium ${classname}`}
|
||||
>
|
||||
{i.Article}
|
||||
</TableCell>
|
||||
<TableCell
|
||||
className={`font-medium ${classname}`}
|
||||
>
|
||||
{i.alpla_laneDescription}
|
||||
</TableCell>
|
||||
<TableCell
|
||||
className={`font-medium ${classname}`}
|
||||
>
|
||||
{i.runningNumber}
|
||||
</TableCell>
|
||||
<TableCell
|
||||
className={`font-medium ${classname}`}
|
||||
>
|
||||
{i.ocme}
|
||||
</TableCell>
|
||||
<TableCell
|
||||
className={`font-medium ${classname}`}
|
||||
>
|
||||
{i.stock}
|
||||
</TableCell>
|
||||
<TableCell
|
||||
className={`font-medium ${classname}`}
|
||||
>
|
||||
{i.info}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
})}
|
||||
</>
|
||||
)}
|
||||
</Table>
|
||||
</div>
|
||||
</LstCard>
|
||||
</div>
|
||||
{/* <div className="m-2">
|
||||
<CycleCountLog />
|
||||
</div> */}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
25
lstV2/frontend/src/components/production/ocp/LabelLog.tsx
Normal file
25
lstV2/frontend/src/components/production/ocp/LabelLog.tsx
Normal file
@@ -0,0 +1,25 @@
|
||||
// import {useSessionStore} from "@/lib/store/sessionStore";
|
||||
// import {useSettingStore} from "@/lib/store/useSettings";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { getlabels } from "@/utils/querys/production/labels";
|
||||
|
||||
import { LabelTable } from "@/utils/tableData/production/labels/labelData";
|
||||
import { labelolumns } from "@/utils/tableData/production/labels/labelColumns";
|
||||
|
||||
export default function LabelLog() {
|
||||
const { data, isError, isLoading } = useQuery(getlabels("4"));
|
||||
|
||||
if (isError) return <div>Error</div>;
|
||||
|
||||
if (isLoading) return <div>Loading</div>;
|
||||
const labelData = data ? data : [];
|
||||
return (
|
||||
<div className="m-2">
|
||||
<LabelTable
|
||||
columns={labelolumns}
|
||||
data={labelData}
|
||||
//style={style}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
27
lstV2/frontend/src/components/production/ocp/LabelRatio.tsx
Normal file
27
lstV2/frontend/src/components/production/ocp/LabelRatio.tsx
Normal file
@@ -0,0 +1,27 @@
|
||||
import { getlabelRatio } from "@/utils/querys/production/labelRatio";
|
||||
import { labelRatioColumns } from "@/utils/tableData/production/labelRatio/labelRatioColumns";
|
||||
import { LabelRatioTable } from "@/utils/tableData/production/labelRatio/labelRatioData";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
|
||||
export default function LabelRatio() {
|
||||
const { data, isError, isLoading } = useQuery(getlabelRatio());
|
||||
|
||||
const ratioData = data ? data : [];
|
||||
if (isError) {
|
||||
return <div>Error</div>;
|
||||
}
|
||||
|
||||
if (isLoading) {
|
||||
return <div>Loading</div>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="m-2">
|
||||
<LabelRatioTable
|
||||
columns={labelRatioColumns}
|
||||
data={ratioData}
|
||||
//style={style}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
273
lstV2/frontend/src/components/production/ocp/Lots.tsx
Normal file
273
lstV2/frontend/src/components/production/ocp/Lots.tsx
Normal file
@@ -0,0 +1,273 @@
|
||||
import { LstCard } from "@/components/extendedUI/LstCard";
|
||||
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
import { useSessionStore } from "@/lib/store/sessionStore";
|
||||
import { useSettingStore } from "@/lib/store/useSettings";
|
||||
import { LotType } from "@/types/lots";
|
||||
import { getlots } from "@/utils/querys/production/lots";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import ManualPrint from "./ManualPrinting/ManualPrint";
|
||||
import ManualPrintForm from "./ManualPrinting/ManualPrintForm";
|
||||
import { ScrollArea } from "@/components/ui/scroll-area";
|
||||
import { useGetUserRoles } from "@/lib/store/useGetRoles";
|
||||
import { useModuleStore } from "@/lib/store/useModuleStore";
|
||||
|
||||
let lotColumns = [
|
||||
{
|
||||
key: "MachineDescription",
|
||||
label: "Machine",
|
||||
},
|
||||
{
|
||||
key: "AV",
|
||||
label: "AV",
|
||||
},
|
||||
{
|
||||
key: "Alias",
|
||||
label: "AvDescription",
|
||||
},
|
||||
{
|
||||
key: "lot",
|
||||
label: "LotNumber",
|
||||
},
|
||||
{
|
||||
key: "ProlinkLot",
|
||||
label: "ProlinkLot",
|
||||
},
|
||||
{
|
||||
key: "PlannedQTY",
|
||||
label: "PlannedQTY",
|
||||
},
|
||||
{
|
||||
key: "Produced",
|
||||
label: "Produced",
|
||||
},
|
||||
{
|
||||
key: "Remaining",
|
||||
label: "Remaining",
|
||||
},
|
||||
{
|
||||
key: "overPrinting",
|
||||
label: "Overprinting",
|
||||
},
|
||||
// {
|
||||
// key: "lastProlinkUpdate",
|
||||
// label: "Last ProlinkCheck",
|
||||
// },
|
||||
// {
|
||||
// key: "printLabel",
|
||||
// label: "Print Label",
|
||||
// },
|
||||
];
|
||||
export default function Lots() {
|
||||
const { data, isError, isLoading } = useQuery(getlots());
|
||||
const { user } = useSessionStore();
|
||||
const { settings } = useSettingStore();
|
||||
const { userRoles } = useGetUserRoles();
|
||||
const { modules } = useModuleStore();
|
||||
|
||||
const server = settings.filter((n) => n.name === "server")[0]?.value || "";
|
||||
|
||||
const roles = ["systemAdmin", "technician", "admin", "manager", "operator"];
|
||||
const lotdata = data ? data : [];
|
||||
|
||||
const module = modules.filter((n) => n.name === "logistics");
|
||||
|
||||
const accessRoles = userRoles.filter(
|
||||
(n) => n.module_id === module[0]?.module_id
|
||||
) as any;
|
||||
|
||||
if (user && roles.includes(accessRoles[0]?.role)) {
|
||||
//width = 1280;
|
||||
const checkCol = lotColumns.some((l) => l.key === "printLabel");
|
||||
if (!checkCol) {
|
||||
lotColumns = [
|
||||
...lotColumns,
|
||||
{
|
||||
key: "printLabel",
|
||||
label: "Print Label",
|
||||
},
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
if (isError) {
|
||||
return (
|
||||
<div className="m-2 p-2 min-h-2/5">
|
||||
<ScrollArea className="max-h-1/2 rounded-md border p-4">
|
||||
<LstCard>
|
||||
<p className="text-center">Current Assigned lots</p>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
{lotColumns.map((l) => (
|
||||
<TableHead key={l.key}>
|
||||
{l.label}
|
||||
</TableHead>
|
||||
))}
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
|
||||
<TableBody>
|
||||
{Array(10)
|
||||
.fill(0)
|
||||
.map((_, i) => (
|
||||
<TableRow key={i}>
|
||||
<TableCell className="font-medium">
|
||||
<Skeleton className="h-4" />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton className="h-4" />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton className="h-4" />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton className="h-4" />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton className="h-4" />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton className="h-4" />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton className="h-4" />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton className="h-4" />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton className="h-4" />
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</LstCard>
|
||||
</ScrollArea>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<LstCard className="m-2 p-2 min-h-2/5">
|
||||
<ScrollArea className="h-[400px]">
|
||||
<p className="text-center">Current Assigned lots</p>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
{lotColumns.map((l) => (
|
||||
<TableHead key={l.key}>{l.label}</TableHead>
|
||||
))}
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
{isLoading ? (
|
||||
<>
|
||||
<TableBody>
|
||||
{Array(10)
|
||||
.fill(0)
|
||||
.map((_, i) => (
|
||||
<TableRow key={i}>
|
||||
<TableCell className="font-medium">
|
||||
<Skeleton className="h-4" />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton className="h-4" />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton className="h-4" />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton className="h-4" />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton className="h-4" />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton className="h-4" />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton className="h-4" />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton className="h-4" />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton className="h-4" />
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</>
|
||||
) : (
|
||||
<TableBody>
|
||||
{lotdata.map((lot: LotType) => (
|
||||
<TableRow key={lot.LabelOnlineID}>
|
||||
<TableCell className="font-medium">
|
||||
{lot.MachineLocation}
|
||||
</TableCell>
|
||||
<TableCell className="font-medium">
|
||||
{lot.AV}
|
||||
</TableCell>
|
||||
<TableCell className="font-medium">
|
||||
{lot.Alias}
|
||||
</TableCell>
|
||||
<TableCell
|
||||
className={`font-medium ${lot.ProlinkLot != lot.lot ? "text-red-500" : ""}`}
|
||||
>
|
||||
{lot.lot}
|
||||
</TableCell>
|
||||
<TableCell
|
||||
className={`font-medium ${lot.ProlinkLot != lot.lot ? "text-red-500" : ""}`}
|
||||
>
|
||||
{lot.ProlinkLot}
|
||||
</TableCell>
|
||||
<TableCell className="font-medium">
|
||||
{lot.PlannedQTY}
|
||||
</TableCell>
|
||||
<TableCell className="font-medium">
|
||||
{lot.Produced}
|
||||
</TableCell>
|
||||
<TableCell className="font-medium">
|
||||
{lot.Remaining}
|
||||
</TableCell>
|
||||
<TableCell className="font-medium">
|
||||
{lot.overPrinting}
|
||||
</TableCell>
|
||||
{user &&
|
||||
roles.includes(
|
||||
accessRoles[0]?.role
|
||||
) && (
|
||||
<>
|
||||
{server === "usday1vms006" ||
|
||||
server === "localhost" ? (
|
||||
<>
|
||||
<TableCell className="flex justify-center">
|
||||
<ManualPrintForm />
|
||||
</TableCell>
|
||||
</>
|
||||
) : (
|
||||
<TableCell className="flex justify-center">
|
||||
<ManualPrint
|
||||
lot={lot}
|
||||
/>
|
||||
</TableCell>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
)}
|
||||
</Table>
|
||||
</ScrollArea>
|
||||
</LstCard>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { useSessionStore } from "@/lib/store/sessionStore";
|
||||
//import {useSettingStore} from "@/lib/store/useSettings";
|
||||
import { LotType } from "@/types/lots";
|
||||
import { Tag } from "lucide-react";
|
||||
import { toast } from "sonner";
|
||||
import { manualPrintLabels } from "./ManualPrintLabel";
|
||||
import { useState } from "react";
|
||||
|
||||
export default function ManualPrint({ lot }: { lot: LotType }) {
|
||||
const { user } = useSessionStore();
|
||||
const [printing, setPrinting] = useState(false);
|
||||
//const {settings} = useSettingStore();
|
||||
//const server = settings.filter((n) => n.name === "server")[0]?.value;
|
||||
//const serverPort = settings.filter((n) => n.name === "serverPort")[0]?.value;
|
||||
//const serverUrl = `http://${server}:${serverPort}`;
|
||||
|
||||
const handlePrintLabel = async (lot: LotType) => {
|
||||
const labels: any = await manualPrintLabels(lot, user);
|
||||
|
||||
if (labels.success) {
|
||||
toast.success(labels.message);
|
||||
setTimeout(() => {
|
||||
setPrinting(false);
|
||||
}, 5 * 1000);
|
||||
setPrinting(true);
|
||||
} else {
|
||||
toast.error(labels.message);
|
||||
setTimeout(() => {
|
||||
setPrinting(false);
|
||||
}, 5 * 1000);
|
||||
}
|
||||
};
|
||||
return (
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={() => handlePrintLabel(lot)}
|
||||
disabled={printing}
|
||||
>
|
||||
<Tag className="h-[16px] w-[16px]" />
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,273 @@
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
// DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from "@/components/ui/dialog";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectGroup,
|
||||
SelectItem,
|
||||
SelectLabel,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { useSettingStore } from "@/lib/store/useSettings";
|
||||
import axios from "axios";
|
||||
import { Tag } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import { Controller, useForm } from "react-hook-form";
|
||||
import { toast } from "sonner";
|
||||
|
||||
const printReason = [
|
||||
{ key: "printerIssue", label: "Printer Related" },
|
||||
{ key: "missingRfidTag", label: "Missing or incorrect tag" },
|
||||
{ key: "rfidMissScan", label: "Missed Scan from RFID reader" },
|
||||
{ key: "strapper", label: "Strapper Error" },
|
||||
{ key: "manualCheck", label: "20th pallet check" },
|
||||
{ key: "outOfSync", label: "Labeler Out of Sync" },
|
||||
];
|
||||
|
||||
export default function ManualPrintForm() {
|
||||
const token = localStorage.getItem("auth_token");
|
||||
const { settings } = useSettingStore();
|
||||
const [open, setOpen] = useState(false);
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const server = settings.filter((n) => n.name === "server")[0]?.value;
|
||||
// const serverPort = settings.filter((n) => n.name === "serverPort")[0]?.value;
|
||||
// const serverUrl = `http://${server}:${serverPort}`;
|
||||
|
||||
// what is the dyco set to? rfid or dyco
|
||||
const dyco = settings.filter((n) => n.name === "dycoPrint");
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
//watch,
|
||||
formState: { errors },
|
||||
reset,
|
||||
control,
|
||||
} = useForm();
|
||||
|
||||
const handleManualPrintLog = async (logData: any) => {
|
||||
// toast.success(`A new label was sent to printer: ${lot.PrinterName} for line ${lot.MachineDescription} `);
|
||||
const logdataUrl = `/api/ocp/manuallabellog`;
|
||||
setIsSubmitting(true);
|
||||
axios
|
||||
.post(logdataUrl, logData, {
|
||||
headers: { Authorization: `Bearer ${token}` },
|
||||
})
|
||||
.then((d) => {
|
||||
console.log(d);
|
||||
if (d.data.success) {
|
||||
toast.success(d.data.message);
|
||||
} else {
|
||||
toast.error(d.data.message);
|
||||
}
|
||||
reset();
|
||||
setOpen(false);
|
||||
setIsSubmitting(false);
|
||||
})
|
||||
.catch((e) => {
|
||||
if (e.response.status === 500) {
|
||||
toast.error(`Internal Server error please try again.`);
|
||||
setIsSubmitting(false);
|
||||
return { sucess: false };
|
||||
}
|
||||
|
||||
if (e.response.status === 401) {
|
||||
//console.log(e.response);
|
||||
toast.error(`You are not authorized to do this.`);
|
||||
setIsSubmitting(false);
|
||||
return { sucess: false };
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const onSubmit = (data: any) => {
|
||||
//console.log(data);
|
||||
|
||||
handleManualPrintLog(data);
|
||||
};
|
||||
|
||||
const closeForm = () => {
|
||||
reset();
|
||||
setOpen(false);
|
||||
};
|
||||
return (
|
||||
<Dialog
|
||||
open={open}
|
||||
onOpenChange={(isOpen) => {
|
||||
if (!open) {
|
||||
reset();
|
||||
}
|
||||
setOpen(isOpen);
|
||||
// toast.message("Model was something", {
|
||||
// description: isOpen ? "Modal is open" : "Modal is closed",
|
||||
// });
|
||||
}}
|
||||
>
|
||||
<DialogTrigger asChild>
|
||||
<Button variant="outline" size="icon">
|
||||
<Tag className="h-[16px] w-[16px]" />
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="sm:max-w-[425px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Manual Print form</DialogTitle>
|
||||
{/* <DialogDescription>
|
||||
Make changes to your profile here. Click save when
|
||||
you're done.
|
||||
</DialogDescription> */}
|
||||
</DialogHeader>
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<p>
|
||||
To manually print a label you must complete all the
|
||||
required fields below.
|
||||
<br />
|
||||
If you clicked this in error just click close
|
||||
</p>
|
||||
<hr className="mt-2 mb-2" />
|
||||
{server == "usday1vms006" ? (
|
||||
<Controller
|
||||
control={control}
|
||||
name="printReason"
|
||||
defaultValue={""}
|
||||
render={({
|
||||
field: { onChange },
|
||||
fieldState: {},
|
||||
//formState,
|
||||
}) => (
|
||||
<Select onValueChange={onChange}>
|
||||
<SelectTrigger className="w-[180px]">
|
||||
<SelectValue placeholder="Select Reason" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectGroup>
|
||||
<SelectLabel>
|
||||
Print Reasons
|
||||
</SelectLabel>
|
||||
{printReason.map(
|
||||
(printReason: any) => (
|
||||
<SelectItem
|
||||
value={printReason.key}
|
||||
>
|
||||
{printReason.label}
|
||||
</SelectItem>
|
||||
)
|
||||
)}
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
)}
|
||||
/>
|
||||
) : (
|
||||
<div className="m-2">
|
||||
<Label htmlFor="printRason" className="m-1">
|
||||
Why are you manually printing?
|
||||
</Label>
|
||||
<Input
|
||||
type="text"
|
||||
className={
|
||||
errors.printReason ? "border-red-500" : ""
|
||||
}
|
||||
aria-invalid={!!errors.printReason}
|
||||
{...register("printReason", {
|
||||
required: true,
|
||||
minLength: {
|
||||
value: 5,
|
||||
message:
|
||||
"To short of a reason please try again!",
|
||||
},
|
||||
})}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<div className="m-2">
|
||||
<Label htmlFor="line" className="m-1">
|
||||
"What is the line number you are printing?"
|
||||
</Label>
|
||||
<Input
|
||||
//variant="underlined"
|
||||
type="number"
|
||||
className={errors.line ? "border-red-500" : ""}
|
||||
aria-invalid={!!errors.line}
|
||||
{...register("line", { required: true })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="m-2">
|
||||
<Label htmlFor="initials" className="m-1">
|
||||
Enter intials
|
||||
</Label>
|
||||
<Input
|
||||
//variant="underlined"
|
||||
//label="Enter intials"
|
||||
|
||||
{...register("initials", { required: true })}
|
||||
/>
|
||||
</div>
|
||||
<hr />
|
||||
{dyco[0].value === "0" && (
|
||||
<div>
|
||||
<p>Enter the missing tag number.</p>
|
||||
<hr />
|
||||
<Label htmlFor="rfidTag" className="m-1">
|
||||
Enter the tag number only Example
|
||||
ALPLA000002541. only enter 2541
|
||||
</Label>
|
||||
<Input
|
||||
type="text"
|
||||
className={
|
||||
errors.printReason ? "border-red-500" : ""
|
||||
}
|
||||
aria-invalid={!!errors.printReason}
|
||||
{...register("rfidTag", {
|
||||
required: true,
|
||||
minLength: {
|
||||
value: 1,
|
||||
message: "Tag number is to short!",
|
||||
},
|
||||
})}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<div className="m-2">
|
||||
<Textarea
|
||||
//label="Comments"
|
||||
placeholder="add more info as needed."
|
||||
{...(register("additionalComments"),
|
||||
{ required: true, minLength: 10 })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<div className="mt-3">
|
||||
<Button
|
||||
color="danger"
|
||||
variant="default"
|
||||
onClick={closeForm}
|
||||
>
|
||||
Close
|
||||
</Button>
|
||||
<Button
|
||||
color="primary"
|
||||
type="submit"
|
||||
disabled={isSubmitting}
|
||||
>
|
||||
Print
|
||||
</Button>
|
||||
</div>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
import { LotType } from "@/types/lots";
|
||||
import axios from "axios";
|
||||
|
||||
export const manualPrintLabels = async (lot: LotType, user: any) => {
|
||||
//console.log(lot);
|
||||
const labelUrl = `/api/ocp/manualprintandfollow`;
|
||||
|
||||
try {
|
||||
const res = await axios.post(
|
||||
labelUrl,
|
||||
{ line: lot.MachineLocation, printerName: lot.PrinterName },
|
||||
{ headers: { Authorization: `Basic ${user?.prod}` } }
|
||||
);
|
||||
|
||||
if (res.data.success) {
|
||||
return {
|
||||
success: true,
|
||||
message: `A new label was printed for ${lot.MachineDescription} to printer: ${lot.PrinterName}`,
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
success: false,
|
||||
message: `Line ${lot.MachineDescription} encountered an error printing labels: ${res.data.message}`,
|
||||
};
|
||||
}
|
||||
} catch (error: any) {
|
||||
if (error.response.status === 500) {
|
||||
//toast.error(`Internal Server error please try again.`);
|
||||
return {
|
||||
success: false,
|
||||
message: `Internal Server error please try again.`,
|
||||
};
|
||||
}
|
||||
|
||||
if (error.response.status === 401) {
|
||||
//console.log(e.response);
|
||||
//toast.error(`You are not authorized to do this.`);
|
||||
return {
|
||||
success: false,
|
||||
message: `You are not authorized to do this.`,
|
||||
};
|
||||
}
|
||||
}
|
||||
};
|
||||
46
lstV2/frontend/src/components/production/ocp/OcpLogs.tsx
Normal file
46
lstV2/frontend/src/components/production/ocp/OcpLogs.tsx
Normal file
@@ -0,0 +1,46 @@
|
||||
import { getOcpLogs } from "@/utils/querys/production/ocpLogs";
|
||||
import { ocpColumns } from "@/utils/tableData/production/ocpLogs/ocpLogColumns";
|
||||
import { OcpLogTable } from "@/utils/tableData/production/ocpLogs/ocpLogData";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import axios from "axios";
|
||||
|
||||
import { useMemo } from "react";
|
||||
import { toast } from "sonner";
|
||||
|
||||
export default function OcpLogs() {
|
||||
const { data, isError, isLoading } = useQuery(getOcpLogs("4"));
|
||||
|
||||
const clearLog = async (log: any) => {
|
||||
try {
|
||||
const res = await axios.patch(`/api/logger/logs/${log.log_id}`);
|
||||
|
||||
if (res.data.success) {
|
||||
toast.success(`Log message: ${log.message}, was just cleared`);
|
||||
} else {
|
||||
console.log(res);
|
||||
toast.error(`There was an error clearing the message.`);
|
||||
}
|
||||
} catch (error) {
|
||||
toast.error(`There was an error trying to clearing the message.`);
|
||||
}
|
||||
};
|
||||
const columns = useMemo(() => ocpColumns(clearLog), [clearLog]);
|
||||
const logData = data ? data : [];
|
||||
if (isError) {
|
||||
return <div>Error</div>;
|
||||
}
|
||||
|
||||
if (isLoading) {
|
||||
return <div>Loading</div>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="m-2">
|
||||
<OcpLogTable
|
||||
columns={columns}
|
||||
data={logData}
|
||||
//style={style}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user