tring to put token

app/Components/Global/Toggle/Toggle.tsx

@@ -7,7 +7,7 @@ import { useState, ReactNode } from "react";
 interface ToggleOption {
   key: string;
   label: string;
-  content: ReactNode;
+  content: ReactNode | (() => ReactNode);
 }
 
 interface ToggleProps {
@@ -46,7 +46,15 @@ export default function Toggle({ options, defaultView }: ToggleProps) {
       </div>
 
       <div className="padding toggleContent">
-        {options.find((opt) => opt.key === view)?.content}
+        {(() => {
+          const active = options.find((opt) => opt.key === view)?.content;
+
+          if (typeof active === "function") {
+            return active();
+          }
+
+          return active;
+        })()}
       </div>
     </section>
   );

app/Components/Impressions/impressions.tsx

@@ -19,6 +19,9 @@ interface ImpressionsProps {
 function Impressions({ costs, numAcount, id_servicio }: ImpressionsProps) {
   const [pages, setPages] = useState("");
   const [cost, setCost] = useState(String(costs[0].value));
+console.log(id_servicio)
+console.log(costs)
+  const total = Number(cost) * Number(pages);
 
   const router = useRouter();
   const handleLogout = () => {
@@ -61,7 +64,7 @@ function Impressions({ costs, numAcount, id_servicio }: ImpressionsProps) {
     const result = await PostImpressions({
       id_cuenta: numAcount,
       numero_hojas: parseInt(pages),
-      monto: parseInt(cost) * parseInt(pages),
+      monto: total,
       id_servicio,
     });
 
@@ -134,7 +137,7 @@ function Impressions({ costs, numAcount, id_servicio }: ImpressionsProps) {
           <label
             style={{ width: "100%", minWidth: "200px", maxWidth: "500px" }}
           >
-            {pages && cost && `$${parseInt(cost) * parseInt(pages)}.00`}
+            {pages && cost && `$${total}.00`}
           </label>
         </div>