feat: implement history and future forecast modals, alongside a new Pro feature paywall component.

frontend/components/dashboard/FutureForecastModal.tsx

@@ -550,6 +550,21 @@ export function FutureForecastModal() {
         }
       }}
     >
+      {isProLoading ? (
+        <div
+          className="modal-content large"
+          style={{ padding: "40px", textAlign: "center" }}
+        >
+          <div style={{ color: "var(--text-muted)" }}>
+            {t("dashboard.loading")}
+          </div>
+        </div>
+      ) : !isPro ? (
+        <ProFeaturePaywall
+          feature={isToday ? "today" : "future"}
+          onClose={store.closeFutureModal}
+        />
+      ) : (
         <div className="modal-content large future-modal">
           <div className="modal-header">
             <h2
@@ -615,22 +630,8 @@ export function FutureForecastModal() {
               ×
             </button>
           </div>
-
           <div className="modal-body future-modal-body">
-          {isProLoading ? (
-            <div
-              style={{
-                color: "var(--text-muted)",
-                display: "flex",
-                justifyContent: "center",
-                padding: "28px 0",
-              }}
-            >
-              {t("dashboard.loading")}
-            </div>
-          ) : !isPro ? (
-            <ProFeaturePaywall feature={isToday ? "today" : "future"} />
-          ) : isToday ? (
+            {isToday ? (
               <div className="future-v2-layout">
                 <aside className="future-v2-left">
                   <section className="future-v2-card future-v2-hero-card">
@@ -640,7 +641,9 @@ export function FutureForecastModal() {
                         : "实况与气象特征"}
                     </h3>
                     <div className="future-v2-hero-main">
-                    <div className="future-v2-hero-temp">{currentTempText}</div>
+                      <div className="future-v2-hero-temp">
+                        {currentTempText}
+                      </div>
                       <div className="future-v2-hero-divider" />
                       <div className="future-v2-hero-weather">
                         <span className="future-v2-hero-icon">
@@ -666,11 +669,15 @@ export function FutureForecastModal() {
                         </strong>
                       </div>
                       <div className="future-v2-mini-item">
-                      <span>{locale === "en-US" ? "Sunrise" : "日出时间"}</span>
+                        <span>
+                          {locale === "en-US" ? "Sunrise" : "日出时间"}
+                        </span>
                         <strong>{detail.forecast?.sunrise || "--"}</strong>
                       </div>
                       <div className="future-v2-mini-item">
-                      <span>{locale === "en-US" ? "Sunset" : "日落时间"}</span>
+                        <span>
+                          {locale === "en-US" ? "Sunset" : "日落时间"}
+                        </span>
                         <strong>{detail.forecast?.sunset || "--"}</strong>
                       </div>
                       <div className="future-v2-mini-item">
@@ -872,7 +879,9 @@ export function FutureForecastModal() {
                             >
                               {metric.value}
                             </div>
-                          <div className="future-trend-note">{metric.note}</div>
+                            <div className="future-trend-note">
+                              {metric.note}
+                            </div>
                           </div>
                         ))}
                       </div>
@@ -984,6 +993,7 @@ export function FutureForecastModal() {
             )}
           </div>
         </div>
+      )}
     </div>
   );
 }

frontend/components/dashboard/HistoryModal.tsx

@@ -20,9 +20,10 @@ function HistoryChart() {
     store.selectedCity === "ankara" &&
     summary.mgms.some((value) => value != null);
 
-  const canvasRef = useChart(
-    () => {
-      const datasets: NonNullable<ChartConfiguration<"line">["data"]>["datasets"] = [
+  const canvasRef = useChart(() => {
+    const datasets: NonNullable<
+      ChartConfiguration<"line">["data"]
+    >["datasets"] = [
       {
         backgroundColor: "rgba(248, 113, 113, 0.1)",
         borderColor: "#f87171",
@@ -86,7 +87,8 @@ function HistoryChart() {
             bodyFont: { family: "Inter", size: 13 },
             titleFont: { family: "Inter", size: 13, weight: 600 },
             callbacks: {
-                label: (ctx) => `${ctx.dataset.label}: ${ctx.parsed.y?.toFixed(1)}°`,
+              label: (ctx) =>
+                `${ctx.dataset.label}: ${ctx.parsed.y?.toFixed(1)}°`,
             },
           },
         },
@@ -112,9 +114,7 @@ function HistoryChart() {
       },
       type: "line",
     } satisfies ChartConfiguration<"line">;
-    },
-    [hasMgm, summary, locale],
-  );
+  }, [hasMgm, summary, locale]);
 
   if (!summary.recentData.length) return null;
 
@@ -150,10 +150,24 @@ export function HistoryModal() {
         }
       }}
     >
+      {isProLoading ? (
+        <div
+          className="modal-content"
+          style={{ padding: "40px", textAlign: "center" }}
+        >
+          <div style={{ color: "var(--text-muted)" }}>
+            {t("dashboard.loading")}
+          </div>
+        </div>
+      ) : !isPro ? (
+        <ProFeaturePaywall feature="history" onClose={store.closeHistory} />
+      ) : (
         <div className="modal-content history-modal">
           <div className="modal-header">
             <h2 id="history-modal-title">
-            {t("history.title", { city: store.selectedCity?.toUpperCase() || "" })}
+              {t("history.title", {
+                city: store.selectedCity?.toUpperCase() || "",
+              })}
             </h2>
             <button
               type="button"
@@ -165,21 +179,6 @@ export function HistoryModal() {
             </button>
           </div>
           <div className="modal-body">
-          {isProLoading ? (
-            <div
-              style={{
-                color: "var(--text-muted)",
-                display: "flex",
-                justifyContent: "center",
-                padding: "28px 0",
-              }}
-            >
-              {t("dashboard.loading")}
-            </div>
-          ) : !isPro ? (
-            <ProFeaturePaywall feature="history" />
-          ) : (
-            <>
             <div className="history-stats">
               {isLoading ? (
                 <span style={{ color: "var(--text-muted)" }}>
@@ -217,10 +216,9 @@ export function HistoryModal() {
               )}
             </div>
             {!isLoading && !error && <HistoryChart />}
-            </>
+          </div>
+        </div>
       )}
     </div>
-      </div>
-    </div>
   );
 }

frontend/components/dashboard/ProFeaturePaywall.tsx

@@ -8,112 +8,176 @@ import {
   Lock,
   ShieldCheck,
   Sparkles,
+  X,
   Zap,
 } from "lucide-react";
 import { useI18n } from "@/hooks/useI18n";
+import { useDashboardStore } from "@/hooks/useDashboardStore";
+import { useState } from "react";
 
 type ProFeaturePaywallProps = {
   feature: "today" | "history" | "future";
+  onClose?: () => void;
 };
 
-function getFeatureLabel(
-  locale: "zh-CN" | "en-US",
-  feature: "today" | "history" | "future",
-) {
-  if (locale === "en-US") {
-    if (feature === "today") return "Intraday Analysis";
-    if (feature === "history") return "History Reconciliation";
-    return "Future-date Analysis";
-  }
-  if (feature === "today") return "今日日内分析";
-  if (feature === "history") return "历史对账";
-  return "未来日期分析";
-}
-
-export function ProFeaturePaywall({ feature }: ProFeaturePaywallProps) {
+export function ProFeaturePaywall({
+  feature,
+  onClose,
+}: ProFeaturePaywallProps) {
   const { locale } = useI18n();
-  const featureLabel = getFeatureLabel(locale, feature);
+  const { proAccess } = useDashboardStore();
+  const [usePoints, setUsePoints] = useState(true);
+
   const isEn = locale === "en-US";
 
+  // Redemption logic: 500 points = $1 discount
+  // Max discount $3 (requires 1500 points)
+  const maxRedeemablePoints = 1500;
+  const pointsAvailable = proAccess.points || 0;
+  const effectivePoints = Math.min(pointsAvailable, maxRedeemablePoints);
+  const discountAmount = usePoints ? Math.floor(effectivePoints / 500) : 0;
+  const originalPrice = 5.0;
+  const finalPrice = originalPrice - discountAmount;
+  const pointsToConsume = discountAmount * 500;
+
   return (
-    <div className="flex w-full flex-col items-center justify-center py-10 md:py-16">
-      <div className="relative w-full max-w-4xl rounded-[2.5rem] border border-white/10 bg-slate-900/60 backdrop-blur-xl p-8 shadow-2xl md:p-12">
-        <div className="absolute left-1/2 top-0 flex h-20 w-20 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-[1.5rem] border-4 border-slate-950 bg-gradient-to-tr from-amber-500 via-orange-500 to-yellow-400 text-white shadow-2xl shadow-orange-500/40">
-          <Crown size={32} fill="currentColor" />
+    <div className="flex w-full flex-col items-center justify-center py-6 md:py-10">
+      <div className="relative w-full max-w-xl rounded-[2.5rem] border border-white/10 bg-slate-900/80 p-8 shadow-3xl backdrop-blur-3xl md:p-12">
+        {onClose && (
+          <button
+            onClick={onClose}
+            className="absolute right-6 top-6 flex h-10 w-10 items-center justify-center rounded-full bg-white/5 text-slate-400 transition hover:bg-white/10 hover:text-white z-10"
+          >
+            <X size={20} />
+          </button>
+        )}
+
+        {/* Crown Badge */}
+        <div className="absolute left-1/2 top-0 flex h-20 w-20 -translate-x-1/2 -translate-y-1/2 rotate-[-6deg] items-center justify-center rounded-[1.5rem] border-4 border-slate-950 bg-gradient-to-tr from-amber-400 via-orange-500 to-yellow-500 text-white shadow-2xl shadow-orange-500/30">
+          <Crown size={32} fill="white" />
         </div>
 
         <div className="mt-4 text-center">
           <h3 className="text-3xl font-extrabold tracking-tight text-white md:text-4xl">
             {isEn ? "Unlock PolyWeather Pro" : "开启 PolyWeather Pro"}
           </h3>
-          <p className="mx-auto mt-4 max-w-2xl text-lg text-slate-300">
+          <p className="mx-auto mt-4 max-w-sm text-base leading-relaxed text-slate-400">
             {isEn
-              ? `This module (${featureLabel}) is available for subscribers only. Upgrade to unlock advanced weather intelligence.`
-              : `当前模块（${featureLabel}）仅对订阅用户开放。升级后可解锁更完整的气象分析能力。`}
+              ? "Unlock 15-day precision trends, real-time radar, and ad-free experience across all platforms."
+              : "解锁 15 天高精度趋势分析、实时雷达与闪电追踪。尊享全平台无广告体验。"}
           </p>
         </div>
 
-        <div className="mt-10 grid grid-cols-1 gap-4 md:grid-cols-2">
-          {[
-            {
-              icon: Zap,
-              text: isEn
-                ? "Real-time radar and lightning tracking"
-                : "实时雷达与闪电追踪",
-            },
-            {
-              icon: ShieldCheck,
-              text: isEn
-                ? "15-day high-precision trend analysis"
-                : "15 天高精度趋势分析",
-            },
-            {
-              icon: BarChart3,
-              text: isEn
-                ? "Pro-grade station raw data"
-                : "专业级气象站原始数据",
-            },
-            {
-              icon: Sparkles,
-              text: isEn
-                ? "Ad-free experience across all surfaces"
-                : "全平台无广告体验",
-            },
-          ].map((item) => (
-            <div
-              key={item.text}
-              className="flex items-center gap-4 rounded-2xl border border-white/5 bg-white/5 px-5 py-4 transition hover:bg-white/10"
-            >
-              <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-cyan-500/10 text-cyan-300">
-                <item.icon size={20} />
+        {/* Pricing Cards */}
+        <div className="mt-10 grid grid-cols-1 gap-4 sm:grid-cols-2">
+          {/* Plan Card */}
+          <div className="relative overflow-hidden rounded-3xl border border-blue-500/30 bg-blue-500/5 p-6 transition hover:bg-blue-500/10">
+            <div className="absolute -right-2 -top-1 rotate-12 rounded-lg bg-blue-500 px-2 py-0.5 text-[10px] font-bold text-white uppercase tracking-tighter shadow-lg">
+              {isEn ? "Monthly" : "月付套餐"}
             </div>
-              <span className="text-base font-medium text-slate-200">
-                {item.text}
+            <div className="text-[10px] font-bold text-slate-500 uppercase tracking-widest">
+              PRO PLAN
+            </div>
+            <div className="mt-2 flex items-baseline">
+              <span className="text-3xl font-black text-white">$5.00</span>
+              <span className="ml-1 text-sm font-medium text-slate-500">
+                / {isEn ? "mo" : "月"}
               </span>
             </div>
-          ))}
           </div>
 
-        <div className="mt-10">
+          {/* Points Card */}
+          <div
+            className={`relative rounded-3xl border p-6 transition ${
+              usePoints && pointsAvailable >= 500
+                ? "border-indigo-500/30 bg-indigo-500/5"
+                : "border-white/5 bg-white/5 opacity-60"
+            }`}
+          >
+            <div className="flex items-center justify-between">
+              <span
+                className={`text-[10px] font-bold uppercase tracking-widest ${
+                  usePoints && pointsAvailable >= 500
+                    ? "text-indigo-400"
+                    : "text-slate-500"
+                }`}
+              >
+                {isEn ? "Points Credit" : "积分抵扣"}
+              </span>
+              <button
+                onClick={() => setUsePoints(!usePoints)}
+                disabled={pointsAvailable < 500}
+                className={`relative h-6 w-11 shrink-0 rounded-full transition-colors ${
+                  usePoints && pointsAvailable >= 500
+                    ? "bg-indigo-600"
+                    : "bg-slate-700"
+                } ${pointsAvailable < 500 ? "opacity-30 cursor-not-allowed" : "cursor-pointer"}`}
+              >
+                <div
+                  className={`absolute left-0.5 top-0.5 h-5 w-5 rounded-full bg-white shadow-sm transition-transform ${
+                    usePoints && pointsAvailable >= 500
+                      ? "translate-x-5"
+                      : "translate-x-0"
+                  }`}
+                />
+              </button>
+            </div>
+            <div className="mt-2 flex items-baseline">
+              <span
+                className={`text-3xl font-black ${usePoints && pointsAvailable >= 500 ? "text-emerald-400" : "text-slate-500"}`}
+              >
+                -${discountAmount.toFixed(2)}
+              </span>
+              <span className="ml-1 text-[10px] font-bold text-slate-500 uppercase">
+                OFF
+              </span>
+            </div>
+            <div className="mt-1 text-[10px] font-medium text-slate-500">
+              {pointsAvailable < 500
+                ? isEn
+                  ? "Need 500+ points"
+                  : `积分不足 (当前 ${pointsAvailable})`
+                : isEn
+                  ? `Auto-consume ${pointsToConsume} points`
+                  : `已自动消耗 ${pointsToConsume} 积分`}
+            </div>
+          </div>
+        </div>
+
+        {/* Total & Action */}
+        <div className="mt-10 space-y-6">
+          <div className="flex items-center justify-between px-2">
+            <span className="text-sm font-medium text-slate-400">
+              {isEn ? "Total Due:" : "应付总计:"}
+            </span>
+            <span className="text-3xl font-black text-white">
+              ${finalPrice.toFixed(2)}
+            </span>
+          </div>
+
           <Link
             href="/account"
-            className="group flex w-full items-center justify-center rounded-2xl bg-gradient-to-r from-blue-600 to-indigo-600 px-6 py-5 text-xl font-bold text-white shadow-xl shadow-blue-600/20 transition hover:from-blue-500 hover:to-indigo-500 active:scale-[0.98]"
+            className="group flex w-full items-center justify-center rounded-2xl bg-gradient-to-r from-blue-600 to-indigo-600 px-6 py-5 text-lg font-bold text-white shadow-2xl shadow-blue-600/30 transition hover:from-blue-500 hover:to-indigo-500 active:scale-[0.98]"
           >
-            {isEn ? "Upgrade now - $5 / month" : "立即升级 - $5 / 月"}
+            {isEn ? "Connect Wallet & Pay" : "连接钱包并支付"}
             <ArrowRight
-              size={22}
+              size={20}
               className="ml-2 transition-transform group-hover:translate-x-1"
             />
           </Link>
-        </div>
 
-        <div className="mt-8 border-t border-white/10 pt-6 text-center text-xs text-slate-400">
-          <span className="inline-flex items-center gap-2">
-            <Lock size={14} className="text-slate-500" />
-            {isEn
-              ? "Payments are secured with AES-256 encryption"
-              : "所有交易均经过 AES-256 加密保护"}
+          <div className="flex items-center justify-center gap-6">
+            <span className="flex items-center gap-1.5 text-[10px] font-medium text-slate-500">
+              <Lock size={12} className="opacity-50" />
+              {isEn ? "Secured Payment" : "安全加密支付"}
             </span>
+            <Link
+              href="/account"
+              className="text-[10px] font-medium text-slate-500 transition hover:text-slate-300"
+            >
+              {isEn ? "FAQ" : "常见问题 (FAQ)"}
+            </Link>
+          </div>
         </div>
       </div>
     </div>

frontend/hooks/useDashboardStore.tsx

@@ -75,6 +75,7 @@ function getInitialProAccessState(): ProAccessState {
     loading: true,
     authenticated: false,
     subscriptionActive: false,
+    points: 0,
     error: null,
   };
 }
@@ -235,7 +236,10 @@ export function DashboardStoreProvider({
     ? cityDetailsByName[selectedCity] || null
     : null;
   const selectedMarketDate =
-    futureModalDate || selectedForecastDate || selectedDetail?.local_date || null;
+    futureModalDate ||
+    selectedForecastDate ||
+    selectedDetail?.local_date ||
+    null;
   const selectedMarketScanKey = selectedCity
     ? getMarketScanCacheKey(selectedCity, selectedMarketDate)
     : null;
@@ -402,11 +406,13 @@ export function DashboardStoreProvider({
       const payload = (await response.json()) as {
         authenticated?: boolean;
         subscription_active?: boolean | null;
+        points?: number;
       };
       setProAccess({
         loading: false,
         authenticated: Boolean(payload.authenticated),
         subscriptionActive: payload.subscription_active === true,
+        points: payload.points ?? 0,
         error: null,
       });
     } catch (error) {
@@ -414,6 +420,7 @@ export function DashboardStoreProvider({
         loading: false,
         authenticated: false,
         subscriptionActive: false,
+        points: 0,
         error: String(error),
       });
     }

frontend/lib/dashboard-types.ts

@@ -318,6 +318,7 @@ export interface ProAccessState {
   loading: boolean;
   authenticated: boolean;
   subscriptionActive: boolean;
+  points: number;
   error: string | null;
 }
 

src/auth/supabase_entitlement.py

@@ -41,6 +41,7 @@ def extract_bearer_token(auth_header: Optional[str]) -> str:
 class SupabaseIdentity:
     user_id: str
     email: str
+    points: int = 0
 
 
 class SupabaseEntitlementService:
@@ -120,9 +121,15 @@ class SupabaseEntitlementService:
             user_id = str(data.get("id") or "").strip()
             if not user_id:
                 return None
+            
+            # Extract points from user_metadata
+            metadata = data.get("user_metadata") or {}
+            points = int(metadata.get("points") or metadata.get("total_points") or 0)
+
             identity = SupabaseIdentity(
                 user_id=user_id,
                 email=str(data.get("email") or "").strip(),
+                points=points,
             )
             with self._identity_cache_lock:
                 self._identity_cache[access_token] = {
@@ -133,6 +140,9 @@ class SupabaseEntitlementService:
         except Exception as exc:
             logger.warning(f"supabase auth user check failed: {exc}")
             return None
+        except Exception as exc:
+            logger.warning(f"supabase auth user check failed: {exc}")
+            return None
 
     def _query_active_subscription(self, user_id: str) -> bool:
         if not user_id:

web/app.py

@@ -117,6 +117,7 @@ def _bind_optional_supabase_identity(request: Request) -> None:
         return
     request.state.auth_user_id = identity.user_id
     request.state.auth_email = identity.email
+    request.state.auth_points = identity.points
 
 
 def _assert_entitlement(request: Request) -> None:
@@ -1093,6 +1094,7 @@ async def auth_me(request: Request):
         "authenticated": bool(user_id),
         "user_id": user_id,
         "email": getattr(request.state, "auth_email", None),
+        "points": getattr(request.state, "auth_points", 0),
         "entitlement_mode": (
             "supabase_required"
             if SUPABASE_ENTITLEMENT.enabled and _SUPABASE_AUTH_REQUIRED