urbanmorph · Ashwask · Jul 31, 2026 · Jul 31, 2026
diff --git a/website/public/assets/js/pages/city-hub.js b/website/public/assets/js/pages/city-hub.js
@@ -0,0 +1,79 @@
+// City hub page: make the quick-stats and feature cards reflect real data,
+// standardised across every city hub (mirrors the dynamic behaviour the
+// Bengaluru hub does inline). Loaded after data-loader.js on each city
+// /cities/<city>/index.html.
+//
+// - Communities stat  -> live per-city count from Supabase.
+// - Community Stories card -> flips Live (links to the city stories page)
+//   when the city has at least one story, otherwise left as Coming Soon.
+// Climate Sectors and Wards Tracked are intentionally left untouched (they
+// count built infrastructure, not DB content).
+
+(function () {
+    (async function init() {
+        const header = document.getElementById('notf-header');
+        const slug = header && header.dataset ? (header.dataset.city || '') : '';
+        if (!slug) return;
+
+        try {
+            await dataLoader.waitForSupabase();
+
+            // Load all, then filter client-side by lowercased city so we don't
+            // depend on the exact casing stored in the DB (same as the
+            // Bengaluru hub).
+            const [communities, stories] = await Promise.all([
+                dataLoader.loadCommunities(),
+                dataLoader.loadStories()
+            ]);
+            const byCity = (x) => x.city && x.city.toLowerCase() === slug;
+            const cityCommunities = communities.filter(byCity);
+            const cityStories = stories.filter(byCity);
+
+            // Communities stat -> real count.
+            const commStat = document.querySelector('[data-stat="communities"]');
+            if (commStat) {
+                commStat.textContent = cityCommunities.length;
+                if (cityCommunities.length > 0) commStat.classList.remove('zero');
+            }
+
+            // Community Stories card -> Live when the city has stories.
+            const storiesCard = document.querySelector('[data-feature="stories"]');
+            if (storiesCard && cityStories.length > 0) {
+                storiesCard.classList.remove('coming-soon');
+
+                const badge = storiesCard.querySelector('.feature-status-badge');
+                if (badge) {
+                    badge.className = 'feature-status-badge live';
+                    badge.innerHTML =
+                        '<i class="fa-solid fa-check-circle"></i> ' +
+                        '<span data-i18n="cityHub.features.map.statusLive">Live</span>';
+                }
+
+                const desc = storiesCard.querySelector('.feature-description');
+                if (desc) {
+                    desc.setAttribute('data-i18n', 'cityHub.features.stories.description');
+                    desc.textContent =
+                        'Discover real stories of neighbourhood transformation, ' +
+                        'told by the people who made it happen.';
+                }
+
+                const action = storiesCard.querySelector('.feature-action');
+                if (action) {
+                    action.innerHTML =
+                        '<a href="/cities/' + slug + '/stories/" class="btn btn-primary">' +
+                        '<span data-i18n="cityHub.features.stories.button">Read Stories</span> ' +
+                        '<i class="fa-solid fa-arrow-right"></i></a>';
+                }
+
+                // Translate the newly injected data-i18n nodes.
+                if (window.translator && typeof window.translator.translatePage === 'function') {
+                    window.translator.translatePage();
+                }
+            }
+
+            console.log('[City Hub]', slug, '-', cityCommunities.length, 'communities,', cityStories.length, 'stories');
+        } catch (error) {
+            console.error('[City Hub] Error loading data:', error);
+        }
+    })();
+})();
diff --git a/website/public/cities/ahmedabad/index.html b/website/public/cities/ahmedabad/index.html
@@ -358,7 +358,7 @@ <h1>Ahmedabad</h1>
         <!-- Quick Stats -->
         <section class="quick-stats">
             <div class="quick-stat-card">
-                <div class="quick-stat-number zero">0</div>
+                <div class="quick-stat-number zero" data-stat="communities">0</div>
                 <div class="quick-stat-label" data-i18n="cityHub.stats.communities">Communities</div>
             </div>
             <div class="quick-stat-card">
@@ -427,7 +427,7 @@ <h3 data-i18n="cityHub.features.communities.title">Communities</h3>
 
 
                 <!-- Community Stories (Coming Soon) -->
-                <div class="feature-card-large coming-soon">
+                <div class="feature-card-large coming-soon" data-feature="stories">
                     <div class="feature-header">
                         <div class="feature-icon-large">
                             <img src="/assets/images/icons/story.svg" alt="" style="width:20px;height:20px;">
@@ -484,6 +484,7 @@ <h3 data-i18n="cityHub.comingSoonCallout.title">Ahmedabad Data Coming Soon</h3>
 
         <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
     <script src="/assets/js/data-loader.js"></script>
+    <script src="/assets/js/pages/city-hub.js"></script>
 
 
     <script src="/assets/js/components/common-scripts.js"></script>

diff --git a/website/public/cities/bhubaneswar/index.html b/website/public/cities/bhubaneswar/index.html
@@ -358,7 +358,7 @@ <h1>Bhubaneswar</h1>
         <!-- Quick Stats -->
         <section class="quick-stats">
             <div class="quick-stat-card">
-                <div class="quick-stat-number zero">0</div>
+                <div class="quick-stat-number zero" data-stat="communities">0</div>
                 <div class="quick-stat-label" data-i18n="cityHub.stats.communities">Communities</div>
             </div>
             <div class="quick-stat-card">
@@ -427,7 +427,7 @@ <h3 data-i18n="cityHub.features.communities.title">Communities</h3>
 
 
                 <!-- Community Stories (Coming Soon) -->
-                <div class="feature-card-large coming-soon">
+                <div class="feature-card-large coming-soon" data-feature="stories">
                     <div class="feature-header">
                         <div class="feature-icon-large">
                             <img src="/assets/images/icons/story.svg" alt="" style="width:20px;height:20px;">
@@ -484,6 +484,7 @@ <h3 data-i18n="cityHub.comingSoonCallout.title">Bhubaneswar Data Coming Soon</h3
 
         <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
     <script src="/assets/js/data-loader.js"></script>
+    <script src="/assets/js/pages/city-hub.js"></script>
 
 
     <script src="/assets/js/components/common-scripts.js"></script>

diff --git a/website/public/cities/chennai/index.html b/website/public/cities/chennai/index.html
@@ -358,7 +358,7 @@ <h1>Chennai</h1>
         <!-- Quick Stats -->
         <section class="quick-stats">
             <div class="quick-stat-card">
-                <div class="quick-stat-number zero">0</div>
+                <div class="quick-stat-number zero" data-stat="communities">0</div>
                 <div class="quick-stat-label" data-i18n="cityHub.stats.communities">Communities</div>
             </div>
             <div class="quick-stat-card">
@@ -426,26 +426,26 @@ <h3 data-i18n="cityHub.features.communities.title">Communities</h3>
                 </div>
 
 
-                <!-- Community Stories (Available) -->
-                <div class="feature-card-large">
+                <!-- Community Stories (state set dynamically by city-hub.js) -->
+                <div class="feature-card-large coming-soon" data-feature="stories">
                     <div class="feature-header">
                         <div class="feature-icon-large">
                             <img src="/assets/images/icons/story.svg" alt="" style="width:20px;height:20px;">
                         </div>
                         <div class="feature-info">
                             <h3 data-i18n="cityHub.features.stories.title">Community Stories</h3>
-                            <span class="feature-status-badge live">
-                                <i class="fa-solid fa-check-circle"></i> <span data-i18n="cityHub.features.map.statusLive">Live</span>
+                            <span class="feature-status-badge coming-soon">
+                                <i class="fa-solid fa-clock"></i> <span data-i18n="cityHub.features.statusComingSoon">Coming Soon</span>
                             </span>
                         </div>
                     </div>
-                    <p class="feature-description" data-i18n="cityHub.features.stories.description">
-                        Discover real stories of neighbourhood transformation, told by the people who made it happen.
+                    <p class="feature-description" data-i18n="cityHub.features.stories.comingSoonDescription">
+                        Community stories for this city are under development. Real stories of neighbourhood transformation coming soon.
                     </p>
                     <div class="feature-action">
-                        <a href="/cities/chennai/stories/" class="btn btn-primary">
-                            <span data-i18n="cityHub.features.stories.button">Read Stories</span> <i class="fa-solid fa-arrow-right"></i>
-                        </a>
+                        <button class="btn" style="background: var(--color-text-lighter); cursor: not-allowed;" disabled>
+                            <span data-i18n="cityHub.comingSoonCallout.comingSoonButton">Coming Soon</span>
+                        </button>
                     </div>
                 </div>
 </div>
@@ -484,6 +484,7 @@ <h3 data-i18n="cityHub.comingSoonCallout.title">Chennai Data Coming Soon</h3>
 
         <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
     <script src="/assets/js/data-loader.js"></script>
+    <script src="/assets/js/pages/city-hub.js"></script>
 
 
     <script src="/assets/js/components/common-scripts.js"></script>

diff --git a/website/public/cities/gurugram/index.html b/website/public/cities/gurugram/index.html
@@ -358,7 +358,7 @@ <h1>Gurugram</h1>
         <!-- Quick Stats -->
         <section class="quick-stats">
             <div class="quick-stat-card">
-                <div class="quick-stat-number zero">0</div>
+                <div class="quick-stat-number zero" data-stat="communities">0</div>
                 <div class="quick-stat-label" data-i18n="cityHub.stats.communities">Communities</div>
             </div>
             <div class="quick-stat-card">
@@ -427,7 +427,7 @@ <h3 data-i18n="cityHub.features.communities.title">Communities</h3>
 
 
                 <!-- Community Stories (Coming Soon) -->
-                <div class="feature-card-large coming-soon">
+                <div class="feature-card-large coming-soon" data-feature="stories">
                     <div class="feature-header">
                         <div class="feature-icon-large">
                             <img src="/assets/images/icons/story.svg" alt="" style="width:20px;height:20px;">
@@ -484,6 +484,7 @@ <h3 data-i18n="cityHub.comingSoonCallout.title">Gurugram Data Coming Soon</h3>
 
         <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
     <script src="/assets/js/data-loader.js"></script>
+    <script src="/assets/js/pages/city-hub.js"></script>
 
 
     <script src="/assets/js/components/common-scripts.js"></script>

diff --git a/website/public/cities/hyderabad/index.html b/website/public/cities/hyderabad/index.html
@@ -358,7 +358,7 @@ <h1>Hyderabad</h1>
         <!-- Quick Stats -->
         <section class="quick-stats">
             <div class="quick-stat-card">
-                <div class="quick-stat-number zero">0</div>
+                <div class="quick-stat-number zero" data-stat="communities">0</div>
                 <div class="quick-stat-label" data-i18n="cityHub.stats.communities">Communities</div>
             </div>
             <div class="quick-stat-card">
@@ -427,7 +427,7 @@ <h3 data-i18n="cityHub.features.communities.title">Communities</h3>
 
 
                 <!-- Community Stories (Coming Soon) -->
-                <div class="feature-card-large coming-soon">
+                <div class="feature-card-large coming-soon" data-feature="stories">
                     <div class="feature-header">
                         <div class="feature-icon-large">
                             <img src="/assets/images/icons/story.svg" alt="" style="width:20px;height:20px;">
@@ -484,6 +484,7 @@ <h3 data-i18n="cityHub.comingSoonCallout.title">Hyderabad Data Coming Soon</h3>
 
         <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
     <script src="/assets/js/data-loader.js"></script>
+    <script src="/assets/js/pages/city-hub.js"></script>
 
 
     <script src="/assets/js/components/common-scripts.js"></script>

diff --git a/website/public/cities/jaipur/index.html b/website/public/cities/jaipur/index.html
@@ -358,7 +358,7 @@ <h1>Jaipur</h1>
         <!-- Quick Stats -->
         <section class="quick-stats">
             <div class="quick-stat-card">
-                <div class="quick-stat-number zero">0</div>
+                <div class="quick-stat-number zero" data-stat="communities">0</div>
                 <div class="quick-stat-label" data-i18n="cityHub.stats.communities">Communities</div>
             </div>
             <div class="quick-stat-card">
@@ -427,7 +427,7 @@ <h3 data-i18n="cityHub.features.communities.title">Communities</h3>
 
 
                 <!-- Community Stories (Coming Soon) -->
-                <div class="feature-card-large coming-soon">
+                <div class="feature-card-large coming-soon" data-feature="stories">
                     <div class="feature-header">
                         <div class="feature-icon-large">
                             <img src="/assets/images/icons/story.svg" alt="" style="width:20px;height:20px;">
@@ -484,6 +484,7 @@ <h3 data-i18n="cityHub.comingSoonCallout.title">Jaipur Data Coming Soon</h3>
 
         <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
     <script src="/assets/js/data-loader.js"></script>
+    <script src="/assets/js/pages/city-hub.js"></script>
 
 
     <script src="/assets/js/components/common-scripts.js"></script>

diff --git a/website/public/cities/kochi/index.html b/website/public/cities/kochi/index.html
@@ -358,7 +358,7 @@ <h1>Kochi</h1>
         <!-- Quick Stats -->
         <section class="quick-stats">
             <div class="quick-stat-card">
-                <div class="quick-stat-number zero">0</div>
+                <div class="quick-stat-number zero" data-stat="communities">0</div>
                 <div class="quick-stat-label" data-i18n="cityHub.stats.communities">Communities</div>
             </div>
             <div class="quick-stat-card">
@@ -427,7 +427,7 @@ <h3 data-i18n="cityHub.features.communities.title">Communities</h3>
 
 
                 <!-- Community Stories (Coming Soon) -->
-                <div class="feature-card-large coming-soon">
+                <div class="feature-card-large coming-soon" data-feature="stories">
                     <div class="feature-header">
                         <div class="feature-icon-large">
                             <img src="/assets/images/icons/story.svg" alt="" style="width:20px;height:20px;">
@@ -484,6 +484,7 @@ <h3 data-i18n="cityHub.comingSoonCallout.title">Kochi Data Coming Soon</h3>
 
         <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
     <script src="/assets/js/data-loader.js"></script>
+    <script src="/assets/js/pages/city-hub.js"></script>
 
 
     <script src="/assets/js/components/common-scripts.js"></script>

diff --git a/website/public/cities/kolkata/index.html b/website/public/cities/kolkata/index.html
@@ -358,7 +358,7 @@ <h1>Kolkata</h1>
         <!-- Quick Stats -->
         <section class="quick-stats">
             <div class="quick-stat-card">
-                <div class="quick-stat-number zero">0</div>
+                <div class="quick-stat-number zero" data-stat="communities">0</div>
                 <div class="quick-stat-label" data-i18n="cityHub.stats.communities">Communities</div>
             </div>
             <div class="quick-stat-card">
@@ -427,7 +427,7 @@ <h3 data-i18n="cityHub.features.communities.title">Communities</h3>
 
 
                 <!-- Community Stories (Coming Soon) -->
-                <div class="feature-card-large coming-soon">
+                <div class="feature-card-large coming-soon" data-feature="stories">
                     <div class="feature-header">
                         <div class="feature-icon-large">
                             <img src="/assets/images/icons/story.svg" alt="" style="width:20px;height:20px;">
@@ -484,6 +484,7 @@ <h3 data-i18n="cityHub.comingSoonCallout.title">Kolkata Data Coming Soon</h3>
 
         <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
     <script src="/assets/js/data-loader.js"></script>
+    <script src="/assets/js/pages/city-hub.js"></script>
 
 
     <script src="/assets/js/components/common-scripts.js"></script>

diff --git a/website/public/cities/mumbai/index.html b/website/public/cities/mumbai/index.html
@@ -358,7 +358,7 @@ <h1>Mumbai</h1>
         <!-- Quick Stats -->
         <section class="quick-stats">
             <div class="quick-stat-card">
-                <div class="quick-stat-number zero">0</div>
+                <div class="quick-stat-number zero" data-stat="communities">0</div>
                 <div class="quick-stat-label" data-i18n="cityHub.stats.communities">Communities</div>
             </div>
             <div class="quick-stat-card">
@@ -449,7 +449,7 @@ <h3 data-i18n="cityHub.features.communities.title">Communities</h3>
                 </div>
 
                 <!-- Community Stories (Coming Soon) -->
-                <div class="feature-card-large coming-soon">
+                <div class="feature-card-large coming-soon" data-feature="stories">
                     <div class="feature-header">
                         <div class="feature-icon-large">
                             <img src="/assets/images/icons/story.svg" alt="" style="width:36px;height:36px;">
@@ -507,6 +507,7 @@ <h3 data-i18n="cityHub.comingSoonCallout.title">More Mumbai Data Coming Soon</h3
 
         <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
     <script src="/assets/js/data-loader.js"></script>
+    <script src="/assets/js/pages/city-hub.js"></script>
 
 
     <script src="/assets/js/components/common-scripts.js"></script>

diff --git a/website/public/cities/pune/index.html b/website/public/cities/pune/index.html
@@ -358,7 +358,7 @@ <h1>Pune</h1>
         <!-- Quick Stats -->
         <section class="quick-stats">
             <div class="quick-stat-card">
-                <div class="quick-stat-number zero">0</div>
+                <div class="quick-stat-number zero" data-stat="communities">0</div>
                 <div class="quick-stat-label" data-i18n="cityHub.stats.communities">Communities</div>
             </div>
             <div class="quick-stat-card">
@@ -427,7 +427,7 @@ <h3 data-i18n="cityHub.features.communities.title">Communities</h3>
 
 
                 <!-- Community Stories (Coming Soon) -->
-                <div class="feature-card-large coming-soon">
+                <div class="feature-card-large coming-soon" data-feature="stories">
                     <div class="feature-header">
                         <div class="feature-icon-large">
                             <img src="/assets/images/icons/story.svg" alt="" style="width:20px;height:20px;">
@@ -484,6 +484,7 @@ <h3 data-i18n="cityHub.comingSoonCallout.title">Pune Data Coming Soon</h3>
 
         <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
     <script src="/assets/js/data-loader.js"></script>
+    <script src="/assets/js/pages/city-hub.js"></script>
 
 
     <script src="/assets/js/components/common-scripts.js"></script>