Adjusted tROAS calculator

import React, { useState } from 'react';

const ROASCalculator = () => {
  const [regularPrice, setRegularPrice] = useState(100);
  const [margin, setMargin] = useState(50);
  const [currentTargetROAS, setCurrentTargetROAS] = useState(200);
  const [aggressivenessFactor, setAggressivenessFactor] = useState(0);
  const [discounts, setDiscounts] = useState([10, 20, 30]);

  // Additional costs state
  const [netShippingCost, setNetShippingCost] = useState(5);
  const [averageTransactionFees, setAverageTransactionFees] = useState(2);
  const [averageFulfillmentCosts, setAverageFulfillmentCosts] = useState(3);

  const calculateResults = (discount) => {
    const discountedPrice = regularPrice * (1 - discount / 100);

    // Calculate additional costs as a percentage of the regular price
    const additionalCostsPercentage = (netShippingCost + averageFulfillmentCosts) / regularPrice * 100 + averageTransactionFees;

    // Calculate ROAS metrics
    const oldBreakEvenROAS = 100 / (margin - additionalCostsPercentage) * 100;
    const newBreakEvenROAS = oldBreakEvenROAS / (1 - discount / 100);

    // Calculate adjusted Target ROAS based on aggressiveness factor
    const normalAdjustedTargetROAS = currentTargetROAS / (1 - discount / 100);
    const aggressiveAdjustment = (normalAdjustedTargetROAS - newBreakEvenROAS) * (aggressivenessFactor / 100);
    const adjustedTargetROAS = normalAdjustedTargetROAS - aggressiveAdjustment;

    return {
      discountedPrice: discountedPrice.toFixed(2),
      oldBreakEvenROAS: oldBreakEvenROAS.toFixed(2),
      newBreakEvenROAS: newBreakEvenROAS.toFixed(2),
      adjustedTargetROAS: adjustedTargetROAS.toFixed(2),
    };
  };

  const addDiscount = () => {
    setDiscounts([...discounts, 0]);
  };

  const updateDiscount = (index, value) => {
    const newDiscounts = [...discounts];
    newDiscounts[index] = Number(value);
    setDiscounts(newDiscounts);
  };

  return (
    <div className="p-4 max-w-4xl mx-auto">
      <h1 className="text-2xl font-bold mb-4">Compact ROAS Calculator for Black Friday Discounts</h1>

      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4 mb-4">
        <div>
          <label className="block mb-1">Regular Price (€)</label>
          <input
            type="number"
            value={regularPrice}
            onChange={(e) => setRegularPrice(Number(e.target.value))}
            className="w-full p-2 border rounded"
          />
        </div>
        <div>
          <label className="block mb-1">Margin (%)</label>
          <input
            type="number"
            value={margin}
            onChange={(e) => setMargin(Number(e.target.value))}
            className="w-full p-2 border rounded"
          />
        </div>
        <div>
          <label className="block mb-1">Current Target ROAS (%)</label>
          <input
            type="number"
            value={currentTargetROAS}
            onChange={(e) => setCurrentTargetROAS(Number(e.target.value))}
            className="w-full p-2 border rounded"
          />
        </div>
        <div>
          <label className="block mb-1">Aggressiveness Factor (%)</label>
          <input
            type="number"
            value={aggressivenessFactor}
            onChange={(e) => setAggressivenessFactor(Number(e.target.value))}
            className="w-full p-2 border rounded"
          />
        </div>
      </div>

      <h2 className="text-xl font-bold mb-2">Additional Costs</h2>
      <div className="grid grid-cols-3 gap-4 mb-4">
        <div>
          <label className="block mb-1">Net Shipping Cost (€)</label>
          <input
            type="number"
            value={netShippingCost}
            onChange={(e) => setNetShippingCost(Number(e.target.value))}
            className="w-full p-2 border rounded"
          />
        </div>
        <div>
          <label className="block mb-1">Avg Transaction Fees (%)</label>
          <input
            type="number"
            value={averageTransactionFees}
            onChange={(e) => setAverageTransactionFees(Number(e.target.value))}
            className="w-full p-2 border rounded"
          />
        </div>
        <div>
          <label className="block mb-1">Avg Fulfillment Costs (€)</label>
          <input
            type="number"
            value={averageFulfillmentCosts}
            onChange={(e) => setAverageFulfillmentCosts(Number(e.target.value))}
            className="w-full p-2 border rounded"
          />
        </div>
      </div>

      <button onClick={addDiscount} className="bg-blue-500 text-white px-4 py-2 rounded mb-4">
        Add Discount Scenario
      </button>

      <div className="overflow-x-auto">
        <table className="w-full border-collapse border">
          <thead>
            <tr className="bg-gray-100">
              <th className="border p-2">Discount (%)</th>
              <th className="border p-2">Discounted Price (€)</th>
              <th className="border p-2">Old Break-Even ROAS (%)</th>
              <th className="border p-2">New Break-Even ROAS (%)</th>
              <th className="border p-2">Adjusted Target ROAS (%)</th>
            </tr>
          </thead>
          <tbody>
            {discounts.map((discount, index) => {
              const results = calculateResults(discount);
              return (
                <tr key={index}>
                  <td className="border p-2">
                    <input
                      type="number"
                      value={discount}
                      onChange={(e) => updateDiscount(index, e.target.value)}
                      className="w-20 p-1 border rounded"
                    />
                  </td>
                  <td className="border p-2">{results.discountedPrice}</td>
                  <td className="border p-2">{results.oldBreakEvenROAS}</td>
                  <td className="border p-2">{results.newBreakEvenROAS}</td>
                  <td className="border p-2">{results.adjustedTargetROAS}</td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </div>
  );
};

export default ROASCalculator;