Upload 51 files

.gitattributes

@@ -36,4 +36,8 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 javascript/* filter=lfs diff=lfs merge=lfs -text
 .prettierrc filter=lfs diff=lfs merge=lfs -text
 results/* filter=lfs diff=lfs merge=lfs -text
-*.mp4 filter=lfs diff=lfs merge=lfs -text
+*.mp4 filter=lfs diff=lfs merge=lfs -textassets/img/product1b.jpg filter=lfs diff=lfs merge=lfs -text
+assets/img/product2a.jpg filter=lfs diff=lfs merge=lfs -text
+assets/img/product2b.jpg filter=lfs diff=lfs merge=lfs -text
+assets/img/product4b.jpg filter=lfs diff=lfs merge=lfs -text
+assets/img/product6a.jpg filter=lfs diff=lfs merge=lfs -text

database/products.json

@@ -0,0 +1,44 @@
+[
+    {
+        "id": 1,
+        "name": "Kopi Arabika Premium",
+        "description": "Kopi Arabika pilihan dengan aroma khas yang lembut dan rasa yang nikmat.",
+        "price": 75000,
+        "files": ["img/product1a.jpg", "img/product1b.jpg", "vd/product1.mp4"]
+    },
+    {
+        "id": 2,
+        "name": "Teh Hijau Organik",
+        "description": "Teh hijau organik yang menyegarkan, cocok untuk kesehatan harian.",
+        "price": 50000,
+        "files": ["img/product2a.jpg", "img/product2b.jpg"]
+    },
+    {
+        "id": 3,
+        "name": "Biskuit Gandum Sehat",
+        "description": "Biskuit dengan bahan gandum alami, cocok untuk cemilan ringan.",
+        "price": 35000,
+        "files": ["img/product3a.jpg"]
+    },
+    {
+        "id": 4,
+        "name": "Minyak Zaitun Extra Virgin",
+        "description": "Minyak zaitun berkualitas tinggi, ideal untuk masakan dan salad.",
+        "price": 120000,
+        "files": ["img/product4a.jpg", "img/product4b.jpg"]
+    },
+    {
+        "id": 5,
+        "name": "Madu Hutan Murni",
+        "description": "Madu asli dari hutan tropis, kaya akan nutrisi dan antioksidan.",
+        "price": 90000,
+        "files": ["img/product5a.jpg"]
+    },
+    {
+        "id": 6,
+        "name": "Susu Almond tanpa Gula",
+        "description": "Susu almond alami, pilihan tepat untuk diet rendah gula.",
+        "price": 80000,
+        "files": ["img/product6a.jpg"]
+    }
+]

database/users.json

@@ -0,0 +1 @@
+{}

javascript/cart.js

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:6b89f15f0d9069982e9d156072572188a88601143e1877aa1cc630e2fc84139f
-size 5529
+oid sha256:554a4b012b01e288a7557b7b392a0ef3eff9bb422f196f413b0b3c8f449eb5e8
+size 5615

javascript/component.js

@@ -1,298 +1,3 @@
-const urlNow = window.location.href;
-const header = document.querySelector("header");
-
-header.className = "shadow-sm py-3 fixed-top";
-header.innerHTML = `
-  <div class="container d-flex flex-column align-items-center mt-2">
-    <form id="searchForm" class="d-flex align-items-center w-75" style="max-width: 600px;">
-      <input id="searchInput" class="form-control form-control-lg" type="search" placeholder="${
-          urlNow.includes("transaction")
-              ? "Cari transaksi..."
-              : "Cari produk..."
-      }" aria-label="Search">
-			<label for="searchInput" class="m-1" id="labelSearchInput">
-				<i class="bi bi-search me-2 text-secondary btn btn-light btn-lg"></i>
-			</label>
-		</form>
-	</div>
-`;
-
-function searchForm() {
-    const searchInputElm = document.getElementById("searchInput");
-    const value = searchInputElm.value.trim();
-    let nextSearch = false;
-    value ? (nextSearch = true) : searchInputElm.focus();
-
-    if (nextSearch)
-        window.location.href =
-            "search.html?" +
-            (urlNow.includes("transaction") ? "transactions=" : "products=") +
-            value;
-}
-
-document
-    .getElementById("labelSearchInput")
-    .addEventListener("click", () => searchForm());
-
-document.getElementById("searchForm").addEventListener("submit", (e) => {
-    e.preventDefault();
-    searchForm();
-});
-
-const footer = document.querySelector("footer");
-
-footer.className = "py-3 fixed-bottom shadow-sm";
-footer.innerHTML = `
-	<div class="container d-flex justify-content-around">
-	<a href="index.html" class="btn btn-warning btn-lg d-flex flex-column align-items-center">
-		<i class="bi bi-bag"></i>
-      <span class="m-1">
-			<span class="nd-720">Cari</span>
-			<span class="nd-512">Produk</span>
-		</span>
-	</a>
-	<a href="transactions.html" class="btn btn-warning btn-lg d-flex flex-column align-items-center">
-		<i class="bi bi-receipt"></i>
-      <span class="m-1">
-			<span class="nd-720">Cek</span>
-			<span class="nd-512">Transaksi</span>
-		</span>
-	</a>
-	<a id="cart-icon" href="cart.html" class="btn btn-primary btn-lg d-flex align-items-center">
-		<i class="bi bi-cart"></i>
-      <span class="m-1">
-			<span class="nd-720">Keranjang</span>
-			<span class="nd-512">(0)</span>
-		</span>
-	</a>
-	<a href="profile.html" class="btn btn-secondary btn-lg d-flex flex-column align-items-center">
-		<i class="bi bi-person-circle"></i>
-		<span class="nd-512">Profil</span>
-	</a>
-	</div>
-`;
-
-const backAreaButton = document.getElementById("backAreaButton");
-if (backAreaButton) {
-    backAreaButton.innerHTML = `
-		<div class="btn btn-primary btn-lg mb-4" id="backButton">
-			<i class="bi bi-arrow-left"></i> <span class="nd-512">Kembali</span>
-		</div>
-		<br><br>
-	`;
-}
-
-async function alert(
-    message = "",
-    isPopUp = true,
-    isTime = false,
-    timeOut = 5,
-    messagesAfterTimeOut = [],
-    awaitResolve = 0
-) {
-    return new Promise((resolve) => {
-        try {
-            let modal;
-            let messageElem;
-            let timeOutElm;
-            let okBtn;
-            let intervalId;
-
-            if (isPopUp) {
-                modal = document.createElement("div");
-                modal.className = "modal";
-                modal.style.position = "fixed";
-                modal.style.top = "0";
-                modal.style.left = "0";
-                modal.style.width = "100%";
-                modal.style.height = "100%";
-                modal.style.backgroundColor = "rgba(0,0,0,0.5)";
-                modal.style.display = "flex";
-                modal.style.alignItems = "center";
-                modal.style.justifyContent = "center";
-            } else {
-                modal = document.createElement("div");
-                modal.className = "notification";
-                modal.style.position = "fixed";
-                modal.style.top = "5%";
-                modal.style.right = "2.5%";
-                modal.style.padding = "10px 20px";
-                modal.style.borderRadius = "5px";
-                modal.style.zIndex = "1000000000";
-                modal.setAttribute("data-aos", "fade-left");
-            }
-
-            const modalContent = document.createElement("div");
-            modalContent.className =
-                "modal-content d-flex align-items-center bg-warning p-3";
-            modalContent.style.width = isPopUp ? "75%" : "100%";
-            modalContent.style.height = isPopUp ? "" : "100%";
-            modalContent.style.borderRadius = "5px";
-            modalContent.style.boxShadow = isPopUp
-                ? "0 2px 10px rgba(0,0,0,0.1)"
-                : "";
-
-            messageElem = document.createElement("p");
-            messageElem.innerHTML =
-                (!isPopUp ? `<i class="bi bi-bell-fill m-2"></i>` : ``) +
-                message;
-
-            timeOutElm = document.createElement("p");
-
-            okBtn = document.createElement("button");
-            okBtn.className = "btn btn-primary btn-lg";
-            okBtn.textContent = "OK";
-            okBtn.style.minWidth = "80px";
-            okBtn.style.display = isTime ? "none" : "block";
-            okBtn.style.marginTop = "10px";
-
-            modalContent.appendChild(messageElem);
-
-            if (isTime) {
-                modalContent.appendChild(timeOutElm);
-            }
-
-            if (isPopUp) {
-                const btnContainer = document.createElement("div");
-                btnContainer.style.marginTop = "20px";
-                btnContainer.appendChild(okBtn);
-                modalContent.appendChild(btnContainer);
-            }
-
-            modal.appendChild(modalContent);
-            document.body.appendChild(modal);
-
-            intervalId = setInterval(async () => {
-                timeOut--;
-                console.log(timeOut);
-                timeOutElm.textContent = timeOut;
-                if (messagesAfterTimeOut.length > 0) {
-                    messagesAfterTimeOut.forEach((mes) => {
-                        if (mes.timeOut >= timeOut) {
-                            modalContent.className =
-                                "modal-content d-flex align-items-center bg-warning p-3";
-                            messageElem.textContent = mes.message;
-                        }
-                    });
-                }
-
-                if (timeOut <= 0) {
-                    await new Promise((res) => setTimeout(res, awaitResolve));
-                    if (document.body.contains(modal)) {
-                        document.body.removeChild(modal);
-                    }
-                    clearInterval(intervalId);
-                    resolve();
-                }
-            }, 1000);
-
-            okBtn.addEventListener("click", function () {
-                if (intervalId) clearInterval(intervalId);
-                if (document.body.contains(modal)) {
-                    document.body.removeChild(modal);
-                }
-                resolve();
-            });
-
-            if (!isPopUp) {
-                setTimeout(() => {
-                    if (document.body.contains(modal)) {
-                        document.body.removeChild(modal);
-                    }
-                    resolve();
-                }, timeOut * 1000);
-            }
-        } catch (e) {
-            console.error(e);
-        }
-    });
-}
-
-async function prompt(message = "", type = "text", placeholder = "") {
-    return new Promise((resolve) => {
-        const modal = document.createElement("div");
-        modal.className = "modal";
-        modal.style.position = "fixed";
-        modal.style.top = 0;
-        modal.style.left = 0;
-        modal.style.width = "100%";
-        modal.style.height = "100%";
-        modal.style.backgroundColor = "rgba(0,0,0,0.5)";
-        modal.style.display = "flex";
-        modal.style.alignItems = "center";
-        modal.style.justifyContent = "center";
-
-        const modalContent = document.createElement("div");
-        modalContent.className = "modal-content";
-        modalContent.style.width = "75%";
-        modalContent.style.background = "#fff";
-        modalContent.style.padding = "20px";
-        modalContent.style.borderRadius = "5px";
-        modalContent.style.boxShadow = "0 2px 10px rgba(0,0,0,0.1)";
-
-        const messageElem = document.createElement("p");
-        messageElem.textContent = message;
-
-        const input = document.createElement("input");
-        input.type = type;
-        input.required = "true";
-        input.style.width = "100%";
-        input.style.marginTop = "10px";
-        input.placeholder = placeholder;
-        input.className = "form-control form-control-lg";
-
-        const btnContainer = document.createElement("div");
-        btnContainer.style.marginTop = "20px";
-        btnContainer.style.textAlign = "right";
-
-        const okBtn = document.createElement("button");
-        okBtn.className = "btn btn-success btn-lg";
-        okBtn.textContent = "OK";
-        okBtn.style.marginRight = "10px";
-
-        const cancelBtn = document.createElement("button");
-        cancelBtn.className = "btn btn-danger btn-lg";
-        cancelBtn.textContent = "Batal";
-
-        btnContainer.appendChild(okBtn);
-        btnContainer.appendChild(cancelBtn);
-
-        modalContent.appendChild(messageElem);
-        modalContent.appendChild(input);
-        modalContent.appendChild(btnContainer);
-        modal.appendChild(modalContent);
-        document.body.appendChild(modal);
-
-        input.addEventListener("click", () => {
-            input.removeAttribute("focus");
-            input.removeAttribute("invalid");
-            input.removeAttribute("style");
-        });
-
-        okBtn.addEventListener("click", function () {
-            const value = input.value;
-            if (input.value.trim().length > 0) {
-                document.body.removeChild(modal);
-                resolve([value, false]);
-            } else {
-                input.setAttribute("focus", true);
-                input.setAttribute("invalid", true);
-                input.style.border = "1px solid red";
-                input.focus();
-            }
-        });
-
-        cancelBtn.addEventListener("click", function () {
-            document.body.removeChild(modal);
-            resolve([null, true]);
-        });
-    });
-}
-
-document.querySelectorAll("main").forEach((elm) => {
-    elm.setAttribute(
-        "class",
-        "hf row mt-4 d-flex flex-column align-items-center"
-    );
-    elm.setAttribute("data-aos", "fade-down");
-});
+version https://git-lfs.github.com/spec/v1
+oid sha256:ccafb2ce3c450f594c046457ee1febd3bca2a20fc07b22f120c60c314f1cfa2d
+size 10808

javascript/data.js

@@ -1,204 +1,3 @@
-var products = [];
-var fileData = "";
-
-const GITHUB_TOKEN = atob(
-    "Z2l0aHViX3BhdF8xMUFYNEtVTlkwY05lbWNpZHVrWDYxXzczTzV2bTh2Wk5uMzlpQm0wb1BXRmd5dUx2a0VKSGluZ0dZeURPV0JFWTJXMk9YTFFINVRLT2xpU2ts"
-);
-
-console.log(
-    GITHUB_TOKEN ===
-        "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"
-);
-
-const GITHUB_OWNER = "Adityadn64";
-const GITHUB_REPO = "FINAL-PROJECT---ACQ20RC";
-const USERS_FILE_PATH = "database/users.json";
-const PRODUCTS_FILE_PATH = "database/products.json";
-
-async function getUsers() {
-    const res = await fetch(
-        `https://api.github.com/repos/${GITHUB_OWNER}/${GITHUB_REPO}/contents/${USERS_FILE_PATH}`,
-        {
-            headers: {
-                Accept: "application/vnd.github+json",
-                Authorization: `Bearer ${GITHUB_TOKEN}`,
-            },
-        }
-    );
-
-    fileData = await res.json();
-    let currentUsers = {};
-    try {
-        currentUsers = JSON.parse(atob(fileData.content));
-    } catch (e) {
-        console.error("Error parsing current users; using empty object", e);
-    }
-    return currentUsers;
-}
-
-async function getUserData() {
-    const storedDataStr = localStorage.getItem("userData");
-    if (!storedDataStr) return null;
-    const storedData = JSON.parse(storedDataStr);
-
-    const usersDB = await getUsers();
-    let userData =
-        storedData.uid && usersDB && usersDB[storedData.uid]
-            ? usersDB[storedData.uid]
-            : storedData;
-    // Ensure uid is set
-    if (storedData.uid) {
-        userData.uid = storedData.uid;
-    }
-    return userData;
-}
-
-async function getCarts() {
-    const userData = await getUserData();
-    let localCart = [];
-    const cartStr = localStorage.getItem("cart");
-    if (cartStr) {
-        try {
-            localCart = JSON.parse(cartStr);
-            if (!Array.isArray(localCart)) {
-                localCart = [];
-            }
-        } catch (e) {
-            console.error(
-                "Error parsing local cart data; using empty array",
-                e
-            );
-            localCart = [];
-        }
-    }
-
-    let cartData;
-    if (userData && userData.cart && Array.isArray(userData.cart)) {
-        cartData = userData.cart;
-    } else {
-        cartData = localCart;
-    }
-
-    return cartData;
-}
-
-
-function convertImageToBase64(imageUrl) {
-    return new Promise((resolve, reject) => {
-        fetch(imageUrl)
-            .then(res => res.blob())
-            .then(blob => {
-                const reader = new FileReader();
-                reader.readAsDataURL(blob);
-                reader.onloadend = () => resolve(reader.result);
-                reader.onerror = error => reject(error);
-            })
-            .catch(err => reject(err));
-    });
-}
-
-async function uploadFileToGitHub(filePath, base64Data) {
-    try {
-        const fileRes = await fetch(
-            `https://api.github.com/repos/${GITHUB_OWNER}/${GITHUB_REPO}/contents/${filePath}`,
-            {
-                method: "PUT",
-                headers: {
-                    Accept: "application/vnd.github+json",
-                    Authorization: `Bearer ${GITHUB_TOKEN}`,
-                },
-                body: JSON.stringify({
-                    message: "Upload user photo",
-                    content: base64Data.split(",")[1], // Hanya ambil data Base64 tanpa prefix
-                }),
-            }
-        );
-
-        const result = await fileRes.json();
-        return result;
-    } catch (err) {
-        console.error("Error uploading file to GitHub:", err);
-        return null;
-    }
-}
-
-async function updateUserDataToGitHub(userData) {
-    try {
-        let currentUsers = await getUsers();
-        const isNotValidUID = !userData.uid || userData.uid === undefined;
-
-        if (isNotValidUID) {
-            localStorage.clear();
-            window.location.href =
-                `/profile.html?redirect=${urlNow}` +
-                (message ? `&message=${message}` : "");
-        }
-
-        if (!userData.photo_profile.includes("github")) {
-            const photoFilePath = `assets/users/photo_profile/${userData.uid}.jpg`;
-            let photoBase64 = userData.photo_profile;
-
-            if (!photoBase64.startsWith("data:image/")) {
-                photoBase64 = await convertImageToBase64(userData.photo_profile);
-            }
-
-            const photoUploadRes = await uploadFileToGitHub(photoFilePath, photoBase64);
-            if (photoUploadRes) {
-                userData.photo_profile = `https://raw.githubusercontent.com/${GITHUB_OWNER}/${GITHUB_REPO}/main/${photoFilePath}`;
-            }
-        }
-
-        currentUsers[userData.uid] = {
-            name: userData.name ? userData.name : "",
-            email: userData.email ? userData.email : "",
-            phone: userData.phone ? userData.phone : "",
-            address: userData.address ? userData.address : "",
-            photo_profile: userData.photo_profile ? userData.photo_profile : "",
-            cart: userData.cart ? userData.cart : [],
-            transactions: userData.transactions ? userData.transactions : {},
-        };
-
-        const newContent = btoa(JSON.stringify(currentUsers, null, 4));
-        const updateRes = await fetch(
-            `https://api.github.com/repos/${GITHUB_OWNER}/${GITHUB_REPO}/contents/${USERS_FILE_PATH}`,
-            {
-                method: "PUT",
-                headers: {
-                    Accept: "application/vnd.github+json",
-                    Authorization: `Bearer ${GITHUB_TOKEN}`,
-                },
-                body: JSON.stringify({
-                    message: "Update user data via login Google",
-                    content: newContent,
-                    sha: fileData.sha,
-                }),
-            }
-        );
-
-        const result = await updateRes.json();
-        console.log("Update user data result:", result, currentUsers);
-    } catch (err) {
-        console.error("Error updating user data to GitHub:", err);
-    }
-}
-
-async function fetchProductsData() {
-    const response = await fetch(
-        `https://api.github.com/repos/${GITHUB_OWNER}/${GITHUB_REPO}/contents/${PRODUCTS_FILE_PATH}`,
-        {
-            headers: {
-                Accept: "application/vnd.github.v3+json",
-                Authorization: `Bearer ${GITHUB_TOKEN}`,
-            },
-        }
-    );
-    const data = await response.json();
-    const fileContent = atob(data.content);
-    products = JSON.parse(fileContent);
-    return products;
-}
-
-document.addEventListener("DOMContentLoaded", async function () {
-    AOS.init();
-    products = await fetchProductsData();
-});
+version https://git-lfs.github.com/spec/v1
+oid sha256:fb444f036fd2376ca0f99f059b67ca1a923bf00f075e5d13ee72cdcec09a70fe
+size 6758

javascript/main.js

@@ -1,504 +1,3 @@
-function checkUID(m = "") {
-    const userData = JSON.parse(localStorage.getItem("userData")) || {};
-    const urlNow = window.location.href;
-    const isNotValidUID = userData.length > 0 && !userData.uid;
-
-    const message =
-        m === "addToCart"
-            ? "Silakan masuk terlebih dahulu untuk menambahkan produk ke keranjang."
-            : isNotValidUID
-            ? "Sesi Anda telah habis. Silakan masuk kembali untuk melanjutkan."
-            : m === "jelajah"
-            ? "Anda telah menjelajah selama 5 detik. Silakan masuk terlebih dahulu untuk mendapatkan pengalaman yang lebih baik."
-            : null;
-
-    if (
-        (Object.keys(userData).length === 0 || isNotValidUID) &&
-        !urlNow.includes("profile")
-    ) {
-        localStorage.clear();
-        window.location.href =
-            `profile.html?redirect=${urlNow}` +
-            (message ? `&message=${message}` : "");
-    }
-}
-
-setTimeout(() => {
-    checkUID("jelajah");
-}, 5000);
-
-function formatRupiah(number) {
-    return "Rp " + number.toLocaleString("id-ID");
-}
-
-async function loadProducts() {
-    const products = await fetchProductsData();
-
-    const productList = document.getElementById("product-list");
-    if (!productList) return;
-    productList.innerHTML = "";
-    products.forEach((product) => {
-        const col = document.createElement("div");
-        col.className = "col-lg-3 col-md-4 col-sm-6";
-
-        const card = document.createElement("div");
-        card.className = "card h-100";
-
-        let thumbnail = "assets/";
-        if (product.files && product.files.length > 0) {
-            thumbnail += product.files[0];
-        }
-        let thumbHTML = "";
-        if (thumbnail.match(/\.(jpg|jpeg|png|gif)$/i)) {
-            thumbHTML = `<img src="${thumbnail}" class="card-img-top" alt="${product.name}">`;
-        } else {
-            thumbHTML = `<img src="img/placeholder.jpg" class="card-img-top" alt="${product.name}">`;
-        }
-
-        const cardBody = document.createElement("div");
-        cardBody.className = "card-body d-flex flex-column";
-
-        const title = document.createElement("h5");
-        title.className = "card-title";
-        title.innerText = product.name;
-
-        const desc = document.createElement("p");
-        desc.className = "card-text";
-        desc.innerText = product.description;
-
-        const price = document.createElement("p");
-        price.className = "card-text fw-bold";
-        price.innerText = formatRupiah(product.price);
-
-        const detailLink = document.createElement("a");
-        detailLink.href = "product.html?id=" + product.id;
-        detailLink.className = "btn btn-primary btn-lg mt-auto";
-        detailLink.innerText = "Lihat Detail";
-
-        const cartBtn = document.createElement("button");
-        cartBtn.className = "btn btn-success btn-lg mt-2";
-        cartBtn.innerText = "Tambah Keranjang";
-        cartBtn.onclick = async function () {
-            await promptQuantityAndAdd(product.id);
-        };
-
-        card.innerHTML = thumbHTML;
-        cardBody.appendChild(title);
-        cardBody.appendChild(desc);
-        cardBody.appendChild(price);
-        cardBody.appendChild(detailLink);
-        cardBody.appendChild(cartBtn);
-        card.appendChild(cardBody);
-        col.appendChild(card);
-        productList.appendChild(col);
-    });
-}
-
-async function loadProductDetail() {
-    const params = new URLSearchParams(window.location.search);
-    const productId = parseInt(params.get("id"));
-    const container = document.getElementById("product-detail");
-    if (!container) return;
-
-    if (!productId) {
-        container.innerText = "Produk tidak ditemukan.";
-        return;
-    }
-
-    const products = await fetchProductsData();
-    const product = products.find((p) => p.id === productId);
-    if (!product) {
-        container.innerText = "Produk tidak ditemukan.";
-        return;
-    }
-    let carouselHTML = "";
-    if (product.files && product.files.length > 0) {
-        carouselHTML += `<div id="carouselProduct" class="carousel slide" data-bs-ride="carousel">`;
-        carouselHTML += `<div class="carousel-indicators">`;
-        product.files.forEach((file, index) => {
-            carouselHTML += `<button type="button" data-bs-target="#carouselProduct" data-bs-slide-to="${index}" ${
-                index === 0 ? 'class="active" aria-current="true"' : ""
-            } aria-label="Slide ${index + 1}"></button>`;
-        });
-        carouselHTML += `</div>`;
-        carouselHTML += `<div class="carousel-inner">`;
-        product.files.forEach((file, index) => {
-            file = "assets/" + file;
-            carouselHTML += `<div class="carousel-item ${
-                index === 0 ? "active" : ""
-            }">`;
-            if (file.match(/\.(jpg|jpeg|png|gif)$/i)) {
-                carouselHTML += `<img src="${file}" class="d-block w-100" alt="${product.name}">`;
-            } else if (file.match(/\.(mp4|webm)$/i)) {
-                carouselHTML += `<video class="d-block w-100" controls>
-							<source src="${file}" type="video/mp4">
-							Browser Anda tidak mendukung video.
-						  </video>`;
-            }
-            carouselHTML += `</div>`;
-        });
-        carouselHTML += `</div>`;
-        carouselHTML += `<button class="carousel-control-prev" type="button" data-bs-target="#carouselProduct" data-bs-slide="prev">
-						  <span class="carousel-control-prev-icon bg-primary rounded-circle p-4" aria-hidden="true"></span>
-						  <span class="visually-hidden">Previous</span>
-						</button>
-						<button class="carousel-control-next" type="button" data-bs-target="#carouselProduct" data-bs-slide="next">
-						  <span class="carousel-control-next-icon bg-primary rounded-circle p-4" aria-hidden="true"></span>
-						  <span class="visually-hidden">Next</span>
-						</button>`;
-        carouselHTML += `</div>`;
-    }
-    container.innerHTML = `
-	  <div class="row">
-		<div class="col-md-6">
-		  ${carouselHTML}
-		</div>
-		<div class="col-md-6">
-		  <h2>${product.name}</h2>
-		  <p>${product.description}</p>
-		  <h4 class="fw-bold">${formatRupiah(product.price)}</h4>
-		  <div class="mb-2">
-			<label for="quantity" class="form-label">Jumlah:</label>
-			<input type="number" id="quantity" class="form-control form-control-lg" value="1" min="1" style="max-width:150px;">
-		  </div>
-		  <button class="btn btn-success btn-lg" onclick="addToCartFromProduct(${
-              product.id
-          })">
-			Tambahkan ke Keranjang
-		  </button>
-		</div>
-	  </div>
-	`;
-    AOS.refresh();
-}
-
-function formatTransactionDate(key) {
-    const parts = key.split("_");
-    if (parts.length !== 7) return key;
-
-    const [year, month, day, hour, minute, second, ms] = parts;
-
-    const dateObj = new Date(
-        year,
-        parseInt(month) - 1,
-        day,
-        hour,
-        minute,
-        second,
-        ms
-    );
-
-    const formattedDate = dateObj.toLocaleDateString("id-ID", {
-        day: "2-digit",
-        month: "long",
-        year: "numeric",
-    });
-
-    const formattedTime = dateObj.toLocaleTimeString("id-ID", {
-        hour: "2-digit",
-        minute: "2-digit",
-        hour12: false,
-    });
-
-    return [formattedDate, formattedTime];
-}
-
-async function loadTransactions() {
-    const userData = await getUserData() || {transactions: {}};
-    const transactions = userData.transactions || {};
-
-    if (Object.keys(transactions).length === 0) {
-        document.getElementById("transaction-list").innerHTML =
-            "<p>Anda belum melakukan transaksi apapun. Silahkan beli produk terlebih dahulu.</p>";
-        alert("Anda belum melakukan transaksi apapun. Silahkan beli produk terlebih dahulu.", false)
-        return;
-    }
-
-    const transactionList = document.getElementById("transaction-list");
-    if (!transactionList) return;
-    transactionList.innerHTML = "";
-
-    Object.entries(transactions)
-        .sort((a, b) => {
-            const parseDateFromKey = (key) => {
-                const [year, month, day, hour, minute, second, ms] =
-                    key.split("_");
-                return new Date(year, month - 1, day, hour, minute, second, ms);
-            };
-
-            return parseDateFromKey(b[0]) - parseDateFromKey(a[0]);
-        })
-        .forEach(([transactionKey, transaction]) => {
-            let total = 0;
-
-            transaction.products.forEach((product) => {
-                total += product.price * product.total;
-            });
-
-            let paymentIcon = "";
-            switch (transaction.payment_method) {
-                case "bank":
-                    paymentIcon = "bi-building";
-                    break;
-                case "qr":
-                    paymentIcon = "bi-qr-code";
-                    break;
-                case "card":
-                    paymentIcon = "bi-credit-card";
-                    break;
-                default:
-                    paymentIcon = "bi-currency-dollar";
-            }
-
-            const col = document.createElement("div");
-            col.className =
-                "transactions-body col-lg-4 col-md-6 col-sm-12 mt-4";
-
-            const card = document.createElement("div");
-            card.className = "card h-100";
-
-            const cardBody = document.createElement("div");
-            cardBody.className = "card-body d-flex flex-column";
-
-            cardBody.style.position = "relative";
-
-            const td = formatTransactionDate(transactionKey);
-
-            cardBody.innerHTML = `
-		  <div class="payment-icon-bg">
-			<i class="bi ${paymentIcon}" style="font-size: 2.5rem;"></i>
-			<span class="m-2">Metode: ${
-                transaction.payment_method ? transaction.payment_method : "N/A"
-            }</span>
-		  </div>
-		  <div class="content">
-			<div class="d-flex justify-content-between align-items-center">
-			  <div class="transaction-total fw-bold">
-				Total: ${formatRupiah(total)}
-			  </div>
-			</div>
-			<div class="d-flex justify-content-between align-items-center mt-auto">
-			  <div class="transaction-date">
-				Tanggal: ${td[0]} <br> Waktu: ${td[1]}
-			  </div>
-			</div>
-		  </div>
-		`;
-
-            card.appendChild(cardBody);
-            col.appendChild(card);
-            transactionList.appendChild(col);
-
-            col.addEventListener(
-                "click",
-                () =>
-                    (window.location.href = `transaction.html?date=${transactionKey}`)
-            );
-        });
-}
-
-let transactionKey;
-
-async function updateActionButtonsPosition() {
-    const wrapper = document.querySelector(".receipt-wrapper");
-    const actionButtons = document.querySelector(".action-buttons");
-    if (!wrapper || !actionButtons) {
-        console.error("Element tidak ditemukan!");
-        return;
-    }
-
-    const receiptHeight = wrapper.getBoundingClientRect().height + 128;
-    actionButtons.setAttribute("style", `top: ${receiptHeight}px !important`);
-}
-
-async function loadTransactionDetail() {
-    const params = new URLSearchParams(window.location.search);
-    const transactionKey = params.get("date");
-    const detailsContainer = document.getElementById("transaction-details");
-    const mainElement = document.querySelector("main");
-
-    if (!transactionKey) {
-        detailsContainer.innerHTML = "<p>Transaksi tidak ditemukan.</p>";
-        return;
-    }
-
-    const userData = await getUserData();
-
-    if (!userData.transactions || !userData.transactions[transactionKey]) {
-        mainElement.innerHTML = "<p>Transaksi tidak ditemukan.</p>";
-        return;
-    }
-
-    const transaction = userData.transactions[transactionKey];
-
-    const td = formatTransactionDate(transactionKey);
-
-    let total = 0;
-    transaction.products.forEach((prod) => {
-        total += prod.price * prod.total;
-    });
-
-    let html = `
-    <div class="receipt-header">
-      <h2>TonS E-Commerce</h2>
-      <hr>
-      <p>Sidoarjo</p>
-      <p>Telp: 0896-6804-1554</p>
-      <p>Tanggal: ${td[0]} ${td[1]}</p>
-    </div>
-    <table class="receipt-table">
-      <thead>
-        <tr>
-          <th>No</th>
-          <th>Produk</th>
-          <th>Harga</th>
-          <th>Qty</th>
-          <th>Subtotal</th>
-        </tr>
-      </thead>
-      <tbody>
-  `;
-
-    transaction.products.forEach((prod, index) => {
-        const qty = prod.total;
-        const subtotal = prod.price * qty;
-        html += `
-      <tr>
-        <td>${index + 1}</td>
-        <td>${prod.name}</td>
-        <td>${formatRupiah(prod.price)}</td>
-        <td>${qty}</td>
-        <td>${formatRupiah(subtotal)}</td>
-      </tr>
-    `;
-    });
-
-    html += `
-      <tr class="total-row">
-        <td colspan="4" class="text-end"><strong>Total</strong></td>
-        <td><strong>${formatRupiah(total)}</strong></td>
-      </tr>
-      </tbody>
-    </table>
-    <div class="receipt-footer">
-      <p>Terima kasih telah berbelanja di TonS</p>
-      <p>Harap simpan struk ini sebagai bukti pembelian</p>
-    </div>
-  `;
-
-    detailsContainer.innerHTML = html;
-
-    const wrapper = document.createElement("div");
-    wrapper.className = "receipt-wrapper";
-    wrapper.innerHTML = detailsContainer.innerHTML;
-    detailsContainer.innerHTML = "";
-    detailsContainer.appendChild(wrapper);
-
-    await updateActionButtonsPosition();
-
-    window.addEventListener("resize", async () => {
-        requestAnimationFrame(updateActionButtonsPosition);
-    });
-}
-
-document.addEventListener("DOMContentLoaded", async function () {
-    AOS.init();
-
-    if (document.getElementById("product-list")) {
-        loadProducts();
-    }
-
-    if (document.getElementById("product-detail")) {
-        loadProductDetail();
-    }
-
-    if (document.getElementById("transaction-details")) {
-        await loadTransactionDetail();
-
-        await updateActionButtonsPosition();
-
-        window.addEventListener("resize", async () => {
-            requestAnimationFrame(updateActionButtonsPosition);
-        });
-
-        document
-            .getElementById("download-pdf")
-            .addEventListener("click", async () => {
-                const mainElement = document.getElementById(
-                    "transaction-details"
-                );
-                const receiptWrapperElement =
-                    document.querySelector(".receipt-wrapper");
-
-                const widthElement =
-                    receiptWrapperElement.offsetWidth -
-                    receiptWrapperElement.offsetLeft;
-                const heightElement =
-                    receiptWrapperElement.offsetHeight -
-                    receiptWrapperElement.offsetTop;
-
-                const params = new URLSearchParams(window.location.search);
-                const transactionKey = params.get("date");
-
-                try {
-                    await html2pdf()
-                        .from(mainElement)
-                        .set({
-                            margin: 10,
-                            filename: `receipt_${transactionKey}.pdf`,
-                            image: { type: "png", quality: 3 },
-                            html2canvas: { scale: 3, useCORS: true },
-                            jsPDF: {
-                                unit: "px",
-                                format: [widthElement, heightElement],
-                                orientation: "portrait",
-                            },
-                        })
-                        .toPdf()
-                        .save();
-                } catch (error) {
-                    console.error("Error generating PDF:", error);
-                }
-            });
-
-        document
-            .getElementById("print-receipt")
-            .addEventListener("click", async () => {
-                const mainElement = document.getElementById(
-                    "transaction-details"
-                );
-
-                const lastMainElement = mainElement.innerHTML;
-
-                mainElement.innerHTML += `
-				<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
-				<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css">
-				<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/aos.css" />
-				<script src="https://printjs-4de6.kxcdn.com/print.min.css"></script>
-				<link rel="stylesheet" href="stylesheet/styles.css">
-
-				<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" defer></script>
-				<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.9.2/html2pdf.bundle.min.js"></script>
-				<script src="https://cdnjs.cloudflare.com/ajax/libs/html-to-image/1.11.13/html-to-image.js"></script>
-				<script src="https://unpkg.com/[email protected]/dist/aos.js" defer></script>
-				<script src="https://printjs-4de6.kxcdn.com/print.min.js"></script>
-			`;
-
-                await printJS("transaction-details", "html");
-
-                mainElement.innerHTML = lastMainElement;
-            });
-    }
-
-    if (document.getElementById("transaction-list")) {
-        loadTransactions();
-    }
-
-    let backButton = document.getElementById("backButton");
-    if (backButton) {
-        backButton.addEventListener("click", (e) => {
-            e.preventDefault();
-            window.history.back();
-        });
-    }
-});
+version https://git-lfs.github.com/spec/v1
+oid sha256:c49cc503278559ba38e16c88c98acda017015b9d52b827be8c27f4aa433d5b44
+size 17180

javascript/payment.js

@@ -1,537 +1,3 @@
-const steps = [
-    { step: 1, title: "Periksa Data Belanja" },
-    { step: 2, title: "Periksa Informasi Anda" },
-    { step: 3, title: "Pilih Metode Pembayaran" },
-    { step: 4, title: "Lakukan Pembayaran" },
-];
-
-function getStep() {
-    const params = new URLSearchParams(window.location.search);
-    let step = parseInt(params.get("step"));
-    if (!step || step < 1 || step > 4) step = 1;
-    return step;
-}
-
-function goToStep(step) {
-    if (
-        (localStorage.getItem("paymentMethod") || null) === null &&
-        step === 4
-    ) {
-        alert("Pilih salah satu metode pembayaran!", false);
-        return;
-    }
-    window.location.href = "payment.html?step=" + step;
-}
-
-function renderStepNav(currentStep) {
-    let navHtml = `<div class="table-responsive">
-    <table class="table table-bordered text-center">
-      <thead class="table-light">
-        <tr>`;
-    steps.forEach((s) => {
-        navHtml += `<th class="${
-            s.step === currentStep ? "bg-info text-white" : "text-muted"
-        }">
-      <small>Langkah ${s.step}</small>
-    </th>`;
-    });
-    navHtml += `</tr></thead></table></div>`;
-    document.getElementById("step-nav").innerHTML = navHtml;
-}
-
-function renderStepButtons(currentStep) {
-    let btnHtml = `<div class="d-flex justify-content-end">`;
-    if (currentStep > 1) {
-        btnHtml += `<button class="btn btn-secondary btn-lg me-2" onclick="goToStep(${
-            currentStep - 1
-        })">Kembali</button>`;
-    }
-    if (currentStep === 2) {
-        btnHtml += `<button class="btn btn-primary btn-lg" onclick="saveInfoAndLanjut()">Lanjut</button>`;
-    } else if (currentStep < 4) {
-        btnHtml += `<button class="btn btn-primary btn-lg" onclick="goToStep(${
-            currentStep + 1
-        })">Lanjut</button>`;
-    } else {
-        btnHtml += `<button class="btn btn-success btn-lg" onclick="processFinalPayment()">Submit</button>`;
-    }
-    btnHtml += `</div>`;
-    document.getElementById("step-buttons").innerHTML = btnHtml;
-}
-
-async function displayStep1Content() {
-    document.getElementById("step-content").innerHTML = `
-    <h2 class="mb-3">Langkah ${steps[0].step}: ${steps[0].title}</h2>
-    <div id="cart-summary-step" class="table-responsive"></div>`;
-    await loadCartSummary();
-}
-
-var products = [];
-
-var totalPrice = 0;
-async function calculateTotalPrice() {
-    products = await fetchProductsData();
-
-    try {
-        const cart = await getCarts();
-        let cartCount = {};
-        cart.forEach((id) => {
-            cartCount[id] = (cartCount[id] || 0) + 1;
-        });
-        totalPrice = 0;
-        for (let id in cartCount) {
-            const product = products.find((p) => p.id === parseInt(id));
-            if (product) {
-                totalPrice += product.price * cartCount[id];
-            }
-        }
-    } catch (err) {
-        console.error("Error loading cart summary:", err);
-    }
-    return totalPrice;
-}
-
-async function getTotalPrice() {
-    totalPrice = await calculateTotalPrice();
-    console.log("Total Harga:", totalPrice);
-
-    return totalPrice;
-}
-
-async function loadCartSummary() {
-    products = await fetchProductsData();
-    totalPrice = await getTotalPrice();
-    const cart = await getCarts();
-
-    let cartCount = {};
-    cart.forEach((id) => {
-        cartCount[id] = (cartCount[id] || 0) + 1;
-    });
-    let tableHtml = `<div id="cart-summary-step-wrapper">
-  <table class="table table-striped">
-    <thead>
-      <tr>
-        <th>No</th>
-        <th>Nama Produk</th>
-        <th>Harga</th>
-        <th>Quantity</th>
-        <th>Subtotal</th>
-      </tr>
-    </thead>
-    <tbody>`;
-    let index = 1;
-    if (Object.keys(cartCount).length === 0) {
-        tableHtml += `<tr><td colspan="5">Keranjang kosong.</td></tr>`;
-    } else {
-        for (let id in cartCount) {
-            const product = products.find((p) => p.id === parseInt(id));
-            if (product) {
-                const qty = cartCount[id];
-                const subtotal = product.price * qty;
-                tableHtml += `<tr>
-          <td>${index++}</td>
-          <td>${product.name}</td>
-          <td>${formatRupiah(product.price)}</td>
-          <td>${qty}</td>
-          <td>${formatRupiah(subtotal)}</td>
-        </tr>`;
-            }
-        }
-        tableHtml += `<tr class="table-light">
-      <td colspan="4" class="text-end"><strong>Total</strong></td>
-      <td><strong>${formatRupiah(totalPrice)}</strong></td>
-    </tr>`;
-    }
-    tableHtml += `</tbody></table>`;
-    document.getElementById("cart-summary-step").innerHTML = tableHtml;
-}
-
-async function displayStep2Content() {
-    const userData = await getUserData();
-
-    document.getElementById("step-content").innerHTML = `
-    <h2 class="mb-3">Langkah ${steps[1].step}: ${steps[1].title}</h2>
-    <form id="info-form" class="fs-5">
-      <div class="mb-3">
-        <label class="form-label">Nama Lengkap</label>
-        <input type="text" class="form-control form-control-lg" id="infoName" value="${userData.name}" required>
-      </div>
-      <div class="mb-3">
-        <label class="form-label">Email</label>
-        <input type="email" class="form-control form-control-lg" id="infoEmail" value="${userData.email}" required disabled>
-      </div>
-      <div class="mb-3">
-        <label class="form-label">Telepon</label>
-        <input type="text" class="form-control form-control-lg" id="infoPhone" value="${userData.phone}" required>
-      </div>
-      <div class="mb-3">
-        <label class="form-label">Alamat</label>
-        <input type="text" class="form-control form-control-lg" id="infoAddress" value="${userData.address}" required>
-      </div>
-    </form>`;
-}
-
-async function saveInfoAndLanjut() {
-    const name = document.getElementById("infoName").value.trim();
-    const email = document.getElementById("infoEmail").value.trim();
-    const phone = document.getElementById("infoPhone").value.trim();
-    const address = document.getElementById("infoAddress").value.trim();
-
-    const userData = await getUserData();
-
-    const transactions = userData.transactions ? userData.transactions : {};
-
-    const updatedUser = {
-        uid: userData.uid,
-        name: name,
-        email: userData.email,
-        phone: phone,
-        address: address,
-        photo_profile: userData.photo_profile,
-        cart: userData.cart,
-        transactions: transactions,
-    };
-
-    if (!name || !email || !phone || !address) {
-        alert("Semua input wajib diisi!", false);
-        return;
-    }
-
-    localStorage.setItem("userData", JSON.stringify(updatedUser));
-    await updateUserDataToGitHub(updatedUser);
-    goToStep(3);
-}
-
-function displayStep3Content() {
-    const params = new URLSearchParams(window.location.search);
-    const message = params.get("message") || "";
-
-    if (message.trim()) alert(message, false);
-
-    document.getElementById("step-content").innerHTML = `
-      <h2 class="mb-3">Langkah ${steps[2].step}: ${steps[2].title}</h2>
-      <br>
-      <br>
-      <div class="text-center ${message ? "text-danger mb-4" : ""}">
-        ${message}
-      </div>
-      <div id="payment-method-buttons" class="d-flex flex-wrap justify-content-center mb-3">
-        <button class="btn btn-outline-primary btn-lg m-2" data-method="bank">
-          <i class="bi bi-building me-1"></i> Bank Transfer
-        </button>
-        <button class="btn btn-outline-primary btn-lg m-2" data-method="qr">
-          <i class="bi bi-qr-code me-1"></i> Scan QR
-        </button>
-        <button class="btn btn-outline-primary btn-lg m-2" data-method="card">
-          <i class="bi bi-credit-card me-1"></i> Kartu Kredit/Debit
-        </button>
-      </div>
-      <p class="text-center" id="infoChoose"></p>
-  `;
-
-    const infoChoose = document.getElementById("infoChoose");
-
-    document
-        .querySelectorAll("#payment-method-buttons button")
-        .forEach((btn) => {
-            btn.addEventListener("click", function () {
-                const method = this.getAttribute("data-method");
-
-                localStorage.setItem("paymentMethod", method);
-
-                document
-                    .querySelectorAll("#payment-method-buttons button")
-                    .forEach((b) => {
-                        b.classList.remove("active");
-                    });
-
-                this.classList.add("active");
-
-                infoChoose.innerText =
-                    "Anda memilih metode pembayaran: " + this.innerText;
-            });
-        });
-
-    const savedMethod = localStorage.getItem("paymentMethod");
-    infoChoose.innerText =
-        "Sebelum lanjut pilih metode pembayaran yang tersedia diatas";
-
-    if (savedMethod) {
-        const btn = document.querySelector(
-            `#payment-method-buttons button[data-method="${savedMethod}"]`
-        );
-        if (btn) {
-            btn.classList.add("active");
-            infoChoose.innerText =
-                "Anda memilih metode pembayaran: " + btn.innerText;
-        }
-    }
-}
-
-async function loadBankList() {
-    try {
-        const url =
-            "https://gist.githubusercontent.com/muhammadyana/6abf8480799637b4082359b509410018/raw/indonesia-bank.json";
-        const response = await fetch(url);
-        if (!response.ok) {
-            throw new Error("Gagal memuat data bank: " + response.status);
-        }
-        const banks = await response.json();
-        const bankSelect = document.getElementById("bankName");
-
-        bankSelect.innerHTML = '<option value="">Pilih Bank</option>';
-        banks.forEach((bank) => {
-            const option = document.createElement("option");
-            option.value = bank.code;
-            option.text = bank.name;
-            bankSelect.appendChild(option);
-        });
-    } catch (error) {
-        console.error("Error loadBankList:", error);
-    }
-}
-
-async function displayStep4Content() {
-    await getTotalPrice();
-    const method = localStorage.getItem("paymentMethod") || null;
-
-    if (method === null) {
-        window.location.href =
-            "payment.html?step=3&message=Sebelum lanjut mohon pilih metode pembayaran terlebih dahulu!";
-    }
-
-    let html = `<h2 class="mb-3">Langkah ${steps[3].step}: ${steps[3].title}</h2>`;
-
-    if (method === "qr") {
-        html += `<p class="fs-5">Silakan scan QR Code berikut dengan aplikasi pembayaran Anda:</p>
-             <div id="qr-code" class="my-3"></div>`;
-        document.getElementById("step-content").innerHTML = html;
-        generateQRCode();
-    } else if (method === "bank") {
-        html += `<form id="final-payment-form" class="fs-5">
-      <div class="mb-3">
-        <label class="form-label">Nama Bank</label>
-        <select class="form-control form-control-lg" id="bankName" required>
-          <option value="">Pilih Bank</option>
-        </select>
-      </div>
-      <div class="mb-3">
-        <label class="form-label">Nomor Rekening</label>
-        <input type="text" class="form-control form-control-lg" id="accountNumber" required>
-      </div>
-    </form>`;
-        document.getElementById("step-content").innerHTML = html;
-
-        await loadBankList();
-    } else {
-        html += `<form id="final-payment-form" class="fs-5">
-      <div class="mb-3">
-        <label class="form-label">Nomor Kartu Kredit/Debit</label>
-        <input type="text" class="form-control form-control-lg" id="cardNumber" required>
-      </div>
-      <div class="mb-3">
-        <label class="form-label">Tanggal Kedaluwarsa (MM/YY)</label>
-        <input type="text" class="form-control form-control-lg" id="expiry" placeholder="MM/YY" required>
-      </div>
-      <div class="mb-3">
-        <label class="form-label">CVV</label>
-        <input type="text" class="form-control form-control-lg" id="cvv" required>
-      </div>
-    </form>`;
-        document.getElementById("step-content").innerHTML = html;
-    }
-}
-
-async function processFinalPayment() {
-    const method = localStorage.getItem("paymentMethod") || "card";
-    let valid = true;
-
-    if (method === "bank") {
-        valid =
-            document.getElementById("bankName").value.trim() &&
-            document.getElementById("accountNumber").value.trim();
-    } else if (method === "card") {
-        valid =
-            document.getElementById("cardNumber").value.trim() &&
-            document.getElementById("expiry").value.trim() &&
-            document.getElementById("cvv").value.trim();
-    }
-
-    if (!valid) {
-        alert("Semua input wajib diisi!", false);
-        return;
-    }
-
-    await alert(
-        "Proses pembayaran...",
-        true,
-        true,
-        7,
-        [
-            {
-                timeOut: 3,
-                message: "Pembayaran Berhasil!",
-            },
-        ],
-        3
-    );
-
-    await clearCart(method);
-}
-
-async function clearCart(payment_method) {
-    const userData = await getUserData();
-    const transactions = userData.transactions ? userData.transactions : {};
-
-    const updatedUser = {
-        uid: userData.uid,
-        name: userData.name,
-        email: userData.email,
-        phone: userData.phone,
-        address: userData.address,
-        photo_profile: userData.photo_profile,
-        cart: [],
-        transactions: transactions,
-    };
-
-    console.log("clearCart", updatedUser);
-
-    await saveTransaction(updatedUser, userData.cart, payment_method);
-
-    updateCartIcon();
-}
-
-async function saveTransaction(userData, productIDs, paymentMethod) {
-    let now = new Date();
-    let transactionID =
-        now.getFullYear() +
-        "_" +
-        String(now.getMonth() + 1).padStart(2, "0") +
-        "_" +
-        String(now.getDate()).padStart(2, "0") +
-        "_" +
-        String(now.getHours()).padStart(2, "0") +
-        "_" +
-        String(now.getMinutes()).padStart(2, "0") +
-        "_" +
-        String(now.getSeconds()).padStart(2, "0") +
-        "_" +
-        String(now.getMilliseconds()).padStart(3, "0");
-
-    const products = await fetchProductsData();
-
-    const transactions = userData.transactions;
-
-    let productMap = {};
-
-    productIDs.forEach((id) => {
-        if (products[id]) {
-            if (productMap[id]) {
-                productMap[id].total += 1;
-            } else {
-                productMap[id] = { ...products[id], total: 1 };
-            }
-        }
-    });
-
-    let theProducts = Object.values(productMap);
-
-    transactions[transactionID] = {
-        products: theProducts,
-        payment_method: paymentMethod,
-        user: {
-            name: userData.name,
-            email: userData.email,
-            phone: userData.phone,
-            address: userData.address,
-            photo_profile: userData.photo_profile,
-        },
-    };
-
-    userData.transactions = transactions;
-
-    await updateUserDataToGitHub(userData);
-    localStorage.setItem("userData", JSON.stringify(userData));
-
-    console.log("saveTransaction", userData);
-
-    console.log("Transaksi berhasil disimpan dengan ID:", transactionID);
-
-    window.location.href = `transaction.html?date=${transactionID}`;
-}
-
-function computeCRC(input) {
-    let crc = 0xffff;
-    for (let i = 0; i < input.length; i++) {
-        crc ^= input.charCodeAt(i) << 8;
-        for (let j = 0; j < 8; j++) {
-            if (crc & 0x8000) {
-                crc = ((crc << 1) ^ 0x1021) & 0xffff;
-            } else {
-                crc = (crc << 1) & 0xffff;
-            }
-        }
-    }
-    return crc.toString(16).toUpperCase().padStart(4, "0");
-}
-
-function generateQRCode() {
-    const qrContainer = document.getElementById("qr-code");
-    if (!qrContainer) return;
-    qrContainer.innerHTML = "";
-
-    const payloadWithoutCRC = `00 02 01
-01 0F ID.CO.QRIS000001
-02 07 QRIS V2
-03 02 12
-04 03 360
-05 06 ${totalPrice}
-06 02 ID
-07 0B BRI Virtual
-08 07 Sidoarjo
-63 04`;
-
-    const payloadForCRC = payloadWithoutCRC + "0000";
-    const crcValue = computeCRC(payloadForCRC);
-
-    const finalPayload = payloadWithoutCRC + crcValue;
-
-    new QRCode(qrContainer, {
-        text: finalPayload,
-        width: 200,
-        height: 200,
-    });
-}
-
-async function initPaymentSteps() {
-    const step = getStep();
-    const cart = await getCarts();
-
-    if (cart.length === 0)
-        window.location.href = `cart.html?message=${encodeURIComponent("Anda belum memesan produk apapun. Pergi ke halaman produk untuk berbelanja")}`;
-
-    products = await fetchProductsData();
-    switch (step) {
-        case 1:
-            await displayStep1Content();
-            break;
-        case 2:
-            await displayStep2Content();
-            break;
-        case 3:
-            displayStep3Content();
-            break;
-        case 4:
-            await displayStep4Content();
-            break;
-        default:
-            displayStep1Content();
-    }
-    renderStepNav(step);
-    renderStepButtons(step);
-}
-
-document.addEventListener("DOMContentLoaded", function () {
-    AOS.init();
-    initPaymentSteps();
-});
+version https://git-lfs.github.com/spec/v1
+oid sha256:af939652b2ad35ead18d205c0ee0d69d5ce86bfe89b46d53f3f6f8c75713c993
+size 16823

javascript/profile.js

@@ -1,260 +1,3 @@
-const CLIENT_ID =
-    "819389601271-fl7jsirpdkepkcou78erki5hmi30rrbm.apps.googleusercontent.com";
-let tokenClient;
-let accessToken;
-
-async function handleCredentialResponse(response) {
-    const idToken = response.credential;
-    const payload = JSON.parse(atob(idToken.split(".")[1]));
-    const uid = payload.sub;
-
-    localStorage.setItem("userData", JSON.stringify({
-        uid: uid,
-        name: payload.name,
-        photo_profile: payload.picture,
-        email: payload.email,
-    }));
-
-    let userData = await getUserData();
-    if (!userData || Object.keys(userData).length === 0) {
-        userData = {
-            uid: uid,
-            name: payload.name,
-            photo_profile: payload.picture,
-            email: payload.email,
-        };
-    }
-
-    await updateUserDataToGitHub(userData);
-
-    localStorage.setItem("cart", JSON.stringify(userData.cart || []));
-
-    window.location.reload();
-}
-
-function handleAccessTokenResponse(response) {
-    accessToken = response.access_token;
-    console.log("Access Token:", accessToken);
-    fetchUserAdditionalInfo();
-}
-
-async function fetchUserAdditionalInfo() {
-    let userData = JSON.parse(localStorage.getItem("userData"));
-    if (userData && userData.uid && accessToken) {
-        try {
-            const res = await fetch(
-                "https://people.googleapis.com/v1/people/me?personFields=phoneNumbers,addresses",
-                {
-                    headers: {
-                        Authorization: `Bearer ${accessToken}`,
-                    },
-                }
-            );
-            if (!res.ok)
-                throw new Error(
-                    "Gagal mendapatkan data tambahan: " + res.status
-                );
-            const additionalData = await res.json();
-            console.log("Data tambahan:", additionalData);
-
-            if (
-                additionalData.phoneNumbers &&
-                additionalData.phoneNumbers.length > 0
-            ) {
-                userData.phone = additionalData.phoneNumbers[0].value;
-            }
-            if (
-                additionalData.addresses &&
-                additionalData.addresses.length > 0
-            ) {
-                userData.address = additionalData.addresses[0].formattedValue;
-            }
-            localStorage.setItem("userData", JSON.stringify(userData));
-            console.log("User Data Lengkap:", userData);
-        } catch (err) {
-            console.error("Error fetching additional info:", err);
-        }
-    } else {
-        console.warn("Data UID atau access token tidak tersedia.");
-    }
-}
-
-async function renderGoogleLoginButton() {
-    const container = document.getElementById("profile-container");
-
-    document.querySelectorAll("#googleSignInButton").forEach((elm) => elm.remove());
-
-    const urlNow = window.location.href;
-    const urlParams = new URLSearchParams(window.location.search);
-    const redirectUrl = urlParams.get("redirect") || urlNow;
-    const message =
-        urlParams.get("message") ||
-        "Silakan masuk ke akun Anda terlebih dahulu untuk melanjutkan:";
-
-    container.innerHTML = `
-        <p class="text-center" style="text-decoration: underline; font-style: italic;">${message}</p>
-        <span class="text-center m-4">Klik tombol di bawah ini untuk masuk:</span>
-        <div id="googleSignInButton"></div>
-    `;
-
-    if (message.trim()) alert(message, false);
-
-    async function loadGoogleAPI(callback) {
-        if (typeof google !== "undefined") {
-            callback();
-            return;
-        }
-
-        console.log("Memuat Google API...");
-        const script = document.createElement("script");
-        script.src = "https://accounts.google.com/gsi/client";
-        script.async = true;
-        script.defer = true;
-
-        script.onload = function () {
-            console.log("Google API berhasil dimuat.");
-            if (typeof google !== "undefined") {
-                callback();
-            } else {
-                console.error("Google API gagal dimuat.");
-                alert("Jika tombol masuk tidak tampil, silakan muat ulang halaman ini", false);
-            }
-        };
-
-        script.onerror = function () {
-            console.error("Gagal memuat Google API.");
-            alert("Gagal memuat Google Login. Coba gunakan browser lain atau muat ulang halaman ini.", false);
-        };
-
-        document.head.appendChild(script);
-    }
-
-    function initializeGoogleLogin() {
-        google.accounts.id.initialize({
-            client_id: CLIENT_ID,
-            callback: async (response) => {
-                await handleCredentialResponse(response);
-                window.location.href = redirectUrl;
-            },
-            auto_select: false,
-            button_auto_select: false,
-            scope: "email profile https://www.googleapis.com/auth/user.phonenumbers.read https://www.googleapis.com/auth/user.addresses.read",
-        });
-
-        google.accounts.id.prompt();
-
-        google.accounts.id.renderButton(
-            document.getElementById("googleSignInButton"),
-            { theme: "outline", size: "large" }
-        );
-    }
-
-    loadGoogleAPI(() => {
-        initializeGoogleLogin();
-    });
-}
-
-async function initProfile() {
-    const userData = await getUserData();
-    if (userData && Object.keys(userData).length > 0) {
-        renderProfileForm(userData);
-    } else {
-        await renderGoogleLoginButton();
-    }
-}
-
-function renderProfileForm(userData) {
-    const container = document.getElementById("profile-container");
-    container.innerHTML = `
-    <form id="profileForm" class="fs-5">
-      <div class="mb-2 d-flex flex-row align-items-center justify-content-center">
-        <img id="photo_profile" class="img-fluid img-thumbnail rounded-circle" src=${userData.photo_profile}>
-        <input class="d-none" type="file" id="fileInput" accept="image/*">
-      </div>
-      <div class="mb-2">
-        <input class="form-control form-control-lg" type="text" id="name" placeholder="Nama" value="${
-            userData.name || ""
-        }" required>
-      </div>
-      <div class="mb-2">
-        <input class="form-control form-control-lg" type="email" id="email" placeholder="Email" value="${
-            userData.email || ""
-        }" required disabled>
-      </div>
-      <div class="mb-2">
-        <input class="form-control form-control-lg" type="text" id="phone" placeholder="No. HP" value="${
-            userData.phone || ""
-        }" required>
-      </div>
-      <div class="mb-2">
-        <input class="form-control form-control-lg" type="text" id="address" placeholder="Alamat" value="${
-            userData.address || ""
-        }" required>
-      </div>
-      <br>
-      <button class="btn btn-primary btn-lg" type="button" id="saveProfile">Simpan</button>
-      <br><br>
-      <button class="btn btn-danger btn-lg" type="button" id="logout">Keluar Akun</button>
-    </form>`;
-
-    document.getElementById("photo_profile").addEventListener("click", function () {
-        document.getElementById("fileInput").click();
-    });
-
-    document.getElementById("fileInput").addEventListener("change", function (event) {
-        const file = event.target.files[0];
-        if (file) {
-            if (file.size > 1 * 1024 * 1024) {
-                alert("Ukuran file terlalu besar! Maksimal 1MB.", false);
-                return;
-            }
-
-            const reader = new FileReader();
-            reader.onload = function (e) {
-                document.getElementById("photo_profile").src = e.target.result;
-            };
-            reader.readAsDataURL(file);
-        }
-    });
-
-    document
-        .getElementById("saveProfile")
-        .addEventListener("click", async function () {
-            const updatedUser = {
-                uid: userData.uid,
-                name: document.getElementById("name").value.trim(),
-                email: userData.email,
-                phone: document.getElementById("phone").value.trim(),
-                address: document.getElementById("address").value.trim(),
-                photo_profile: document.getElementById("photo_profile").src,
-                cart: userData.cart ? userData.cart : [],
-                transactions: userData.transactions
-                    ? userData.transactions
-                    : [],
-            };
-
-            if (
-                !updatedUser.name ||
-                !updatedUser.email ||
-                !updatedUser.phone ||
-                !updatedUser.address
-            ) {
-                alert("Semua input wajib diisi!", false);
-                return;
-            }
-
-            localStorage.setItem("userData", JSON.stringify(updatedUser));
-            await updateUserDataToGitHub(updatedUser);
-            alert("Profil berhasil disimpan!", false);
-        });
-
-    document.getElementById("logout").addEventListener("click", function () {
-        localStorage.removeItem("userData");
-        window.location.reload();
-    });
-}
-
-document.addEventListener("DOMContentLoaded", function () {
-    AOS.init();
-    initProfile();
-});
+version https://git-lfs.github.com/spec/v1
+oid sha256:748d9acdda8605df3dc2a5729582c24ea33535659bbd79c7ec29cc25a462ace0
+size 9334

javascript/search.js

@@ -1,247 +1,3 @@
-document.addEventListener("DOMContentLoaded", async function () {
-  const resultList = document.getElementById("result-list");
-  const urlParams = new URLSearchParams(window.location.search);
-  const productQuery = urlParams.get("products");
-  const transactionQuery = urlParams.get("transactions");
-
-  const createHeader = (text) => {
-    const header = document.createElement("h3");
-    header.textContent = text;
-    header.className = "col-12 mt-4";
-    resultList.appendChild(header);
-  };
-
-  if (!productQuery && !transactionQuery) {
-    const messageElem = document.createElement("p");
-    messageElem.textContent = "Tidak menemukan hasil pencarian yang sesuai.";
-    messageElem.className = "text-center";
-    resultList.appendChild(messageElem);
-    return;
-  }
-
-  const searchInput = document.getElementById("searchInput")
-  if (searchInput) searchInput.value = (productQuery ? productQuery : "") + " " + (transactionQuery ? transactionQuery : "");
-
-  if (productQuery) {
-    const products = await fetchProductsData();
-
-    const filteredProducts = products.filter((product) => {
-      const lowerQuery = productQuery.toLowerCase();
-      return (
-        product.name.toLowerCase().includes(lowerQuery) ||
-        (product.description &&
-          product.description.toLowerCase().includes(lowerQuery))
-      );
-    });
-
-    if (filteredProducts.length > 0) {
-      createHeader("Produk");
-      filteredProducts.forEach((product) => {
-        const col = document.createElement("div");
-        col.className = "col-lg-3 col-md-4 col-sm-6";
-
-        const card = document.createElement("div");
-        card.className = "card h-100";
-
-        let thumbnail = "assets/";
-        if (product.files && product.files.length > 0) {
-          thumbnail += product.files[0];
-        }
-        let thumbHTML = "";
-        if (thumbnail.match(/\.(jpg|jpeg|png|gif)$/i)) {
-          thumbHTML = `<img src="${thumbnail}" class="card-img-top" alt="${product.name}">`;
-        } else {
-          thumbHTML = `<img src="img/placeholder.jpg" class="card-img-top" alt="${product.name}">`;
-        }
-
-        const cardBody = document.createElement("div");
-        cardBody.className = "card-body d-flex flex-column";
-
-        const title = document.createElement("h5");
-        title.className = "card-title";
-        title.innerText = product.name;
-
-        const desc = document.createElement("p");
-        desc.className = "card-text";
-        desc.innerText = product.description;
-
-        const price = document.createElement("p");
-        price.className = "card-text fw-bold";
-        price.innerText = formatRupiah(product.price);
-
-        const detailLink = document.createElement("a");
-        detailLink.href = "product.html?id=" + product.id;
-        detailLink.className = "btn btn-primary btn-lg mt-auto";
-        detailLink.innerText = "Lihat Detail";
-
-        const cartBtn = document.createElement("button");
-        cartBtn.className = "btn btn-success btn-lg mt-2";
-        cartBtn.innerText = "Tambah Keranjang";
-        cartBtn.onclick = async function () {
-          await promptQuantityAndAdd(product.id);
-        };
-
-        card.innerHTML = thumbHTML;
-        cardBody.appendChild(title);
-        cardBody.appendChild(desc);
-        cardBody.appendChild(price);
-        cardBody.appendChild(detailLink);
-        cardBody.appendChild(cartBtn);
-        card.appendChild(cardBody);
-        col.appendChild(card);
-        resultList.appendChild(col);
-      });
-    } else {
-      const messageElem = document.createElement("p");
-      messageElem.textContent = "Produk tidak ditemukan.";
-      messageElem.className = "text-center";
-      resultList.appendChild(messageElem);
-    }
-  }
-
-  if (productQuery && transactionQuery) {
-    const hrElement = document.createElement("hr");
-    resultList.appendChild(hrElement);
-  }
-
-  if (transactionQuery) {
-    const userData = await getUserData() || {transactions: {}};
-    const transactions = userData.transactions || {};
-
-    if (Object.keys(transactions).length > 0) {
-      const entries = Object.entries(transactions).sort((a, b) => {
-        const parseDateFromKey = (key) => {
-          const [year, month, day, hour, minute, second, ms] = key.split("_");
-          return new Date(year, month - 1, day, hour, minute, second, ms);
-        };
-        return parseDateFromKey(b[0]) - parseDateFromKey(a[0]);
-      });
-
-      const filteredTransactions = entries.filter(([key, transaction]) => {
-        const cartItems = transaction.products;
-        let productCount = {};
-
-        cartItems.forEach((product) => {
-          const id = product.id;
-          productCount[id] = (productCount[id] || 0) + 1;
-        });
-
-        const td = formatTransactionDate(key);
-        const pm = transaction.payment_method;
-
-        let total = 0;
-        for (let id in productCount) {
-          const prod = products.find((p) => p.id == id);
-          if (prod) {
-            const qty = productCount[id];
-            const subtotal = prod.price * qty;
-            total += subtotal;
-          }
-        }
-
-        const lowerQuery = transactionQuery.toLowerCase();
-
-        return (
-          key.toLowerCase().includes(lowerQuery) ||
-          td[0].toLowerCase().includes(lowerQuery) ||
-          td[1].toLowerCase.includes(lowerQuery) ||
-          pm.toLowerCase.includes(lowerQuery) ||
-          total.toString().includes(transactionQuery) ||
-          Object.values(productCount).join(",").includes(transactionQuery)
-        );
-      });
-
-      if (filteredTransactions.length > 0) {
-        createHeader("Transaksi");
-
-        filteredTransactions.forEach(([transactionKey, transaction]) => {
-          const col = document.createElement("div");
-          col.className = "transactions-body col-lg-4 col-md-6 col-sm-12 mt-4";
-
-          const card = document.createElement("div");
-          card.className = "card h-100";
-
-          const cardBody = document.createElement("div");
-          cardBody.className = "card-body d-flex flex-column";
-          cardBody.style.position = "relative";
-
-          const td = formatTransactionDate(transactionKey);
-
-          const cartItems = transaction.products;
-          let productCount = {};
-
-          cartItems.forEach((product) => {
-            const id = product.id;
-            productCount[id] = (productCount[id] || 0) + 1;
-          });
-
-          let total = 0;
-          for (let id in productCount) {
-            const prod = products.find((p) => p.id == id);
-            if (prod) {
-              const qty = productCount[id];
-              const subtotal = prod.price * qty;
-              total += subtotal;
-            }
-          }
-
-          let paymentIcon = "";
-          switch (transaction.payment_method) {
-            case "bank":
-              paymentIcon = "bi-building";
-              break;
-            case "qr":
-              paymentIcon = "bi-qr-code";
-              break;
-            case "card":
-              paymentIcon = "bi-credit-card";
-              break;
-            default:
-              paymentIcon = "bi-currency-dollar";
-          }
-
-          cardBody.innerHTML = `
-            <div class="payment-icon-bg">
-              <i class="bi ${paymentIcon}" style="font-size: 2.5rem;"></i>
-              <span class="m-2">Metode: ${
-                transaction.payment_method ? transaction.payment_method : "N/A"
-              }</span>
-            </div>
-            <div class="content">
-              <div class="d-flex justify-content-between align-items-center">
-                <div class="transaction-total fw-bold">
-                  Total: ${formatRupiah(total)}
-                </div>
-              </div>
-              <div class="d-flex justify-content-between align-items-center mt-auto">
-                <div class="transaction-date">
-                  Tanggal: ${td[0]} <br> Waktu: ${td[1]}
-                </div>
-              </div>
-            </div>
-          `;
-
-          card.appendChild(cardBody);
-          col.appendChild(card);
-          resultList.appendChild(col);
-
-          col.addEventListener("click", () => {
-            window.location.href = `transaction.html?date=${transactionKey}`;
-          });
-        });
-      } else {
-        const messageElem = document.createElement("p");
-        messageElem.textContent = "Transaksi tidak ditemukan.";
-        messageElem.className = "text-center";
-        resultList.appendChild(messageElem);
-        alert(messageElem.textContent, false);
-      }
-    } else {
-      const messageElem = document.createElement("p");
-      messageElem.textContent = "Anda belum melakukan transaksi apapun. Silahkan beli produk terlebih dahulu.";
-      messageElem.className = "text-center";
-      resultList.appendChild(messageElem);
-      alert(messageElem.textContent, false);
-    }
-  }
-});
+version https://git-lfs.github.com/spec/v1
+oid sha256:1499e9fd42d573c7095c3266aedbe8971270ec9b26cd8a08037611403c4fb068
+size 11077

python/file.bat

@@ -0,0 +1,3 @@
+@echo off
+python nama_file.py
+pause

python/project2flow.py

@@ -0,0 +1,153 @@
+import os
+import re
+import sys
+from graphviz import Digraph
+import esprima
+
+def detect_file_dependencies(root_dir):
+    """
+    Menelusuri semua file dalam root_dir dan mendeteksi dependency sederhana.
+    Jika sebuah file (HTML) menautkan file lain (JS/CSS) melalui tag <script> atau <link>,
+    maka dependency tersebut dicatat.
+    """
+    dep_graph = {}
+    for subdir, _, files in os.walk(root_dir):
+        for file in files:
+            ext = os.path.splitext(file)[1].lower()
+            if ext in ['.html', '.js', '.css']:
+                filepath = os.path.join(subdir, file)
+                try:
+                    with open(filepath, 'r', encoding='utf-8', errors='ignore') as f:
+                        content = f.read()
+                except Exception as e:
+                    print(f"Error reading {filepath}: {e}")
+                    continue
+
+                dependencies = []
+                if ext == '.html':
+                    scripts = re.findall(r'<script\s+[^>]*src=["\'](.*?)["\']', content, re.IGNORECASE)
+                    links = re.findall(r'<link\s+[^>]*href=["\'](.*?)["\']', content, re.IGNORECASE)
+                    dependencies.extend(scripts)
+                    dependencies.extend(links)
+                dep_graph[filepath] = dependencies
+    return dep_graph
+
+def build_file_dependency_flowchart(dep_graph, output_file='results/project_file_dependencies'):
+    """
+    Membuat diagram flowchart dependency antar file menggunakan Graphviz.
+    Jika string dependency (misalnya, 'script.js') ditemukan dalam nama file lain, dibuat edge.
+    """
+    dot = Digraph(comment='Project File Dependencies')
+    for file in dep_graph:
+        dot.node(file, os.path.basename(file))
+    for file, deps in dep_graph.items():
+        for dep in deps:
+            for candidate in dep_graph:
+                if dep in os.path.basename(candidate):
+                    dot.edge(file, candidate)
+    dot.render(output_file, view=True)
+    print(f"Diagram dependency file disimpan sebagai {output_file}.pdf")
+
+def generate_full_js_flowchart(js_file):
+    """
+    Menghasilkan flowchart yang mencoba mengidentifikasi seluruh _syntax_ yang mempengaruhi
+    alur kontrol pada file JavaScript dengan mengurai AST menggunakan esprima.
+    Node-node yang dihasilkan mencakup FunctionDeclaration, IfStatement, loop, SwitchStatement,
+    ReturnStatement, CallExpression, dan jenis node lainnya.
+    """
+    try:
+        with open(js_file, 'r', encoding='utf-8') as f:
+            code = f.read()
+    except Exception as e:
+        print(f"Error reading {js_file}: {e}")
+        return None
+
+    try:
+        ast = esprima.parseScript(code, tolerant=True)
+    except Exception as e:
+        print(f"Error parsing {js_file}: {e}")
+        return None
+
+    flowchart = Digraph(comment=f'Full JS Flowchart: {os.path.basename(js_file)}')
+    node_counter = 0
+
+    def new_node(label):
+        nonlocal node_counter
+        node_id = f"node{node_counter}"
+        node_counter += 1
+        flowchart.node(node_id, label)
+        return node_id
+
+    def traverse_full(node, parent_node=None):
+        if isinstance(node, dict):
+            node_type = node.get('type')
+            current_node = None
+
+            if node_type == 'FunctionDeclaration':
+                func_name = node.get('id', {}).get('name', 'anonymous')
+                current_node = new_node(f'Function: {func_name}')
+            elif node_type == 'IfStatement':
+                current_node = new_node('If Statement')
+            elif node_type in ['ForStatement', 'WhileStatement', 'DoWhileStatement']:
+                current_node = new_node(node_type)
+            elif node_type == 'SwitchStatement':
+                current_node = new_node('Switch Statement')
+            elif node_type == 'ReturnStatement':
+                current_node = new_node('Return')
+            elif node_type == 'CallExpression':
+                callee = node.get('callee')
+                if callee and callee.get('type') == 'Identifier':
+                    current_node = new_node(f'Call: {callee.get("name")}')
+
+            else:
+
+                current_node = new_node(node_type)
+
+            if parent_node and current_node:
+                flowchart.edge(parent_node, current_node)
+            new_parent = current_node if current_node else parent_node
+            for key, value in node.items():
+
+                if key in ['loc', 'range', 'raw']:
+                    continue
+                traverse_full(value, parent_node=new_parent)
+        elif isinstance(node, list):
+            for item in node:
+                traverse_full(item, parent_node=parent_node)
+
+    traverse_full(ast.toDict(), parent_node=None)
+    return flowchart
+
+def build_all_full_js_flowcharts(root_dir, output_folder='results/full_js_flowcharts'):
+    """
+    Menelusuri seluruh file dalam root_dir, dan untuk setiap file JS menghasilkan flowchart
+    lengkap dari seluruh syntax yang mempengaruhi alur. Flowchart disimpan di output_folder.
+    """
+    if not os.path.exists(output_folder):
+        os.makedirs(output_folder)
+    for subdir, _, files in os.walk(root_dir):
+        for file in files:
+            ext = os.path.splitext(file)[1].lower()
+            if ext == '.js':
+                js_file = os.path.join(subdir, file)
+                print(f"Memproses {js_file} untuk flowchart lengkap...")
+                flowchart = generate_full_js_flowchart(js_file)
+                if flowchart:
+                    base_name = os.path.splitext(os.path.basename(js_file))[0]
+                    output_name = os.path.join(output_folder, base_name + '_full_flowchart')
+                    flowchart.render(output_name, view=False)
+                    print(f"Flowchart lengkap untuk {js_file} disimpan sebagai {output_name}.pdf")
+
+if __name__ == '__main__':
+    root_directory = '/content/drive/MyDrive/Developer/Project/Competition/Alhazen Coding Quest 20 Days Ramadhan Challenge/FINAL PROJECT'
+
+    dependency_graph = detect_file_dependencies(root_directory)
+    print("Dependency Graph Antar File:")
+    for file, deps in dependency_graph.items():
+        print(f"{file}: {deps}")
+    build_file_dependency_flowchart(dependency_graph)
+
+    build_all_full_js_flowcharts(root_directory)
+
+    sys.stdout.flush()
+    input("Tekan Enter untuk keluar...")

results/js_flowcharts/cart_full_flowchart

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:20f13d2a001221c75cb5fa270970c241672cf012726ae1f40c2899a0b13c363c
+size 24372

results/js_flowcharts/cart_full_flowchart.pdf

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:086916f09bd13ce18580b1c10a2622eff78ec0c5e8e03721eb6aeb2ccb0fc8ef
+size 80446

results/js_flowcharts/component_full_flowchart

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:a40f95034ef13d50827c4a4ae76b6456b6e5b8520e08697814e9483ef8a2a4ca
+size 50818

results/js_flowcharts/component_full_flowchart.pdf

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:fab6a77e0cfdd260526ba879a8fb6681c6a37b9a758f8c49ad79c662900df0cd
+size 141264

results/js_flowcharts/data_full_flowchart

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:be0c1a32bd3b687636cbae03b6c1b40c4079928a6395aae6f5a194e7f8b97409
+size 25828

results/js_flowcharts/data_full_flowchart.pdf

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:a29b0425ea5a9fa4f230eb71bfdaf21107098acbda4510f4407593ff5d03ac45
+size 84382

results/js_flowcharts/main_full_flowchart

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:f938cfb8f5e7c0da3e5b1a96ac83ee089a9301f0e2175458b184772e7968fcfc
+size 88049

results/js_flowcharts/main_full_flowchart.pdf

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:3567a06143f5dba0930e389b7e81c52989a23ee3628068c4627971fcdae1dd66
+size 236883

results/js_flowcharts/payment_full_flowchart

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:b3d7798262eabcfc262bb65554ab253b4a413794eb5c0ac1e15de511ae7622a4
+size 85162

results/js_flowcharts/payment_full_flowchart.pdf

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:11a00c87ef0467e74e162312fc268e087d7da301114f6235cee961462c3f4253
+size 231942

results/js_flowcharts/profile_full_flowchart

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:a97b06c534fb12e215e59ecde952040ea2755c4e49b01c91eb710347b6d0d3c5
+size 34133

results/js_flowcharts/profile_full_flowchart.pdf

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:875fbd29734d8008429fe11214dd40022f8ebd18c9f7af4a91c9323b2f7ed667
+size 106216

results/js_flowcharts/search_full_flowchart

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:d6f44e0130ff01d6d7846ab231334e2aa3cbded22fc378932c81c1c6c46e7f56
+size 51019

results/js_flowcharts/search_full_flowchart.pdf

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:5d8c3c06364d34083dee8a4f160dccd19bb5d2bb66dca5a00333f10d1bf11448
+size 147654

results/project_file_dependencies

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:acca815340a7ffa0806d1a086b213b9fd80d3815472f227c53b84ab4919e189d
+size 2551

results/project_file_dependencies.pdf

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:91e4970b1526c193934391af3bad3b8c2743bf70980c72cdec2a6a8c2b159f8d
+size 11324