From 83d1a1c558293e1b14c9a5847628e7661f749c66 Mon Sep 17 00:00:00 2001
From: trisusilo48 <tri.susilo@altama.co.id>
Date: Mon, 21 Oct 2024 14:54:11 +0700
Subject: initial commit

---
 app/page.tsx | 248 +++++++++++++++++++++++++++++++++++++----------------------
 1 file changed, 156 insertions(+), 92 deletions(-)

(limited to 'app/page.tsx')

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>
   );
 }
-- 
cgit v1.2.3

