feat(android): Google OAuth via system browser + deep link for Android

Background: Google blocks OAuth in embedded WebView (403 disallowed_useragent). Solution: open Google login in the Android system browser, then deep-link back to the Tauri app via custom scheme after callback. Changes: - Tauri: add tauri-plugin-opener + tauri-plugin-deep-link to Cargo.toml - Tauri: register plugins in lib.rs, add capabilities - Web: auth-form.tsx Google button uses openUrl() via @tauri-apps/plugin-opener on Tauri (opens in system browser), falls back to window.location.href - Web: add lib/tauri.ts for isTauri() detection + lazy opens - API: /auth/google accepts ?platform=tauri → encodes into OAuth state param - API: /auth/google/callback decodes state → if tauri, renders HTML page that deep-links back via zeavisedu:// scheme; if web, 302 redirect - Android: patch script adds deep link intent filter for zeavisedu:// scheme Co-Authored-By: Claude <noreply@anthropic.com>
feat(auth): add Google logo SVG to 'Masuk dengan Google' button
2026-06-15 23:49:47 +07:00 · 2026-06-15 23:17:46 +07:00 · 2026-06-15 23:00:30 +07:00 · 2026-06-15 22:38:11 +07:00 · 2026-06-15 22:06:59 +07:00 · 2026-06-15 21:57:12 +07:00
15 changed files with 406 additions and 53 deletions
@@ -136,6 +136,10 @@ jobs:
          rm -rf gen/android
          bun tauri android init

+      - name: Patch AndroidManifest (CAMERA permission)
+        working-directory: apps/tauri
+        run: bash scripts/patch-android-manifest.sh
+
      - name: Build Tauri Android APK
        working-directory: apps/tauri
        env:
@@ -179,6 +179,9 @@ jobs:
            SESSION_SECRET=${{ secrets.SESSION_SECRET }}
            WEB_APP_URL=https://zeavisedu.asepharyana.my.id
            ML_SERVICE_URL=http://zeavis-ml:8000
+            GOOGLE_CLIENT_ID=${{ secrets.GOOGLE_CLIENT_ID }}
+            GOOGLE_CLIENT_SECRET=${{ secrets.GOOGLE_CLIENT_SECRET }}
+            GOOGLE_REDIRECT_URI=https://zeavisedu.asepharyana.my.id/api/v1/auth/google/callback
            ENVEOF
            } > .env

@@ -18,6 +18,86 @@ import {
 import { env } from '../config/env';
 import { authCounter } from '../lib/telemetry';

+// ── Google OAuth Helpers ──────────────────────────────────────────────
+
+interface GoogleTokenResponse {
+  access_token: string;
+  id_token: string;
+}
+
+interface GoogleIdPayload {
+  sub: string;
+  email: string;
+  email_verified: boolean;
+  name: string;
+  picture?: string;
+}
+
+async function exchangeGoogleCode(code: string): Promise<GoogleTokenResponse> {
+  const res = await fetch('https://oauth2.googleapis.com/token', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+    body: new URLSearchParams({
+      code,
+      client_id: env.googleClientId!,
+      client_secret: env.googleClientSecret!,
+      redirect_uri: env.googleRedirectUri!,
+      grant_type: 'authorization_code',
+    }),
+  });
+
+  if (!res.ok) {
+    const err = await res.text();
+    throw new Error(`Google token exchange failed: ${res.status} ${err}`);
+  }
+
+  return res.json() as Promise<GoogleTokenResponse>;
+}
+
+function decodeGoogleIdToken(idToken: string): GoogleIdPayload {
+  const parts = idToken.split('.');
+  if (parts.length !== 3) {
+    throw new Error('Invalid id_token format');
+  }
+  const payload = Buffer.from(parts[1], 'base64url').toString('utf-8');
+  return JSON.parse(payload);
+}
+
+/**
+ * Render a page for the Android system browser that redirects back to the
+ * Tauri app via a custom scheme (zeavisedu://). The app's AndroidManifest
+ * must register an intent filter for this scheme.
+ */
+function renderTauriDeepLinkPage(targetUrl: string): Response {
+  // Rewrite https://... to zeavisedu://... for the custom scheme
+  const deepLink = targetUrl.replace(/^https?:\/\//, 'zeavisedu://');
+  const html = `<!DOCTYPE html>
+<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
+<title>Kembali ke ZeaVis Edu</title></head>
+<body style="font-family:sans-serif;display:flex;align-items:center;justify-content:center;min-height:100vh;margin:0;background:#f0fdf4">
+<div style="text-align:center;padding:2rem">
+<p style="color:#166534;font-size:1.1rem;margin-bottom:1.5rem">Login berhasil!<br>Kembali ke aplikasi...</p>
+<a href="${deepLink.replace(/"/g, '&quot;')}" style="display:inline-block;background:#16a34a;color:white;padding:0.75rem 2rem;border-radius:0.5rem;text-decoration:none;font-weight:600;font-size:1rem">Buka ZeaVis Edu</a>
+<p style="color:#6b7280;font-size:0.8rem;margin-top:1rem">Jika tombol tidak berfungsi, salin URL ini:<br><code style="word-break:break-all;font-size:0.75rem">${deepLink.replace(/</g, '&lt;')}</code></p>
+</div>
+<script>window.location.href=${JSON.stringify(deepLink)};</script>
+</body></html>`;
+  return new Response(html, {
+    status: 200,
+    headers: { 'Content-Type': 'text/html;charset=utf-8' },
+  });
+}
+
+function resolvePlatform(stateRaw: string | undefined): string {
+  try {
+    if (stateRaw) {
+      const parsed = JSON.parse(Buffer.from(stateRaw, 'base64url').toString('utf-8'));
+      return parsed.platform ?? 'web';
+    }
+  } catch { /* ignore */ }
+  return 'web';
+}
+
 function normalizeEmail(email: unknown) {
  return typeof email === 'string' ? email.trim().toLowerCase() : '';
 }
@@ -123,12 +203,15 @@ export const authRoutes = new Elysia({ prefix: '/api/v1/auth' })
    set.headers['Set-Cookie'] = clearSessionCookie(request.headers);
    return { ok: true };
  })
-  .get('/google', ({ set }) => {
+  .get('/google', ({ query, set }) => {
    if (!env.googleOAuthEnabled) {
      set.status = 404;
      return { error: 'Google OAuth is not configured' };
    }

+    const platform = (query as Record<string, string>).platform ?? 'web';
+    const state = Buffer.from(JSON.stringify({ platform })).toString('base64url');
+
    const params = new URLSearchParams({
      client_id: env.googleClientId!,
      redirect_uri: env.googleRedirectUri!,
@@ -136,15 +219,96 @@ export const authRoutes = new Elysia({ prefix: '/api/v1/auth' })
      scope: 'openid email profile',
      access_type: 'offline',
      prompt: 'select_account',
+      state,
    });

-    set.redirect = `https://accounts.google.com/o/oauth2/v2/auth?${params.toString()}`;
+    set.status = 302;
+    set.headers['Location'] = `https://accounts.google.com/o/oauth2/v2/auth?${params.toString()}`;
  })
-  .get('/google/callback', ({ set }) => {
+  .get('/google/callback', async ({ query, set, request }) => {
    if (!env.googleOAuthEnabled) {
      set.status = 404;
      return { error: 'Google OAuth is not configured' };
    }

-    set.redirect = `${env.webAppUrl}/login?oauth=not-implemented`;
+    const q = query as Record<string, string>;
+    const code = q.code;
+    const error = q.error;
+    const platform = resolvePlatform(q.state);
+
+    // User denied or Google returned an error
+    const makeErrorUrl = (msg: string) =>
+      `${env.webAppUrl}/login?error=${encodeURIComponent(msg)}`;
+
+    if (error || !code) {
+      const url = makeErrorUrl(error ?? 'missing_code');
+      if (platform === 'tauri') return renderTauriDeepLinkPage(url);
+      set.status = 302;
+      set.headers['Location'] = url;
+      return;
+    }
+
+    // Exchange authorization code for tokens
+    let idPayload: GoogleIdPayload;
+    try {
+      const tokens = await exchangeGoogleCode(code);
+      idPayload = decodeGoogleIdToken(tokens.id_token);
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : 'Google auth failed';
+      const url = makeErrorUrl(msg);
+      if (platform === 'tauri') return renderTauriDeepLinkPage(url);
+      set.status = 302;
+      set.headers['Location'] = url;
+      return;
+    }
+
+    // Validate email
+    if (!idPayload.email_verified || !idPayload.email) {
+      const url = makeErrorUrl('Email not verified by Google');
+      if (platform === 'tauri') return renderTauriDeepLinkPage(url);
+      set.status = 302;
+      set.headers['Location'] = url;
+      return;
+    }
+
+    const googleId = idPayload.sub;
+    const email = idPayload.email.trim().toLowerCase();
+    const name = idPayload.name?.trim() ?? email.split('@')[0];
+
+    try {
+      const db = createDbClient();
+
+      let user = await db.select().from(users).where(eq(users.googleId, googleId)).limit(1).then(r => r[0] ?? null);
+
+      if (!user) {
+        user = await db.select().from(users).where(eq(users.email, email)).limit(1).then(r => r[0] ?? null);
+        if (user) {
+          await db.update(users).set({ googleId }).where(eq(users.id, user.id));
+        }
+      }
+
+      if (!user) {
+        const inserted = await db
+          .insert(users)
+          .values({ email, name, googleId, role: 'user' })
+          .returning();
+        user = inserted[0];
+        authCounter.labels('register', 'true').inc();
+      }
+
+      const token = await createSession(user.id);
+      set.headers['Set-Cookie'] = createSessionCookie(token, request.headers);
+
+      authCounter.labels('login', 'true').inc();
+
+      const successUrl = `${env.webAppUrl}/login?token=${encodeURIComponent(token)}`;
+      if (platform === 'tauri') return renderTauriDeepLinkPage(successUrl);
+      set.status = 302;
+      set.headers['Location'] = successUrl;
+    } catch (err) {
+      const url = makeErrorUrl('Database unavailable');
+      if (platform === 'tauri') return renderTauriDeepLinkPage(url);
+      set.status = 302;
+      set.headers['Location'] = url;
+    }
  });
@@ -12,5 +12,7 @@ tauri-build = { version = "2", features = [] }

 [dependencies]
 tauri = { version = "2", default-features = false, features = ["wry", "common-controls-v6", "dynamic-acl", "x11", "dbus", "custom-protocol"] }
+tauri-plugin-opener = "2"
+tauri-plugin-deep-link = "2"
 serde = { version = "1", features = ["derive"] }
 serde_json = "1"
@@ -3,6 +3,9 @@
  "description": "Capability for the main window",
  "windows": ["main"],
  "permissions": [
-    "core:default"
+    "core:default",
+    "opener:default",
+    "opener:allow-open-url",
+    "deep-link:default"
  ]
 }
@@ -1,5 +1,7 @@
 #!/usr/bin/env bash
-# Patches the generated AndroidManifest.xml to add CAMERA permission.
+# Patches the generated AndroidManifest.xml with:
+# 1. CAMERA permission
+# 2. Deep link intent filter (zeavisedu:// scheme) for Google OAuth return
 # Run after `tauri android init` to apply.
 set -euo pipefail

@@ -10,11 +12,34 @@ if [ ! -f "$MANIFEST" ]; then
  exit 1
 fi

-if grep -q 'android.permission.CAMERA' "$MANIFEST"; then
-  echo "CAMERA permission already present in AndroidManifest.xml"
-  exit 0
+# ── CAMERA permission ──────────────────────────────────────────────────
+
+if ! grep -q 'android.permission.CAMERA' "$MANIFEST"; then
+  echo "Adding CAMERA permission to AndroidManifest.xml..."
+  sed -i 's|<uses-permission android:name="android.permission.INTERNET" />|<uses-permission android:name="android.permission.INTERNET" />\n    <uses-permission android:name="android.permission.CAMERA" />\n    <uses-feature android:name="android.hardware.camera" android:required="false" />\n    <uses-feature android:name="android.hardware.camera.autofocus" android:required="false" />|' "$MANIFEST"
+else
+  echo "CAMERA permission already present."
 fi

-echo "Adding CAMERA permission to AndroidManifest.xml..."
-sed -i 's|<uses-permission android:name="android.permission.INTERNET" />|<uses-permission android:name="android.permission.INTERNET" />\n    <uses-permission android:name="android.permission.CAMERA" />\n    <uses-feature android:name="android.hardware.camera" android:required="false" />\n    <uses-feature android:name="android.hardware.camera.autofocus" android:required="false" />|' "$MANIFEST"
-echo "Done."
+# ── Deep link intent filter ────────────────────────────────────────────
+# Allows the app to receive zeavisedu:// scheme URLs from the system browser
+# (used after Google OAuth completes in external browser on Android)
+
+DEEP_LINK_FILTER='<!-- Deep link for Google OAuth return from system browser -->\
+        <intent-filter android:autoVerify="true">\
+            <action android:name="android.intent.action.VIEW" />\
+            <category android:name="android.intent.category.DEFAULT" />\
+            <category android:name="android.intent.category.BROWSABLE" />\
+            <data android:scheme="zeavisedu" />\
+        </intent-filter>'
+
+if grep -q 'android:scheme="zeavisedu"' "$MANIFEST"; then
+  echo "Deep link intent filter already present."
+else
+  echo "Adding deep link intent filter to AndroidManifest.xml..."
+  # Insert before the closing </activity> tag of MainActivity
+  sed -i "s|</activity>|${DEEP_LINK_FILTER}\n        </activity>|" "$MANIFEST"
+  echo "Deep link intent filter added."
+fi
+
+echo "AndroidManifest patched successfully."
@@ -1,6 +1,8 @@
 #[cfg_attr(mobile, tauri::mobile_entry_point)]
 pub fn run() {
    tauri::Builder::default()
+        .plugin(tauri_plugin_opener::init())
+        .plugin(tauri_plugin_deep_link::init())
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
 }
@@ -1,9 +1,10 @@
-import { FormEvent, useState } from 'react';
+import { FormEvent, useState, useCallback } from 'react';
 import { Eye, EyeOff } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
+import { isTauri, openUrl } from '@/lib/tauri';

 type AuthFormProps = {
  mode: 'login' | 'register';
@@ -25,6 +26,14 @@ export function AuthForm({ mode, isSubmitting, error, googleOAuthEnabled, onSubm
    await onSubmit({ name, email, password });
  }

+  const handleGoogleLogin = useCallback(async (e: React.MouseEvent) => {
+    e.preventDefault();
+    const platform = isTauri() ? 'tauri' : 'web';
+    const base = window.location.origin;
+    const googleUrl = `${base}/api/v1/auth/google?platform=${platform}`;
+    await openUrl(googleUrl);
+  }, []);
+
  return (
    <Card className="mx-auto w-full max-w-md">
      <CardHeader>
@@ -75,8 +84,15 @@ export function AuthForm({ mode, isSubmitting, error, googleOAuthEnabled, onSubm
          </Button>
        </form>
        {googleOAuthEnabled && (
-          <Button className="mt-3 w-full" variant="outline" asChild>
-            <a href="/api/v1/auth/google">Masuk dengan Google</a>
+          <Button className="mt-3 w-full flex items-center justify-center gap-2.5" variant="outline" onClick={handleGoogleLogin} type="button">
+            <svg viewBox="0 0 24 24" className="h-5 w-5" aria-hidden="true">
+              <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z" />
+              <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" />
+              <path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" />
+              <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" />
+              <path fill="none" d="M1 1h22v22H1z" />
+            </svg>
+            Masuk dengan Google
          </Button>
        )}
      </CardContent>
@@ -15,7 +15,7 @@ import { RiskBadge } from "@/components/risk-badge";

 type Props = {
  imageUrl: string;
-  confidence: number; // contoh: 0.95
+  confidence: number;
  diseaseName: string;
  scientificName: string;
  riskLevel: string;
@@ -42,8 +42,8 @@ export function DiagnosisResultView({

  const getRiskLevelKey = (level: string): "low" | "medium" | "high" => {
    const normalized = level.toLowerCase();
-    if (normalized.includes("rendah")) return "low";
-    if (normalized.includes("tinggi")) return "high";
+    if (normalized.includes("rendah") || normalized === "low") return "low";
+    if (normalized.includes("tinggi") || normalized === "high") return "high";
    return "medium";
  };

@@ -85,18 +85,35 @@ export function DiagnosisResultView({
          <div className="space-y-2 mb-4">
            <div className="flex justify-between text-sm font-bold text-slate-700">
              <span>Tingkat Keyakinan AI</span>
-              <span className="text-emerald-600">{confidencePercent}%</span>
+              <span
+                className={
+                  confidencePercent >= 75
+                    ? "text-emerald-600"
+                    : "text-amber-500"
+                }
+              >
+                {confidencePercent}%
+              </span>
            </div>
            <div className="w-full bg-slate-200 rounded-full h-2.5 overflow-hidden">
              <div
-                className="bg-emerald-500 h-2.5 rounded-full transition-all duration-1000"
+                className={`h-2.5 rounded-full transition-all duration-1000 ${
+                  confidencePercent >= 75 ? "bg-emerald-500" : "bg-amber-500"
+                }`}
                style={{ width: `${confidencePercent}%` }}
              ></div>
            </div>
-            <p className="text-[11px] text-emerald-600 flex items-center gap-1 font-medium">
-              <CheckCircle2 className="w-3 h-3" /> Di atas ambang batas minimum
-              (75%)
-            </p>
+            {confidencePercent >= 75 ? (
+              <p className="text-[11px] text-emerald-600 flex items-center gap-1 font-medium">
+                <CheckCircle2 className="w-3 h-3" /> Di atas ambang batas
+                minimum (75%)
+              </p>
+            ) : (
+              <p className="text-[11px] text-amber-600 flex items-center gap-1 font-medium">
+                <AlertTriangle className="w-3 h-3" /> Di bawah ambang batas
+                minimum (75%)
+              </p>
+            )}
          </div>

          <div className="flex items-center gap-3 pt-4 border-t border-amber-200/50">
@@ -0,0 +1,25 @@
+/**
+ * Lightweight Tauri environment detection and utilities.
+ * Avoids importing @tauri-apps/api at module level so the web build
+ * doesn't bundle Tauri internals.
+ */
+
+let _isTauri: boolean | null = null;
+
+export function isTauri(): boolean {
+  if (_isTauri !== null) return _isTauri;
+  _isTauri =
+    typeof window !== 'undefined' &&
+    '__TAURI_INTERNALS__' in window;
+  return _isTauri;
+}
+
+export async function openUrl(url: string): Promise<void> {
+  if (!isTauri()) {
+    window.location.href = url;
+    return;
+  }
+  // Lazy-import Tauri opener only in Tauri context
+  const { openUrl: tauriOpenUrl } = await import('@tauri-apps/plugin-opener');
+  await tauriOpenUrl(url);
+}
@@ -1,15 +1,48 @@
-import { useState } from "react";
+import { useState, useEffect, useRef } from "react";
 import { Link, useNavigate } from "react-router-dom";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { AuthForm } from "@/components/auth-form";
-import { apiClient } from "@/lib/api-client";
+import { apiClient, setAuthToken } from "@/lib/api-client";
 import { useAuthStore } from "@/store/auth-store";

+function getUrlParam(name: string): string | null {
+  return new URLSearchParams(window.location.search).get(name);
+}
+
 export function LoginPage() {
  const navigate = useNavigate();
  const queryClient = useQueryClient();
  const setUser = useAuthStore((state) => state.setUser);
  const [error, setError] = useState<string | null>(null);
+  const oauthTokenConsumed = useRef(false);
+  const [oauthProcessing, setOauthProcessing] = useState(false);
+
+  // Handle OAuth callback: the API redirects to /login?token=<session_token>
+  useEffect(() => {
+    const token = getUrlParam("token");
+    if (!token || oauthTokenConsumed.current) return;
+    oauthTokenConsumed.current = true;
+    setOauthProcessing(true);
+
+    // Store token for future API calls and fetch user
+    setAuthToken(token);
+
+    apiClient
+      .getMe()
+      .then((data) => {
+        setUser(data.user);
+        queryClient.setQueryData(["auth", "me"], data);
+        navigate("/dashboard", { replace: true });
+      })
+      .catch((err) => {
+        setAuthToken(null);
+        setOauthProcessing(false);
+        setError(err instanceof Error ? err.message : "Google login gagal");
+      });
+  }, [setUser, queryClient, navigate]);
+
+  // Show OAuth error from query param
+  const oauthError = getUrlParam("error");
  const meQuery = useQuery({
    queryKey: ["auth", "me"],
    queryFn: () => apiClient.getMe(),
@@ -26,13 +59,25 @@ export function LoginPage() {
      setError(err instanceof Error ? err.message : "Login gagal"),
  });

+  // Show loading spinner while OAuth token is being processed
+  if (oauthProcessing) {
+    return (
+      <main className="flex min-h-screen items-center justify-center px-6 py-12">
+        <div className="flex flex-col items-center gap-3">
+          <div className="h-10 w-10 border-4 border-green-500 border-t-transparent rounded-full animate-spin" />
+          <p className="text-gray-500 text-sm">Menyelesaikan login dengan Google...</p>
+        </div>
+      </main>
+    );
+  }
+
  return (
    <main className="flex min-h-screen items-center justify-center px-6 py-12">
      <div className="w-full max-w-sm md:max-w-md space-y-4">
        <AuthForm
          mode="login"
          isSubmitting={mutation.isPending}
-          error={error}
+          error={oauthError || error}
          googleOAuthEnabled={Boolean(
            meQuery.data?.features.googleOAuthEnabled,
          )}
@@ -16,6 +16,7 @@ import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
 import { Modal } from "@/components/ui/modal";
 import type { DiagnosisRecord } from "@zeavis/shared";
+import { diseaseCatalogSeed } from "@zeavis/shared"; // Import data seed lokal ditambahkan
 import { apiClient } from "@/lib/api-client";
 import { trackScan, trackDiagnosisResult } from "@/lib/telemetry";
 import { DiagnosisResultView } from "../components/diagnose-result-view";
@@ -95,7 +96,7 @@ export function ScanPage() {
  const [diagnosisPreview, setDiagnosisPreview] =
    useState<DiagnosisRecord | null>(null);

-  const diagnosesQuery = useQuery({
+  useQuery({
    queryKey: ["diagnoses"],
    queryFn: () => apiClient.getDiagnoses(),
    enabled: previewOpen,
@@ -429,29 +430,46 @@ export function ScanPage() {
              </div>
            )}

-            <DiagnosisResultView
-              imageUrl={
-                previewUrl ||
-                diagnosisPreview.imageUrl ||
-                "https://placehold.co/600x400?text=Foto+Daun"
-              }
-              confidence={diagnosisPreview.confidence ?? 0}
-              diseaseName={
-                diagnosisPreview.disease?.commonName ?? "Tidak Diketahui"
-              }
-              scientificName={diagnosisPreview.disease?.label ?? ""}
-              riskLevel={diagnosisPreview.disease?.riskLevel ?? "Sedang"}
-              description={
-                diagnosisPreview.disease?.description ??
-                diagnosisPreview.disease?.summary ??
-                "Deskripsi tidak tersedia."
-              }
-              symptoms={diagnosisPreview.disease?.symptoms ?? []}
-              preventions={diagnosisPreview.disease?.recommendations ?? []}
-              medicines={
-                (diagnosisPreview.disease as any)?.medicineRecommendations ?? []
-              }
-            />
+            {/* Render DiagnosisResultView dengan Fallback Obat */}
+            {(() => {
+              // Fallback logic for scientific name and medicine recommendations
+              const seedData = diagnosisPreview.disease
+                ? diseaseCatalogSeed.find(
+                    (seed) =>
+                      seed.commonName === diagnosisPreview.disease?.commonName,
+                  )
+                : null;
+
+              // If the API doesn't return medicine recommendations, use the seed data as a fallback
+              const finalMedicines =
+                (diagnosisPreview.disease as any)?.medicineRecommendations ||
+                seedData?.medicineRecommendations ||
+                [];
+
+              return (
+                <DiagnosisResultView
+                  imageUrl={
+                    previewUrl ||
+                    diagnosisPreview.imageUrl ||
+                    "https://placehold.co/600x400?text=Foto+Daun"
+                  }
+                  confidence={diagnosisPreview.confidence ?? 0}
+                  diseaseName={
+                    diagnosisPreview.disease?.commonName ?? "Tidak Diketahui"
+                  }
+                  scientificName={diagnosisPreview.disease?.label ?? ""}
+                  riskLevel={diagnosisPreview.disease?.riskLevel ?? "Sedang"}
+                  description={
+                    diagnosisPreview.disease?.description ??
+                    diagnosisPreview.disease?.summary ??
+                    "Deskripsi tidak tersedia."
+                  }
+                  symptoms={diagnosisPreview.disease?.symptoms ?? []}
+                  preventions={diagnosisPreview.disease?.recommendations ?? []}
+                  medicines={finalMedicines} // Datanya terhubung ke sini!
+                />
+              );
+            })()}

            {/* All Model Predictions */}
            {diagnosisPreview.predictions &&
@@ -9,7 +9,22 @@ export default defineConfig(({ mode }) => {
  const apiProxyTarget = env.VITE_API_PROXY_TARGET || 'http://localhost:3000';

  return {
-    plugins: [react(), tsconfigPaths(), metricsPlugin()],
+    plugins: [
+      react(),
+      tsconfigPaths(),
+      metricsPlugin(),
+      {
+        name: 'cloudflare-rocket-loader-fix',
+        transformIndexHtml(html) {
+          // Prevent Cloudflare Rocket Loader from mangling <script type="module">
+          // which breaks the entire JS bundle (blank page)
+          return html.replace(
+            /<script type="module"/g,
+            '<script data-cfasync="false" type="module"',
+          );
+        },
+      },
+    ],
    server: {
      proxy: {
        '/api': apiProxyTarget,
@@ -4,6 +4,10 @@
  "workspaces": {
    "": {
      "name": "zeavis-edu",
+      "dependencies": {
+        "@tauri-apps/plugin-deep-link": "2.4.9",
+        "@tauri-apps/plugin-opener": "2.5.4",
+      },
      "devDependencies": {
        "@moonrepo/cli": "^2.2.5",
        "typescript": "^6.0.3",
@@ -341,6 +345,8 @@

    "@tanstack/react-query": ["@tanstack/react-query@5.101.0", "", { "dependencies": { "@tanstack/query-core": "5.101.0" }, "peerDependencies": { "react": "^18 || ^19" } }, "sha512-rLlJXSpkqfizLWgkR5+eLeIk0MvTx/meEIR7LRjxic+qxiQP8zVjq7BqQkiCMNLQBlLfuOLqqr6KO5GtrDlmSg=="],

+    "@tauri-apps/api": ["@tauri-apps/api@2.11.0", "", {}, "sha512-7CinYODhky9lmO23xHnUFv0Xt43fbtWMyxZcLcRBlFkcgXKuEirBvHpmtJ89YMhyeGcq20Wuc47Fa4XjyniywA=="],
+
    "@tauri-apps/cli": ["@tauri-apps/cli@2.11.2", "", { "optionalDependencies": { "@tauri-apps/cli-darwin-arm64": "2.11.2", "@tauri-apps/cli-darwin-x64": "2.11.2", "@tauri-apps/cli-linux-arm-gnueabihf": "2.11.2", "@tauri-apps/cli-linux-arm64-gnu": "2.11.2", "@tauri-apps/cli-linux-arm64-musl": "2.11.2", "@tauri-apps/cli-linux-riscv64-gnu": "2.11.2", "@tauri-apps/cli-linux-x64-gnu": "2.11.2", "@tauri-apps/cli-linux-x64-musl": "2.11.2", "@tauri-apps/cli-win32-arm64-msvc": "2.11.2", "@tauri-apps/cli-win32-ia32-msvc": "2.11.2", "@tauri-apps/cli-win32-x64-msvc": "2.11.2" }, "bin": { "tauri": "tauri.js" } }, "sha512-bk3HemqvGRoy+5D/dVMUQHKMYLglD0jVnMm/0iGMH6ufZ+p8r14m6BpIixwij3PBvZdvORUp1YifTD8QxVZ1Nw=="],

    "@tauri-apps/cli-darwin-arm64": ["@tauri-apps/cli-darwin-arm64@2.11.2", "", { "os": "darwin", "cpu": "arm64" }, "sha512-+4UZzLt+eOAEQCwgd+TqKgyUJMrvx+BgdXLLaqJYmPqzP+nE6YZr/hY6CWLYGQb8jFn99jEkmC6uA3tNvamA1w=="],
@@ -365,6 +371,10 @@

    "@tauri-apps/cli-win32-x64-msvc": ["@tauri-apps/cli-win32-x64-msvc@2.11.2", "", { "os": "win32", "cpu": "x64" }, "sha512-d2JchlFIpZevZVReyqhQOekJmb1UH3rhZ5VX6sH3ty9ETE0TKQavpihvoScUXfKKpW6HZC0MrFGRU0ZtD+w3gA=="],

+    "@tauri-apps/plugin-deep-link": ["@tauri-apps/plugin-deep-link@2.4.9", "", { "dependencies": { "@tauri-apps/api": "^2.11.0" } }, "sha512-u0SKOUHnJ1wqeqXsDFq2+kASCBj9xxbG0g9XZWPy9SOmU4wXtp6b/wiYpm6oH6/5fBTQsLqnLhIvqLBRpgHJlA=="],
+
+    "@tauri-apps/plugin-opener": ["@tauri-apps/plugin-opener@2.5.4", "", { "dependencies": { "@tauri-apps/api": "^2.11.0" } }, "sha512-1HnPkb+AmgO29HBazm4uPLKB+r7zzcTBW1d0fyYp1uP+jwtpoiNDGKMMzz58SFp49nOIrxdE3aUJtT57lfO9CQ=="],
+
    "@tokenizer/inflate": ["@tokenizer/inflate@0.4.1", "", { "dependencies": { "debug": "^4.4.3", "token-types": "^6.1.1" } }, "sha512-2mAv+8pkG6GIZiF1kNg1jAjh27IDxEPKwdGul3snfztFerfPGI1LjDezZp3i7BElXompqEtPmoPx6c2wgtWsOA=="],

    "@tokenizer/token": ["@tokenizer/token@0.3.0", "", {}, "sha512-OvjF+z51L3ov0OyAU0duzsYuvO01PH7x4t6DJx+guahgTnBHkhJdG7soQeTSFLWN3efnHyibZ4Z8l2EuWwJN3A=="],
@@ -13,5 +13,9 @@
  "workspaces": [
    "apps/*",
    "packages/*"
-  ]
+  ],
+  "dependencies": {
+    "@tauri-apps/plugin-deep-link": "2.4.9",
+    "@tauri-apps/plugin-opener": "2.5.4"
+  }
 }
Author	SHA1	Message	Date
MythEclipseandClaude	ac59548337	feat(android): Google OAuth via system browser + deep link for Android Background: Google blocks OAuth in embedded WebView (403 disallowed_useragent). Solution: open Google login in the Android system browser, then deep-link back to the Tauri app via custom scheme after callback. Changes: - Tauri: add tauri-plugin-opener + tauri-plugin-deep-link to Cargo.toml - Tauri: register plugins in lib.rs, add capabilities - Web: auth-form.tsx Google button uses openUrl() via @tauri-apps/plugin-opener on Tauri (opens in system browser), falls back to window.location.href - Web: add lib/tauri.ts for isTauri() detection + lazy opens - API: /auth/google accepts ?platform=tauri → encodes into OAuth state param - API: /auth/google/callback decodes state → if tauri, renders HTML page that deep-links back via zeavisedu:// scheme; if web, 302 redirect - Android: patch script adds deep link intent filter for zeavisedu:// scheme Co-Authored-By: Claude <noreply@anthropic.com>	2026-06-15 23:49:47 +07:00
MythEclipseandClaude	d292bc4b3c	feat(auth): add Google logo SVG to 'Masuk dengan Google' button Inline SVG with official Google brand colors (blue, green, yellow, red) placed before the label text with gap-2.5 spacing. Co-Authored-By: Claude <noreply@anthropic.com>	2026-06-15 23:17:46 +07:00
MythEclipseandClaude	787acf077f	fix(vite): add data-cfasync="false" to script tags to prevent Cloudflare Rocket Loader breaking JS Cloudflare Rocket Loader rewrites <script type="module"> to <script type="randomhash-module"> which browsers can't parse, causing complete blank page. data-cfasync="false" disables this. Co-Authored-By: Claude <noreply@anthropic.com>	2026-06-15 23:00:30 +07:00
MythEclipseandClaude	250355562f	fix(login): replace useSearchParams with native URLSearchParams + loading spinner - useSearchParams can lose params during re-renders, causing blank page - Use native window.location.search + URLSearchParams instead (always accessible) - Add oauthProcessing spinner state so user sees 'Menyelesaikan login...' instead of blank page while /auth/me is being called Co-Authored-By: Claude <noreply@anthropic.com>	2026-06-15 22:38:11 +07:00
MythEclipseandClaude	d47c73308e	fix(auth): replace deprecated set.redirect with manual 302 Location header Elysia's set.redirect returns 200 OK instead of 302 redirect on the current version. Use set.status = 302 + set.headers['Location'] instead for both /auth/google (Google OAuth redirect) and /auth/google/callback (all redirect paths: errors, success token delivery). Co-Authored-By: Claude <noreply@anthropic.com>	2026-06-15 22:06:59 +07:00
MythEclipseandClaude	4b1d70d1c4	ci(deploy): inject Google OAuth env vars into VPS .env Add GOOGLE_CLIENT_ID, GOOGLE_CLIENT_SECRET, and GOOGLE_REDIRECT_URI to the deploy workflow so the API can use Google OAuth on production. Co-Authored-By: Claude <noreply@anthropic.com>	2026-06-15 21:57:12 +07:00
MythEclipseandClaude	c9ae90a042	feat(auth): implement Google OAuth callback with user auto-creation API (apps/api/src/routes/auth.ts): - Exchange authorization code for tokens via Google's token endpoint - Decode id_token payload (JWT) to extract sub, email, name - Find user by googleId → fall back to email match (link accounts) - Auto-create user if neither found (role: 'user', no password) - Create session + set cookie, redirect to /login?token=<token> Web (apps/web/src/pages/login-page.tsx): - Consume ?token= query param from OAuth redirect - Store token in localStorage for future API calls - Fetch /auth/me to hydrate Zustand store, then navigate to dashboard - Show OAuth errors from ?error= query param Co-Authored-By: Claude <noreply@anthropic.com>	2026-06-15 21:35:40 +07:00
Selly SupriyatinandGitHub	caca13e32c	Merge pull request #39 from ATLAS-PJK-GM007/selly/frontend Selly/frontend	2026-06-15 21:07:56 +07:00
MythEclipseandClaude	a55b1521ea	ci(android): run patch-android-manifest.sh after tauri android init Ensures CAMERA permission is always injected into the generated AndroidManifest.xml during CI builds. Co-Authored-By: Claude <noreply@anthropic.com>	2026-06-15 21:05:34 +07:00
seriouselly	2eabf12b36	Merge branch 'main' of https://github.com/ATLAS-PJK-GM007/ZeaVis-Edu into selly/frontend	2026-06-15 20:55:21 +07:00
seriouselly	b18b98e1a7	fix(scan): resolve empty medicine data and clean up linter warning - Add local fallback using `diseaseCatalogSeed` to populate medicine recommendations in the diagnosis preview modal when API data is missing. - Remove unused `diagnosesQuery` assignment to resolve SonarLint warning while preserving the background prefetching logic.	2026-06-15 20:54:44 +07:00
seriouselly	9cfbef4598	Merge branch 'main' of https://github.com/ATLAS-PJK-GM007/ZeaVis-Edu into selly/frontend	2026-06-15 20:39:01 +07:00
seriouselly	8f1308c8af	fix(diagnosis): correct risk level mapping and dynamic confidence UI - Fix `getRiskLevelKey` to properly recognize English risk level values ("low", "high"), preventing "Healthy Leaf" from incorrectly defaulting to medium risk. - Update confidence bar text and colors to dynamically show warning alerts when AI confidence falls below the 75% threshold.	2026-06-15 20:38:26 +07:00