<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Azimut 77s Financial Dashboard</title>
<script src="https://cdn.tailwindcss.com"></script>
<link
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
rel="stylesheet"
/>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap');
body { font-family: 'Inter', sans-serif; }
.slider-thumb::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 24px;
height: 24px;
background: #2563EB;
cursor: pointer;
border-radius: 50%;
border: 2px solid white;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.card-hover { transition: transform 0.2s; }
.card-hover:hover { transform: translateY(-2px); }
</style>
</head>
<body class="bg-slate-50 text-slate-800">
<!-- Header -->
<header class="bg-slate-900 text-white p-6 shadow-lg">
<div
class="max-w-7xl mx-auto flex flex-col md:flex-row justify-between items-center"
>
<div>
<h1 class="text-2xl font-bold mb-1">
Azimut 77s (2019)
<span class="text-blue-400">Financial Dashboard</span>
</h1>
<p class="text-slate-400 text-sm">
<i class="fas fa-map-marker-alt mr-2"></i>Dubai, UAE | Currency: AED
</p>
</div>
</div>
</header>
<main class="max-w-7xl mx-auto p-6 space-y-6">
<!-- STEP 1: STRATEGY & SURVEY (Prominent Section) -->
<div
class="bg-gradient-to-r from-blue-900 to-blue-800 rounded-xl shadow-xl p-6 text-white border-l-8 border-yellow-400"
>
<div
class="flex flex-col md:flex-row items-start md:items-center justify-between gap-4"
>
<div class="flex-1">
<h2
class="text-yellow-400 font-bold text-xl uppercase tracking-wider mb-2"
>
<i class="fas fa-search-dollar mr-2"></i>Step 1: Purchase Strategy
& Survey
</h2>
<p class="text-blue-100 text-lg leading-relaxed">
We are ready to conduct a comprehensive
<b>Technical Survey</b> immediately. We will use the survey report
to identify defects and
<b
class="text-white underline decoration-yellow-400 decoration-2 underline-offset-4"
>negotiate a significant price reduction</b
>
with the seller.
</p>
</div>
<div
class="bg-white/10 p-4 rounded-lg backdrop-blur-sm min-w-[250px]"
>
<div class="flex justify-between items-center mb-1">
<span class="text-blue-200 text-sm">Survey Fee</span>
<span class="font-bold">3,600 AED</span>
</div>
<div class="flex justify-between items-center mb-2">
<span class="text-blue-200 text-sm">Haul Out & Launch</span>
<span class="font-bold">~9,800 AED</span>
</div>
<div
class="border-t border-blue-400/30 pt-2 flex justify-between items-center text-yellow-300 font-bold text-lg"
>
<span>Total Investment</span>
<span>~13,400 AED</span>
</div>
</div>
</div>
</div>
<div class="grid grid-cols-1 lg:grid-cols-12 gap-6">
<!-- Left Column: Cost Assumptions (Static/Editable) -->
<div class="lg:col-span-4 space-y-6">
<!-- Crew Costs -->
<div
class="bg-white rounded-xl shadow-sm border border-slate-200 p-5 card-hover"
>
<h3 class="font-bold text-slate-700 mb-4 border-b pb-2">
<i class="fas fa-users text-blue-600 mr-2"></i>Crew (Annual)
</h3>
<div class="space-y-3 text-sm">
<div class="flex justify-between">
<span>Captain</span> <span class="font-semibold">240,000</span>
</div>
<div class="flex justify-between">
<span>Deckhand</span> <span class="font-semibold">60,000</span>
</div>
<div class="flex justify-between">
<span>Stewardess</span>
<span class="font-semibold">84,000</span>
</div>
<div class="flex justify-between text-slate-500">
<span>Provisions/Visas</span> <span>54,000</span>
</div>
<div
class="border-t pt-2 flex justify-between font-bold text-slate-900"
>
<span>Total Crew</span> <span>438,000 AED</span>
</div>
</div>
</div>
<!-- Fixed Costs -->
<div
class="bg-white rounded-xl shadow-sm border border-slate-200 p-5 card-hover"
>
<h3 class="font-bold text-slate-700 mb-4 border-b pb-2">
<i class="fas fa-anchor text-blue-600 mr-2"></i>Fixed Costs
(Annual)
</h3>
<div class="space-y-3 text-sm">
<div class="flex justify-between">
<span>Berthing (Dubai)</span>
<span class="font-semibold">150,000</span>
</div>
<div class="flex justify-between">
<span>Management (10k/mo)</span>
<span class="font-semibold">120,000</span>
</div>
<div class="flex justify-between">
<span>Haul Out & Maint.</span>
<span class="font-semibold">50,000</span>
</div>
<div class="flex justify-between">
<span>Insurance</span> <span class="font-semibold">20,000</span>
</div>
<div class="flex justify-between">
<span>Connectivity</span>
<span class="font-semibold">7,200</span>
</div>
<div class="flex justify-between">
<span>Admin/Licenses</span>
<span class="font-semibold">10,000</span>
</div>
<div
class="border-t pt-2 flex justify-between font-bold text-red-600"
>
<span>Total Fixed (excl. Crew)</span> <span>357,200 AED</span>
</div>
</div>
</div>
<!-- Variable Cost Logic -->
<div
class="bg-white rounded-xl shadow-sm border border-slate-200 p-5 card-hover"
>
<h3 class="font-bold text-slate-700 mb-4 border-b pb-2">
<i class="fas fa-gas-pump text-blue-600 mr-2"></i>Variable Costs
(per Hour)
</h3>
<div class="space-y-3 text-sm">
<div class="flex justify-between items-center">
<span>Fuel Price (AED/L)</span>
<span class="bg-slate-100 px-2 py-1 rounded">2.90</span>
</div>
<div class="flex justify-between items-center">
<span>Consumption (L/Hr)</span>
<span class="bg-slate-100 px-2 py-1 rounded">250</span>
</div>
<div class="border-t my-2"></div>
<div class="flex justify-between">
<span>Fuel Cost</span> <span class="font-semibold">725</span>
</div>
<div class="flex justify-between">
<span>Engine Reserve</span>
<span class="font-semibold">250</span>
</div>
<div class="flex justify-between">
<span>Consumables</span> <span class="font-semibold">150</span>
</div>
<div
class="border-t pt-2 flex justify-between font-bold text-orange-600"
>
<span>Cost per Hour</span>
<span id="varCostDisplay">1,125 AED</span>
</div>
</div>
</div>
</div>
<!-- Right Column: Interactive Calculator -->
<div class="lg:col-span-8 space-y-6">
<!-- Calculator Card -->
<div class="bg-white rounded-xl shadow-lg border border-blue-100 p-8">
<div class="flex justify-between items-center mb-6">
<h2 class="text-2xl font-bold text-slate-800">
Profitability Calculator (B2B)
</h2>
<div
class="bg-blue-50 text-blue-700 px-4 py-2 rounded-full font-bold text-sm"
>
Rate: 3,400 AED/hour
</div>
</div>
<!-- Slider Section -->
<div class="mb-8">
<label
class="block text-slate-600 font-medium mb-4 flex justify-between"
>
<span>Charter Hours Sold</span>
<span class="text-3xl font-bold text-blue-600" id="hoursDisplay"
>200</span
>
</label>
<input
type="range"
id="hoursSlider"
min="200"
max="1000"
step="10"
value="200"
class="w-full h-3 bg-slate-200 rounded-lg appearance-none cursor-pointer slider-thumb accent-blue-600"
/>
<div class="flex justify-between text-xs text-slate-400 mt-2">
<span>200 h</span>
<span>400 h</span>
<span>600 h</span>
<span>800 h</span>
<span>1000 h</span>
</div>
</div>
<!-- Financial Results Grid -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
<!-- Revenue -->
<div
class="bg-emerald-50 border border-emerald-100 p-4 rounded-xl text-center"
>
<div
class="text-emerald-600 text-sm font-semibold uppercase tracking-wide"
>
Revenue
</div>
<div
class="text-2xl font-bold text-emerald-700 mt-1"
id="totalRevenue"
>
0 AED
</div>
</div>
<!-- Total Expenses -->
<div
class="bg-red-50 border border-red-100 p-4 rounded-xl text-center"
>
<div
class="text-red-600 text-sm font-semibold uppercase tracking-wide"
>
Total Expenses
</div>
<div
class="text-2xl font-bold text-red-700 mt-1"
id="totalCosts"
>
0 AED
</div>
<div class="text-xs text-red-400 mt-1">(Fixed + Variable)</div>
</div>
<!-- Net Profit -->
<div
class="bg-slate-800 text-white p-4 rounded-xl text-center relative overflow-hidden"
>
<div class="relative z-10">
<div
class="text-slate-300 text-sm font-semibold uppercase tracking-wide"
>
Net Profit
</div>
<div class="text-2xl font-bold mt-1" id="netProfit">
0 AED
</div>
</div>
<div
class="absolute top-0 right-0 w-16 h-16 bg-white opacity-5 rounded-full -mr-8 -mt-8"
></div>
</div>
</div>
<!-- Breakdown Bar -->
<div class="space-y-2">
<div class="flex justify-between text-sm text-slate-600">
<span>Cost & Profit Structure</span>
<span id="marginDisplay">Margin: 0%</span>
</div>
<div
class="h-6 w-full bg-slate-100 rounded-full overflow-hidden flex text-xs text-white font-bold leading-6"
>
<div
id="barFixed"
class="bg-slate-400 text-center"
style="width: 30%"
>
Fix
</div>
<div
id="barVar"
class="bg-orange-400 text-center"
style="width: 30%"
>
Var
</div>
<div
id="barProfit"
class="bg-emerald-500 text-center"
style="width: 40%"
>
Profit
</div>
</div>
</div>
</div>
<!-- Visualization (Chart.js) -->
<div
class="bg-white rounded-xl shadow-sm border border-slate-200 p-6 h-80"
>
<canvas id="profitChart"></canvas>
</div>
</div>
</div>
</main>
<script>
// --- Constants (Based on Best Practices & Chat History) ---
const CONSTANTS = {
fixed: {
crew: 438000,
berthing: 150000,
mgmt: 120000, // 10k/mo
maintenance: 50000,
insurance: 20000,
connectivity: 7200,
admin: 10000
},
variable: {
fuelPrice: 2.9,
fuelBurn: 250, // Liters per hour
maintRes: 250, // Engine reserve
consumables: 150
},
revenue: {
rate: 3400 // B2B rate
}
};
// Calculate Totals
const totalFixed = Object.values(CONSTANTS.fixed).reduce((a, b) => a + b, 0);
const costPerHr = (CONSTANTS.variable.fuelBurn * CONSTANTS.variable.fuelPrice) +
CONSTANTS.variable.maintRes +
CONSTANTS.variable.consumables;
// Elements
const slider = document.getElementById('hoursSlider');
const hoursDisplay = document.getElementById('hoursDisplay');
const elRevenue = document.getElementById('totalRevenue');
const elCosts = document.getElementById('totalCosts');
const elProfit = document.getElementById('netProfit');
const elMargin = document.getElementById('marginDisplay');
// Bars
const barFixed = document.getElementById('barFixed');
const barVar = document.getElementById('barVar');
const barProfit = document.getElementById('barProfit');
// Chart
let chartInstance = null;
function formatMoney(num) {
return new Intl.NumberFormat('en-US').format(Math.round(num)) + ' AED';
}
function updateCalculator() {
const hours = parseInt(slider.value);
hoursDisplay.textContent = hours;
// Calculations
const revenue = hours * CONSTANTS.revenue.rate;
const variableCosts = hours * costPerHr;
const totalCosts = totalFixed + variableCosts;
const profit = revenue - totalCosts;
const margin = (profit / revenue) * 100;
// Update Text
elRevenue.textContent = formatMoney(revenue);
elCosts.textContent = formatMoney(totalCosts);
elProfit.textContent = formatMoney(profit);
// Color Logic for Profit
if (profit > 0) {
elProfit.classList.remove('text-red-400');
elProfit.classList.add('text-emerald-400');
} else {
elProfit.classList.remove('text-emerald-400');
elProfit.classList.add('text-red-400');
}
elMargin.textContent = `Margin: ${margin.toFixed(1)}%`;
// Update Bars Width
let totalScale = Math.max(revenue, totalCosts);
let pctFixed = (totalFixed / totalScale) * 100;
let pctVar = (variableCosts / totalScale) * 100;
let pctProfit = (profit > 0) ? (profit / totalScale) * 100 : 0;
barFixed.style.width = `${pctFixed}%`;
barFixed.textContent = profit < 0 ? 'Fixed' : 'Fix';
barVar.style.width = `${pctVar}%`;
if (profit > 0) {
barProfit.style.width = `${pctProfit}%`;
barProfit.textContent = 'Profit';
barProfit.className = "bg-emerald-500 text-center text-xs text-white font-bold leading-6";
} else {
barProfit.style.width = '0%';
barProfit.textContent = '';
}
updateChart(revenue, totalFixed, variableCosts, profit);
}
function initChart() {
const ctx = document.getElementById('profitChart').getContext('2d');
chartInstance = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Financials'],
datasets: [
{ label: 'Revenue', data: [0], backgroundColor: '#10B981' },
{ label: 'Fixed Costs', data: [0], backgroundColor: '#94A3B8' },
{ label: 'Variable Costs', data: [0], backgroundColor: '#FB923C' },
{ label: 'Net Profit', data: [0], backgroundColor: '#3B82F6' }
]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: { position: 'bottom' }
},
scales: {
y: { beginAtZero: true }
}
}
});
}
function updateChart(rev, fix, vari, prof) {
if (!chartInstance) return;
chartInstance.data.datasets[0].data = [rev];
chartInstance.data.datasets[1].data = [fix];
chartInstance.data.datasets[2].data = [vari];
chartInstance.data.datasets[3].data = [prof];
chartInstance.update();
}
// Initialize
slider.addEventListener('input', updateCalculator);
window.addEventListener('load', () => {
initChart();
updateCalculator();
});
</script>
</body>
</html>