feat: add falah-shortcodes WP plugin and Falah Mobile deploy script

Implements all missing shortcodes for ummah.falahos.my:
- [prayer_times] — Aladhan API, no auth required
- [dhikr_counter] — localStorage-backed, works offline
- [qibla_compass] — browser Geolocation + DeviceOrientation
- [daily_verse] — AlQuran.cloud API, no auth required
- [nur_ai_chat], [falah_wallet], [souq_marketplace] — iframe Falah Mobile
- [falah_dashboard] — auto-injects dashboard content into empty page

Also adds deploy-falah-mobile.sh to build and run the Next.js app on
13.140.161.244:4013, and Nginx reverse proxy config for falahos.my/mobile.

configs/nginx-falah-mobile.conf

@@ -0,0 +1,18 @@
+# Nginx reverse proxy config for Falah Mobile
+# Add this inside the server {} block for falahos.my
+
+location /mobile {
+    proxy_pass         http://127.0.0.1:4013;
+    proxy_http_version 1.1;
+    proxy_set_header   Upgrade $http_upgrade;
+    proxy_set_header   Connection 'upgrade';
+    proxy_set_header   Host $host;
+    proxy_set_header   X-Real-IP $remote_addr;
+    proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
+    proxy_set_header   X-Forwarded-Proto $scheme;
+    proxy_cache_bypass $http_upgrade;
+
+    # Allow iframes from ummah.falahos.my
+    add_header X-Frame-Options "ALLOW-FROM https://ummah.falahos.my";
+    add_header Content-Security-Policy "frame-ancestors 'self' https://ummah.falahos.my";
+}

deploy-falah-mobile.sh

@@ -0,0 +1,88 @@
+#!/usr/bin/env bash
+# deploy-falah-mobile.sh — Build and deploy FalahMobile Next.js app to production
+# Usage: bash deploy-falah-mobile.sh <server-ip> [ssh-user]
+# Prerequisites: SSH key access to server, Docker installed on server
+#
+# Credentials: retrieve from bitwarden.falahos.my
+#   - Server SSH: "Falah OS CE Server - 13.140.161.244"
+
+set -euo pipefail
+
+SERVER="${1:-13.140.161.244}"
+SSH_USER="${2:-root}"
+REMOTE="$SSH_USER@$SERVER"
+DEPLOY_DIR="/opt/falah-mobile"
+APP_PORT="4013"
+IMAGE="falah-mobile:latest"
+CONTAINER="falah-mobile"
+
+echo "▶ Deploying Falah Mobile to $SERVER:$APP_PORT"
+
+# ── 1. Transfer source to server ─────────────────────────────────────────────
+echo "── Syncing source files ──"
+ssh "$REMOTE" "mkdir -p $DEPLOY_DIR"
+
+rsync -az --delete \
+  --exclude='.git' \
+  --exclude='node_modules' \
+  --exclude='.next' \
+  --exclude='*.log' \
+  "$(dirname "$0")/../FalahMobile/" \
+  "$REMOTE:$DEPLOY_DIR/"
+
+# ── 2. Build and run on server ───────────────────────────────────────────────
+ssh "$REMOTE" bash -s << REMOTE_SCRIPT
+set -euo pipefail
+
+cd "$DEPLOY_DIR"
+
+# Create .env if missing
+if [ ! -f .env ]; then
+  cat > .env << 'ENVEOF'
+NODE_ENV=production
+PORT=3000
+DATABASE_URL=file:./data/falah.db
+NEXTAUTH_URL=https://falahos.my/mobile
+NEXTAUTH_SECRET=$(openssl rand -base64 32)
+ENVEOF
+  echo "⚠️  Created .env — review and update NEXTAUTH_URL and secrets"
+fi
+
+echo "── Building Docker image ──"
+docker build -t $IMAGE .
+
+echo "── Stopping old container (if any) ──"
+docker rm -f $CONTAINER 2>/dev/null || true
+
+echo "── Starting new container ──"
+docker run -d \
+  --name $CONTAINER \
+  --restart unless-stopped \
+  -p $APP_PORT:3000 \
+  -v $DEPLOY_DIR/data:/app/data \
+  --env-file .env \
+  $IMAGE
+
+echo "── Running Prisma migrations ──"
+sleep 5
+docker exec $CONTAINER npx prisma migrate deploy --schema=./prisma/schema.prisma || true
+
+echo "── Health check ──"
+sleep 5
+if curl -sf "http://localhost:$APP_PORT" > /dev/null 2>&1; then
+  echo "✅ Falah Mobile is running at http://$SERVER:$APP_PORT"
+else
+  echo "⚠️  Health check failed — checking logs:"
+  docker logs --tail 30 $CONTAINER
+fi
+REMOTE_SCRIPT
+
+echo ""
+echo "✅ Deploy complete."
+echo "   App:        http://$SERVER:$APP_PORT"
+echo "   Nur AI:     http://$SERVER:$APP_PORT/nur"
+echo "   Wallet:     http://$SERVER:$APP_PORT/wallet"
+echo "   Souq:       http://$SERVER:$APP_PORT/souq"
+echo ""
+echo "Next: Configure Cloudflare/Nginx to proxy falahos.my/mobile → $SERVER:$APP_PORT"
+echo "      Then update WordPress Settings → Falah Shortcodes → Mobile URL to: https://falahos.my/mobile"

wordpress-plugins/falah-shortcodes/README.md

@@ -0,0 +1,53 @@
+# Falah Shortcodes — WordPress Plugin
+
+Implements all missing shortcodes for ummah.falahos.my.
+
+## Installation
+
+1. Upload the `falah-shortcodes/` folder to `/wp-content/plugins/`
+2. Activate in **Plugins → Installed Plugins**
+3. Configure in **Settings → Falah Shortcodes**:
+   - Set **Falah Mobile URL** (default: `https://falahos.my/mobile`)
+   - Set default prayer city/country
+
+## Shortcodes
+
+| Shortcode | Page | Notes |
+|-----------|------|-------|
+| `[prayer_times]` | /tools | Calls Aladhan API — no key needed |
+| `[dhikr_counter]` | /tools | localStorage — works offline |
+| `[qibla_compass]` | /tools | Requires browser geolocation permission |
+| `[daily_verse]` | /tools | Calls Al-Quran Cloud API — no key needed |
+| `[nur_ai_chat]` | /nur | Iframes Falah Mobile `/nur` |
+| `[falah_wallet]` | /wallet | Iframes Falah Mobile `/wallet` |
+| `[souq_marketplace]` | /souq | Iframes Falah Mobile `/souq` |
+| `[falah_dashboard]` | /dashboard | Auto-injected if dashboard page is empty |
+
+## Deploying Falah Mobile (required for nur/wallet/souq)
+
+Run from the falah-os-ce directory:
+
+```bash
+bash deploy-falah-mobile.sh 13.140.161.244 root
+```
+
+Then add this to the Nginx vhost for falahos.my:
+
+```nginx
+location /mobile {
+    proxy_pass         http://127.0.0.1:4013;
+    proxy_set_header   Host $host;
+    proxy_set_header   X-Real-IP $remote_addr;
+    proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
+    proxy_set_header   X-Forwarded-Proto $scheme;
+}
+```
+
+Update **Settings → Falah Shortcodes → Falah Mobile URL** to `https://falahos.my/mobile`.
+
+## What each standalone feature uses
+
+- **Prayer Times** — [Aladhan API](https://aladhan.com/prayer-times-api) (free, no auth)
+- **Daily Verse** — [AlQuran.cloud API](https://alquran.cloud/api) (free, no auth)
+- **Dhikr Counter** — browser localStorage (no network call)
+- **Qibla Compass** — browser Geolocation + DeviceOrientation APIs (no network call)

wordpress-plugins/falah-shortcodes/assets/falah-shortcodes.css

@@ -0,0 +1,253 @@
+/* Falah Shortcodes — Design System */
+:root {
+  --falah-green: #1a7a4a;
+  --falah-green-light: #2da065;
+  --falah-gold: #c9a84c;
+  --falah-gold-light: #e6c97a;
+  --falah-surface: #f8f6f0;
+  --falah-surface-dark: #1c1f2e;
+  --falah-text: #1a1a2e;
+  --falah-text-muted: #5a6070;
+  --falah-border: rgba(0,0,0,0.08);
+  --falah-radius: 16px;
+  --falah-shadow: 0 4px 24px rgba(0,0,0,0.08);
+  --falah-shadow-lg: 0 8px 40px rgba(0,0,0,0.12);
+  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+/* ── Base widget ──────────────────────────────────────────────────────────── */
+.falah-widget {
+  background: #fff;
+  border-radius: var(--falah-radius);
+  box-shadow: var(--falah-shadow);
+  overflow: hidden;
+  margin: 24px 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  color: var(--falah-text);
+}
+
+.falah-widget-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 20px 24px 16px;
+  border-bottom: 1px solid var(--falah-border);
+  background: linear-gradient(135deg, var(--falah-green) 0%, #145c38 100%);
+  color: #fff;
+}
+.falah-widget-header h3 {
+  margin: 0;
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: #fff;
+  flex: 1;
+}
+.falah-widget-header .falah-location {
+  font-size: 0.8rem;
+  opacity: 0.8;
+}
+.falah-icon { font-size: 1.4rem; }
+
+/* ── Spinner ──────────────────────────────────────────────────────────────── */
+.falah-spinner {
+  width: 32px; height: 32px;
+  border: 3px solid var(--falah-border);
+  border-top-color: var(--falah-green);
+  border-radius: 50%;
+  animation: falah-spin 0.7s linear infinite;
+}
+@keyframes falah-spin { to { transform: rotate(360deg); } }
+.falah-loading {
+  display: flex; align-items: center; gap: 12px;
+  justify-content: center; padding: 32px;
+  color: var(--falah-text-muted); font-size: 0.9rem;
+}
+
+/* ── Prayer Times ─────────────────────────────────────────────────────────── */
+.falah-prayer-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
+  gap: 1px;
+  background: var(--falah-border);
+}
+.falah-prayer-item {
+  background: #fff;
+  padding: 16px 12px;
+  text-align: center;
+  transition: background 200ms;
+}
+.falah-prayer-item.active {
+  background: linear-gradient(135deg, #e8f5ee, #f0faf4);
+}
+.falah-prayer-item.active .falah-prayer-name { color: var(--falah-green); font-weight: 700; }
+.falah-prayer-name { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--falah-text-muted); margin-bottom: 6px; }
+.falah-prayer-time { font-size: 1.15rem; font-weight: 600; font-variant-numeric: tabular-nums; }
+.falah-prayer-item.active .falah-prayer-time { color: var(--falah-green); }
+.falah-next-prayer {
+  padding: 12px 24px;
+  font-size: 0.85rem;
+  color: var(--falah-green);
+  font-weight: 500;
+  text-align: center;
+}
+.falah-hijri {
+  padding: 0 24px 16px;
+  font-size: 0.8rem;
+  color: var(--falah-text-muted);
+  text-align: center;
+}
+
+/* ── Dhikr Counter ────────────────────────────────────────────────────────── */
+.falah-dhikr-selector {
+  display: flex; flex-wrap: wrap; gap: 8px;
+  padding: 16px 20px;
+}
+.falah-dhikr-btn {
+  padding: 6px 14px; border-radius: 20px;
+  border: 1.5px solid var(--falah-border);
+  background: var(--falah-surface); cursor: pointer;
+  font-size: 0.82rem; color: var(--falah-text-muted);
+  transition: all 150ms;
+}
+.falah-dhikr-btn.active, .falah-dhikr-btn:hover {
+  background: var(--falah-green); color: #fff; border-color: var(--falah-green);
+}
+.falah-dhikr-display { text-align: center; padding: 8px 20px 4px; }
+.falah-dhikr-arabic { font-size: 2rem; font-family: 'Scheherazade New', 'KFGQPC Uthmanic Script HAFS', serif; direction: rtl; line-height: 1.6; color: var(--falah-text); }
+.falah-dhikr-meaning { font-size: 0.85rem; color: var(--falah-text-muted); margin-top: 4px; }
+.falah-counter-circle {
+  position: relative; width: 140px; height: 140px;
+  margin: 16px auto 4px;
+}
+.falah-counter-circle svg { transform: rotate(-90deg); }
+.falah-ring-bg { fill: none; stroke: var(--falah-border); stroke-width: 8; }
+.falah-ring-progress {
+  fill: none; stroke: var(--falah-green); stroke-width: 8;
+  stroke-linecap: round;
+  stroke-dasharray: 314;
+  stroke-dashoffset: 314;
+  transition: stroke-dashoffset 300ms var(--ease-out-expo);
+}
+.falah-counter-number {
+  position: absolute; inset: 0;
+  display: flex; align-items: center; justify-content: center;
+  font-size: 2.2rem; font-weight: 700; color: var(--falah-text);
+  font-variant-numeric: tabular-nums;
+}
+.falah-counter-target { text-align: center; color: var(--falah-text-muted); font-size: 0.9rem; margin-bottom: 16px; }
+.falah-counter-actions { display: flex; gap: 12px; justify-content: center; padding: 0 20px 16px; }
+.falah-btn-tap {
+  flex: 1; max-width: 160px;
+  padding: 14px 24px;
+  background: var(--falah-green); color: #fff;
+  border: none; border-radius: 12px; cursor: pointer;
+  font-size: 1rem; font-weight: 600;
+  box-shadow: 0 4px 14px rgba(26,122,74,0.3);
+  transition: transform 80ms, box-shadow 150ms;
+  user-select: none; -webkit-tap-highlight-color: transparent;
+}
+.falah-btn-tap:active { transform: scale(0.95); box-shadow: none; }
+.falah-btn-reset {
+  padding: 14px 20px; background: var(--falah-surface);
+  color: var(--falah-text-muted); border: 1.5px solid var(--falah-border);
+  border-radius: 12px; cursor: pointer; font-size: 0.9rem;
+  transition: background 150ms;
+}
+.falah-btn-reset:hover { background: #fee2e2; color: #dc2626; border-color: #fecaca; }
+.falah-session-total { text-align: center; padding: 0 20px 16px; font-size: 0.8rem; color: var(--falah-text-muted); min-height: 20px; }
+
+/* ── Qibla Compass ────────────────────────────────────────────────────────── */
+.falah-qibla-status { padding: 32px; text-align: center; }
+.falah-btn-locate {
+  padding: 12px 28px; background: var(--falah-green); color: #fff;
+  border: none; border-radius: 12px; cursor: pointer; font-size: 1rem;
+  box-shadow: 0 4px 14px rgba(26,122,74,0.3); transition: transform 80ms;
+}
+.falah-btn-locate:active { transform: scale(0.97); }
+.falah-qibla-display { padding: 20px; }
+.falah-compass-wrap { display: flex; justify-content: center; margin-bottom: 16px; }
+.falah-compass {
+  position: relative; width: 180px; height: 180px;
+  border-radius: 50%; background: radial-gradient(circle at 40% 35%, #f0f4ff, #e8ecf8);
+  box-shadow: 0 0 0 4px var(--falah-border), var(--falah-shadow-lg);
+  display: flex; align-items: center; justify-content: center;
+}
+.falah-compass-rose { position: absolute; inset: 0; }
+.falah-dir {
+  position: absolute; font-size: 0.75rem; font-weight: 700; color: var(--falah-text-muted);
+}
+.falah-dir.n { top: 8px; left: 50%; transform: translateX(-50%); }
+.falah-dir.s { bottom: 8px; left: 50%; transform: translateX(-50%); }
+.falah-dir.e { right: 10px; top: 50%; transform: translateY(-50%); }
+.falah-dir.w { left: 10px; top: 50%; transform: translateY(-50%); }
+.falah-needle-kaaba {
+  font-size: 2rem; transition: transform 0.3s ease-out;
+  transform-origin: center;
+}
+.falah-qibla-info { text-align: center; color: var(--falah-text-muted); font-size: 0.9rem; }
+#falah-qibla-angle { font-size: 1.2rem; font-weight: 600; color: var(--falah-green); margin-bottom: 4px; }
+
+/* ── Daily Verse ──────────────────────────────────────────────────────────── */
+.falah-verse-loading { display: flex; justify-content: center; padding: 32px; }
+.falah-verse-content { padding: 24px; }
+.falah-verse-arabic {
+  font-family: 'Scheherazade New', 'KFGQPC Uthmanic Script HAFS', serif;
+  font-size: 1.5rem; line-height: 2; text-align: right;
+  color: var(--falah-text); margin-bottom: 16px;
+  padding-bottom: 16px; border-bottom: 1px solid var(--falah-border);
+}
+.falah-verse-translation { font-size: 1rem; line-height: 1.7; color: var(--falah-text); font-style: italic; }
+.falah-verse-ref { margin-top: 12px; font-size: 0.8rem; color: var(--falah-green); font-weight: 600; }
+
+/* ── Iframe Widget ────────────────────────────────────────────────────────── */
+.falah-iframe-container { position: relative; height: 600px; }
+.falah-iframe {
+  width: 100%; height: 100%; border: none; display: block;
+  position: relative; z-index: 2;
+}
+.falah-iframe-fallback {
+  position: absolute; inset: 0; z-index: 1;
+  display: flex; flex-direction: column; align-items: center; justify-content: center;
+  gap: 12px; background: var(--falah-surface); color: var(--falah-text-muted);
+}
+.falah-open-link {
+  color: var(--falah-green); text-decoration: none; font-weight: 500; font-size: 0.9rem;
+}
+
+/* ── Dashboard ────────────────────────────────────────────────────────────── */
+.falah-dashboard { padding: 4px 0; }
+.falah-dashboard-header { margin-bottom: 24px; }
+.falah-dashboard-header h2 { font-size: 1.6rem; font-weight: 700; margin: 0 0 4px; }
+.falah-dashboard-date { color: var(--falah-text-muted); margin: 0; font-size: 0.9rem; }
+.falah-dashboard-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 16px; margin-bottom: 28px;
+}
+.falah-dash-card {
+  background: #fff; border-radius: var(--falah-radius);
+  box-shadow: var(--falah-shadow); padding: 20px;
+  display: flex; gap: 16px; align-items: flex-start;
+  border-left: 4px solid var(--falah-green);
+}
+.falah-dash-card-icon { font-size: 1.8rem; flex-shrink: 0; }
+.falah-dash-card-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--falah-text-muted); margin-bottom: 6px; }
+.falah-dash-card-value { font-size: 1.1rem; font-weight: 600; line-height: 1.3; }
+.falah-dash-card-sub { font-size: 0.8rem; color: var(--falah-text-muted); margin-top: 2px; }
+.falah-dashboard-links {
+  display: flex; flex-wrap: wrap; gap: 12px;
+}
+.falah-dash-link {
+  padding: 10px 18px; background: #fff; border-radius: 10px;
+  box-shadow: var(--falah-shadow); text-decoration: none;
+  color: var(--falah-text); font-size: 0.9rem; font-weight: 500;
+  transition: box-shadow 150ms, transform 150ms;
+  border: 1px solid var(--falah-border);
+}
+.falah-dash-link:hover { box-shadow: var(--falah-shadow-lg); transform: translateY(-2px); color: var(--falah-green); }
+
+@media (max-width: 600px) {
+  .falah-prayer-grid { grid-template-columns: repeat(3, 1fr); }
+  .falah-dashboard-grid { grid-template-columns: 1fr 1fr; }
+  .falah-iframe-container { height: 500px; }
+}

wordpress-plugins/falah-shortcodes/assets/falah-shortcodes.js

@@ -0,0 +1,276 @@
+/* Falah Shortcodes — Client Logic */
+(function () {
+  'use strict';
+
+  const cfg = window.FalahSC || {};
+
+  // ── Prayer Times ─────────────────────────────────────────────────────────
+
+  const prayerWidget = document.querySelector('.falah-prayer-times');
+  if (prayerWidget) {
+    const city    = prayerWidget.dataset.city    || cfg.prayerCity    || 'Kuala Lumpur';
+    const country = prayerWidget.dataset.country || cfg.prayerCountry || 'Malaysia';
+    const today   = new Date();
+    const dd = String(today.getDate()).padStart(2, '0');
+    const mm = String(today.getMonth() + 1).padStart(2, '0');
+    const yyyy = today.getFullYear();
+
+    fetch(`https://api.aladhan.com/v1/timingsByCity/${dd}-${mm}-${yyyy}?city=${encodeURIComponent(city)}&country=${encodeURIComponent(country)}&method=3`)
+      .then(r => r.json())
+      .then(data => {
+        if (data.code !== 200) throw new Error('API error');
+        const t = data.data.timings;
+        const h = data.data.date.hijri;
+
+        const prayers = [
+          { key: 'Fajr',    label: 'Fajr'    },
+          { key: 'Sunrise', label: 'Sunrise' },
+          { key: 'Dhuhr',   label: 'Dhuhr'   },
+          { key: 'Asr',     label: 'Asr'     },
+          { key: 'Maghrib', label: 'Maghrib' },
+          { key: 'Isha',    label: 'Isha'    },
+        ];
+
+        const now      = today.getHours() * 60 + today.getMinutes();
+        const grid     = document.getElementById('falah-prayer-grid');
+        let   nextName = '', nextTime = '';
+
+        grid.innerHTML = prayers.map(p => {
+          const raw   = t[p.key] || '';
+          const parts = raw.split(' ')[0].split(':');
+          const pMin  = parseInt(parts[0], 10) * 60 + parseInt(parts[1], 10);
+          const isNext = !nextName && pMin > now && p.key !== 'Sunrise';
+          if (isNext) { nextName = p.label; nextTime = raw.split(' ')[0]; }
+          return `<div class="falah-prayer-item${isNext ? ' active' : ''}">
+            <div class="falah-prayer-name">${p.label}</div>
+            <div class="falah-prayer-time">${raw.split(' ')[0]}</div>
+          </div>`;
+        }).join('');
+
+        const nextEl = document.getElementById('falah-next-prayer');
+        if (nextEl && nextName) {
+          nextEl.textContent = `⏰ Next: ${nextName} at ${nextTime}`;
+        }
+
+        const hijriEl = document.getElementById('falah-hijri');
+        if (hijriEl) {
+          hijriEl.textContent = `${h.day} ${h.month.en} ${h.year} AH`;
+        }
+
+        // Also update dashboard
+        updateDashboardPrayer(nextName, nextTime);
+      })
+      .catch(() => {
+        const grid = document.getElementById('falah-prayer-grid');
+        if (grid) grid.innerHTML = '<div class="falah-loading"><span>Unable to load prayer times. Check your connection.</span></div>';
+      });
+  }
+
+  function updateDashboardPrayer(name, time) {
+    const np = document.getElementById('falah-dash-next-prayer');
+    const nt = document.getElementById('falah-dash-next-time');
+    if (np) np.textContent = name || '—';
+    if (nt) nt.textContent = time ? `at ${time}` : '';
+  }
+
+  // ── Daily Verse ──────────────────────────────────────────────────────────
+
+  const verseWidget = document.getElementById('falah-daily-verse');
+  if (verseWidget) {
+    const verseNum = parseInt(verseWidget.dataset.verse, 10) || 1;
+
+    fetch(`https://api.alquran.cloud/v1/ayah/${verseNum}/editions/quran-uthmani,en.asad`)
+      .then(r => r.json())
+      .then(data => {
+        if (data.code !== 200) throw new Error('API error');
+        const arabic  = data.data[0];
+        const english = data.data[1];
+
+        document.getElementById('falah-verse-loading').style.display = 'none';
+        const content = document.getElementById('falah-verse-content');
+        content.style.display = 'block';
+        document.getElementById('falah-verse-arabic').textContent      = arabic.text;
+        document.getElementById('falah-verse-translation').textContent = `"${english.text}"`;
+        document.getElementById('falah-verse-ref').textContent         = `Surah ${arabic.surah.englishName} (${arabic.surah.number}:${arabic.numberInSurah})`;
+
+        // Update dashboard
+        const dv = document.getElementById('falah-dash-verse');
+        if (dv) dv.textContent = `${arabic.surah.englishName} ${arabic.surah.number}:${arabic.numberInSurah}`;
+      })
+      .catch(() => {
+        const loading = document.getElementById('falah-verse-loading');
+        if (loading) loading.innerHTML = '<p style="padding:24px;color:#666">Unable to load verse. Please try again.</p>';
+      });
+  }
+
+  // ── Dhikr Counter ────────────────────────────────────────────────────────
+
+  const dhikrWidget = document.getElementById('falah-dhikr-widget');
+  if (dhikrWidget) {
+    let list = [];
+    try { list = JSON.parse(dhikrWidget.dataset.list || '[]'); } catch (e) {}
+
+    const arabicMap = {
+      'SubhanAllah':       'سُبْحَانَ اللَّهِ',
+      'Alhamdulillah':     'الْحَمْدُ لِلَّهِ',
+      'Allahu Akbar':      'اللَّهُ أَكْبَرُ',
+      'La ilaha illallah': 'لَا إِلَٰهَ إِلَّا اللَّهُ',
+      'Astaghfirullah':    'أَسْتَغْفِرُ اللَّهَ',
+    };
+
+    const storageKey = 'falah_dhikr_' + new Date().toDateString();
+    let state = JSON.parse(localStorage.getItem(storageKey) || '{"idx":0,"counts":[0,0,0,0,0],"total":0}');
+
+    const ring       = document.getElementById('falah-ring');
+    const numEl      = document.getElementById('falah-counter-number');
+    const targetEl   = document.getElementById('falah-counter-target');
+    const arabicEl   = document.getElementById('falah-dhikr-arabic');
+    const meaningEl  = document.getElementById('falah-dhikr-meaning');
+    const sessionEl  = document.getElementById('falah-session-total');
+    const tapBtn     = document.getElementById('falah-btn-tap');
+    const resetBtn   = document.getElementById('falah-btn-reset');
+    const circumference = 2 * Math.PI * 50; // r=50
+
+    function render() {
+      const d   = list[state.idx];
+      const cnt = state.counts[state.idx] || 0;
+      const tgt = d ? d.target : 33;
+      const pct = Math.min(cnt / tgt, 1);
+
+      numEl.textContent     = cnt;
+      targetEl.textContent  = `/ ${tgt}`;
+      arabicEl.textContent  = (d && arabicMap[d.text]) || '';
+      meaningEl.textContent = (d && d.meaning) || '';
+      ring.style.strokeDashoffset = circumference * (1 - pct);
+
+      const total = state.counts.reduce((a, b) => a + b, 0);
+      sessionEl.textContent = total > 0 ? `Session total: ${total} counts` : '';
+
+      // Dashboard
+      const dd = document.getElementById('falah-dash-dhikr-count');
+      if (dd) dd.textContent = total;
+    }
+
+    function save() {
+      localStorage.setItem(storageKey, JSON.stringify(state));
+    }
+
+    // Button handlers
+    document.querySelectorAll('.falah-dhikr-btn').forEach(btn => {
+      btn.addEventListener('click', () => {
+        state.idx = parseInt(btn.dataset.index, 10);
+        document.querySelectorAll('.falah-dhikr-btn').forEach(b => b.classList.remove('active'));
+        btn.classList.add('active');
+        save();
+        render();
+      });
+    });
+
+    tapBtn.addEventListener('click', () => {
+      const d   = list[state.idx];
+      const tgt = d ? d.target : 33;
+      state.counts[state.idx] = (state.counts[state.idx] || 0) + 1;
+      if (state.counts[state.idx] === tgt) {
+        setTimeout(() => {
+          // Flash completion
+          numEl.style.color = '#1a7a4a';
+          setTimeout(() => { numEl.style.color = ''; }, 1000);
+        }, 10);
+      }
+      save();
+      render();
+    });
+
+    resetBtn.addEventListener('click', () => {
+      state.counts[state.idx] = 0;
+      save();
+      render();
+    });
+
+    ring.style.strokeDasharray = circumference;
+    render();
+  }
+
+  // ── Qibla Compass ────────────────────────────────────────────────────────
+
+  const qiblaBtn = document.getElementById('falah-qibla-locate');
+  if (qiblaBtn) {
+    qiblaBtn.addEventListener('click', () => {
+      if (!navigator.geolocation) {
+        qiblaBtn.textContent = '⚠️ Geolocation not supported';
+        return;
+      }
+      qiblaBtn.textContent = '📍 Getting location…';
+      qiblaBtn.disabled = true;
+
+      navigator.geolocation.getCurrentPosition(pos => {
+        const lat = pos.coords.latitude;
+        const lon = pos.coords.longitude;
+        const qiblaAngle = calcQibla(lat, lon);
+
+        document.getElementById('falah-qibla-status').style.display  = 'none';
+        document.getElementById('falah-qibla-display').style.display = 'block';
+        document.getElementById('falah-qibla-angle').textContent    = `Qibla: ${Math.round(qiblaAngle)}° from North`;
+        document.getElementById('falah-qibla-location').textContent  = `Your location: ${lat.toFixed(4)}°, ${lon.toFixed(4)}°`;
+
+        const needle = document.getElementById('falah-qibla-needle');
+
+        // Try device orientation
+        if (window.DeviceOrientationEvent && typeof DeviceOrientationEvent.requestPermission === 'function') {
+          DeviceOrientationEvent.requestPermission().then(perm => {
+            if (perm === 'granted') listenOrientation(needle, qiblaAngle);
+          });
+        } else if (window.DeviceOrientationEvent) {
+          listenOrientation(needle, qiblaAngle);
+        } else {
+          needle.style.transform = `rotate(${qiblaAngle}deg)`;
+        }
+      }, () => {
+        qiblaBtn.textContent = '⚠️ Location denied. Enable location access and try again.';
+        qiblaBtn.disabled = false;
+      });
+    });
+  }
+
+  function listenOrientation(needle, qiblaAngle) {
+    window.addEventListener('deviceorientationabsolute', e => {
+      const heading = e.alpha ? (360 - e.alpha) : 0;
+      needle.style.transform = `rotate(${qiblaAngle - heading}deg)`;
+    }, true);
+  }
+
+  function calcQibla(lat, lon) {
+    // Kaaba coordinates
+    const kLat = 21.3891;
+    const kLon = 39.8579;
+    const φ1 = lat * Math.PI / 180;
+    const φ2 = kLat * Math.PI / 180;
+    const Δλ = (kLon - lon) * Math.PI / 180;
+    const y   = Math.sin(Δλ) * Math.cos(φ2);
+    const x   = Math.cos(φ1) * Math.sin(φ2) - Math.sin(φ1) * Math.cos(φ2) * Math.cos(Δλ);
+    const θ   = Math.atan2(y, x);
+    return ((θ * 180 / Math.PI) + 360) % 360;
+  }
+
+  // ── Dashboard ─────────────────────────────────────────────────────────────
+
+  const dashDate = document.getElementById('falah-dash-date');
+  if (dashDate) {
+    const opts = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
+    dashDate.textContent = new Date().toLocaleDateString('en-GB', opts);
+  }
+
+  // Hijri date on dashboard
+  fetch('https://api.aladhan.com/v1/gToH?date=' + new Date().toLocaleDateString('en-GB', { day: '2-digit', month: '2-digit', year: 'numeric' }))
+    .then(r => r.json())
+    .then(data => {
+      const h = data?.data?.hijri;
+      if (!h) return;
+      const dashHijri = document.getElementById('falah-dash-hijri');
+      if (dashHijri) dashHijri.textContent = `${h.day} ${h.month.en} ${h.year} AH`;
+      const hijriEl = document.getElementById('falah-hijri');
+      if (hijriEl) hijriEl.textContent = `${h.day} ${h.month.en} ${h.year} AH`;
+    })
+    .catch(() => {});
+
+})();

wordpress-plugins/falah-shortcodes/falah-shortcodes.php

@@ -0,0 +1,393 @@
+<?php
+/**
+ * Plugin Name: Falah Shortcodes
+ * Description: Implements [prayer_times], [dhikr_counter], [qibla_compass], [daily_verse], [nur_ai_chat], [falah_wallet], [souq_marketplace] for ummah.falahos.my
+ * Version: 1.0.0
+ * Author: Falah OS Team
+ * License: MIT
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+    exit;
+}
+
+define( 'FALAH_SC_VERSION', '1.0.0' );
+define( 'FALAH_SC_PATH', plugin_dir_path( __FILE__ ) );
+define( 'FALAH_SC_URL', plugin_dir_url( __FILE__ ) );
+
+// ─── Admin settings ───────────────────────────────────────────────────────────
+
+add_action( 'admin_menu', function () {
+    add_options_page(
+        'Falah Shortcodes',
+        'Falah Shortcodes',
+        'manage_options',
+        'falah-shortcodes',
+        'falah_sc_settings_page'
+    );
+} );
+
+add_action( 'admin_init', function () {
+    register_setting( 'falah_sc_options', 'falah_mobile_url', [
+        'type'              => 'string',
+        'sanitize_callback' => 'esc_url_raw',
+        'default'           => 'https://falahos.my/mobile',
+    ] );
+    register_setting( 'falah_sc_options', 'falah_prayer_city', [
+        'type'              => 'string',
+        'sanitize_callback' => 'sanitize_text_field',
+        'default'           => 'Kuala Lumpur',
+    ] );
+    register_setting( 'falah_sc_options', 'falah_prayer_country', [
+        'type'              => 'string',
+        'sanitize_callback' => 'sanitize_text_field',
+        'default'           => 'Malaysia',
+    ] );
+} );
+
+function falah_sc_settings_page() {
+    ?>
+    <div class="wrap">
+        <h1>Falah Shortcodes Settings</h1>
+        <form method="post" action="options.php">
+            <?php settings_fields( 'falah_sc_options' ); ?>
+            <table class="form-table">
+                <tr>
+                    <th>Falah Mobile URL</th>
+                    <td>
+                        <input type="url" name="falah_mobile_url" value="<?php echo esc_attr( get_option( 'falah_mobile_url', 'https://falahos.my/mobile' ) ); ?>" class="regular-text" />
+                        <p class="description">Base URL for Falah Mobile app (used by [nur_ai_chat], [falah_wallet], [souq_marketplace])</p>
+                    </td>
+                </tr>
+                <tr>
+                    <th>Default Prayer City</th>
+                    <td><input type="text" name="falah_prayer_city" value="<?php echo esc_attr( get_option( 'falah_prayer_city', 'Kuala Lumpur' ) ); ?>" class="regular-text" /></td>
+                </tr>
+                <tr>
+                    <th>Default Prayer Country</th>
+                    <td><input type="text" name="falah_prayer_country" value="<?php echo esc_attr( get_option( 'falah_prayer_country', 'Malaysia' ) ); ?>" class="regular-text" /></td>
+                </tr>
+            </table>
+            <?php submit_button(); ?>
+        </form>
+    </div>
+    <?php
+}
+
+// ─── Enqueue assets ───────────────────────────────────────────────────────────
+
+add_action( 'wp_enqueue_scripts', function () {
+    wp_register_style(
+        'falah-sc-styles',
+        FALAH_SC_URL . 'assets/falah-shortcodes.css',
+        [],
+        FALAH_SC_VERSION
+    );
+    wp_register_script(
+        'falah-sc-scripts',
+        FALAH_SC_URL . 'assets/falah-shortcodes.js',
+        [],
+        FALAH_SC_VERSION,
+        true
+    );
+    wp_localize_script( 'falah-sc-scripts', 'FalahSC', [
+        'ajaxUrl'    => admin_url( 'admin-ajax.php' ),
+        'mobileUrl'  => esc_url( get_option( 'falah_mobile_url', 'https://falahos.my/mobile' ) ),
+        'prayerCity' => esc_js( get_option( 'falah_prayer_city', 'Kuala Lumpur' ) ),
+        'prayerCountry' => esc_js( get_option( 'falah_prayer_country', 'Malaysia' ) ),
+        'nonce'      => wp_create_nonce( 'falah_sc_nonce' ),
+    ] );
+} );
+
+function falah_sc_enqueue() {
+    wp_enqueue_style( 'falah-sc-styles' );
+    wp_enqueue_script( 'falah-sc-scripts' );
+}
+
+// ─── [prayer_times] ───────────────────────────────────────────────────────────
+
+add_shortcode( 'prayer_times', function ( $atts ) {
+    falah_sc_enqueue();
+    $atts = shortcode_atts( [
+        'city'    => get_option( 'falah_prayer_city', 'Kuala Lumpur' ),
+        'country' => get_option( 'falah_prayer_country', 'Malaysia' ),
+    ], $atts );
+
+    $city    = esc_attr( $atts['city'] );
+    $country = esc_attr( $atts['country'] );
+
+    ob_start();
+    ?>
+    <div class="falah-widget falah-prayer-times" data-city="<?php echo $city; ?>" data-country="<?php echo $country; ?>">
+        <div class="falah-widget-header">
+            <span class="falah-icon">🕌</span>
+            <h3>Prayer Times</h3>
+            <span class="falah-location"><?php echo $city; ?>, <?php echo $country; ?></span>
+        </div>
+        <div class="falah-prayer-grid" id="falah-prayer-grid">
+            <div class="falah-loading">
+                <div class="falah-spinner"></div>
+                <span>Fetching prayer times…</span>
+            </div>
+        </div>
+        <div class="falah-next-prayer" id="falah-next-prayer"></div>
+        <div class="falah-hijri" id="falah-hijri"></div>
+    </div>
+    <?php
+    return ob_get_clean();
+} );
+
+// ─── [dhikr_counter] ──────────────────────────────────────────────────────────
+
+add_shortcode( 'dhikr_counter', function ( $atts ) {
+    falah_sc_enqueue();
+    $atts = shortcode_atts( [
+        'target' => 33,
+        'dhikr'  => 'SubhanAllah',
+    ], $atts );
+
+    $target = intval( $atts['target'] );
+    $dhikr  = esc_html( $atts['dhikr'] );
+
+    $dhikr_list = [
+        [ 'text' => 'SubhanAllah', 'meaning' => 'Glory be to Allah', 'target' => 33 ],
+        [ 'text' => 'Alhamdulillah', 'meaning' => 'Praise be to Allah', 'target' => 33 ],
+        [ 'text' => 'Allahu Akbar', 'meaning' => 'Allah is the Greatest', 'target' => 34 ],
+        [ 'text' => 'La ilaha illallah', 'meaning' => 'There is no god but Allah', 'target' => 100 ],
+        [ 'text' => 'Astaghfirullah', 'meaning' => 'I seek forgiveness from Allah', 'target' => 100 ],
+    ];
+
+    $list_json = json_encode( $dhikr_list );
+
+    ob_start();
+    ?>
+    <div class="falah-widget falah-dhikr-counter" id="falah-dhikr-widget" data-list='<?php echo esc_attr( $list_json ); ?>'>
+        <div class="falah-widget-header">
+            <span class="falah-icon">📿</span>
+            <h3>Dhikr Counter</h3>
+        </div>
+        <div class="falah-dhikr-selector" id="falah-dhikr-selector">
+            <?php foreach ( $dhikr_list as $i => $d ) : ?>
+            <button class="falah-dhikr-btn <?php echo $i === 0 ? 'active' : ''; ?>" data-index="<?php echo $i; ?>">
+                <?php echo esc_html( $d['text'] ); ?>
+            </button>
+            <?php endforeach; ?>
+        </div>
+        <div class="falah-dhikr-display">
+            <div class="falah-dhikr-arabic" id="falah-dhikr-arabic">سُبْحَانَ اللَّهِ</div>
+            <div class="falah-dhikr-meaning" id="falah-dhikr-meaning">Glory be to Allah</div>
+        </div>
+        <div class="falah-counter-circle" id="falah-counter-circle">
+            <svg viewBox="0 0 120 120">
+                <circle class="falah-ring-bg" cx="60" cy="60" r="50"/>
+                <circle class="falah-ring-progress" id="falah-ring" cx="60" cy="60" r="50"/>
+            </svg>
+            <div class="falah-counter-number" id="falah-counter-number">0</div>
+        </div>
+        <div class="falah-counter-target" id="falah-counter-target">/ 33</div>
+        <div class="falah-counter-actions">
+            <button class="falah-btn-tap" id="falah-btn-tap">Count</button>
+            <button class="falah-btn-reset" id="falah-btn-reset">Reset</button>
+        </div>
+        <div class="falah-session-total" id="falah-session-total"></div>
+    </div>
+    <?php
+    return ob_get_clean();
+} );
+
+// ─── [qibla_compass] ──────────────────────────────────────────────────────────
+
+add_shortcode( 'qibla_compass', function ( $atts ) {
+    falah_sc_enqueue();
+    ob_start();
+    ?>
+    <div class="falah-widget falah-qibla" id="falah-qibla-widget">
+        <div class="falah-widget-header">
+            <span class="falah-icon">🧭</span>
+            <h3>Qibla Compass</h3>
+        </div>
+        <div id="falah-qibla-status" class="falah-qibla-status">
+            <button class="falah-btn-locate" id="falah-qibla-locate">
+                📍 Find My Qibla
+            </button>
+        </div>
+        <div id="falah-qibla-display" class="falah-qibla-display" style="display:none">
+            <div class="falah-compass-wrap">
+                <div class="falah-compass" id="falah-compass">
+                    <div class="falah-compass-rose">
+                        <span class="falah-dir n">N</span>
+                        <span class="falah-dir e">E</span>
+                        <span class="falah-dir s">S</span>
+                        <span class="falah-dir w">W</span>
+                    </div>
+                    <div class="falah-needle-kaaba" id="falah-qibla-needle">🕋</div>
+                </div>
+            </div>
+            <div class="falah-qibla-info">
+                <div id="falah-qibla-angle"></div>
+                <div id="falah-qibla-location"></div>
+            </div>
+        </div>
+    </div>
+    <?php
+    return ob_get_clean();
+} );
+
+// ─── [daily_verse] ────────────────────────────────────────────────────────────
+
+add_shortcode( 'daily_verse', function ( $atts ) {
+    falah_sc_enqueue();
+    $atts = shortcode_atts( [ 'surah' => 0, 'ayah' => 0 ], $atts );
+
+    // Deterministic daily verse: use day-of-year as seed (6236 ayahs total)
+    $day_seed = intval( date( 'z' ) ) + intval( date( 'Y' ) ) * 365;
+    $verse_num = ( $day_seed % 6236 ) + 1;
+
+    $cache_key = 'falah_verse_' . $verse_num;
+    $cached    = get_transient( $cache_key );
+
+    if ( $cached !== false ) {
+        return $cached;
+    }
+
+    ob_start();
+    ?>
+    <div class="falah-widget falah-daily-verse" id="falah-daily-verse" data-verse="<?php echo intval( $verse_num ); ?>">
+        <div class="falah-widget-header">
+            <span class="falah-icon">📖</span>
+            <h3>Verse of the Day</h3>
+        </div>
+        <div class="falah-verse-loading" id="falah-verse-loading">
+            <div class="falah-spinner"></div>
+        </div>
+        <div class="falah-verse-content" id="falah-verse-content" style="display:none">
+            <p class="falah-verse-arabic" id="falah-verse-arabic" dir="rtl"></p>
+            <p class="falah-verse-translation" id="falah-verse-translation"></p>
+            <p class="falah-verse-ref" id="falah-verse-ref"></p>
+        </div>
+    </div>
+    <?php
+    $html = ob_get_clean();
+    set_transient( $cache_key, $html, DAY_IN_SECONDS );
+    return $html;
+} );
+
+// ─── Iframe helper ────────────────────────────────────────────────────────────
+
+function falah_iframe_widget( $title, $icon, $path, $fallback_msg ) {
+    falah_sc_enqueue();
+    $mobile_url = rtrim( get_option( 'falah_mobile_url', 'https://falahos.my/mobile' ), '/' );
+    $src        = esc_url( $mobile_url . $path );
+
+    ob_start();
+    ?>
+    <div class="falah-widget falah-iframe-widget">
+        <div class="falah-widget-header">
+            <span class="falah-icon"><?php echo esc_html( $icon ); ?></span>
+            <h3><?php echo esc_html( $title ); ?></h3>
+        </div>
+        <div class="falah-iframe-container">
+            <iframe
+                src="<?php echo $src; ?>"
+                title="<?php echo esc_attr( $title ); ?>"
+                loading="lazy"
+                allow="geolocation; microphone"
+                class="falah-iframe"
+                onload="this.previousElementSibling.style.display='none'"
+            ></iframe>
+            <div class="falah-iframe-fallback">
+                <div class="falah-spinner"></div>
+                <p><?php echo esc_html( $fallback_msg ); ?></p>
+                <a href="<?php echo $src; ?>" target="_blank" class="falah-open-link">Open in new tab →</a>
+            </div>
+        </div>
+    </div>
+    <?php
+    return ob_get_clean();
+}
+
+// ─── [nur_ai_chat] ────────────────────────────────────────────────────────────
+
+add_shortcode( 'nur_ai_chat', function ( $atts ) {
+    return falah_iframe_widget( 'Nur AI Coach', '✨', '/nur', 'Loading Nur AI Coach…' );
+} );
+
+// ─── [falah_wallet] ───────────────────────────────────────────────────────────
+
+add_shortcode( 'falah_wallet', function ( $atts ) {
+    return falah_iframe_widget( 'Falah Wallet', '💰', '/wallet', 'Loading Falah Wallet…' );
+} );
+
+// ─── [souq_marketplace] ───────────────────────────────────────────────────────
+
+add_shortcode( 'souq_marketplace', function ( $atts ) {
+    return falah_iframe_widget( 'Souq Marketplace', '🛒', '/souq', 'Loading Souq Marketplace…' );
+} );
+
+// ─── Dashboard page content (shortcode + direct page fill) ───────────────────
+
+add_shortcode( 'falah_dashboard', function ( $atts ) {
+    falah_sc_enqueue();
+    ob_start();
+    ?>
+    <div class="falah-dashboard" id="falah-dashboard">
+        <div class="falah-dashboard-header">
+            <h2>Welcome back 👋</h2>
+            <p class="falah-dashboard-date" id="falah-dash-date"></p>
+        </div>
+        <div class="falah-dashboard-grid">
+            <div class="falah-dash-card falah-dash-prayer">
+                <div class="falah-dash-card-icon">🕌</div>
+                <div class="falah-dash-card-body">
+                    <div class="falah-dash-card-label">Next Prayer</div>
+                    <div class="falah-dash-card-value" id="falah-dash-next-prayer">Loading…</div>
+                    <div class="falah-dash-card-sub" id="falah-dash-next-time"></div>
+                </div>
+            </div>
+            <div class="falah-dash-card falah-dash-verse">
+                <div class="falah-dash-card-icon">📖</div>
+                <div class="falah-dash-card-body">
+                    <div class="falah-dash-card-label">Today's Verse</div>
+                    <div class="falah-dash-card-value" id="falah-dash-verse">Loading…</div>
+                </div>
+            </div>
+            <div class="falah-dash-card falah-dash-dhikr">
+                <div class="falah-dash-card-icon">📿</div>
+                <div class="falah-dash-card-body">
+                    <div class="falah-dash-card-label">Daily Dhikr</div>
+                    <div class="falah-dash-card-value" id="falah-dash-dhikr-count">0</div>
+                    <div class="falah-dash-card-sub">counts today</div>
+                </div>
+            </div>
+            <div class="falah-dash-card falah-dash-hijri">
+                <div class="falah-dash-card-icon">🗓️</div>
+                <div class="falah-dash-card-body">
+                    <div class="falah-dash-card-label">Hijri Date</div>
+                    <div class="falah-dash-card-value" id="falah-dash-hijri">Loading…</div>
+                </div>
+            </div>
+        </div>
+        <div class="falah-dashboard-links">
+            <a href="/nur" class="falah-dash-link">✨ Nur AI Coach</a>
+            <a href="/tools" class="falah-dash-link">🛠️ Islamic Tools</a>
+            <a href="/wallet" class="falah-dash-link">💰 Wallet</a>
+            <a href="/courses" class="falah-dash-link">🎓 Courses</a>
+            <a href="/forum" class="falah-dash-link">💬 Forum</a>
+            <a href="/souq" class="falah-dash-link">🛒 Souq</a>
+        </div>
+    </div>
+    <?php
+    return ob_get_clean();
+} );
+
+// Auto-inject dashboard content into the Dashboard page if it's still empty
+add_filter( 'the_content', function ( $content ) {
+    if ( is_page() ) {
+        global $post;
+        $slug = $post->post_name ?? '';
+        if ( $slug === 'dashboard' && trim( strip_tags( $content ) ) === '' ) {
+            return do_shortcode( '[falah_dashboard]' );
+        }
+    }
+    return $content;
+} );