diff options
Diffstat (limited to 'app/page.tsx')
| -rw-r--r-- | app/page.tsx | 248 |
1 files changed, 156 insertions, 92 deletions
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<boolean>(true); + const { + barcode, + imageSj, + imagePackage, + setBarcode, + setImageSj, + setImagePackage, + } = useCameraStore(); + const [isLoading, setIsLoading] = useState<boolean>(false); + + const router = useRouter(); + + useEffect(() => { + const token = getAuth(); + + if (!token) { + router.push("/login"); + } else { + setIsLogin(true); + } + }, [router]); + + const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => { + 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 ( - <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]"> - <main className="flex flex-col gap-8 row-start-2 items-center sm:items-start"> - <Image - className="dark:invert" - src="https://nextjs.org/icons/next.svg" - alt="Next.js logo" - width={180} - height={38} - priority - /> - <ol className="list-inside list-decimal text-sm text-center sm:text-left font-[family-name:var(--font-geist-mono)]"> - <li className="mb-2"> - Get started by editing{" "} - <code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-semibold"> - app/page.tsx - </code> - . - </li> - <li>Save and see your changes instantly.</li> - </ol> + <div className="bg-white h-screen overflow-auto"> + <Header /> + {isLogin && ( + <div className="py-4 px-4 sm:px-96 pt-20"> + <form onSubmit={handleSubmit}> + <div> + <BarcodeScanner /> + </div> + <div className="h-4"></div> + + <div className="flex justify-between"> + <SjCamera /> + <PackageCamera /> + </div> + <div className="h-2"></div> - <div className="flex gap-4 items-center flex-col sm:flex-row"> - <a - className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5" - href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app" - target="_blank" - rel="noopener noreferrer" - > - <Image - className="dark:invert" - src="https://nextjs.org/icons/vercel.svg" - alt="Vercel logomark" - width={20} - height={20} - /> - Deploy now - </a> - <a - className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:min-w-44" - href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app" - target="_blank" - rel="noopener noreferrer" - > - Read our docs - </a> + {imageSj && ( + <> + <label className="block mt-2 text-sm font-medium text-gray-700 text-center"> + Gambar Foto Surat Jalan + </label> + <div className="relative w-full h-[300px] border-2 border-gray-200 p-2 rounded-sm"> + <Image + src={imageSj} + alt="Captured" + layout="fill" + objectFit="cover" + unoptimized + className="p-2" + /> + </div> + </> + )} + + <div className="h-2"></div> + + {imagePackage && ( + <> + <label className="block mt-2 text-sm font-medium text-gray-700 text-center"> + Gambar Foto Penerima + </label> + <div className="relative w-full h-[300px] border-2 border-gray-200 p-2 rounded-sm"> + <Image + src={imagePackage} + alt="Captured" + layout="fill" + objectFit="cover" + unoptimized + className="p-2" + /> + </div> + </> + )} + <div> + <div className="h-4"></div> + <Button + className="w-[50%] sm:w-[25%]" + variant="contained" + color="error" + startIcon={<SaveAsOutlined />} + type="submit" + disabled={isLoading} + > + Simpan + </Button> + </div> + </form> + </div> + )} + {!isLogin && ( + <div className="py-4 px-4 sm:px-96 pt-20"> + <div className="text-center"> + <p className="text-2xl font-bold">Loading...</p> + </div> </div> - </main> - <footer className="row-start-3 flex gap-6 flex-wrap items-center justify-center"> - <a - className="flex items-center gap-2 hover:underline hover:underline-offset-4" - href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app" - target="_blank" - rel="noopener noreferrer" - > - <Image - aria-hidden - src="https://nextjs.org/icons/file.svg" - alt="File icon" - width={16} - height={16} - /> - Learn - </a> - <a - className="flex items-center gap-2 hover:underline hover:underline-offset-4" - href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app" - target="_blank" - rel="noopener noreferrer" - > - <Image - aria-hidden - src="https://nextjs.org/icons/window.svg" - alt="Window icon" - width={16} - height={16} - /> - Examples - </a> - <a - className="flex items-center gap-2 hover:underline hover:underline-offset-4" - href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app" - target="_blank" - rel="noopener noreferrer" - > - <Image - aria-hidden - src="https://nextjs.org/icons/globe.svg" - alt="Globe icon" - width={16} - height={16} - /> - Go to nextjs.org → - </a> - </footer> + )} </div> ); } |