Skip to content

Instantly share code, notes, and snippets.

@originalankur

originalankur/naive_rental_estimates.html

Created February 17, 2026 16:16
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save originalankur/d27717127b34f4893f6f1e004aa9a65d to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save originalankur/d27717127b34f4893f6f1e004aa9a65d to your computer and use it in GitHub Desktop.
Download ZIP
Post Redevelopment - Applying Avg growth and Rentyield ( Jankalyan Nagar rate: 24000, growth: 0.06, rentYield: 0.03 )
Raw
naive_rental_estimates.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mumbai Redevelopment Evaluator</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
<style>
[x-cloak] { display: none !important; }
.custom-scrollbar::-webkit-scrollbar { width: 6px; }
.custom-scrollbar::-webkit-scrollbar-track { background: #f1f1f1; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
@media (max-width: 1024px) { .split-screen { flex-direction: column; } }
</style>
</head>
<body class="bg-slate-50 text-slate-900 font-sans antialiased" x-data="redevelopmentApp()">
<!-- Main Container -->
<div class="flex min-h-screen split-screen">
<!-- Left Panel: Input Form -->
<div class="w-full lg:w-1/2 bg-white border-r border-slate-200 overflow-y-auto custom-scrollbar p-6 md:p-10">
<div class="max-w-xl mx-auto">
<header class="mb-8">
<h1 class="text-3xl font-extrabold text-indigo-700 tracking-tight">Mumbai Redevelopment Evaluator</h1>
<p class="text-slate-500 mt-2">Decide if you should sign that builder's agreement. Input your current and future flat details below.</p>
</header>
<form @submit.prevent="calculateProjections" class="space-y-8">
<!-- Location Selection with Autocomplete -->
<section>
<h2 class="text-lg font-semibold flex items-center mb-4 text-slate-800">
<span class="w-8 h-8 bg-indigo-100 text-indigo-600 rounded-full flex items-center justify-center mr-3 text-sm">1</span>
Location & Area
</h2>
<div class="grid grid-cols-1 gap-4">
<div class="relative" @click.away="showSuggestions = false">
<label class="block text-sm font-medium text-slate-700 mb-1">Locality in Mumbai</label>
<input
type="text"
x-model="localitySearch"
@focus="showSuggestions = true"
@input="showSuggestions = true"
placeholder="Search station or area (e.g. Bandra, Worli, Borivali...)"
class="w-full rounded-lg border-slate-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 p-2.5 border"
>
<!-- Suggestions Dropdown -->
<div
x-show="showSuggestions && filteredLocalities.length > 0"
x-transition
class="absolute z-10 w-full mt-1 bg-white border border-slate-200 rounded-lg shadow-xl max-h-60 overflow-y-auto custom-scrollbar"
>
<template x-for="loc in filteredLocalities" :key="loc.name">
<button
type="button"
@click="selectLocality(loc)"
class="w-full text-left px-4 py-3 hover:bg-indigo-50 transition-colors border-b border-slate-50 last:border-0"
>
<div class="font-medium text-slate-800" x-text="loc.name"></div>
<div class="text-xs text-slate-400" x-text="'Avg. Rate: ₹' + (loc.rate).toLocaleString('en-IN') + '/sqft'"></div>
</button>
</template>
</div>
</div>
</div>
</section>
<!-- Existing Flat Details -->
<section>
<h2 class="text-lg font-semibold flex items-center mb-4 text-slate-800">
<span class="w-8 h-8 bg-indigo-100 text-indigo-600 rounded-full flex items-center justify-center mr-3 text-sm">2</span>
Current Flat Specs
</h2>
<div class="grid grid-cols-2 gap-4">
<div>
<label class="block text-sm font-medium text-slate-700 mb-1">Current Area (Sq. Ft. Carpet)</label>
<input type="number" x-model.number="inputs.currentArea" class="w-full rounded-lg border-slate-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 p-2.5 border">
</div>
<div>
<label class="block text-sm font-medium text-slate-700 mb-1">Configuration</label>
<select x-model="inputs.currentBHK" class="w-full rounded-lg border-slate-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 p-2.5 border">
<option value="1">1 BHK</option>
<option value="2">2 BHK</option>
<option value="3">3 BHK</option>
<option value="4">4 BHK+</option>
</select>
</div>
<div class="col-span-2">
<label class="block text-sm font-medium text-slate-700 mb-1">Current Monthly Rent (₹)</label>
<input type="number" x-model.number="inputs.currentRent" class="w-full rounded-lg border-slate-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 p-2.5 border">
</div>
</div>
</section>
<!-- Future Flat Specs -->
<section>
<h2 class="text-lg font-semibold flex items-center mb-4 text-slate-800">
<span class="w-8 h-8 bg-indigo-100 text-indigo-600 rounded-full flex items-center justify-center mr-3 text-sm">3</span>
The Offer (Redevelopment)
</h2>
<div class="space-y-4">
<div class="grid grid-cols-2 gap-4">
<div>
<label class="block text-sm font-medium text-slate-700 mb-1">New Free Area (Sq. Ft.)</label>
<input type="number" x-model.number="inputs.newAreaFree" class="w-full rounded-lg border-slate-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 p-2.5 border">
<p class="text-xs text-slate-400 mt-1">Usually 30-40% more than existing</p>
</div>
<div>
<label class="block text-sm font-medium text-slate-700 mb-1">Paid Additional Area (Sq. Ft.)</label>
<input type="number" x-model.number="inputs.newAreaPaid" class="w-full rounded-lg border-slate-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 p-2.5 border">
</div>
</div>
<div x-show="inputs.newAreaPaid > 0" x-transition>
<label class="block text-sm font-medium text-slate-700 mb-1">Cost for Additional Area (₹ per Sq. Ft.)</label>
<input type="number" x-model.number="inputs.paidRate" class="w-full rounded-lg border-slate-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 p-2.5 border">
</div>
<div class="grid grid-cols-2 gap-4">
<div>
<label class="block text-sm font-medium text-slate-700 mb-1">Possession Year</label>
<input type="number" x-model.number="inputs.possessionYear" class="w-full rounded-lg border-slate-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 p-2.5 border">
</div>
<div>
<label class="block text-sm font-medium text-slate-700 mb-1">Possession Quarter</label>
<select x-model="inputs.possessionQuarter" class="w-full rounded-lg border-slate-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 p-2.5 border">
<option value="Q1">Q1 (Jan-Mar)</option>
<option value="Q2">Q2 (Apr-Jun)</option>
<option value="Q3">Q3 (Jul-Sep)</option>
<option value="Q4">Q4 (Oct-Dec)</option>
</select>
</div>
</div>
</div>
</section>
<button type="submit" class="w-full bg-indigo-600 text-white font-bold py-4 px-6 rounded-xl hover:bg-indigo-700 transition-all shadow-lg shadow-indigo-200 transform hover:-translate-y-0.5 active:translate-y-0">
Generate Financial Projections
</button>
</form>
<footer class="mt-12 pt-6 border-t border-slate-100 text-center text-slate-400 text-sm italic">
Note: Projections are based on current market trends and appreciation rates (~6-9% for Mumbai).
</footer>
</div>
</div>
<!-- Right Panel: Projections Dashboard -->
<div class="w-full lg:w-1/2 bg-slate-900 overflow-y-auto custom-scrollbar p-6 md:p-10 text-white">
<div class="max-w-xl mx-auto">
<div x-show="!resultsGenerated" class="h-full flex flex-col items-center justify-center text-center py-20">
<div class="w-20 h-20 bg-slate-800 rounded-2xl flex items-center justify-center mb-6 animate-pulse">
<svg class="w-10 h-10 text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path></svg>
</div>
<h2 class="text-2xl font-bold">Ready to see your future?</h2>
<p class="text-slate-400 mt-2">Enter your locality and current flat details on the left to begin.</p>
</div>
<!-- Results View -->
<div x-show="resultsGenerated" x-cloak x-transition>
<h2 class="text-2xl font-bold mb-6 text-indigo-400">Projection Summary: <span x-text="inputs.locality"></span></h2>
<!-- Top Cards -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-8">
<div class="bg-slate-800 p-5 rounded-2xl border border-slate-700">
<p class="text-slate-400 text-sm uppercase font-bold tracking-wider">Est. Value at Possession</p>
<p class="text-3xl font-bold mt-1 text-white" x-text="'₹' + formatValue(summary.valAtPossession)"></p>
<p class="text-xs text-indigo-400 mt-1" x-text="inputs.possessionYear + ' ' + inputs.possessionQuarter"></p>
</div>
<div class="bg-slate-800 p-5 rounded-2xl border border-slate-700">
<p class="text-slate-400 text-sm uppercase font-bold tracking-wider">Projected New Rent</p>
<p class="text-3xl font-bold mt-1 text-emerald-400" x-text="'₹' + formatValue(summary.rentAtPossession)"></p>
<p class="text-xs text-slate-400 mt-1">Per month, post possession</p>
</div>
</div>
<!-- Comparison Table -->
<div class="bg-slate-800 rounded-2xl overflow-hidden mb-8 border border-slate-700">
<div class="p-4 bg-slate-700/50 border-b border-slate-700">
<h3 class="font-bold">Asset Transformation</h3>
</div>
<div class="p-4 space-y-3">
<div class="flex justify-between items-center text-sm">
<span class="text-slate-400">Current Market Value (Old)</span>
<span class="font-mono" x-text="'₹' + formatValue(summary.currentValue)"></span>
</div>
<div class="flex justify-between items-center text-sm">
<span class="text-slate-400">New Total Area</span>
<span class="font-mono" x-text="(inputs.newAreaFree + inputs.newAreaPaid) + ' Sq. Ft.'"></span>
</div>
<div class="flex justify-between items-center text-sm">
<span class="text-slate-400">Total Capital Infusion</span>
<span class="font-mono text-red-400" x-text="'₹' + formatValue(summary.totalCapitalOutlay)"></span>
</div>
<div class="pt-2 border-t border-slate-700 flex justify-between items-center font-bold">
<span>Net Equity Gain</span>
<span class="text-emerald-400" x-text="'₹' + formatValue(summary.netEquityGain)"></span>
</div>
</div>
</div>
<!-- 10 Year Projection Chart/Table -->
<h3 class="font-bold mb-4 flex items-center">
<svg class="w-5 h-5 mr-2 text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path></svg>
10-Year Post-Possession Outlook
</h3>
<div class="bg-slate-800 rounded-2xl overflow-x-auto border border-slate-700">
<table class="w-full text-left text-sm">
<thead class="bg-slate-700/50 text-slate-300 uppercase text-xs">
<tr>
<th class="px-4 py-3">Year</th>
<th class="px-4 py-3">Property Value</th>
<th class="px-4 py-3">Monthly Rent</th>
</tr>
</thead>
<tbody class="divide-y divide-slate-700">
<template x-for="item in projections" :key="item.year">
<tr class="hover:bg-slate-700/30 transition-colors">
<td class="px-4 py-4 text-slate-400" x-text="item.year"></td>
<td class="px-4 py-4 font-mono font-bold" x-text="'₹' + formatValue(item.value)"></td>
<td class="px-4 py-4 font-mono text-emerald-400" x-text="'₹' + formatValue(item.rent)"></td>
</tr>
</template>
</tbody>
</table>
</div>
<div class="mt-8 p-4 bg-indigo-900/30 border border-indigo-500/30 rounded-xl">
<p class="text-sm leading-relaxed text-indigo-100">
<strong>Expert View:</strong> Based on the profile of <span x-text="inputs.locality"></span>, this asset is projected to grow <span x-text="summary.growthMultiplier"></span>x in value over the next decade post-redevelopment.
</p>
</div>
</div>
</div>
</div>
</div>
<script>
window.redevelopmentApp = function() {
return {
localitySearch: '',
showSuggestions: false,
localities: [
// Western Line Stations
{ name: 'Churchgate', rate: 75000, growth: 0.06, rentYield: 0.02 },
{ name: 'Marine Lines', rate: 70000, growth: 0.06, rentYield: 0.02 },
{ name: 'Charni Road', rate: 68000, growth: 0.06, rentYield: 0.022 },
{ name: 'Grant Road', rate: 65000, growth: 0.06, rentYield: 0.022 },
{ name: 'Mumbai Central', rate: 62000, growth: 0.07, rentYield: 0.025 },
{ name: 'Mahalaxmi', rate: 65000, growth: 0.08, rentYield: 0.025 },
{ name: 'Lower Parel', rate: 58000, growth: 0.09, rentYield: 0.028 },
{ name: 'Prabhadevi', rate: 60000, growth: 0.08, rentYield: 0.026 },
{ name: 'Dadar (West)', rate: 55000, growth: 0.07, rentYield: 0.025 },
{ name: 'Matunga Road', rate: 52000, growth: 0.07, rentYield: 0.025 },
{ name: 'Mahim', rate: 48000, growth: 0.07, rentYield: 0.027 },
{ name: 'Bandra West', rate: 70000, growth: 0.09, rentYield: 0.025 },
{ name: 'Khar Road', rate: 65000, growth: 0.08, rentYield: 0.025 },
{ name: 'Santacruz West', rate: 55000, growth: 0.08, rentYield: 0.028 },
{ name: 'Vile Parle West', rate: 58000, growth: 0.08, rentYield: 0.026 },
{ name: 'Andheri West', rate: 35000, growth: 0.07, rentYield: 0.03 },
{ name: 'Jogeshwari West', rate: 28000, growth: 0.07, rentYield: 0.032 },
{ name: 'Ram Mandir / Oshiwara', rate: 30000, growth: 0.08, rentYield: 0.032 },
{ name: 'Goregaon West', rate: 26000, growth: 0.07, rentYield: 0.03 },
{ name: 'Malad West', rate: 24000, growth: 0.06, rentYield: 0.03 },
{ name: 'Kandivali West', rate: 22000, growth: 0.06, rentYield: 0.03 },
{ name: 'Borivali West', rate: 23000, growth: 0.06, rentYield: 0.028 },
// Central & Other Micro Markets
{ name: 'Worli', rate: 65000, growth: 0.09, rentYield: 0.025 },
{ name: 'Juhu', rate: 75000, growth: 0.08, rentYield: 0.022 },
{ name: 'Lokhandwala Complex', rate: 38000, growth: 0.07, rentYield: 0.03 },
{ name: 'Versova', rate: 42000, growth: 0.08, rentYield: 0.028 },
{ name: 'Pali Hill', rate: 105000, growth: 0.10, rentYield: 0.02 },
{ name: 'Seven Bungalows', rate: 40000, growth: 0.07, rentYield: 0.028 },
{ name: 'Powai', rate: 28000, growth: 0.08, rentYield: 0.035 },
{ name: 'Chembur', rate: 24000, growth: 0.08, rentYield: 0.03 },
{ name: 'Wadala', rate: 30000, growth: 0.09, rentYield: 0.03 },
{ name: 'Mulund West', rate: 21000, growth: 0.06, rentYield: 0.03 },
{ name: 'Ghatkopar East', rate: 25000, growth: 0.07, rentYield: 0.03 }
],
inputs: {
locality: '',
currentArea: 600,
currentBHK: '2',
currentRent: 50000,
newAreaFree: 800,
newAreaPaid: 0,
paidRate: 20000,
possessionYear: 2029,
possessionQuarter: 'Q2'
},
resultsGenerated: false,
summary: {},
projections: [],
get filteredLocalities() {
if (this.localitySearch === '') return [];
return this.localities.filter(l =>
l.name.toLowerCase().includes(this.localitySearch.toLowerCase())
).slice(0, 8); // Limit to top 8 suggestions
},
selectLocality(loc) {
this.inputs.locality = loc.name;
this.localitySearch = loc.name;
this.showSuggestions = false;
this.updateBaseRates();
},
updateBaseRates() {
const loc = this.localities.find(l => l.name === this.inputs.locality);
if (!loc) return;
this.inputs.newAreaFree = Math.round(this.inputs.currentArea * 1.35); // Standard 35% bonus
this.inputs.paidRate = Math.round(loc.rate * 0.8); // Society discount
},
calculateProjections() {
if (!this.inputs.locality) {
alert("Please select a locality first.");
return;
}
const loc = this.localities.find(l => l.name === this.inputs.locality);
if (!loc) return;
const currentYear = new Date().getFullYear();
const yearsToPossession = Math.max(0, this.inputs.possessionYear - currentYear);
const currentMarketValue = this.inputs.currentArea * loc.rate;
const totalCapitalOutlay = this.inputs.newAreaPaid * this.inputs.paidRate;
const totalNewArea = this.inputs.newAreaFree + this.inputs.newAreaPaid;
// Future rate at possession (Compounded)
const rateAtPossession = loc.rate * Math.pow(1 + loc.growth, yearsToPossession);
const valAtPossession = totalNewArea * rateAtPossession;
// Rent at Possession
const baseNewRent = (valAtPossession * loc.rentYield) / 12;
const rentAtPossession = baseNewRent;
this.summary = {
currentValue: currentMarketValue,
valAtPossession: valAtPossession,
rentAtPossession: rentAtPossession,
totalCapitalOutlay: totalCapitalOutlay,
netEquityGain: valAtPossession - currentMarketValue - totalCapitalOutlay,
growthMultiplier: (valAtPossession / (currentMarketValue + totalCapitalOutlay || 1)).toFixed(1)
};
this.projections = [];
for (let i = 1; i <= 10; i++) {
const year = this.inputs.possessionYear + i;
const futureVal = valAtPossession * Math.pow(1 + loc.growth, i);
const futureRent = rentAtPossession * Math.pow(1.05, i);
this.projections.push({
year: year,
value: futureVal,
rent: futureRent
});
}
this.resultsGenerated = true;
},
formatValue(val) {
if (val === undefined || val === null) return '0';
if (val >= 10000000) return (val / 10000000).toFixed(2) + ' Cr';
if (val >= 100000) return (val / 100000).toFixed(2) + ' L';
return Math.round(val).toLocaleString('en-IN');
}
};
};
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment