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>

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>
+  )
+}

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>
+  )
+}

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
+})

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)

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)

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>
+)

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>
+  )
+}

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>
+  )
+}

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>
+  )
+}

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>
+  )
+}