Phase 1 scaffold: auth for all apps

- Backend: Fastify with two listeners (public + internal), routes, services, DB migration + seed - client_app: Flutter with BLoC, all auth screens (welcome, display name, register, OTP, force-register) - mitra_app: Flutter with BLoC, OTP-only login - control_center: React + Vite, email/password login, mitra/user management, anonymity settings - Docs: phase1 plan, API contract, client app mockup - CLAUDE.md and shared memory for all subprojects Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-05 10:08:42 +08:00
commit a7a2a32d27
85 changed files with 3953 additions and 0 deletions
--- a/control_center/.claude/memory/MEMORY.md
+++ b/control_center/.claude/memory/MEMORY.md
@@ -0,0 +1,3 @@
+# Memory Index
+
+- [Control Center Context](context.md) — React + Vite, internal only, /internal/ routes via VPN, admin role required
--- a/control_center/.claude/memory/context.md
+++ b/control_center/.claude/memory/context.md
@@ -0,0 +1,20 @@
+---
+name: Control Center Context
+description: Stack, security rules, and responsibilities for the Halo Bestie internal control center
+type: project
+---
+
+React + Vite SPA — internal management tool. **Never expose to public internet.**
+
+**Stack:** React, Vite, Firebase Auth (admin role required)
+
+**API:** Calls internal Fastify listener only (`/internal/` routes, port 3001). Accessed via VPN or private network. Domain: `internal.halobestie.com`.
+
+**Security:**
+- Network-level protection: Nginx `allow 10.0.0.0/8; deny all`
+- Every API call requires `role: admin` verified server-side
+- Do not add any public-facing routes or features here
+
+**Responsibilities:** Approve/manage mitra accounts, platform config, session/payment monitoring, mitra-client escalation management, trial period configuration.
+
+**Why:** Network-level blocking means even an auth bug cannot expose internal routes to the internet.
--- a/control_center/.env.example
+++ b/control_center/.env.example
@@ -0,0 +1,7 @@
+# Internal API base URL — accessible via VPN only
+VITE_API_BASE_URL=https://internal.halobestie.com
+
+# Firebase
+VITE_FIREBASE_API_KEY=
+VITE_FIREBASE_AUTH_DOMAIN=
+VITE_FIREBASE_PROJECT_ID=
--- a/control_center/.gitignore
+++ b/control_center/.gitignore
@@ -0,0 +1,4 @@
+node_modules/
+dist/
+.env
+*.log
--- a/control_center/CLAUDE.md
+++ b/control_center/CLAUDE.md
@@ -0,0 +1,27 @@
+# Halo Bestie — Control Center
+
+React + Vite SPA for internal platform management. **Internal use only.**
+
+> See root `CLAUDE.md` for full project context and architectural decisions.
+
+## Stack
+
+- **Framework:** React + Vite
+- **Auth:** Firebase Auth (admin role required)
+- **API:** Calls internal Fastify listener only (`/internal/` routes on port 3001)
+- **Access:** Internal network / VPN only — never exposed to public internet
+
+## Security
+
+- This app and its backend routes must NEVER be accessible from the public internet
+- Protected at network level: Nginx `allow 10.0.0.0/8; deny all;`
+- Additional role check on every API call (`role: admin`)
+- Do not add any public-facing routes or features here
+
+## Key Responsibilities
+
+- Manage and approve mitra accounts
+- Configure platform settings
+- Monitor sessions and payments
+- Manage communication between mitra and client (escalation, disputes)
+- Manage trial period configuration
--- a/control_center/index.html
+++ b/control_center/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Halo Bestie Control Center</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
--- a/control_center/package.json
+++ b/control_center/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "control-center",
+  "version": "1.0.0",
+  "description": "Halo Bestie Control Center",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.23.1",
+    "firebase": "^10.12.1",
+    "axios": "^1.7.2",
+    "@tanstack/react-query": "^5.45.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "vite": "^5.3.1"
+  }
+}
--- a/control_center/src/App.jsx
+++ b/control_center/src/App.jsx
@@ -0,0 +1,27 @@
+import { Routes, Route, Navigate } from 'react-router-dom'
+import { useAuth } from './core/auth/AuthContext'
+import LoginPage from './pages/login/LoginPage'
+import MitrasPage from './pages/mitras/MitrasPage'
+import UsersPage from './pages/users/UsersPage'
+import SettingsPage from './pages/settings/SettingsPage'
+import Layout from './components/Layout'
+
+const ProtectedRoute = ({ children }) => {
+  const { user, loading } = useAuth()
+  if (loading) return <div>Loading...</div>
+  return user ? children : <Navigate to="/login" replace />
+}
+
+export default function App() {
+  return (
+    <Routes>
+      <Route path="/login" element={<LoginPage />} />
+      <Route path="/" element={<ProtectedRoute><Layout /></ProtectedRoute>}>
+        <Route index element={<Navigate to="/mitras" replace />} />
+        <Route path="mitras" element={<MitrasPage />} />
+        <Route path="users" element={<UsersPage />} />
+        <Route path="settings" element={<SettingsPage />} />
+      </Route>
+    </Routes>
+  )
+}
--- a/control_center/src/components/Layout.jsx
+++ b/control_center/src/components/Layout.jsx
@@ -0,0 +1,26 @@
+import { Outlet, NavLink } from 'react-router-dom'
+import { useAuth } from '../core/auth/AuthContext'
+
+export default function Layout() {
+  const { user, logout } = useAuth()
+
+  return (
+    <div style={{ display: 'flex', minHeight: '100vh' }}>
+      <nav style={{ width: 220, borderRight: '1px solid #eee', padding: 16 }}>
+        <h2>Control Center</h2>
+        <ul style={{ listStyle: 'none', padding: 0 }}>
+          <li><NavLink to="/mitras">Mitra</NavLink></li>
+          <li><NavLink to="/users">Users</NavLink></li>
+          <li><NavLink to="/settings">Settings</NavLink></li>
+        </ul>
+        <div style={{ marginTop: 'auto', paddingTop: 16 }}>
+          <p style={{ fontSize: 12 }}>{user?.email}</p>
+          <button onClick={logout}>Logout</button>
+        </div>
+      </nav>
+      <main style={{ flex: 1, padding: 24 }}>
+        <Outlet />
+      </main>
+    </div>
+  )
+}
--- a/control_center/src/core/api/api-client.js
+++ b/control_center/src/core/api/api-client.js
@@ -0,0 +1,15 @@
+import axios from 'axios'
+import { auth } from '../auth/firebase'
+
+export const apiClient = axios.create({
+  baseURL: import.meta.env.VITE_API_BASE_URL,
+})
+
+apiClient.interceptors.request.use(async (config) => {
+  const user = auth.currentUser
+  if (user) {
+    const token = await user.getIdToken()
+    config.headers.Authorization = `Bearer ${token}`
+  }
+  return config
+})
--- a/control_center/src/core/auth/AuthContext.jsx
+++ b/control_center/src/core/auth/AuthContext.jsx
@@ -0,0 +1,40 @@
+import { createContext, useContext, useEffect, useState } from 'react'
+import { signInWithEmailAndPassword, signOut, onAuthStateChanged } from 'firebase/auth'
+import { auth } from './firebase'
+import { apiClient } from '../api/api-client'
+
+const AuthContext = createContext(null)
+
+export const AuthProvider = ({ children }) => {
+  const [user, setUser] = useState(null)
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    const unsub = onAuthStateChanged(auth, async (firebaseUser) => {
+      if (firebaseUser) {
+        try {
+          const res = await apiClient.post('/internal/auth/verify')
+          setUser(res.data.data)
+        } catch {
+          await signOut(auth)
+          setUser(null)
+        }
+      } else {
+        setUser(null)
+      }
+      setLoading(false)
+    })
+    return unsub
+  }, [])
+
+  const login = (email, password) => signInWithEmailAndPassword(auth, email, password)
+  const logout = () => signOut(auth)
+
+  return (
+    <AuthContext.Provider value={{ user, loading, login, logout }}>
+      {children}
+    </AuthContext.Provider>
+  )
+}
+
+export const useAuth = () => useContext(AuthContext)
--- a/control_center/src/core/auth/firebase.js
+++ b/control_center/src/core/auth/firebase.js
@@ -0,0 +1,11 @@
+import { initializeApp } from 'firebase/app'
+import { getAuth } from 'firebase/auth'
+
+const firebaseConfig = {
+  apiKey: import.meta.env.VITE_FIREBASE_API_KEY,
+  authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN,
+  projectId: import.meta.env.VITE_FIREBASE_PROJECT_ID,
+}
+
+const app = initializeApp(firebaseConfig)
+export const auth = getAuth(app)
--- a/control_center/src/main.jsx
+++ b/control_center/src/main.jsx
@@ -0,0 +1,20 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import { BrowserRouter } from 'react-router-dom'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { AuthProvider } from './core/auth/AuthContext'
+import App from './App'
+
+const queryClient = new QueryClient()
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <BrowserRouter>
+      <QueryClientProvider client={queryClient}>
+        <AuthProvider>
+          <App />
+        </AuthProvider>
+      </QueryClientProvider>
+    </BrowserRouter>
+  </React.StrictMode>
+)
--- a/control_center/src/pages/login/LoginPage.jsx
+++ b/control_center/src/pages/login/LoginPage.jsx
@@ -0,0 +1,47 @@
+import { useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { useAuth } from '../../core/auth/AuthContext'
+
+export default function LoginPage() {
+  const { login } = useAuth()
+  const navigate = useNavigate()
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [error, setError] = useState('')
+  const [loading, setLoading] = useState(false)
+
+  const handleSubmit = async (e) => {
+    e.preventDefault()
+    setError('')
+    setLoading(true)
+    try {
+      await login(email, password)
+      navigate('/')
+    } catch {
+      setError('Email atau password salah.')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <div style={{ maxWidth: 360, margin: '100px auto', padding: 24 }}>
+      <h1>Halo Bestie</h1>
+      <h2>Control Center</h2>
+      <form onSubmit={handleSubmit}>
+        <div>
+          <label>Email</label>
+          <input type="email" value={email} onChange={e => setEmail(e.target.value)} required style={{ display: 'block', width: '100%', marginBottom: 12 }} />
+        </div>
+        <div>
+          <label>Password</label>
+          <input type="password" value={password} onChange={e => setPassword(e.target.value)} required style={{ display: 'block', width: '100%', marginBottom: 12 }} />
+        </div>
+        {error && <p style={{ color: 'red' }}>{error}</p>}
+        <button type="submit" disabled={loading} style={{ width: '100%' }}>
+          {loading ? 'Loading...' : 'Masuk'}
+        </button>
+      </form>
+    </div>
+  )
+}
--- a/control_center/src/pages/mitras/MitrasPage.jsx
+++ b/control_center/src/pages/mitras/MitrasPage.jsx
@@ -0,0 +1,93 @@
+import { useState } from 'react'
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
+import { apiClient } from '../../core/api/api-client'
+
+const fetchMitras = async () => {
+  const res = await apiClient.get('/internal/mitras')
+  return res.data.data
+}
+
+const createMitra = async (data) => {
+  const res = await apiClient.post('/internal/mitras', data)
+  return res.data.data
+}
+
+const updateMitraStatus = async ({ id, is_active }) => {
+  const res = await apiClient.patch(`/internal/mitras/${id}/status`, { is_active })
+  return res.data.data
+}
+
+export default function MitrasPage() {
+  const queryClient = useQueryClient()
+  const { data, isLoading } = useQuery({ queryKey: ['mitras'], queryFn: fetchMitras })
+
+  const [form, setForm] = useState({ phone: '', display_name: '' })
+  const [showForm, setShowForm] = useState(false)
+
+  const createMutation = useMutation({
+    mutationFn: createMitra,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['mitras'] })
+      setForm({ phone: '', display_name: '' })
+      setShowForm(false)
+    },
+  })
+
+  const statusMutation = useMutation({
+    mutationFn: updateMitraStatus,
+    onSuccess: () => queryClient.invalidateQueries({ queryKey: ['mitras'] }),
+  })
+
+  if (isLoading) return <div>Loading...</div>
+
+  return (
+    <div>
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+        <h1>Mitra</h1>
+        <button onClick={() => setShowForm(!showForm)}>+ Tambah Mitra</button>
+      </div>
+
+      {showForm && (
+        <form onSubmit={(e) => { e.preventDefault(); createMutation.mutate(form) }}
+          style={{ marginBottom: 24, padding: 16, border: '1px solid #eee' }}>
+          <h3>Tambah Mitra Baru</h3>
+          <input placeholder="Nomor HP (+628...)" value={form.phone}
+            onChange={e => setForm(f => ({ ...f, phone: e.target.value }))} required
+            style={{ display: 'block', marginBottom: 8, width: '100%' }} />
+          <input placeholder="Nama" value={form.display_name}
+            onChange={e => setForm(f => ({ ...f, display_name: e.target.value }))} required
+            style={{ display: 'block', marginBottom: 8, width: '100%' }} />
+          <button type="submit" disabled={createMutation.isPending}>
+            {createMutation.isPending ? 'Menyimpan...' : 'Simpan'}
+          </button>
+          {createMutation.isError && <p style={{ color: 'red' }}>Gagal menyimpan.</p>}
+        </form>
+      )}
+
+      <table style={{ width: '100%', borderCollapse: 'collapse' }}>
+        <thead>
+          <tr>
+            <th style={{ textAlign: 'left', padding: 8, borderBottom: '1px solid #eee' }}>Nama</th>
+            <th style={{ textAlign: 'left', padding: 8, borderBottom: '1px solid #eee' }}>Nomor HP</th>
+            <th style={{ textAlign: 'left', padding: 8, borderBottom: '1px solid #eee' }}>Status</th>
+            <th style={{ padding: 8, borderBottom: '1px solid #eee' }}>Aksi</th>
+          </tr>
+        </thead>
+        <tbody>
+          {data?.items?.map((mitra) => (
+            <tr key={mitra.id}>
+              <td style={{ padding: 8 }}>{mitra.display_name}</td>
+              <td style={{ padding: 8 }}>{mitra.phone}</td>
+              <td style={{ padding: 8 }}>{mitra.is_active ? 'Aktif' : 'Nonaktif'}</td>
+              <td style={{ padding: 8 }}>
+                <button onClick={() => statusMutation.mutate({ id: mitra.id, is_active: !mitra.is_active })}>
+                  {mitra.is_active ? 'Nonaktifkan' : 'Aktifkan'}
+                </button>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  )
+}
--- a/control_center/src/pages/settings/SettingsPage.jsx
+++ b/control_center/src/pages/settings/SettingsPage.jsx
@@ -0,0 +1,45 @@
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
+import { apiClient } from '../../core/api/api-client'
+
+const fetchAnonymityConfig = async () => {
+  const res = await apiClient.get('/internal/config/anonymity')
+  return res.data.data
+}
+
+const updateAnonymityConfig = async (anonymity_enabled) => {
+  const res = await apiClient.patch('/internal/config/anonymity', { anonymity_enabled })
+  return res.data.data
+}
+
+export default function SettingsPage() {
+  const queryClient = useQueryClient()
+  const { data, isLoading } = useQuery({ queryKey: ['config-anonymity'], queryFn: fetchAnonymityConfig })
+
+  const mutation = useMutation({
+    mutationFn: updateAnonymityConfig,
+    onSuccess: () => queryClient.invalidateQueries({ queryKey: ['config-anonymity'] }),
+  })
+
+  if (isLoading) return <div>Loading...</div>
+
+  return (
+    <div>
+      <h1>Settings</h1>
+
+      <section style={{ marginBottom: 24 }}>
+        <h2>Anonymity</h2>
+        <p>Ketika dinonaktifkan, pengguna anonim akan diminta mendaftar setelah sesi selesai.</p>
+        <label style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+          <input
+            type="checkbox"
+            checked={data?.anonymity_enabled ?? true}
+            onChange={e => mutation.mutate(e.target.checked)}
+            disabled={mutation.isPending}
+          />
+          Izinkan pengguna anonim
+        </label>
+        {mutation.isError && <p style={{ color: 'red' }}>Gagal menyimpan.</p>}
+      </section>
+    </div>
+  )
+}
--- a/control_center/src/pages/users/UsersPage.jsx
+++ b/control_center/src/pages/users/UsersPage.jsx
@@ -0,0 +1,88 @@
+import { useState } from 'react'
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
+import { apiClient } from '../../core/api/api-client'
+
+const fetchUsers = async () => {
+  const res = await apiClient.get('/internal/control-center-users')
+  return res.data.data
+}
+
+const fetchRoles = async () => {
+  const res = await apiClient.get('/internal/roles')
+  return res.data.data
+}
+
+const createUser = async (data) => {
+  const res = await apiClient.post('/internal/control-center-users', data)
+  return res.data.data
+}
+
+export default function UsersPage() {
+  const queryClient = useQueryClient()
+  const { data, isLoading } = useQuery({ queryKey: ['cc-users'], queryFn: fetchUsers })
+  const { data: roles } = useQuery({ queryKey: ['roles'], queryFn: fetchRoles })
+
+  const [form, setForm] = useState({ email: '', display_name: '', role_id: '' })
+  const [showForm, setShowForm] = useState(false)
+
+  const createMutation = useMutation({
+    mutationFn: createUser,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['cc-users'] })
+      setForm({ email: '', display_name: '', role_id: '' })
+      setShowForm(false)
+    },
+  })
+
+  if (isLoading) return <div>Loading...</div>
+
+  return (
+    <div>
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+        <h1>Control Center Users</h1>
+        <button onClick={() => setShowForm(!showForm)}>+ Tambah User</button>
+      </div>
+
+      {showForm && (
+        <form onSubmit={(e) => { e.preventDefault(); createMutation.mutate(form) }}
+          style={{ marginBottom: 24, padding: 16, border: '1px solid #eee' }}>
+          <h3>Tambah User Baru</h3>
+          <input placeholder="Email" type="email" value={form.email}
+            onChange={e => setForm(f => ({ ...f, email: e.target.value }))} required
+            style={{ display: 'block', marginBottom: 8, width: '100%' }} />
+          <input placeholder="Nama" value={form.display_name}
+            onChange={e => setForm(f => ({ ...f, display_name: e.target.value }))} required
+            style={{ display: 'block', marginBottom: 8, width: '100%' }} />
+          <select value={form.role_id} onChange={e => setForm(f => ({ ...f, role_id: e.target.value }))} required
+            style={{ display: 'block', marginBottom: 8, width: '100%' }}>
+            <option value="">Pilih Role</option>
+            {roles?.map(r => <option key={r.id} value={r.id}>{r.name}</option>)}
+          </select>
+          <button type="submit" disabled={createMutation.isPending}>
+            {createMutation.isPending ? 'Menyimpan...' : 'Simpan'}
+          </button>
+          {createMutation.isError && <p style={{ color: 'red' }}>Gagal menyimpan.</p>}
+        </form>
+      )}
+
+      <table style={{ width: '100%', borderCollapse: 'collapse' }}>
+        <thead>
+          <tr>
+            <th style={{ textAlign: 'left', padding: 8, borderBottom: '1px solid #eee' }}>Nama</th>
+            <th style={{ textAlign: 'left', padding: 8, borderBottom: '1px solid #eee' }}>Email</th>
+            <th style={{ textAlign: 'left', padding: 8, borderBottom: '1px solid #eee' }}>Role</th>
+          </tr>
+        </thead>
+        <tbody>
+          {data?.items?.map((user) => (
+            <tr key={user.id}>
+              <td style={{ padding: 8 }}>{user.display_name}</td>
+              <td style={{ padding: 8 }}>{user.email}</td>
+              <td style={{ padding: 8 }}>{user.role.name}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  )
+}
--- a/control_center/vite.config.js
+++ b/control_center/vite.config.js
@@ -0,0 +1,9 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    port: 5173,
+  },
+})