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