upd

src/components/Calc.tsx

@@ -7,16 +7,14 @@ function Calc() {
   const [regions, setRegions] = useState<any[]>([]);
   const [consultsPerMonth, setConsultsPerMonth] = useState<number>(100); // Консультации в месяц
   const [totalHousingAreaInComplex, setTotalAreaHousingInComplex] =
-    useState<string>("10000"); // Общая площадь жилья в комплексе (м2)
+    useState<number>(10000); // Общая площадь жилья в комплексе (м2)
   const [averageApartmentArea, setAverageApartmentArea] = useState<number>(50); // Средняя площадь квартиры
   const [averagePrice, setAveragePrice] = useState<number>(100000); // Средняя стоиомость за 1 м2
-  const [consultsInBooking, setConsultsInBooking] = useState<number>(
-    Math.round(consultsPerMonth * 0.3)
-  );
-  const [consultsInSales, setConsultsInSales] = useState<number>(
-    Math.round(consultsPerMonth * 0.1)
-  );
+  const [consultsInBooking, setConsultsInBooking] = useState<number>();
+  const [consultsInSales, setConsultsInSales] = useState<number>(100);
   const [isEnabled, setIsEnabled] = useState<boolean>(false);
+  const [profitPerMonth, setProfitPerMonth] = useState<number>();
+  const [implementationTime, setImplementationTime] = useState<number>();
 
   async function getRegions() {
     const result: [] = await ky.get("http://localhost:3000/regions").json();
@@ -40,9 +38,32 @@ function Calc() {
     setConsultsInBooking(
       Math.round(consultsPerMonth * (!isEnabled ? 0.3 : 0.45))
     );
+
     setConsultsInSales(Math.round(consultsPerMonth * (!isEnabled ? 0.1 : 0.2)));
   }, [consultsPerMonth, isEnabled]);
 
+  useEffect(() => {
+    setProfitPerMonth(
+      Math.round(
+        (consultsInSales * averageApartmentArea * averagePrice) / 1000000
+      )
+    );
+
+    setImplementationTime(
+      Math.round(
+        totalHousingAreaInComplex / (consultsInSales * averageApartmentArea)
+      )
+    );
+
+    console.log(averageApartmentArea, averagePrice, totalHousingAreaInComplex);
+  }, [
+    totalHousingAreaInComplex,
+    consultsInSales,
+    isEnabled,
+    averageApartmentArea,
+    averagePrice,
+  ]);
+
   useEffect(() => {
     getRegions();
   }, []);
@@ -52,12 +73,6 @@ function Calc() {
 
     if (pattern.test(e.target.value)) {
       setConsultsPerMonth(+e.target.value);
-      // setConsultsInBooking(
-      //   Math.round(+e.target.value * (!isEnabled ? 0.3 : 0.45))
-      // );
-      // setConsultsInSales(
-      //   Math.round(+e.target.value * (!isEnabled ? 0.1 : 0.2))
-      // );
     }
   }
 
@@ -69,7 +84,7 @@ function Calc() {
     const pattern = new RegExp(e.target.pattern);
 
     if (pattern.test(e.target.value)) {
-      setTotalAreaHousingInComplex(e.target.value);
+      setTotalAreaHousingInComplex(+e.target.value);
     }
   }
 
@@ -124,7 +139,7 @@ function Calc() {
             min={1}
             max={100}
             defaultValue={averageApartmentArea}
-            onChange={(value) => console.log(value)}
+            onChange={(value) => setAverageApartmentArea(value)}
           />
         </div>
         <div className="space-y-2">
@@ -135,7 +150,7 @@ function Calc() {
             min={30000}
             max={300000}
             defaultValue={averagePrice}
-            onChange={(value) => console.log(value)}
+            onChange={(value) => setAveragePrice(value)}
           />
         </div>
       </div>
@@ -192,7 +207,7 @@ function Calc() {
             <div className="flex space-x-8">
               <div className="space-y-4">
                 <p className="space-x-2 from-[#BC75FF] to-[#798FFF] bg-gradient-to-bl text-transparent bg-clip-text">
-                  <span className="text-6xl font-gilroy">16</span>
+                  <span className="text-6xl font-gilroy">{implementationTime}</span>
                   <span className="text-xl font-bold">месяцев</span>
                 </p>
                 <p>
@@ -208,7 +223,7 @@ function Calc() {
 
               <div className="space-y-4">
                 <p className="space-x-2 from-[#BC75FF] to-[#798FFF] bg-gradient-to-bl text-transparent bg-clip-text">
-                  <span className="text-6xl font-gilroy">180,2</span>
+                  <span className="text-6xl font-gilroy">{profitPerMonth}</span>
                   <span className="text-xl font-bold">млн. руб.</span>
                 </p>
                 <p>