ิbox

app/components/box1.js

@@ -11,14 +11,15 @@ export default function Box1({ salary }) {
   const [taxbase, setTaxbase] = useState(false)
   const [long, setLong] = useState(false)
   const [reduction, setReduction] = useState(0)
+  const [tax,setTax] = useState(0)
 
   useEffect(() => {
     let newreduction = 0
     if (funds) {
-      newreduction += 5000
+      newreduction += 2000
     }
     if (insurance) {
-      newreduction += 5000
+      newreduction += 2000
     }
     if (government) {
       newreduction += 2000
@@ -38,8 +39,42 @@ export default function Box1({ salary }) {
     if (long) {
       newreduction += 2000
     }
+
     setReduction(newreduction)
-  }, [funds, insurance, government, charity])
+  }, [funds, insurance, government, charity,health,home,taxbase,long])
+
+  useEffect(()=>{
+    if (salary <= 150000)
+    {
+      setTax(0)
+    }
+    else if(salary <= 300000)
+    {
+      setTax(salary * 5/100)
+    }
+    else if(salary <= 500000)
+    {
+      setTax(7500 + ((salary-300000) * 10/100))
+    }
+    else if(salary <= 750000)
+    {
+      setTax(27500 + ((salary-500000) * 15/100))
+    }
+    else if(salary <= 1000000)
+    {
+      setTax(65000 + ((salary-750000) * 20/100))
+    }
+    else if(salary <= 2000000)
+    {
+      setTax(115000 + ((salary-1000000) * 25/100))
+    }
+    else if(salary <= 4000000)
+    {
+      setTax(365000 + ((salary-2000000) * 30/100))
+    }else {
+      setTax(965000 + ((salary-2000000) * 30/100))
+    }
+  },[])
 
   return (
     <div className="flex flex-col justify-center items-center gap-20">
@@ -55,10 +90,10 @@ export default function Box1({ salary }) {
         <div><input type="checkbox" Checked={home} onChange={() => { setHome(!home) }} /> ดอกเบี้ยบ้าน</div>
         <div><input type="checkbox" Checked={taxbase} onChange={() => { setTaxbase(!taxbase) }} /> ฐานภาษี</div>
         <div><input type="checkbox" Checked={long} onChange={() => { setLong(!long) }} /> กองทุนรวมหุ้นระยะยาว</div>
-        <div><input type="checkbox" Checked={government} onChange={() => { setGovernment(!government) }} /> ใช้สิทธิตามมาตรการกระตึ้นเศรษฐกิจของรัฐ</div>
+        <div><input type="checkbox" Checked={government} onChange={() => { setGovernment(!government) }} /> ใช้สิทธิตามมาตรการกระตุ้นเศรษฐกิจของรัฐ</div>
       </div>
       </div>
-      <p className="font-bold">reduction : {reduction}</p>
+      <p className="font-bold">reduction : {tax - reduction <= 0 ? 0: tax - reduction }</p>
     </div>
   );
 }

app/page.js

@@ -9,7 +9,7 @@ export default function Home() {
     <main className="flex gap-5 relative">
       <div className="bg-[#DEF9C4] -z-20 absolute w-full h-full"></div>
       <div className="min-h-screen  flex w-full justify-center mt-52">
-        <Box2 salary={25000} />
+        <Box2 salary={250000} />
       </div>
     </main>
   );