[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_26":27,"_28":29,"_30":12,"_31":12,"_32":12,"_33":12,"_34":12,"_35":12,"_36":37},"routes/canvas.shared.$sharedTextdocId",{"_9":10,"_11":12},"sharedTextdoc",{"_13":14,"_15":-7,"_16":17,"_18":19,"_20":21,"_22":23,"_24":12,"_25":12},"isAuthenticated",false,"sharedTextdocId","69cfb66f83e481919e21c00e2803d75d","versionInt","title","Tharavaadu Booking Projection App","type","code/react","content","import React, { useMemo, useState } from \"react\";\nimport { Card, CardContent, CardHeader, CardTitle } from \"@/components/ui/card\";\nimport { Input } from \"@/components/ui/input\";\nimport { Label } from \"@/components/ui/label\";\nimport { Slider } from \"@/components/ui/slider\";\nimport { Button } from \"@/components/ui/button\";\nimport { Badge } from \"@/components/ui/badge\";\n\nconst formatINR = (value: number) =>\n new Intl.NumberFormat(\"en-IN\", {\n style: \"currency\",\n currency: \"INR\",\n maximumFractionDigits: 0,\n }).format(Number.isFinite(value) ? value : 0);\n\ntype SeasonPreset = {\n title: string;\n subtitle: string;\n holidayDays: number;\n weekendDays: number;\n weekdayDays: number;\n};\n\ntype ProjectionInput = {\n villaCount: number;\n weekdayRate: number;\n weekendRate: number;\n holidayRate: number;\n weekdayDays: number;\n weekendDays: number;\n holidayDays: number;\n weekdayOccupancy: number;\n weekendOccupancy: number;\n holidayOccupancy: number;\n};\n\nfunction calculateProjection(input: ProjectionInput) {\n const weekdayBooked = Math.round((input.weekdayDays * input.weekdayOccupancy) / 100);\n const weekendBooked = Math.round((input.weekendDays * input.weekendOccupancy) / 100);\n const holidayBooked = Math.round((input.holidayDays * input.holidayOccupancy) / 100);\n\n const oneVillaWeekdayRevenue = weekdayBooked * input.weekdayRate;\n const oneVillaWeekendRevenue = weekendBooked * input.weekendRate;\n const oneVillaHolidayRevenue = holidayBooked * input.holidayRate;\n const oneVillaTotal = oneVillaWeekdayRevenue + oneVillaWeekendRevenue + oneVillaHolidayRevenue;\n\n const totalRevenue = oneVillaTotal * input.villaCount;\n const totalBookedDays = (weekdayBooked + weekendBooked + holidayBooked) * input.villaCount;\n const totalAvailableDays = (input.weekdayDays + input.weekendDays + input.holidayDays) * input.villaCount;\n const avgOccupancy = totalAvailableDays > 0 ? (totalBookedDays / totalAvailableDays) * 100 : 0;\n\n return {\n weekdayBooked,\n weekendBooked,\n holidayBooked,\n oneVillaWeekdayRevenue,\n oneVillaWeekendRevenue,\n oneVillaHolidayRevenue,\n oneVillaTotal,\n totalRevenue,\n totalBookedDays,\n totalAvailableDays,\n avgOccupancy,\n monthlyRevenue: totalRevenue / 12,\n dailyAverageRevenue: totalRevenue / 365,\n };\n}\n\nfunction calculateAppreciation(baseValue: number, annualRate: number, yearsCount = 10) {\n const years: { year: number; value: number }[] = [];\n let value = baseValue;\n\n for (let year = 1; year <= yearsCount; year += 1) {\n value *= 1 + annualRate / 100;\n years.push({ year, value });\n }\n\n return years;\n}\n\nconst projectionTestCases = [\n {\n name: \"Zero occupancy gives zero revenue\",\n input: {\n villaCount: 1,\n weekdayRate: 12000,\n weekendRate: 18000,\n holidayRate: 25000,\n weekdayDays: 179,\n weekendDays: 96,\n holidayDays: 90,\n weekdayOccupancy: 0,\n weekendOccupancy: 0,\n holidayOccupancy: 0,\n },\n expectedRevenue: 0,\n },\n {\n name: \"Full occupancy computes correctly\",\n input: {\n villaCount: 1,\n weekdayRate: 1000,\n weekendRate: 2000,\n holidayRate: 3000,\n weekdayDays: 10,\n weekendDays: 5,\n holidayDays: 2,\n weekdayOccupancy: 100,\n weekendOccupancy: 100,\n holidayOccupancy: 100,\n },\n expectedRevenue: 26000,\n },\n {\n name: \"Multiple villas scale revenue\",\n input: {\n villaCount: 3,\n weekdayRate: 1000,\n weekendRate: 2000,\n holidayRate: 3000,\n weekdayDays: 10,\n weekendDays: 5,\n holidayDays: 2,\n weekdayOccupancy: 100,\n weekendOccupancy: 100,\n holidayOccupancy: 100,\n },\n expectedRevenue: 78000,\n },\n {\n name: \"Partial occupancy rounds booked nights\",\n input: {\n villaCount: 1,\n weekdayRate: 1000,\n weekendRate: 2000,\n holidayRate: 3000,\n weekdayDays: 10,\n weekendDays: 10,\n holidayDays: 10,\n weekdayOccupancy: 50,\n weekendOccupancy: 50,\n holidayOccupancy: 50,\n },\n expectedRevenue: 30000,\n },\n] as const;\n\nconst appreciationTestCases = [\n {\n name: \"12.5% appreciation for 1 year\",\n result: Math.round(calculateAppreciation(14100000, 12.5, 1)[0].value),\n expected: 15862500,\n },\n {\n name: \"0% appreciation keeps value same\",\n result: Math.round(calculateAppreciation(14100000, 0, 10)[9].value),\n expected: 14100000,\n },\n] as const;\n\nconst testResults = [\n ...projectionTestCases.map((test) => ({\n name: test.name,\n pass: calculateProjection(test.input).totalRevenue === test.expectedRevenue,\n })),\n ...appreciationTestCases.map((test) => ({\n name: test.name,\n pass: test.result === test.expected,\n })),\n];\n\nconst seasonPresets: SeasonPreset[] = [\n {\n title: \"South India Summer Season\",\n subtitle: \"April, May, June — 90 days\",\n holidayDays: 90,\n weekendDays: 96,\n weekdayDays: 179,\n },\n {\n title: \"Kerala / Karnataka Season\",\n subtitle: \"High-demand tourism model\",\n holidayDays: 90,\n weekendDays: 96,\n weekdayDays: 179,\n },\n {\n title: \"Festive Season\",\n subtitle: \"October, November, December — 90 days\",\n holidayDays: 90,\n weekendDays: 96,\n weekdayDays: 179,\n },\n];\n\nfunction TextIcon({ children }: { children: React.ReactNode }) {\n return {children};\n}\n\nfunction NumberInput({\n label,\n value,\n onChange,\n min = 0,\n step = 1,\n icon,\n}: {\n label: string;\n value: number;\n onChange: (value: number) => void;\n min?: number;\n step?: number;\n icon?: React.ReactNode;\n}) {\n return (\n

\n {label}\n

\n {icon ?

{icon}

: null}\n onChange(Math.max(min, Number(event.target.value) || 0))}\n className={icon ? \"h-11 rounded-2xl pl-10\" : \"h-11 rounded-2xl\"}\n />\n

\n );\n}\n\nexport default function TharavaaduBookingProjectionApp() {\n const [villaCount, setVillaCount] = useState(1);\n const [weekdayRate, setWeekdayRate] = useState(12000);\n const [weekendRate, setWeekendRate] = useState(18000);\n const [holidayRate, setHolidayRate] = useState(25000);\n const [weekdayDays, setWeekdayDays] = useState(179);\n const [weekendDays, setWeekendDays] = useState(96);\n const [holidayDays, setHolidayDays] = useState(90);\n const [weekdayOccupancy, setWeekdayOccupancy] = useState([45]);\n const [weekendOccupancy, setWeekendOccupancy] = useState([75]);\n const [holidayOccupancy, setHolidayOccupancy] = useState([90]);\n const [baseVillaPrice, setBaseVillaPrice] = useState(14100000);\n const [appreciationRate, setAppreciationRate] = useState(12.5);\n\n const resetAll = () => {\n setVillaCount(1);\n setWeekdayRate(12000);\n setWeekendRate(18000);\n setHolidayRate(25000);\n setWeekdayDays(179);\n setWeekendDays(96);\n setHolidayDays(90);\n setWeekdayOccupancy([45]);\n setWeekendOccupancy([75]);\n setHolidayOccupancy([90]);\n setBaseVillaPrice(14100000);\n setAppreciationRate(12.5);\n };\n\n const applySeasonPreset = (preset: SeasonPreset) => {\n setWeekdayDays(preset.weekdayDays);\n setWeekendDays(preset.weekendDays);\n setHolidayDays(preset.holidayDays);\n };\n\n const projection = useMemo(\n () =>\n calculateProjection({\n villaCount,\n weekdayRate,\n weekendRate,\n holidayRate,\n weekdayDays,\n weekendDays,\n holidayDays,\n weekdayOccupancy: weekdayOccupancy[0],\n weekendOccupancy: weekendOccupancy[0],\n holidayOccupancy: holidayOccupancy[0],\n }),\n [\n villaCount,\n weekdayRate,\n weekendRate,\n holidayRate,\n weekdayDays,\n weekendDays,\n holidayDays,\n weekdayOccupancy,\n weekendOccupancy,\n holidayOccupancy,\n ]\n );\n\n const appreciationProjection = useMemo(\n () => calculateAppreciation(baseVillaPrice, appreciationRate, 10),\n [baseVillaPrice, appreciationRate]\n );\n\n const totalDefinedDays = weekdayDays + weekendDays + holidayDays;\n const dayWarning = totalDefinedDays !== 365;\n const testsPassed = testResults.every((test) => test.pass);\n const rentalIncome10Years = projection.oneVillaTotal * 10;\n const finalPropertyValue = appreciationProjection[appreciationProjection.length - 1]?.value || baseVillaPrice;\n const totalWealthAfter10Years = rentalIncome10Years + finalPropertyValue;\n const profitAfter10Years = totalWealthAfter10Years - baseVillaPrice;\n const roiAfter10Years = baseVillaPrice > 0 ? (profitAfter10Years / baseVillaPrice) * 100 : 0;\n\n return (\n

\n Tharavaadu\n \n Booking Projection\n \n \n {testsPassed ? \"Projection checks passed\" : \"Projection check failed\"}\n \n

\n Villa Booking Revenue Projection\n

\n Calculate annual rental income, 10-year property appreciation, and total investor wealth projection.\n

\n \n

\n\n

\n \n \n \n ₹ Rate Setup\n \n \n \n 🏡} />\n ₹} />\n ₹} />\n ₹} />\n \n \n\n \n \n \n 📅 Days Distribution\n \n \n \n

\n {seasonPresets.map((preset) => (\n applySeasonPreset(preset)}\n className=\"rounded-2xl border border-slate-200 bg-slate-50 p-4 text-left transition hover:border-slate-400 hover:bg-white\"\n >\n

{preset.title}

{preset.subtitle}

\n Holiday Days: {preset.holidayDays}\n

\n \n ))}\n

\n\n

\n 📅} />\n 📅} />\n 📅} />\n

\n\n

\n Total Defined Days:\n \n {totalDefinedDays} days\n \n

Best practice: keep total days as 365 for accurate annual projection.

\n Summer season is 90 days for April, May, and June. Festive season is also 90 days for October, November, and December.\n

\n \n \n\n \n \n \n 📈 Occupancy Assumptions\n \n \n \n

\n Weekday Occupancy\n {weekdayOccupancy[0]}%\n

\n \n

\n\n

\n Weekend Occupancy\n {weekendOccupancy[0]}%\n

\n \n

\n\n

\n Holiday Season Occupancy\n {holidayOccupancy[0]}%\n

\n \n

\n \n \n\n \n \n \n 🏛️ Villa Appreciation Setup\n \n \n \n ₹} />\n \n \n \n

\n\n

\n \n \n \n 🧮 Final Projection\n \n \n \n

Annual Revenue

{formatINR(projection.totalRevenue)}

Monthly Avg

{formatINR(projection.monthlyRevenue)}

Booked Nights

{projection.totalBookedDays}

\n \n \n\n \n \n Per Villa Revenue Split\n \n \n

Weekday Revenue

{projection.weekdayBooked} booked nights

{formatINR(projection.oneVillaWeekdayRevenue)}

Weekend Revenue

{projection.weekendBooked} booked nights

{formatINR(projection.oneVillaWeekendRevenue)}

Holiday Revenue

{projection.holidayBooked} booked nights

{formatINR(projection.oneVillaHolidayRevenue)}

Total Per Villa

Annual projection

{formatINR(projection.oneVillaTotal)}

\n \n \n\n \n \n Villa Appreciation Projection\n \n \n {appreciationProjection.map((row) => (\n

\n Year {row.year}\n {formatINR(row.value)}\n

\n ))}\n \n \n\n \n \n Total 10 Year Wealth Projection\n

Rental income + final property appreciation value.

\n \n \n

\n Total Rental Income — 10 Years\n {formatINR(rentalIncome10Years)}\n

\n Property Value After 10 Years\n {formatINR(finalPropertyValue)}\n

\n Total Wealth After 10 Years\n {formatINR(totalWealthAfter10Years)}\n

Total Profit

{formatINR(profitAfter10Years)}

10 Year ROI

{roiAfter10Years.toFixed(1)}%

\n \n \n\n \n \n Formula Used\n \n \n

Booked Nights = Total Days × Occupancy %

Revenue = Booked Nights × Rate Per Night

Property Value = Villa Price × (1 + Appreciation %) ^ 10

Total Wealth = 10 Year Rental Income + Property Value After 10 Years

\n \n \n\n \n \n Calculation Test Cases\n \n \n {testResults.map((test) => (\n

\n {test.name}\n \n {test.pass ? \"Pass\" : \"Fail\"}\n \n

\n ))}\n \n \n

\n );\n}\n","access","public","isModerationBlocked","isAnonifyApiKeyDetected","dd",{"_38":39,"_40":41},"disablePrefetch",true,"shouldPrefetchAccount","shouldPrefetchUser","shouldPrefetchSystemHints","promoteCss","disableSSR","stripModulepreloadImports","statsigGateEvaluationsPromise",["P",37],"traceId","14327853211125422282","traceTime",1781350756265]