@tomako/tools-runtime 0.1.0 → 0.1.2

package/src/features/tools/mrr-calculator/widget/mrr-calculator.tsx

@@ -0,0 +1,581 @@
+"use client";
+
+import { useLocale, useTranslations } from "../../../../i18n/client";
+import {
+  ToolField,
+  ToolPreviewPanel,
+  ToolResultActions,
+  ToolWorkspaceLayout,
+  copyTextToClipboard,
+  toolInputClass,
+  toolInvalidControlClass,
+  toolSelectTriggerClass,
+} from "../../../../components/tools/workspace";
+import { Button } from "@tomako/ui/button";
+import { Input } from "@tomako/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@tomako/ui/select";
+import { Switch } from "@tomako/ui/switch";
+import { useMemo, useState } from "react";
+
+import {
+  calculateExactMrr,
+  estimateMrr,
+  type BillingPeriod,
+} from "./calculations";
+
+type Currency = "USD" | "EUR" | "GBP" | "CNY";
+type Mode = "calculate" | "estimate";
+
+type ExactValues = {
+  activeCustomers: string;
+  recurringAmount: string;
+  billingPeriod: BillingPeriod;
+  previousMrr: string;
+  currency: Currency;
+};
+
+type EstimateValues = {
+  monthlyVisits: string;
+  planPrice: string;
+  billingPeriod: BillingPeriod;
+  eligibleVisitShare: string;
+  visitorToPaidRate: string;
+  averagePaidLifetimeMonths: string;
+  currency: Currency;
+};
+
+const INITIAL_EXACT: ExactValues = {
+  activeCustomers: "100",
+  recurringAmount: "49",
+  billingPeriod: "month",
+  previousMrr: "",
+  currency: "USD",
+};
+
+const INITIAL_ESTIMATE: EstimateValues = {
+  monthlyVisits: "10000",
+  planPrice: "49",
+  billingPeriod: "month",
+  eligibleVisitShare: "50",
+  visitorToPaidRate: "0.5",
+  averagePaidLifetimeMonths: "12",
+  currency: "USD",
+};
+
+function parseNonNegative(value: string): number | null {
+  if (value.trim() === "") return null;
+  const parsed = Number(value);
+  return Number.isFinite(parsed) && parsed >= 0 ? parsed : null;
+}
+
+function parsePositive(value: string): number | null {
+  const parsed = parseNonNegative(value);
+  return parsed !== null && parsed > 0 ? parsed : null;
+}
+
+function parsePercent(value: string): number | null {
+  const parsed = parseNonNegative(value);
+  return parsed !== null && parsed <= 100 ? parsed : null;
+}
+
+export function MrrCalculator() {
+  const locale = useLocale();
+  const t = useTranslations("toolsPages.mrrCalculator.widget");
+  const [mode, setMode] = useState<Mode>("calculate");
+  const [showAdvanced, setShowAdvanced] = useState(false);
+  const [showPreviousMrr, setShowPreviousMrr] = useState(false);
+  const [copied, setCopied] = useState(false);
+  const [exact, setExact] = useState<ExactValues>(INITIAL_EXACT);
+  const [estimate, setEstimate] = useState<EstimateValues>(INITIAL_ESTIMATE);
+  const exactIsDirty = Object.keys(INITIAL_EXACT).some(
+    (key) => exact[key as keyof ExactValues] !== INITIAL_EXACT[key as keyof ExactValues],
+  );
+  const estimateIsDirty = Object.keys(INITIAL_ESTIMATE).some(
+    (key) => estimate[key as keyof EstimateValues] !== INITIAL_ESTIMATE[key as keyof EstimateValues],
+  );
+
+  const exactNumbers = useMemo(() => {
+    const activeCustomers = parseNonNegative(exact.activeCustomers);
+    const recurringAmount = parseNonNegative(exact.recurringAmount);
+    const previousMrr = exact.previousMrr.trim() === "" ? undefined : parseNonNegative(exact.previousMrr);
+    if (activeCustomers === null || recurringAmount === null || previousMrr === null) return null;
+    return { activeCustomers, recurringAmount, previousMrr };
+  }, [exact.activeCustomers, exact.previousMrr, exact.recurringAmount]);
+
+  const estimateNumbers = useMemo(() => {
+    const monthlyVisits = parseNonNegative(estimate.monthlyVisits);
+    const planPrice = parseNonNegative(estimate.planPrice);
+    const eligibleVisitShare = parsePercent(estimate.eligibleVisitShare);
+    const visitorToPaidRate = parsePercent(estimate.visitorToPaidRate);
+    const averagePaidLifetimeMonths = parsePositive(estimate.averagePaidLifetimeMonths);
+    if (
+      monthlyVisits === null ||
+      planPrice === null ||
+      eligibleVisitShare === null ||
+      visitorToPaidRate === null ||
+      averagePaidLifetimeMonths === null
+    ) {
+      return null;
+    }
+    return {
+      monthlyVisits,
+      planPrice,
+      eligibleVisitShare,
+      visitorToPaidRate,
+      averagePaidLifetimeMonths,
+    };
+  }, [estimate]);
+
+  const exactResult = useMemo(
+    () =>
+      exactNumbers
+        ? calculateExactMrr({
+            ...exactNumbers,
+            billingPeriod: exact.billingPeriod,
+          })
+        : null,
+    [exact.billingPeriod, exactNumbers],
+  );
+
+  const estimateResult = useMemo(
+    () =>
+      estimateNumbers
+        ? estimateMrr({
+            ...estimateNumbers,
+            billingPeriod: estimate.billingPeriod,
+          })
+        : null,
+    [estimate.billingPeriod, estimateNumbers],
+  );
+
+  const activeCurrency = mode === "calculate" ? exact.currency : estimate.currency;
+  const money = (value: number) =>
+    new Intl.NumberFormat(locale, {
+      style: "currency",
+      currency: activeCurrency,
+      maximumFractionDigits: value >= 100 ? 0 : 2,
+    }).format(value);
+  const number = (value: number) =>
+    new Intl.NumberFormat(locale, { maximumFractionDigits: 2 }).format(value);
+  const percent = (value: number) =>
+    new Intl.NumberFormat(locale, { style: "percent", maximumFractionDigits: 1 }).format(value);
+
+  const resultText = useMemo(() => {
+    if (mode === "calculate" && exactResult) {
+      return [
+        `${t("calculatedMrr")}: ${money(exactResult.mrr)}`,
+        `${t("arr")}: ${money(exactResult.arr)}`,
+        `${t("monthlyArpa")}: ${money(exactResult.monthlyArpa)}`,
+        exactResult.growthRate === null
+          ? null
+          : `${t("momGrowth")}: ${percent(exactResult.growthRate)}`,
+      ]
+        .filter(Boolean)
+        .join("\n");
+    }
+    if (mode === "estimate" && estimateResult) {
+      return [
+        `${t("estimatedMrr")}: ${money(estimateResult.mrr)}`,
+        `${t("estimatedArr")}: ${money(estimateResult.arr)}`,
+        `${t("newPaidCustomers")}: ${number(estimateResult.newPaidCustomers)}`,
+        `${t("activePaidCustomers")}: ${number(estimateResult.activePaidCustomers)}`,
+        t("estimateDisclaimer"),
+      ].join("\n");
+    }
+    return "";
+  }, [exactResult, estimateResult, mode, t]);
+
+  async function handleCopy() {
+    setCopied(await copyTextToClipboard(resultText));
+  }
+
+  function handleReset() {
+    setCopied(false);
+    if (mode === "calculate") {
+      setExact(INITIAL_EXACT);
+      setShowPreviousMrr(false);
+    } else {
+      setEstimate(INITIAL_ESTIMATE);
+    }
+  }
+
+  const periodOptions: BillingPeriod[] = ["month", "quarter", "year"];
+  const currencyOptions: Currency[] = ["USD", "EUR", "GBP", "CNY"];
+  const exactErrors = {
+    activeCustomers: parseNonNegative(exact.activeCustomers) === null ? t("errors.nonNegative") : undefined,
+    recurringAmount: parseNonNegative(exact.recurringAmount) === null ? t("errors.nonNegative") : undefined,
+    previousMrr:
+      exact.previousMrr.trim() !== "" && parseNonNegative(exact.previousMrr) === null
+        ? t("errors.nonNegative")
+        : undefined,
+  };
+  const estimateErrors = {
+    monthlyVisits: parseNonNegative(estimate.monthlyVisits) === null ? t("errors.nonNegative") : undefined,
+    planPrice: parseNonNegative(estimate.planPrice) === null ? t("errors.nonNegative") : undefined,
+    eligibleVisitShare: parsePercent(estimate.eligibleVisitShare) === null ? t("errors.percent") : undefined,
+    visitorToPaidRate: parsePercent(estimate.visitorToPaidRate) === null ? t("errors.percent") : undefined,
+    averagePaidLifetimeMonths:
+      parsePositive(estimate.averagePaidLifetimeMonths) === null ? t("errors.positive") : undefined,
+  };
+
+  const form = (
+    <div className="flex min-h-full flex-col">
+      <div className="mb-4 grid min-h-12 grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] items-center gap-2 rounded-lg border border-[#E4E9F1] bg-[#F8FAFC] p-3 sm:gap-3 sm:p-3.5">
+        <span className={mode === "calculate" ? "min-w-0 text-xs font-semibold leading-5 text-[#111111] sm:text-sm" : "min-w-0 text-xs leading-5 text-[#777777] sm:text-sm"}>
+          {t("calculateMode")}
+        </span>
+        <Switch
+          aria-label={t("modeSwitchLabel")}
+          checked={mode === "estimate"}
+          onCheckedChange={(checked) => {
+            setMode(checked ? "estimate" : "calculate");
+            setCopied(false);
+          }}
+        />
+        <span className={mode === "estimate" ? "min-w-0 text-right text-xs font-semibold leading-5 text-[#111111] sm:text-sm" : "min-w-0 text-right text-xs leading-5 text-[#777777] sm:text-sm"}>
+          {t("estimateMode")}
+        </span>
+      </div>
+
+      <p className="mb-4 text-sm leading-6 text-[#555555]">
+        {mode === "calculate" ? t("calculateHint") : t("estimateHint")}
+      </p>
+
+      <div className="min-w-0 flex-1 space-y-4">
+        {mode === "calculate" ? (
+          <>
+            <ToolField
+              error={exactErrors.activeCustomers}
+              errorId="mrr-active-customers-error"
+              htmlFor="mrr-active-customers"
+              label={t("activeCustomers")}
+              required
+            >
+              <Input
+                aria-describedby={exactErrors.activeCustomers ? "mrr-active-customers-error" : undefined}
+                aria-invalid={Boolean(exactErrors.activeCustomers)}
+                className={`${toolInputClass} ${exactErrors.activeCustomers ? toolInvalidControlClass : ""}`}
+                id="mrr-active-customers"
+                inputMode="decimal"
+                min="0"
+                step="1"
+                type="number"
+                value={exact.activeCustomers}
+                onChange={(event) => setExact((value) => ({ ...value, activeCustomers: event.target.value }))}
+              />
+            </ToolField>
+
+            <ToolField
+              error={exactErrors.recurringAmount}
+              errorId="mrr-recurring-amount-error"
+              htmlFor="mrr-recurring-amount"
+              label={t("recurringAmount")}
+              required
+            >
+              <Input
+                aria-describedby={exactErrors.recurringAmount ? "mrr-recurring-amount-error" : undefined}
+                aria-invalid={Boolean(exactErrors.recurringAmount)}
+                className={`${toolInputClass} ${exactErrors.recurringAmount ? toolInvalidControlClass : ""}`}
+                id="mrr-recurring-amount"
+                inputMode="decimal"
+                min="0"
+                step="0.01"
+                type="number"
+                value={exact.recurringAmount}
+                onChange={(event) => setExact((value) => ({ ...value, recurringAmount: event.target.value }))}
+              />
+            </ToolField>
+
+            <div className="grid min-w-0 grid-cols-2 gap-3 sm:gap-4">
+              <ToolField label={t("currency")}>
+                <Select value={exact.currency} onValueChange={(currency) => setExact((value) => ({ ...value, currency: currency as Currency }))}>
+                  <SelectTrigger className={toolSelectTriggerClass}><SelectValue /></SelectTrigger>
+                  <SelectContent>{currencyOptions.map((currency) => <SelectItem key={currency} value={currency}>{currency}</SelectItem>)}</SelectContent>
+                </Select>
+              </ToolField>
+              <ToolField label={t("billingPeriod")}>
+                <Select value={exact.billingPeriod} onValueChange={(billingPeriod) => setExact((value) => ({ ...value, billingPeriod: billingPeriod as BillingPeriod }))}>
+                  <SelectTrigger className={toolSelectTriggerClass}><SelectValue /></SelectTrigger>
+                  <SelectContent>{periodOptions.map((period) => <SelectItem key={period} value={period}>{t(`periods.${period}`)}</SelectItem>)}</SelectContent>
+                </Select>
+              </ToolField>
+            </div>
+
+            {showPreviousMrr ? (
+              <ToolField
+                error={exactErrors.previousMrr}
+                errorId="mrr-previous-error"
+                hint={t("optional")}
+                htmlFor="mrr-previous"
+                label={t("previousMrr")}
+              >
+                <Input
+                  aria-describedby={exactErrors.previousMrr ? "mrr-previous-error" : undefined}
+                  aria-invalid={Boolean(exactErrors.previousMrr)}
+                  className={`${toolInputClass} ${exactErrors.previousMrr ? toolInvalidControlClass : ""}`}
+                  id="mrr-previous"
+                  inputMode="decimal"
+                  min="0"
+                  step="0.01"
+                  type="number"
+                  value={exact.previousMrr}
+                  onChange={(event) => setExact((value) => ({ ...value, previousMrr: event.target.value }))}
+                />
+              </ToolField>
+            ) : (
+              <Button
+                className="h-auto justify-start px-0 text-sm font-medium text-[#111111] hover:bg-transparent hover:underline"
+                onClick={() => setShowPreviousMrr(true)}
+                type="button"
+                variant="ghost"
+              >
+                {t("addPreviousMrr")}
+              </Button>
+            )}
+          </>
+        ) : (
+          <>
+            <ToolField
+              error={estimateErrors.monthlyVisits}
+              errorId="mrr-visits-error"
+              htmlFor="mrr-visits"
+              label={t("monthlyVisits")}
+              required
+            >
+              <Input
+                aria-describedby={estimateErrors.monthlyVisits ? "mrr-visits-error" : undefined}
+                aria-invalid={Boolean(estimateErrors.monthlyVisits)}
+                className={`${toolInputClass} ${estimateErrors.monthlyVisits ? toolInvalidControlClass : ""}`}
+                id="mrr-visits"
+                inputMode="decimal"
+                min="0"
+                step="1"
+                type="number"
+                value={estimate.monthlyVisits}
+                onChange={(event) => setEstimate((value) => ({ ...value, monthlyVisits: event.target.value }))}
+              />
+            </ToolField>
+
+            <ToolField
+              error={estimateErrors.planPrice}
+              errorId="mrr-plan-price-error"
+              htmlFor="mrr-plan-price"
+              label={t("planPrice")}
+              required
+            >
+              <Input
+                aria-describedby={estimateErrors.planPrice ? "mrr-plan-price-error" : undefined}
+                aria-invalid={Boolean(estimateErrors.planPrice)}
+                className={`${toolInputClass} ${estimateErrors.planPrice ? toolInvalidControlClass : ""}`}
+                id="mrr-plan-price"
+                inputMode="decimal"
+                min="0"
+                step="0.01"
+                type="number"
+                value={estimate.planPrice}
+                onChange={(event) => setEstimate((value) => ({ ...value, planPrice: event.target.value }))}
+              />
+            </ToolField>
+
+            <div className="grid min-w-0 grid-cols-2 gap-3 sm:gap-4">
+              <ToolField label={t("currency")}>
+                <Select value={estimate.currency} onValueChange={(currency) => setEstimate((value) => ({ ...value, currency: currency as Currency }))}>
+                  <SelectTrigger className={toolSelectTriggerClass}><SelectValue /></SelectTrigger>
+                  <SelectContent>{currencyOptions.map((currency) => <SelectItem key={currency} value={currency}>{currency}</SelectItem>)}</SelectContent>
+                </Select>
+              </ToolField>
+              <ToolField label={t("billingPeriod")}>
+                <Select value={estimate.billingPeriod} onValueChange={(billingPeriod) => setEstimate((value) => ({ ...value, billingPeriod: billingPeriod as BillingPeriod }))}>
+                  <SelectTrigger className={toolSelectTriggerClass}><SelectValue /></SelectTrigger>
+                  <SelectContent>{periodOptions.map((period) => <SelectItem key={period} value={period}>{t(`periods.${period}`)}</SelectItem>)}</SelectContent>
+                </Select>
+              </ToolField>
+            </div>
+
+            <Button
+              className="h-auto justify-start px-0 text-sm font-medium text-[#111111] hover:bg-transparent hover:underline"
+              type="button"
+              variant="ghost"
+              onClick={() => setShowAdvanced((value) => !value)}
+            >
+              {showAdvanced ? t("hideAssumptions") : t("showAssumptions")}
+            </Button>
+
+            {showAdvanced ? (
+              <div className="space-y-4 rounded-lg border border-[#E4E9F1] bg-[#F8FAFC] p-4">
+                <p className="text-xs leading-5 text-[#666666]">{t("assumptionNote")}</p>
+                <ToolField
+                  error={estimateErrors.eligibleVisitShare}
+                  errorId="mrr-eligible-share-error"
+                  htmlFor="mrr-eligible-share"
+                  label={t("eligibleVisitShare")}
+                >
+                  <Input
+                    aria-describedby={estimateErrors.eligibleVisitShare ? "mrr-eligible-share-error" : undefined}
+                    aria-invalid={Boolean(estimateErrors.eligibleVisitShare)}
+                    className={`${toolInputClass} ${estimateErrors.eligibleVisitShare ? toolInvalidControlClass : ""}`}
+                    id="mrr-eligible-share"
+                    inputMode="decimal"
+                    min="0"
+                    max="100"
+                    step="0.1"
+                    type="number"
+                    value={estimate.eligibleVisitShare}
+                    onChange={(event) => setEstimate((value) => ({ ...value, eligibleVisitShare: event.target.value }))}
+                  />
+                </ToolField>
+                <ToolField
+                  error={estimateErrors.visitorToPaidRate}
+                  errorId="mrr-conversion-rate-error"
+                  htmlFor="mrr-conversion-rate"
+                  label={t("visitorToPaidRate")}
+                >
+                  <Input
+                    aria-describedby={estimateErrors.visitorToPaidRate ? "mrr-conversion-rate-error" : undefined}
+                    aria-invalid={Boolean(estimateErrors.visitorToPaidRate)}
+                    className={`${toolInputClass} ${estimateErrors.visitorToPaidRate ? toolInvalidControlClass : ""}`}
+                    id="mrr-conversion-rate"
+                    inputMode="decimal"
+                    min="0"
+                    max="100"
+                    step="0.1"
+                    type="number"
+                    value={estimate.visitorToPaidRate}
+                    onChange={(event) => setEstimate((value) => ({ ...value, visitorToPaidRate: event.target.value }))}
+                  />
+                </ToolField>
+                <ToolField
+                  error={estimateErrors.averagePaidLifetimeMonths}
+                  errorId="mrr-paid-lifetime-error"
+                  htmlFor="mrr-paid-lifetime"
+                  label={t("averagePaidLifetime")}
+                >
+                  <Input
+                    aria-describedby={estimateErrors.averagePaidLifetimeMonths ? "mrr-paid-lifetime-error" : undefined}
+                    aria-invalid={Boolean(estimateErrors.averagePaidLifetimeMonths)}
+                    className={`${toolInputClass} ${estimateErrors.averagePaidLifetimeMonths ? toolInvalidControlClass : ""}`}
+                    id="mrr-paid-lifetime"
+                    inputMode="decimal"
+                    min="0.1"
+                    step="0.1"
+                    type="number"
+                    value={estimate.averagePaidLifetimeMonths}
+                    onChange={(event) => setEstimate((value) => ({ ...value, averagePaidLifetimeMonths: event.target.value }))}
+                  />
+                </ToolField>
+              </div>
+            ) : null}
+          </>
+        )}
+      </div>
+    </div>
+  );
+
+  const result = mode === "calculate" ? exactResult : estimateResult;
+
+  return (
+    <ToolWorkspaceLayout
+      className="lg:h-[min(720px,calc(100vh-220px))] lg:min-h-[620px]"
+      defaultFormWidth={440}
+      maxFormWidth={540}
+      form={form}
+      preview={
+        <ToolPreviewPanel>
+          {result ? (
+            <div className="flex min-h-0 flex-1 flex-col">
+              <div className="flex min-w-0 items-start justify-between gap-2 sm:gap-3">
+                <div className="min-w-0">
+                  <h3 className="text-lg font-semibold leading-7 text-[#111111] sm:text-xl">
+                    {mode === "calculate" ? t("calculatedResultTitle") : t("estimatedResultTitle")}
+                  </h3>
+                </div>
+                <ToolResultActions
+                  className="shrink-0 [&>button]:h-9 [&>button]:px-3"
+                  copied={copied}
+                  copiedLabel={t("copied")}
+                  copyLabel={t("copyResult")}
+                  resetLabel={t("reset")}
+                  onCopy={handleCopy}
+                  onReset={(mode === "calculate" ? exactIsDirty : estimateIsDirty) ? handleReset : undefined}
+                />
+              </div>
+
+              <div className="min-h-0 flex-1 overflow-y-auto pt-4 sm:pt-6 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
+                {mode === "calculate" && exactResult && exactNumbers ? (
+                  <>
+                    <div className="rounded-xl border border-[#E4E9F1] bg-white p-4 sm:p-5">
+                      <p className="text-sm font-medium text-[#666666]">{t("calculatedMrr")}</p>
+                      <p className="mt-2 text-4xl font-semibold tracking-tight text-[#111111]">{money(exactResult.mrr)}</p>
+                    </div>
+                    <div className="mt-3 grid grid-cols-2 gap-3 sm:mt-4 sm:grid-cols-3">
+                      <Metric label={t("arr")} value={money(exactResult.arr)} />
+                      <Metric label={t("monthlyArpa")} value={money(exactResult.monthlyArpa)} />
+                      {exact.previousMrr.trim() !== "" ? (
+                        <Metric
+                          className="col-span-2 sm:col-span-1"
+                          label={t("momGrowth")}
+                          value={exactResult.growthRate === null ? t("notAvailable") : percent(exactResult.growthRate)}
+                        />
+                      ) : null}
+                    </div>
+                    <div className="mt-3 rounded-xl border border-[#E4E9F1] bg-white p-4 sm:mt-4">
+                      <p className="text-sm font-semibold text-[#111111]">{t("formula")}</p>
+                      <p className="mt-2 break-words text-sm leading-6 text-[#555555]">
+                        {number(exactNumbers.activeCustomers)} × {money(exactResult.monthlyArpa)} = {money(exactResult.mrr)} {t("perMonth")}
+                      </p>
+                    </div>
+                    <p className="mt-3 text-xs leading-5 text-[#666666] sm:mt-4">{t("calculatedGuidance")}</p>
+                  </>
+                ) : mode === "estimate" && estimateResult && estimateNumbers ? (
+                  <>
+                    <div className="rounded-xl border border-[#E4E9F1] bg-white p-5">
+                      <p className="text-sm font-medium text-[#666666]">{t("estimatedMrr")}</p>
+                      <p className="mt-2 text-4xl font-semibold tracking-tight text-[#111111]">{money(estimateResult.mrr)}</p>
+                      <p className="mt-3 text-xs leading-5 text-[#666666]">{t("estimateDisclaimer")}</p>
+                    </div>
+                    <div className="mt-4 grid gap-3 sm:grid-cols-2">
+                      <Metric label={t("estimatedArr")} value={money(estimateResult.arr)} />
+                      <Metric label={t("monthlyPlanPrice")} value={money(estimateResult.monthlyPlanPrice)} />
+                      <Metric label={t("newPaidCustomers")} value={number(estimateResult.newPaidCustomers)} />
+                      <Metric label={t("activePaidCustomers")} value={number(estimateResult.activePaidCustomers)} />
+                    </div>
+                    <div className="mt-4 rounded-xl border border-[#E4E9F1] bg-white p-4">
+                      <p className="text-sm font-semibold text-[#111111]">{t("assumptionsUsed")}</p>
+                      <ul className="mt-3 grid gap-2 text-sm leading-6 text-[#555555]">
+                        <li>{t("eligibleVisitShare")}: {estimateNumbers.eligibleVisitShare}%</li>
+                        <li>{t("visitorToPaidRate")}: {estimateNumbers.visitorToPaidRate}%</li>
+                        <li>{t("averagePaidLifetime")}: {number(estimateNumbers.averagePaidLifetimeMonths)}</li>
+                      </ul>
+                    </div>
+                  </>
+                ) : null}
+              </div>
+            </div>
+          ) : (
+            <div className="grid min-h-full place-items-center text-center">
+              <div>
+                <h3 className="text-lg font-semibold text-[#111111]">{t("fixInputsTitle")}</h3>
+                <p className="mt-2 text-sm leading-6 text-[#555555]">{t("fixInputsBody")}</p>
+              </div>
+            </div>
+          )}
+        </ToolPreviewPanel>
+      }
+    />
+  );
+}
+
+function Metric({ className, label, value }: { className?: string; label: string; value: string }) {
+  return (
+    <div className={`min-w-0 rounded-xl border border-[#E4E9F1] bg-white p-4 ${className ?? ""}`}>
+      <p className="text-xs font-medium leading-5 text-[#666666]">{label}</p>
+      <p className="mt-1 break-words text-lg font-semibold text-[#111111]">{value}</p>
+    </div>
+  );
+}

package/src/features/tools/registry.ts

@@ -29,6 +29,8 @@ import { MarketForecastReportContainer } from "./market-forecast-report/market-f
 import { marketForecastReportSpec } from "./market-forecast-report/market-forecast-report.spec";
 import { MillionUserGrowthTestContainer } from "./million-user-growth-test/million-user-growth-test.container";
 import { millionUserGrowthTestSpec } from "./million-user-growth-test/million-user-growth-test.spec";
+import { MrrCalculatorContainer } from "./mrr-calculator/mrr-calculator.container";
+import { mrrCalculatorSpec } from "./mrr-calculator/mrr-calculator.spec";
 import { OgImageGeneratorContainer } from "./og-image-generator/og-image-generator.container";
 import { ogImageGeneratorSpec } from "./og-image-generator/og-image-generator.spec";
 import { createPackageToolModule } from "./package/to-tool-module";
@@ -91,6 +93,10 @@ export const toolRegistry: ToolModule[] = [
     spec: millionUserGrowthTestSpec,
     Container: MillionUserGrowthTestContainer,
   },
+  {
+    spec: mrrCalculatorSpec,
+    Container: MrrCalculatorContainer,
+  },
   {
     spec: marketForecastReportSpec,
     Container: MarketForecastReportContainer,

package/src/features/tools/runtime-registry.ts

@@ -26,6 +26,10 @@ const toolContainerLoaders: Record<string, ToolContainerLoader> = {
     import("./million-user-growth-test/million-user-growth-test.container").then(
       (module) => module.MillionUserGrowthTestContainer,
     ),
+  "mrr-calculator": () =>
+    import("./mrr-calculator/mrr-calculator.container").then(
+      (module) => module.MrrCalculatorContainer,
+    ),
   "market-forecast-report": () =>
     import("./market-forecast-report/market-forecast-report.container").then(
       (module) => module.MarketForecastReportContainer,