import React, { useState, useEffect, useMemo, useCallback } from 'react';
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, PieChart, Pie, Cell } from 'recharts';
// Define initial financial data for input fields, now with 3 years
const initialFinancialData = {
businessName: 'Your Business Name',
businessDescription: 'A brief description of your company, its products, or services.',
sector: 'Technology',
countryOfOperation: 'USA',
financials: {
year1: { revenue: 900000, expenses: 550000, netIncome: 350000, assets: 1800000, liabilities: 450000, equity: 1350000, sharesOutstanding: 90000 },
year2: { revenue: 950000, expenses: 580000, netIncome: 370000, assets: 1900000, liabilities: 480000, equity: 1420000, sharesOutstanding: 95000 },
year3: { revenue: 1000000, expenses: 600000, netIncome: 400000, assets: 2000000, liabilities: 500000, equity: 1500000, sharesOutstanding: 100000 },
},
industryPE: 15, // Example industry P/E ratio for valuation
};
const App = () => {
// State for individual financial inputs, now including nested financials
const [financialInputs, setFinancialInputs] = useState(initialFinancialData);
const [parsedFinancialData, setParsedFinancialData] = useState(null);
const [valuationResults, setValuationResults] = useState(null);
const [message, setMessage] = useState('');
const [showDisclaimer, setShowDisclaimer] = useState(false);
const [entryCount, setEntryCount] = useState(0); // For conceptual paid service, now resets on refresh
const MAX_FREE_ENTRIES = 2; // Maximum free entries before prompting for payment
// Handle input changes for financial data fields
const handleInputChange = (e) => {
const { name, value } = e.target;
const [fieldKey, yearKey] = name.split('-'); // Split name like "revenue-year1"
setFinancialInputs(prev => {
// If it's a financial field (e.g., revenue, assets)
if (yearKey) {
// Ensure value is a valid number, default to 0 if not
const numericValue = parseFloat(value) || 0;
return {
...prev,
financials: {
...prev.financials,
[yearKey]: {
...prev.financials[yearKey],
[fieldKey]: numericValue
}
}
};
} else { // It's a general business info field or industryPE
const updatedValue = ['industryPE'].includes(name) ? parseFloat(value) || 0 : value;
return {
...prev,
[name]: updatedValue
};
}
});
};
// Function to calculate valuation based on current inputs
const calculateValuation = useCallback(() => {
// Increment entry count (resets on refresh as no localStorage is used)
const newEntryCount = entryCount + 1;
setEntryCount(newEntryCount);
if (newEntryCount > MAX_FREE_ENTRIES) {
setMessage(`You have used your ${MAX_FREE_ENTRIES} free entries. Please consider subscribing for unlimited valuations.`);
setParsedFinancialData(null); // Clear previous results if limit reached
setValuationResults(null);
return;
}
// Set parsed data from current inputs. For simple valuation, use Year 3 data.
const currentYearData = financialInputs.financials.year3;
let currentMessage = '';
// --- Financial Logic Checks (Auto-debugging / Warnings) ---
// 1. Balance Sheet Check: Assets = Liabilities + Equity
const calculatedEquity = currentYearData.assets - currentYearData.liabilities;
if (Math.abs(calculatedEquity - currentYearData.equity) > 1) { // Allow for slight floating point differences
currentMessage += 'Warning: For Year 3, Assets do not equal Liabilities + Equity. Please check your balance sheet inputs. ';
}
// 2. Profitability Check: Revenue - Expenses = Net Income
const calculatedNetIncome = currentYearData.revenue - currentYearData.expenses;
if (Math.abs(calculatedNetIncome - currentYearData.netIncome) > 1) { // Allow for slight floating point differences
currentMessage += 'Warning: For Year 3, Revenue minus Expenses does not equal Net Income. Please check your income statement inputs. ';
}
if (currentMessage) {
setMessage(currentMessage);
setParsedFinancialData(null); // Clear results if inputs are inconsistent
setValuationResults(null);
return;
}
setParsedFinancialData({
...financialInputs,
// Use Year 3 data for the current simplified calculations
revenue: currentYearData.revenue,
expenses: currentYearData.expenses, // Corrected this line to use currentYearData.expenses
netIncome: currentYearData.netIncome,
assets: currentYearData.assets,
liabilities: currentYearData.liabilities,
equity: currentYearData.equity,
sharesOutstanding: currentYearData.sharesOutstanding,
});
setMessage(''); // Clear any previous error messages if checks pass
}, [financialInputs, entryCount]);
// Memoize the calculation of valuation results to re-run only when parsedFinancialData changes
useEffect(() => {
if (parsedFinancialData) {
// Basic valuation calculations (simplified for demonstration)
const { revenue, expenses, netIncome, assets, liabilities, equity, sharesOutstanding, industryPE } = parsedFinancialData;
const grossProfit = revenue - expenses;
const profitMargin = (revenue > 0) ? (netIncome / revenue) * 100 : 0; // Prevent division by zero
const debtToEquityRatio = (equity > 0) ? liabilities / equity : (liabilities > 0 ? Infinity : 0); // Handle zero equity
const earningsPerShare = sharesOutstanding > 0 ? (netIncome / sharesOutstanding) : 0; // Handle zero shares
const estimatedValuationPE = earningsPerShare * industryPE; // Simple P/E valuation
setValuationResults({
grossProfit,
profitMargin: profitMargin.toFixed(2),
debtToEquityRatio: debtToEquityRatio.toFixed(2),
earningsPerShare: earningsPerShare.toFixed(2),
estimatedValuationPE: estimatedValuationPE.toFixed(2),
});
} else {
setValuationResults(null);
}
}, [parsedFinancialData]);
// Data for the Bar Chart (using Year 3 data)
const financialSummaryChartData = useMemo(() => {
if (!parsedFinancialData) return [];
return [
{ name: 'Revenue', value: parsedFinancialData.revenue },
{ name: 'Expenses', value: parsedFinancialData.expenses },
{ name: 'Net Income', value: parsedFinancialData.netIncome },
];
}, [parsedFinancialData]);
// Data for the Pie Chart (Assets vs. Liabilities vs. Equity - using Year 3 data)
const balanceSheetChartData = useMemo(() => {
if (!parsedFinancialData) return [];
return [
{ name: 'Assets', value: parsedFinancialData.assets },
{ name: 'Liabilities', value: parsedFinancialData.liabilities },
{ name: 'Equity', value: parsedFinancialData.equity },
];
}, [parsedFinancialData]);
const PIE_COLORS = ['#6366f1', '#34d399', '#fcd34d']; // Adjusted Pie Chart colors for a more cohesive look
const financialMetrics = [
{ key: 'revenue', label: 'Revenue' },
{ key: 'expenses', label: 'Expenses' },
{ key: 'netIncome', label: 'Net Income' },
{ key: 'assets', label: 'Assets' },
{ key: 'liabilities', label: 'Liabilities' },
{ key: 'equity', label: 'Equity' },
{ key: 'sharesOutstanding', label: 'Shares Outstanding' },
];
return (
<div className="bg-gray-50 p-4 font-sans text-gray-800"> {/* Removed min-h-screen */}
{/*
SEO Meta Tags:
In a real-world React application, you would typically manage these meta tags
using a library like React Helmet or by placing them directly in your
public/index.html file's <head> section. Placing a <head> element
directly inside a React component's render method is not valid HTML
and causes DOM nesting warnings.
*/}
{/*
<head>
<title>Business Valuation Tool | AUXEZ Management Consultancy</title>
<meta name="description" content="Get a quick, illustrative business valuation estimate with AUXEZ Management Consultancy's free online tool. Understand your company's value for preliminary insights. Contact us for detailed professional valuations." />
<meta name="keywords" content="business valuation, company valuation, business value calculator, free valuation tool, financial analysis, AUXEZ Management Consultancy, P/E ratio, small business valuation" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
*/}
<div className="max-w-6xl mx-auto bg-white rounded-xl shadow-lg p-8 space-y-8 border border-gray-100">
<header className="text-center pb-6 border-b border-gray-200">
<h1 className="text-4xl font-extrabold text-gray-900 mb-2">Business Valuation Tool</h1>
<p className="text-lg text-gray-600">Powered by <span className="font-semibold text-indigo-700">AUXEZ Management Consultancy</span></p>
{/* Trust Counter */}
<div className="flex items-center justify-center mt-3 text-gray-600">
<span className="text-yellow-400 text-xl mr-1">★★★★★</span> {/* 5 stars unicode */}
<span className="font-semibold text-sm">4.8/5 stars</span>
<span className="ml-2 text-sm">by 637+ users</span>
</div>
</header>
{/* Input Section */}
<section className="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
<h2 className="text-2xl font-bold text-gray-700 mb-4">1. Enter Business & Financial Data</h2>
<p className="text-gray-600 mb-4">
This tool is designed for **simple users and non-financial users** who need a quick, **illustrative, and preliminary** estimate of a business's value based on basic financial inputs. **It is not intended for making critical business, investment, or legal decisions, nor for regulatory compliance.** Professional financial advice is essential for such purposes.
</p>
{/* Tool of Trust - Privacy and Data Handling Statement */}
<div className="bg-indigo-50 border-l-4 border-indigo-500 text-indigo-800 p-4 mb-6 rounded-md" role="alert">
<p className="font-bold">Your Privacy Matters to AUXEZ Management Consultancy</p>
<p className="text-sm">
**We do not store or transmit your business or financial data.** All calculations are performed directly in your web browser. Once you close or refresh this page, your entered data is cleared. Your information remains private and secure on your device.
</p>
</div>
<p className="text-gray-600 mb-4">
Please enter your business and financial data below.
</p>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
{/* Business Information Fields */}
<div className="flex flex-col">
<label htmlFor="businessName" className="text-gray-700 text-sm font-medium mb-1">Business Name:</label>
<input
type="text"
id="businessName"
name="businessName"
value={financialInputs.businessName}
onChange={handleInputChange}
className="p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-400 focus:border-transparent transition duration-200 ease-in-out"
placeholder="e.g., Acme Corp."
/>
</div>
<div className="flex flex-col">
<label htmlFor="sector" className="text-gray-700 text-sm font-medium mb-1">Sector:</label>
<input
type="text"
id="sector"
name="sector"
value={financialInputs.sector}
onChange={handleInputChange}
className="p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-400 focus:border-transparent transition duration-200 ease-in-out"
placeholder="e.g., Technology, Retail, Manufacturing"
/>
</div>
<div className="flex flex-col">
<label htmlFor="countryOfOperation" className="text-gray-700 text-sm font-medium mb-1">Country of Operation:</label>
<input
type="text"
id="countryOfOperation"
name="countryOfOperation"
value={financialInputs.countryOfOperation}
onChange={handleInputChange}
className="p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-400 focus:border-transparent transition duration-200 ease-in-out"
placeholder="e.g., USA, UK, Canada"
/>
</div>
<div className="md:col-span-2 flex flex-col">
<label htmlFor="businessDescription" className="text-gray-700 text-sm font-medium mb-1">Business Description:</label>
<textarea
id="businessDescription"
name="businessDescription"
rows="3"
value={financialInputs.businessDescription}
onChange={handleInputChange}
className="p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-400 focus:border-transparent transition duration-200 ease-in-out"
placeholder="Provide a brief description of your company, its products, or services."
></textarea>
</div>
{/* Financial Data Fields for 3 Years */}
{['year1', 'year2', 'year3'].map(year => (
<div key={year} className="md:col-span-2 bg-gray-50 p-4 rounded-lg shadow-inner border border-gray-200">
<h3 className="text-lg font-semibold text-gray-700 mb-3 capitalize">Financials - {year.replace('year', 'Year ')}</h3>
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
{financialMetrics.map(metric => (
<div key={`${metric.key}-${year}`} className="flex flex-col">
<label htmlFor={`${metric.key}-${year}`} className="text-gray-600 text-sm mb-1">{metric.label}:</label>
<input
type="number"
id={`${metric.key}-${year}`}
name={`${metric.key}-${year}`}
value={financialInputs.financials2026[metric.key]}
onChange={handleInputChange}
className="p-2 border border-gray-300 rounded-md focus:ring-1 focus:ring-indigo-400 focus:border-transparent transition duration-150 ease-in-out"
placeholder={`Enter ${metric.label}`}
/>
</div>
))}
</div>
</div>
))}
{/* Industry P/E */}
<div className="flex flex-col md:col-span-2">
<label htmlFor="industryPE" className="text-gray-700 text-sm font-medium mb-1">Industry P/E Ratio:</label>
<input
type="number"
id="industryPE"
name="industryPE"
value={financialInputs.industryPE}
onChange={handleInputChange}
className="p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-400 focus:border-transparent transition duration-200 ease-in-out"
placeholder="e.g., 15"
/>
</div>
</div>
<button
onClick={calculateValuation}
disabled={entryCount >= MAX_FREE_ENTRIES}
className={`mt-4 w-full py-3 px-6 rounded-lg text-lg font-semibold transition duration-200 ease-in-out shadow-md
${entryCount >= MAX_FREE_ENTRIES ? 'bg-gray-400 cursor-not-allowed' : 'bg-indigo-600 text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2'}`}
>
{entryCount >= MAX_FREE_ENTRIES ? `Limit Reached (${MAX_FREE_ENTRIES} Free Entries)` : 'Process Data'}
</button>
{message && <p className="mt-4 text-red-600 text-center font-medium">{message}</p>}
{entryCount < MAX_FREE_ENTRIES && (
<p className="mt-2 text-sm text-gray-500 text-center">
You have {MAX_FREE_ENTRIES - entryCount} free entries remaining. (Resets on page refresh)
</p>
)}
</section>
{/* Infographic Presentation */}
{valuationResults && (
<section className="bg-white p-6 rounded-lg shadow-xl border border-gray-200">
<h2 className="text-2xl font-bold text-gray-700 mb-6 text-center">2. Valuation Infographic</h2>
{/* Display Business Information */}
<div className="bg-gray-50 p-4 rounded-lg mb-6 shadow-sm border border-gray-200">
<h3 className="text-xl font-semibold text-gray-800 mb-2">{parsedFinancialData.businessName || 'Unnamed Business'}</h3>
<p className="text-gray-700 text-sm mb-1"><strong>Sector:</strong> {parsedFinancialData.sector || 'N/A'}</p>
<p className="text-gray-700 text-sm mb-1"><strong>Country of Operation:</strong> {parsedFinancialData.countryOfOperation || 'N/A'}</p>
<p className="text-gray-700 text-sm"><strong>Description:</strong> {parsedFinancialData.businessDescription || 'No description provided.'}</p>
<p className="text-gray-700 text-sm mt-2">
<strong className="text-indigo-700">Financials displayed are for Year 3.</strong>
</p>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
{/* Key Metrics */}
<div className="bg-indigo-50 p-6 rounded-lg shadow-md">
<h3 className="text-xl font-semibold text-indigo-800 mb-4">Key Financial Metrics (Year 3)</h3>
<div className="space-y-3">
<p className="text-gray-700 text-lg"><strong>Gross Profit:</strong> ${valuationResults.grossProfit.toLocaleString()}</p>
<p className="text-gray-700 text-lg"><strong>Profit Margin:</strong> {valuationResults.profitMargin}%</p>
<p className="text-gray-700 text-lg"><strong>Debt-to-Equity Ratio:</strong> {valuationResults.debtToEquityRatio}</p>
<p className="text-gray-700 text-lg"><strong>Earnings Per Share (EPS):</strong> ${valuationResults.earningsPerShare}</p>
<p className="text-gray-700 text-lg">
<strong className="text-emerald-700">Estimated Valuation (P/E):</strong> ${valuationResults.estimatedValuationPE.toLocaleString()}
<span className="text-sm text-gray-500 ml-2">(Based on Price-to-Earnings multiple)</span>
</p>
</div>
</div>
{/* Financial Summary Bar Chart */}
<div className="bg-purple-50 p-6 rounded-lg shadow-md">
<h3 className="text-xl font-semibold text-purple-800 mb-4">Revenue, Expenses, Net Income (Year 3)</h3>
<ResponsiveContainer width="100%" height={300}>
<BarChart data={financialSummaryChartData} margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
<CartesianGrid strokeDasharray="3 3" stroke="#e0e0e0" />
<XAxis dataKey="name" className="text-sm" />
<YAxis className="text-sm" />
<Tooltip formatter={(value) => `$${value.toLocaleString()}`} />
<Legend />
<Bar dataKey="value" fill="#6366f1" name="Amount" radius={[10, 10, 0, 0]} />
</BarChart>
</ResponsiveContainer>
</div>
</div>
{/* Balance Sheet Pie Chart */}
<div className="bg-green-50 p-6 rounded-lg shadow-md mt-8">
<h3 className="text-xl font-semibold text-green-800 mb-4 text-center">Balance Sheet Overview (Year 3)</h3>
<ResponsiveContainer width="100%" height={300}>
<PieChart>
<Pie
data={balanceSheetChartData}
cx="50%"
cy="50%"
outerRadius={100}
fill="#8884d8"
dataKey="value"
labelLine={false}
label={({ name, percent }) => `${name}: ${(percent * 100).toFixed(0)}%`}
>
{balanceSheetChartData.map((entry, index) => (
<Cell key={`cell-${index}`} fill={PIE_COLORS[index % PIE_COLORS.length]} />
))}
</Pie>
<Tooltip formatter={(value) => `$${value.toLocaleString()}`} />
<Legend />
</PieChart>
</ResponsiveContainer>
</div>
<div className="mt-8 p-4 bg-indigo-50 border-l-4 border-indigo-500 text-indigo-800 rounded-md">
<p className="font-bold mb-2">Ready for a Deeper Dive?</p>
<p className="text-sm">
This illustrative valuation provides a quick glimpse into your business's potential. For critical decisions such as **seeking investment, selling your business, strategic planning, or regulatory compliance**, a **comprehensive, professional business valuation** is essential.
</p>
<p className="text-sm mt-2">
**Connect with AUXEZ Management Consultancy** to get a detailed valuation report tailored to your specific needs, adhering to the highest industry standards.
</p>
</div>
</section>
)}
{/* Contact Us Section (Replaced Professional Report Section) */}
<section className="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
<h2 className="text-2xl font-bold text-gray-700 mb-4">Contact Us for a Detailed Valuation</h2>
<p className="text-gray-600 mb-4">
If you're looking for an in-depth, professional business valuation report for critical decisions,
**contact AUXEZ Management Consultancy today to claim your 30-minute free consultation!**
</p>
<p className="text-gray-600 mb-4">
Our experts provide comprehensive analysis tailored to your specific needs,
whether for investment, sale, strategic planning, or regulatory compliance.
</p>
<a
href="mailto:info@auxez.com?subject=Inquiry%20from%20Business%20Valuation%20Tool%20-%20Free%20Consultation"
className="mt-4 w-full inline-block text-center bg-emerald-600 text-white py-3 px-6 rounded-lg text-lg font-semibold hover:bg-emerald-700 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 transition duration-200 ease-in-out shadow-md"
>
Claim Your Free 30-Min Consultation
</a>
<div className="mt-4 p-4 bg-yellow-50 border border-yellow-200 text-yellow-800 rounded-lg">
<h3 className="font-bold">Important Disclaimer:</h3>
<p className="text-sm mt-2">
The illustrative valuation provided by this tool is for preliminary informational purposes only and does not constitute financial, investment, or legal advice. It should not be relied upon for making critical financial decisions. For accurate and actionable insights, always consult with qualified financial professionals. AUXEZ Management Consultancy is not responsible for any errors or omissions in the self-entered data or for any actions taken based on the tool's preliminary results.
</p>
</div>
</section>
</div>
{/* Tailwind CSS CDN */}
<script src="https://cdn.tailwindcss.com"></script>
{/* Font loading is handled by the browser for default sans-serif, no need for specific Inter link */}
<style>
{`
/* Custom styles for professional look */
body {
background-color: #f8fafc; /* Light gray for background */
}
/* Removed full height and centering from #root to make it smaller */
#root {
display: block; /* Allow content to dictate height */
min-height: auto; /* Remove minimum height constraint */
justify-content: flex-start; /* Align content to start */
align-items: flex-start; /* Align content to start */
}
`}
</style>
</div>
);
};
export default App;