From 83d1a1c558293e1b14c9a5847628e7661f749c66 Mon Sep 17 00:00:00 2001 From: trisusilo48 Date: Mon, 21 Oct 2024 14:54:11 +0700 Subject: initial commit --- app/lib/api/auth.ts | 42 +++++ app/lib/api/odooApi.ts | 56 +++++++ app/lib/camera/component/camera.tsx | 79 +++++++++ app/lib/camera/component/cardFoto.tsx | 27 +++ app/lib/camera/component/hedear.tsx | 21 +++ app/lib/camera/component/pakageCamera.tsx | 44 +++++ app/lib/camera/component/scannerBarcode.tsx | 56 +++++++ app/lib/camera/component/sjCamera.tsx | 48 ++++++ app/lib/camera/hooks/useCamera.ts | 32 ++++ app/lib/camera/hooks/useCameraStore.ts | 22 +++ app/login/page.tsx | 174 +++++++++++++++++++ app/page.tsx | 248 +++++++++++++++++----------- 12 files changed, 757 insertions(+), 92 deletions(-) create mode 100644 app/lib/api/auth.ts create mode 100644 app/lib/api/odooApi.ts create mode 100644 app/lib/camera/component/camera.tsx create mode 100644 app/lib/camera/component/cardFoto.tsx create mode 100644 app/lib/camera/component/hedear.tsx create mode 100644 app/lib/camera/component/pakageCamera.tsx create mode 100644 app/lib/camera/component/scannerBarcode.tsx create mode 100644 app/lib/camera/component/sjCamera.tsx create mode 100644 app/lib/camera/hooks/useCamera.ts create mode 100644 app/lib/camera/hooks/useCameraStore.ts create mode 100644 app/login/page.tsx (limited to 'app') diff --git a/app/lib/api/auth.ts b/app/lib/api/auth.ts new file mode 100644 index 0000000..d954dc5 --- /dev/null +++ b/app/lib/api/auth.ts @@ -0,0 +1,42 @@ +import { deleteCookie, getCookie, setCookie } from "cookies-next" + +type AuthProps = { + id: number; + parentId: number; + parentName: string; + partnerId: number; + name: string; + email: string; + phone: string; + npwp: string; + mobile: string; + external: boolean; + company: boolean; + pricelist: string | null; + token: string; + feature : { + onlyReadyStock : boolean, + soApproval : boolean + } + }; + +const getAuth = () : AuthProps | boolean => { + const auth = getCookie('auth') + + if (auth) return JSON.parse(auth) + return false + +} + +const setAuth = (user : AuthProps) : boolean => { + setCookie('auth', JSON.stringify(user)) + return true +} + + +const deleteAuth = () : boolean => { + deleteCookie('auth') + return true +} + +export { getAuth , setAuth, deleteAuth} \ No newline at end of file diff --git a/app/lib/api/odooApi.ts b/app/lib/api/odooApi.ts new file mode 100644 index 0000000..c2c9d82 --- /dev/null +++ b/app/lib/api/odooApi.ts @@ -0,0 +1,56 @@ +import axios from "axios" +import { getCookie, setCookie } from "cookies-next"; +import { getAuth } from "./auth"; + +type axiosParameters = { + method : string, + url : string, + headers : { + Authorization : string, + 'Content-Type'? : string, + Token? : string + }, + data ?: string +} + +const renewToken = async () => { + const token = await axios.get(process.env.NEXT_PUBLIC_ODOO_API_HOST + '/api/token') + setCookie('token', token.data.result) + return token.data.result +}; + +const getToken = async () => { + let token = getCookie('token') + if (token == undefined) token = await renewToken() + return token +}; + +const odooApi = async (method : string, url : string, data = {}, headers = {}) => { + try { + const token = await getToken() + const auth = getAuth(); + const axiosParameter : axiosParameters = { + method, + url: process.env.NEXT_PUBLIC_ODOO_API_HOST + url, + headers: { Authorization: token ? token : '', ...headers }, + }; + console.log('ini adalah tipe',axiosParameter) + if (auth && typeof auth === 'object' && 'token' in auth) { + axiosParameter.headers['Token'] = auth.token; + } + if (method.toUpperCase() == 'POST') + axiosParameter.headers['Content-Type'] = + 'application/x-www-form-urlencoded'; + if (Object.keys(data).length > 0) + axiosParameter.data = new URLSearchParams( + Object.entries(data) + ).toString(); + const response = await axios(axiosParameter); + return response.data; + } catch (error) { + console.log( JSON.stringify(error)); + } +} + + +export default odooApi \ No newline at end of file diff --git a/app/lib/camera/component/camera.tsx b/app/lib/camera/component/camera.tsx new file mode 100644 index 0000000..b398616 --- /dev/null +++ b/app/lib/camera/component/camera.tsx @@ -0,0 +1,79 @@ +import { CameraSharp } from "@mui/icons-material"; +import { Button, IconButton } from "@mui/material"; +import Image from "next/image"; +import React, { useRef } from "react"; +import Webcam from "react-webcam"; + +interface WebcamCaptureProps { + image: string | null; + setImage: (image: string | null) => void; + isWebcamVisible: boolean; + setIsWebcamVisible: (isVisible: boolean) => void; +} + +const WebcamCapture: React.FC = ({ + image, + setImage, + isWebcamVisible, + setIsWebcamVisible, +}) => { + const webcamRef = useRef(null); + + // Mengambil foto dari webcam + const capture = () => { + const image = webcamRef.current?.getScreenshot(); + setIsWebcamVisible(false); + setImage(image || null); + }; + + const takePicture = () => { + setImage(null); + setIsWebcamVisible(true); + }; + + // Mengatur ukuran webcam + const videoConstraints = { + width: 500, + height: 480, + facingMode: { + exact: "environment" // untuk kamera belakang + }, + }; + + return ( +
+ {!isWebcamVisible && ( + + )} + + {isWebcamVisible && ( +
+ + capture()}> + + +
+ )} + {image && ( +
+ Captured +
+ )} +
+ ); +}; + +export default WebcamCapture; diff --git a/app/lib/camera/component/cardFoto.tsx b/app/lib/camera/component/cardFoto.tsx new file mode 100644 index 0000000..34da216 --- /dev/null +++ b/app/lib/camera/component/cardFoto.tsx @@ -0,0 +1,27 @@ +import { Card, CardContent, Typography } from "@mui/material"; +import Image from "next/image"; +import React from "react"; +import useCameraStore from "../hooks/useCameraStore"; + +const CardFotos = () => { + const { imagePackage } = useCameraStore(); + return ( + + Captured + + + Lizard + + + + ); +} + +export default CardFotos diff --git a/app/lib/camera/component/hedear.tsx b/app/lib/camera/component/hedear.tsx new file mode 100644 index 0000000..5cf3f1d --- /dev/null +++ b/app/lib/camera/component/hedear.tsx @@ -0,0 +1,21 @@ +// components/Header.tsx +import Image from "next/image"; + +export default function Header() { + return ( + + ); +} diff --git a/app/lib/camera/component/pakageCamera.tsx b/app/lib/camera/component/pakageCamera.tsx new file mode 100644 index 0000000..e0c7158 --- /dev/null +++ b/app/lib/camera/component/pakageCamera.tsx @@ -0,0 +1,44 @@ +import React from "react"; +import useCameraStore from "../hooks/useCameraStore"; +import { IconButton } from "@mui/material"; +import { PhotoCameraFrontOutlined } from "@mui/icons-material"; + +const PackageCamera: React.FC = () => { + const { setImagePackage } = useCameraStore(); + const handleCapture = (event: React.ChangeEvent) => { + const file = event.target.files?.[0]; + if (file) { + const reader = new FileReader(); + reader.onloadend = () => { + setImagePackage(reader.result as string); + }; + reader.readAsDataURL(file); + } + }; + + return ( +
+ + +
+ ); +}; + +export default PackageCamera; diff --git a/app/lib/camera/component/scannerBarcode.tsx b/app/lib/camera/component/scannerBarcode.tsx new file mode 100644 index 0000000..3079e33 --- /dev/null +++ b/app/lib/camera/component/scannerBarcode.tsx @@ -0,0 +1,56 @@ +import { QrCode2 } from "@mui/icons-material"; +import { Button, TextField } from "@mui/material"; +import dynamic from "next/dynamic"; +import React, { useState } from "react"; +import useCameraStore from "../hooks/useCameraStore"; + +const BarcodeScannerComponent = dynamic( + () => import("react-qr-barcode-scanner"), + { ssr: false } +); +const BarcodeScanner: React.FC = () => { + const { barcode, setBarcode } = useCameraStore(); + const [isCameraActive, setIsCameraActive] = useState(false); + + return ( +
+ + + {isCameraActive && ( + { + if (result) { + setBarcode(result.getText()); + setIsCameraActive(false); + } + }} + /> + )} + +
+ setBarcode(e.target.value) } + InputLabelProps={{ + shrink: true, // Label akan selalu berada di atas (outline) + }} + /> +
+
+ ); +}; + +export default BarcodeScanner; diff --git a/app/lib/camera/component/sjCamera.tsx b/app/lib/camera/component/sjCamera.tsx new file mode 100644 index 0000000..5cc39ad --- /dev/null +++ b/app/lib/camera/component/sjCamera.tsx @@ -0,0 +1,48 @@ +import React from "react"; +import useCameraStore from "../hooks/useCameraStore"; +import { IconButton } from "@mui/material"; +import { PendingActions } from "@mui/icons-material"; + +const SjCamera: React.FC = () => { + const { setImageSj } = useCameraStore(); + const handleSuratJalanCapture = ( + event: React.ChangeEvent + ) => { + const file = event.target.files?.[0]; + if (file) { + const reader = new FileReader(); + reader.onloadend = () => { + setImageSj(reader.result as string); + }; + reader.readAsDataURL(file); + } + }; + + return ( + <> +
+ + +
+ + ); +}; + +export default SjCamera; diff --git a/app/lib/camera/hooks/useCamera.ts b/app/lib/camera/hooks/useCamera.ts new file mode 100644 index 0000000..d85d978 --- /dev/null +++ b/app/lib/camera/hooks/useCamera.ts @@ -0,0 +1,32 @@ +import { useState } from "react" + +const useCamera = () => { + + const [imageSJ, setImageSj] = useState(null) + const [imagePackage, setImagePackage] = useState(null) + const [barcode, setBarcode] = useState(null) + + const [isWebcamVisibleSj, setIsWebcamVisibleSJ] = useState(false) + const [isWebcamVisiblePackage, setIsWebcamVisiblePackage] = useState(false) + + const handleSubmit = () => { + setIsWebcamVisibleSJ(false) + } + + + return { + barcode, + setBarcode, + imageSJ, + imagePackage, + setImageSj, + setImagePackage, + isWebcamVisibleSj, + isWebcamVisiblePackage, + setIsWebcamVisibleSJ, + setIsWebcamVisiblePackage, + handleSubmit + } +} + +export default useCamera \ No newline at end of file diff --git a/app/lib/camera/hooks/useCameraStore.ts b/app/lib/camera/hooks/useCameraStore.ts new file mode 100644 index 0000000..c922d1c --- /dev/null +++ b/app/lib/camera/hooks/useCameraStore.ts @@ -0,0 +1,22 @@ +// store/useCameraStore.ts +import { create } from 'zustand' + +interface CameraStore { + barcode: string | null + setBarcode: (barcode: string) => void + imageSj: string | null + setImageSj: (image: string) => void + imagePackage: string | null + setImagePackage: (image: string) => void +} + +const useCameraStore = create((set) => ({ + barcode: null, + setBarcode: (barcode: string) => set({ barcode: barcode }), + imageSj: null, + setImageSj: (image: string) => set({ imageSj: image }), + imagePackage: null, + setImagePackage: (image: string) => set({ imagePackage: image }), +})) + +export default useCameraStore \ No newline at end of file diff --git a/app/login/page.tsx b/app/login/page.tsx new file mode 100644 index 0000000..8df5b2c --- /dev/null +++ b/app/login/page.tsx @@ -0,0 +1,174 @@ +"use client"; +import { + Box, + Button, + FormControl, + FormLabel, + TextField, + Typography, +} from "@mui/material"; +import Header from "../lib/camera/component/hedear"; +import odooApi from "../lib/api/odooApi"; +import { getAuth, setAuth } from "../lib/api/auth"; +import { useRouter } from "next/navigation"; +import { useEffect, useState } from "react"; + +const Login = () => { + const router = useRouter(); + const [emailError, setEmailError] = useState(false); + const [emailErrorMessage, setEmailErrorMessage] = useState(""); + const [passwordError, setPasswordError] = useState(false); + const [passwordErrorMessage, setPasswordErrorMessage] = useState(""); + + useEffect(() => { + const token = getAuth(); + + if (token) { + router.push("/"); + } + }, [router]); + + const handleSubmit = async (event: React.FormEvent) => { + event.preventDefault(); + if (emailError || passwordError) { + return; + } + const data = new FormData(event.currentTarget); + const email = data.get("email"); + const password = data.get("password"); + + console.log('ini user', email, password) + try { + odooApi("POST", "/api/v1/user/login", { + email , + password + }).then((res) => { + const auth = res.result; + if (auth.is_auth) { + setAuth(auth.user); + router.push("/"); + return; + } + switch (auth.reason) { + case "NOT_FOUND": + alert("Email tidak ditemukan"); + break; + case "NOT_ACTIVE": + alert("Akun anda belum aktif"); + break; + } + console.log('ini akhir',res); + }); + } catch (error) { + console.log(error); + } + }; + + const validateInputs = () => { + const email = document.getElementById("email") as HTMLInputElement; + const password = document.getElementById("password") as HTMLInputElement; + + let isValid = true; + + if (!email.value || !/\S+@\S+\.\S+/.test(email.value)) { + setEmailError(true); + setEmailErrorMessage("Please enter a valid email address."); + isValid = false; + } else { + setEmailError(false); + setEmailErrorMessage(""); + } + + if (!password.value || password.value.length < 6) { + setPasswordError(true); + setPasswordErrorMessage("Password must be at least 6 characters long."); + isValid = false; + } else { + setPasswordError(false); + setPasswordErrorMessage(""); + } + + return isValid; + }; + return ( +
+
+
+
+ + Sign in + + + + Email + + + + + Password + + + + + +
+
+
+ ); +}; + +export default Login; diff --git a/app/page.tsx b/app/page.tsx index 433c8aa..ccfb7f7 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,101 +1,165 @@ +"use client"; import Image from "next/image"; +import PackageCamera from "./lib/camera/component/pakageCamera"; +import BarcodeScanner from "./lib/camera/component/scannerBarcode"; +import SjCamera from "./lib/camera/component/sjCamera"; +import useCameraStore from "./lib/camera/hooks/useCameraStore"; +import Header from "./lib/camera/component/hedear"; +import { Button } from "@mui/material"; +import { SaveAsOutlined } from "@mui/icons-material"; +import axios from "axios"; +import odooApi from "./lib/api/odooApi"; +import { useEffect, useState } from "react"; +import { useRouter } from "next/navigation"; +import { getAuth } from "./lib/api/auth"; export default function Home() { + const [isLogin, setIsLogin] = useState(true); + const { + barcode, + imageSj, + imagePackage, + setBarcode, + setImageSj, + setImagePackage, + } = useCameraStore(); + const [isLoading, setIsLoading] = useState(false); + + const router = useRouter(); + + useEffect(() => { + const token = getAuth(); + + if (!token) { + router.push("/login"); + } else { + setIsLogin(true); + } + }, [router]); + + const handleSubmit = async (event: React.FormEvent) => { + event.preventDefault(); + setIsLoading(true); + + if (!barcode || !imageSj || !imagePackage) { + alert("Barcode dan gambar harus tersedia."); + setIsLoading(false); + return; + } + + try { + const newSjImage = imageSj.replace(/^.*?,/, ""); + const newPackageImage = imagePackage.replace(/^.*?,/, ""); + // const method = 'PUT'; + + const data = { + sj_document: newSjImage, // Kirim base64 lengkap dengan prefix + paket_document: newPackageImage, // Kirim base64 lengkap dengan prefix + }; + + const response = await odooApi( + "PUT", + `/api/v1/stock-picking/${barcode}/documentation`, + data + ); + console.log(response); + if (response.status.code == 200) { + alert("Berhasil Submit Data"); + setBarcode(""); + setImageSj(""); + setImagePackage(""); + setIsLoading(false); + } + return response.data; + } catch (error: unknown) { + if (error instanceof Error) { + console.error("Error mengirim data:", error.message); + } else if (axios.isAxiosError(error)) { + console.error("Error:", error.response?.data); + } else { + console.error("Unknown error:", error); + } + setIsLoading(false); + } + }; + return ( -
-
- Next.js logo -
    -
  1. - Get started by editing{" "} - - app/page.tsx - - . -
    2. -
  2. Save and see your changes instantly.
    3. -
+
+
+ {isLogin && ( +
+
+
+ +
+
+ +
+ + +
+
-
- - Vercel logomark - Deploy now - - - Read our docs - + {imageSj && ( + <> + +
+ Captured +
+ + )} + +
+ + {imagePackage && ( + <> + +
+ Captured +
+ + )} +
+
+ +
+ +
+ )} + {!isLogin && ( +
+
+

Loading...

+
-
- + )}
); } -- cgit v1.2.3