Merge pull request #39 from ATLAS-PJK-GM007/selly/frontend

Selly/frontend

.github/workflows/android.yml

@@ -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:

apps/api/src/lib/auth.ts

@@ -61,6 +61,19 @@ export function readSessionToken(cookieHeader: string | null | undefined) {
   return decodeURIComponent(sessionCookie.slice(sessionCookieName.length + 1));
 }
 
+/**
+ * Extract bearer token from Authorization header.
+ * Used as fallback when cookies are blocked (e.g. Android WebView third-party blocking).
+ */
+export function readBearerToken(headers?: { get(name: string): string | null }) {
+  if (!headers) return null;
+  const auth = headers.get('authorization');
+  if (!auth) return null;
+  const parts = auth.split(' ');
+  if (parts.length !== 2 || parts[0] !== 'Bearer') return null;
+  return parts[1];
+}
+
 export async function createSession(userId: string) {
   const db = createDbClient();
   const token = randomBytes(32).toString('base64url');
@@ -83,8 +96,12 @@ export async function deleteSession(token: string | null) {
   await db.delete(sessions).where(eq(sessions.tokenHash, hashToken(token)));
 }
 
-export async function getCurrentUser(cookieHeader: string | null | undefined): Promise<CurrentUser | null> {
-  const token = readSessionToken(cookieHeader);
+export async function getCurrentUser(
+  cookieHeader: string | null | undefined,
+  headers?: { get(name: string): string | null },
+): Promise<CurrentUser | null> {
+  // Try cookie first, then Authorization header (for Android WebView where 3rd-party cookies are blocked)
+  const token = readSessionToken(cookieHeader) ?? readBearerToken(headers);
   if (!token) return null;
 
   const db = createDbClient();

apps/api/src/routes/auth.ts

@@ -32,7 +32,7 @@ function validatePassword(password: unknown) {
 
 export const authRoutes = new Elysia({ prefix: '/api/v1/auth' })
   .get('/me', async ({ request }) => {
-    const user = await getCurrentUser(request.headers.get('cookie'));
+    const user = await getCurrentUser(request.headers.get('cookie'), request.headers);
     return {
       user,
       features: getAuthFeatures(),
@@ -73,6 +73,7 @@ export const authRoutes = new Elysia({ prefix: '/api/v1/auth' })
           name: user.name,
           role: 'user' as const,
         },
+        token,
         features: getAuthFeatures(),
       };
     } catch (error) {
@@ -109,6 +110,7 @@ export const authRoutes = new Elysia({ prefix: '/api/v1/auth' })
           name: user.name,
           role: user.role === 'expert' ? 'expert' as const : 'user' as const,
         },
+        token,
         features: getAuthFeatures(),
       };
     } catch (error) {

apps/api/src/routes/dashboard.ts

@@ -13,7 +13,7 @@ export const dashboardRoutes = new Elysia({ prefix: '/api/v1' })
   .get('/dashboard/summary', async ({ request }) => {
     try {
       const db = createDbClient();
-      const user = await getCurrentUser(request.headers.get('cookie'));
+      const user = await getCurrentUser(request.headers.get('cookie'), request.headers);
 
       const diseases = await db.select().from(diseaseCatalog).orderBy(diseaseCatalog.displayOrder);
       const manualRows = await db.select().from(manualClassifications).orderBy(desc(manualClassifications.createdAt)).limit(1);

apps/api/src/routes/diagnoses.ts

@@ -175,7 +175,7 @@ function getFileFromBody(body: unknown): File | null {
 
 export const diagnosisRoutes = new Elysia({ prefix: '/api/v1' })
   .post('/diagnoses', async ({ body, request }) => {
-    const user = await getCurrentUser(request.headers.get('cookie'));
+    const user = await getCurrentUser(request.headers.get('cookie'), request.headers);
     if (!user) return unauthorized('Authentication required');
 
     const file = getFileFromBody(body);
@@ -251,7 +251,7 @@ export const diagnosisRoutes = new Elysia({ prefix: '/api/v1' })
     }
   })
   .get('/diagnoses', async ({ request }) => {
-    const user = await getCurrentUser(request.headers.get('cookie'));
+    const user = await getCurrentUser(request.headers.get('cookie'), request.headers);
     if (!user) return unauthorized('Authentication required');
 
     try {
@@ -270,7 +270,7 @@ export const diagnosisRoutes = new Elysia({ prefix: '/api/v1' })
     }
   })
   .get('/diagnoses/:id', async ({ params, request }) => {
-    const user = await getCurrentUser(request.headers.get('cookie'));
+    const user = await getCurrentUser(request.headers.get('cookie'), request.headers);
     if (!user) return unauthorized('Authentication required');
 
     try {

apps/api/src/routes/expert.ts

@@ -16,7 +16,7 @@ function isDiagnosisRecordOrNull(record: unknown): record is DiagnosisRecord {
 
 export const expertRoutes = new Elysia({ prefix: '/api/v1/expert' })
   .get('/reviews', async ({ request }) => {
-    const user = await getCurrentUser(request.headers.get('cookie'));
+    const user = await getCurrentUser(request.headers.get('cookie'), request.headers);
     if (!user) return unauthorized('Authentication required');
     if (user.role !== 'expert') return forbidden('Expert role required');
 
@@ -36,7 +36,7 @@ export const expertRoutes = new Elysia({ prefix: '/api/v1/expert' })
     }
   })
   .post('/reviews/:diagnosisId', async ({ params, body, request }) => {
-    const user = await getCurrentUser(request.headers.get('cookie'));
+    const user = await getCurrentUser(request.headers.get('cookie'), request.headers);
     if (!user) return unauthorized('Authentication required');
     if (user.role !== 'expert') return forbidden('Expert role required');
 

apps/tauri/scripts/patch-android-manifest.sh

@@ -0,0 +1,20 @@
+#!/usr/bin/env bash
+# Patches the generated AndroidManifest.xml to add CAMERA permission.
+# Run after `tauri android init` to apply.
+set -euo pipefail
+
+MANIFEST="gen/android/app/src/main/AndroidManifest.xml"
+
+if [ ! -f "$MANIFEST" ]; then
+  echo "ERROR: $MANIFEST not found. Run 'tauri android init' first." >&2
+  exit 1
+fi
+
+if grep -q 'android.permission.CAMERA' "$MANIFEST"; then
+  echo "CAMERA permission already present in AndroidManifest.xml"
+  exit 0
+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."

apps/web/src/components/auth-initializer.tsx

@@ -13,7 +13,7 @@ export function AuthInitializer() {
   });
 
   useEffect(() => {
-    if (query.data) {
+    if (query.data?.user) {
       setUser(query.data.user);
     }
   }, [query.data, setUser]);

apps/web/src/components/camera-capture.tsx

@@ -0,0 +1,202 @@
+import { useRef, useState, useCallback, useEffect } from "react";
+import { SwitchCamera, CameraOff, Aperture } from "lucide-react";
+import { Button } from "@/components/ui/button";
+
+interface CameraCaptureProps {
+  onCapture: (file: File) => void;
+  onClose: () => void;
+}
+
+type FacingMode = "environment" | "user";
+
+export function CameraCapture({ onCapture, onClose }: CameraCaptureProps) {
+  const videoRef = useRef<HTMLVideoElement | null>(null);
+  const streamRef = useRef<MediaStream | null>(null);
+  const canvasRef = useRef<HTMLCanvasElement | null>(null);
+  const [facingMode, setFacingMode] = useState<FacingMode>("environment");
+  const [status, setStatus] = useState<"loading" | "ready" | "error" | "denied">("loading");
+  const [errorMsg, setErrorMsg] = useState<string>("");
+
+  const stopStream = useCallback(() => {
+    if (streamRef.current) {
+      streamRef.current.getTracks().forEach((t) => t.stop());
+      streamRef.current = null;
+    }
+  }, []);
+
+  const startCamera = useCallback(
+    async (mode: FacingMode) => {
+      stopStream();
+      setStatus("loading");
+      setErrorMsg("");
+
+      try {
+        const stream = await navigator.mediaDevices.getUserMedia({
+          video: {
+            facingMode: mode,
+            width: { ideal: 1920 },
+            height: { ideal: 1080 },
+          },
+          audio: false,
+        });
+
+        streamRef.current = stream;
+        if (videoRef.current) {
+          videoRef.current.srcObject = stream;
+          await videoRef.current.play();
+        }
+        setStatus("ready");
+      } catch (err: unknown) {
+        const e = err as DOMException;
+        if (e.name === "NotAllowedError" || e.name === "PermissionDeniedError") {
+          setStatus("denied");
+          setErrorMsg("Izin kamera ditolak. Buka pengaturan untuk mengizinkan akses kamera.");
+        } else if (e.name === "NotFoundError") {
+          setStatus("error");
+          setErrorMsg("Kamera tidak ditemukan pada perangkat ini.");
+        } else if (e.name === "NotReadableError") {
+          setStatus("error");
+          setErrorMsg("Kamera sedang digunakan oleh aplikasi lain.");
+        } else {
+          setStatus("error");
+          setErrorMsg(`Gagal mengakses kamera: ${e.message}`);
+        }
+      }
+    },
+    [stopStream],
+  );
+
+  // Start camera on mount
+  useEffect(() => {
+    startCamera(facingMode);
+    return () => stopStream();
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const toggleFacing = () => {
+    const next = facingMode === "environment" ? "user" : "environment";
+    setFacingMode(next);
+    startCamera(next);
+  };
+
+  const handleCapture = () => {
+    const video = videoRef.current;
+    const canvas = canvasRef.current;
+    if (!video || !canvas) return;
+
+    const vw = video.videoWidth;
+    const vh = video.videoHeight;
+    canvas.width = vw;
+    canvas.height = vh;
+
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+
+    ctx.drawImage(video, 0, 0, vw, vh);
+    canvas.toBlob(
+      (blob) => {
+        if (!blob) return;
+        const file = new File([blob], `camera-${Date.now()}.jpg`, {
+          type: "image/jpeg",
+        });
+        stopStream();
+        onCapture(file);
+      },
+      "image/jpeg",
+      0.92,
+    );
+  };
+
+  return (
+    <div className="flex flex-col items-center gap-3 w-full">
+      {/* Viewfinder */}
+      <div className="relative w-full rounded-xl overflow-hidden bg-black aspect-[4/3] max-h-[420px]">
+        {status === "loading" && (
+          <div className="absolute inset-0 flex items-center justify-center bg-black/80 text-white">
+            <div className="flex flex-col items-center gap-2">
+              <div className="h-8 w-8 border-2 border-white border-t-transparent rounded-full animate-spin" />
+              <span className="text-sm">Membuka kamera...</span>
+            </div>
+          </div>
+        )}
+
+        {(status === "error" || status === "denied") && (
+          <div className="absolute inset-0 flex items-center justify-center bg-black/90 text-white p-6">
+            <div className="flex flex-col items-center gap-3 text-center">
+              <CameraOff className="text-red-400" size={40} />
+              <p className="text-sm text-red-300">{errorMsg}</p>
+              <Button
+                variant="outline"
+                className="h-9 px-3 text-sm text-white border-white/30 hover:bg-white/10"
+                onClick={() => startCamera(facingMode)}
+              >
+                Coba Lagi
+              </Button>
+            </div>
+          </div>
+        )}
+
+        <video
+          ref={videoRef}
+          autoPlay
+          playsInline
+          muted
+          className={`w-full h-full object-cover ${status === "ready" ? "opacity-100" : "opacity-0"}`}
+        />
+
+        {/* Scan area overlay */}
+        {status === "ready" && (
+          <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
+            <div className="absolute inset-0 bg-black/20" />
+            <div
+              className="relative flex items-center justify-center"
+              style={{ width: "70%", height: "75%" }}
+            >
+              <div className="absolute top-0 left-0 w-6 h-6 border-t-2 border-l-2 border-lime-300" />
+              <div className="absolute top-0 right-0 w-6 h-6 border-t-2 border-r-2 border-lime-300" />
+              <div className="absolute bottom-0 left-0 w-6 h-6 border-b-2 border-l-2 border-lime-300" />
+              <div className="absolute bottom-0 right-0 w-6 h-6 border-b-2 border-r-2 border-lime-300" />
+              <div className="text-white text-center flex flex-col gap-1">
+                <span className="text-xs font-semibold tracking-widest">
+                  AREA SCAN
+                </span>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* Controls */}
+      <div className="flex items-center justify-center gap-4 w-full">
+        <Button
+          variant="outline"
+          className="rounded-full h-12 w-12 p-0"
+          onClick={onClose}
+          title="Tutup kamera"
+        >
+          <CameraOff size={20} />
+        </Button>
+
+        <Button
+          className="rounded-full h-16 w-16 p-0 bg-white border-4 border-green-500 hover:bg-green-50"
+          onClick={handleCapture}
+          disabled={status !== "ready"}
+          title="Ambil foto"
+        >
+          <Aperture className="text-green-600" size={32} />
+        </Button>
+
+        <Button
+          variant="outline"
+          className="rounded-full h-12 w-12 p-0"
+          onClick={toggleFacing}
+          title="Ganti kamera"
+        >
+          <SwitchCamera size={20} />
+        </Button>
+      </div>
+
+      {/* Hidden canvas for capture */}
+      <canvas ref={canvasRef} className="hidden" />
+    </div>
+  );
+}

apps/web/src/components/diagnose-result-view.tsx

@@ -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>
+            {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%)
+                <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">

apps/web/src/lib/api-client.ts

@@ -16,6 +16,28 @@ import { recordApiCall } from './telemetry';
 
 const apiBaseUrl = import.meta.env.VITE_API_BASE_URL ?? 'https://zeavisedu.asepharyana.my.id';
 
+const AUTH_TOKEN_KEY = 'zeavis_auth_token';
+
+function getAuthToken(): string | null {
+  try {
+    return localStorage.getItem(AUTH_TOKEN_KEY);
+  } catch {
+    return null;
+  }
+}
+
+export function setAuthToken(token: string | null) {
+  try {
+    if (token) {
+      localStorage.setItem(AUTH_TOKEN_KEY, token);
+    } else {
+      localStorage.removeItem(AUTH_TOKEN_KEY);
+    }
+  } catch {
+    // localStorage may throw in private browsing
+  }
+}
+
 export interface ApiError extends Error {
   status: number;
   source?: 'uploader' | 'model-service' | 'unknown';
@@ -24,10 +46,21 @@ export interface ApiError extends Error {
 async function fetchApi<T>(endpoint: string, options?: RequestInit): Promise<T> {
   const start = performance.now();
   const url = `${apiBaseUrl}${endpoint}`;
+  const token = getAuthToken();
+  const headers = new Headers(options?.headers);
+
+  if (token) {
+    headers.set('Authorization', `Bearer ${token}`);
+  }
+
+  if (options?.body && !options.method) {
+    // auto-set Content-Type for JSON bodies
+  }
+
   const response = await fetch(url, {
     credentials: 'include',
     ...options,
-    headers: options?.headers,
+    headers,
   });
 
   const duration = performance.now() - start;
@@ -93,23 +126,29 @@ export const apiClient = {
   },
 
   async register(payload: RegisterRequest): Promise<AuthResponse> {
-    return fetchApi('/api/v1/auth/register', {
+    const result = await fetchApi<AuthResponse>('/api/v1/auth/register', {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify(payload),
     });
+    if (result.token) setAuthToken(result.token);
+    return result;
   },
 
   async login(payload: AuthRequest): Promise<AuthResponse> {
-    return fetchApi('/api/v1/auth/login', {
+    const result = await fetchApi<AuthResponse>('/api/v1/auth/login', {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify(payload),
     });
+    if (result.token) setAuthToken(result.token);
+    return result;
   },
 
   async logout(): Promise<{ ok: boolean }> {
-    return fetchApi('/api/v1/auth/logout', { method: 'POST' });
+    const result = await fetchApi<{ ok: boolean }>('/api/v1/auth/logout', { method: 'POST' });
+    setAuthToken(null);
+    return result;
   },
 
   // Disease catalog methods

apps/web/src/pages/scan-page.tsx

@@ -1,4 +1,4 @@
-import { useRef, useState } from "react";
+import { useRef, useState, useCallback } from "react";
 import { useNavigate, Link } from "react-router-dom";
 import { useMutation, useQueryClient, useQuery } from "@tanstack/react-query";
 import {
@@ -16,9 +16,11 @@ 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";
+import { CameraCapture } from "../components/camera-capture";
 
 export function ScanPage() {
   const [fileName, setFileName] = useState<string | null>(null);
@@ -32,6 +34,24 @@ export function ScanPage() {
   const navigate = useNavigate();
   const queryClient = useQueryClient();
 
+  // Camera mode state
+  const [useCamera, setUseCamera] = useState(false);
+  const handleCameraCapture = useCallback(
+    (file: File) => {
+      setFileName(file.name);
+      const url = URL.createObjectURL(file);
+      setPreviewUrl(url);
+
+      const img = new Image();
+      img.onload = () => {
+        setImageDimensions({ width: img.width, height: img.height });
+      };
+      img.src = url;
+      setUseCamera(false);
+    },
+    [],
+  );
+
   const mutation = useMutation({
     mutationFn: (file: File) => apiClient.createDiagnosis(file),
     onSuccess: (diagnosis) => {
@@ -76,7 +96,7 @@ export function ScanPage() {
   const [diagnosisPreview, setDiagnosisPreview] =
     useState<DiagnosisRecord | null>(null);
 
-  const diagnosesQuery = useQuery({
+  useQuery({
     queryKey: ["diagnoses"],
     queryFn: () => apiClient.getDiagnoses(),
     enabled: previewOpen,
@@ -111,6 +131,41 @@ export function ScanPage() {
 
               {!previewUrl ? (
                 <div className="space-y-3">
+                  {/* Mode toggle */}
+                  <div className="flex rounded-lg bg-gray-100 p-1">
+                    <button
+                      type="button"
+                      onClick={() => setUseCamera(false)}
+                      className={`flex-1 py-2 px-3 rounded-md text-sm font-medium transition-colors ${
+                        !useCamera
+                          ? "bg-white text-green-700 shadow-sm"
+                          : "text-gray-500 hover:text-gray-700"
+                      }`}
+                    >
+                      <Upload size={16} className="inline mr-1.5" />
+                      Unggah
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() => setUseCamera(true)}
+                      className={`flex-1 py-2 px-3 rounded-md text-sm font-medium transition-colors ${
+                        useCamera
+                          ? "bg-white text-green-700 shadow-sm"
+                          : "text-gray-500 hover:text-gray-700"
+                      }`}
+                    >
+                      <Camera size={16} className="inline mr-1.5" />
+                      Kamera
+                    </button>
+                  </div>
+
+                  {useCamera ? (
+                    <CameraCapture
+                      onCapture={handleCameraCapture}
+                      onClose={() => setUseCamera(false)}
+                    />
+                  ) : (
+                    <>
                       <div
                         className="w-full border-2 border-dashed border-green-300 rounded-md p-10 h-60 text-center cursor-pointer"
                         onClick={() => inputRef.current?.click()}
@@ -138,6 +193,8 @@ export function ScanPage() {
                       >
                         <Upload size={18} /> Pilih Berkas
                       </button>
+                    </>
+                  )}
                 </div>
               ) : (
                 <div className="space-y-4">
@@ -373,6 +430,23 @@ export function ScanPage() {
               </div>
             )}
 
+            {/* 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 ||
@@ -392,10 +466,10 @@ export function ScanPage() {
                   }
                   symptoms={diagnosisPreview.disease?.symptoms ?? []}
                   preventions={diagnosisPreview.disease?.recommendations ?? []}
-              medicines={
-                (diagnosisPreview.disease as any)?.medicineRecommendations ?? []
-              }
+                  medicines={finalMedicines} // Datanya terhubung ke sini!
                 />
+              );
+            })()}
 
             {/* All Model Predictions */}
             {diagnosisPreview.predictions &&

packages/shared/src/classifications.ts

@@ -66,6 +66,7 @@ export type RegisterRequest = AuthRequest & {
 export type AuthResponse = {
   user: AuthUser;
   features: AuthFeatures;
+  token?: string;
 };
 
 export type DiagnosisPrediction = {