feat: implement flag product func

frontend/src/app/scan/[product]/page.tsx

@@ -37,50 +37,6 @@ export default function ScanPage() {
 
   return (
     <main className=" w-full md:h-fit bg-product-overview-mobile md:bg-product-overview bg-no-repeat bg-cover bg-center pb-[80px]">
-      <header className="lg:bg-hero bg-hero-2  bg-no-repeat bg-cover">
-        <nav className="flex px-5 md:px-20 py-5  items-center justify-between lg:backdrop-brightness-50 ">
-          <Link
-            href="/"
-            className="text-white font-lato hidden lg:block  font-extrabold text-2xl"
-          >
-            ScanGaurd
-          </Link>
-          <div className="lg:hidden block">
-            <MenuIcon />
-          </div>
-          <div className="hidden md:flex gap-6">
-            <Link
-              href="/"
-              className="text-white font-lato  text-sm  font-normal"
-            >
-              Home
-            </Link>
-            <a href="#" className="text-white font-lato  text-sm font-normal ">
-              About
-            </a>
-            <a href="#" className="text-white font-lato  text-sm font-normal">
-              Producers
-            </a>
-          </div>
-
-          <div className=" flex gap-5">
-            <div className="" onClick={() => setOpen((prev) => !prev)}>
-              <ScanIcon />
-            </div>
-
-            {!address ? (
-              <button
-                onClick={toggleUserModal}
-                className="bg-white px-3 py-2 font-lato  rounded-full text-black text-sm border border-white"
-              >
-                Launch App
-              </button>
-            ) : (
-              <AddressBar setOpenConnectedModal={setOpenConnectedModal} />
-            )}
-          </div>
-        </nav>
-      </header>
       {/* Product Preview 
 			//TODO: center, add background, make it responsive and pixel perfect
 			//TODO: https://www.figma.com/design/dwXPww5jcUl55azC9EQ8H0/SCANGUARD?node-id=14-13&node-type=canvas&t=Q8gtO0EqfOBYEqke-0

frontend/src/components/FlagProductModal.tsx

@@ -1,9 +1,16 @@
 import { FlagIcon } from '@/assets/icons';
+import { handleFlagProduct } from '@/services/apiService';
 import React, { useState } from 'react';
 
-export default function FlagProductModal({ setOpen }: { setOpen: () => void }) {
-  const [selectedOption, setSelectedOption] = useState('');
-  const [customOption, setCustomOption] = useState('');
+export default function FlagProductModal({
+  setOpen,
+  product_id,
+}: {
+  setOpen: () => void;
+  product_id: string;
+}) {
+  const [selectedOption, setSelectedOption] = useState<string>('');
+  const [customOption, setCustomOption] = useState<string>('');
 
   const flagOptions = [
     {
@@ -74,7 +81,12 @@ export default function FlagProductModal({ setOpen }: { setOpen: () => void }) {
           >
             Go back
           </button>
-          <button className="py-3 lg:py-[15px] bg-[#343131] rounded-lg lg:rounded-2xl">
+          <button
+            className="py-3 lg:py-[15px] bg-[#343131] rounded-lg lg:rounded-2xl"
+            onSubmit={() =>
+              handleFlagProduct(product_id, selectedOption || customOption)
+            }
+          >
             Submit
           </button>
         </div>

frontend/src/components/ProductPreview.tsx

@@ -68,11 +68,12 @@
             setOpen={() => {
               setIsFlagging(false);
             }}
+            product_id={productId}
           />,
           document.body
         )}
       <div className="w-full max-w-6xl relative lg:bg-[#1E1E1E] rounded-3xl p-6 lg:p-[88px] text-white mx-auto lg:border-[1px] border-[#303030] grid grid-cols-1 lg:grid-cols-2 gap-y-5 gap-x-[80px] items-stretch">
         <img
           src="/productEllipse.svg"
           alt=""
           className="absolute hidden lg:flex top-[-30px] left-[60px] z-[1]"
@@ -80,7 +81,7 @@
         {/* Product Image Section */}
         <div className="z-10">
           <div className=" h-[402px] flex items-center justify-center">
             <img
               src={product?.image}
               alt={product?.name ? product?.name : ''}
               className="h-full"

frontend/src/services/apiService.ts

@@ -15,3 +15,30 @@ export const fetchIpfsFile = async (file: string) => {
     throw error; // Re-throw the error for further handling if necessary
   }
 };
+
+const URL = '';
+export const handleFlagProduct = async function (
+  product_id: string,
+  flag_reason: string
+) {
+  const response = await fetch(URL, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({
+      product_id,
+      flag_reason,
+    }),
+  });
+
+  if (!response.ok) {
+    const errorBody = await response.json();
+    console.error('Error Response:', errorBody);
+    throw new Error(
+      `Failed to flag product: ${errorBody.message || response.statusText}`
+    );
+  }
+
+  return await response.json();
+};