Phase 3.2 WS2: Mitra request activity log + control center page

- DB migration: add active_session_count column + mitra_notified index
- Constants: add MISSED to NotificationResponse
- Pairing service: record active_session_count on notification creation,
  use MISSED (not IGNORED) when another mitra accepts first
- New mitra-activity.service.js: getMitraActivityLog (paginated),
  getMitraActivitySummary (per-mitra aggregates with acceptance rate)
- New mitra-activity.routes.js: GET /internal/mitra-activity/log,
  GET /internal/mitra-activity/summary
- Control center: new MitraActivityPage with summary table + detail log,
  filters (mitra, date range), color-coded response types, pagination
- Register route in App.jsx, add "Aktivitas Mitra" nav link in Layout

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

backend/src/app.internal.js

@@ -6,6 +6,7 @@ import { rolesRoutes } from './routes/internal/roles.routes.js'
 import { internalAuthRoutes } from './routes/internal/auth.routes.js'
 import { internalConfigRoutes } from './routes/internal/config.routes.js'
 import { sessionManagementRoutes } from './routes/internal/session.routes.js'
+import { mitraActivityRoutes } from './routes/internal/mitra-activity.routes.js'
 import { errorHandler } from './plugins/error-handler.js'
 
 export const buildInternalApp = async () => {
@@ -20,6 +21,7 @@ export const buildInternalApp = async () => {
   app.register(rolesRoutes, { prefix: '/internal/roles' })
   app.register(internalConfigRoutes, { prefix: '/internal/config' })
   app.register(sessionManagementRoutes, { prefix: '/internal/sessions' })
+  app.register(mitraActivityRoutes, { prefix: '/internal/mitra-activity' })
 
   return app
 }

backend/src/constants.js

@@ -33,6 +33,7 @@ export const MessageType = Object.freeze({
 export const NotificationResponse = Object.freeze({
   ACCEPTED: 'accepted',
   DECLINED: 'declined',
+  MISSED: 'missed',
   IGNORED: 'ignored',
 })
 

backend/src/db/migrate.js

@@ -288,6 +288,18 @@ const migrate = async () => {
     ON CONFLICT (key) DO NOTHING
   `
 
+  // --- Phase 3.2: Mitra Request Activity Log ---
+
+  await sql`
+    ALTER TABLE chat_request_notifications
+    ADD COLUMN IF NOT EXISTS active_session_count INT NOT NULL DEFAULT 0
+  `
+
+  await sql`
+    CREATE INDEX IF NOT EXISTS idx_chat_request_notifications_mitra_notified
+    ON chat_request_notifications (mitra_id, notified_at)
+  `
+
   console.log('Migration complete.')
   await sql.end()
 }

backend/src/routes/internal/mitra-activity.routes.js

@@ -0,0 +1,33 @@
+import { authenticate, requirePermission } from '../../plugins/auth.js'
+import { getCcUserByFirebaseUid } from '../../services/cc-user.service.js'
+import { getMitraActivityLog, getMitraActivitySummary } from '../../services/mitra-activity.service.js'
+
+const attachCcUser = async (request, reply) => {
+  const user = await getCcUserByFirebaseUid(request.firebaseUser.uid)
+  if (!user) return reply.code(403).send({
+    success: false,
+    error: { code: 'FORBIDDEN', message: 'Not a control center user' },
+  })
+  request.ccUser = user
+}
+
+export const mitraActivityRoutes = async (app) => {
+  app.get('/log', {
+    preHandler: [authenticate, attachCcUser, requirePermission('mitra', 'read')],
+  }, async (request, reply) => {
+    const { mitra_id, date_from, date_to, page = 1, limit = 20 } = request.query
+    const result = await getMitraActivityLog({
+      mitra_id, date_from, date_to,
+      page: Number(page), limit: Number(limit),
+    })
+    return reply.send({ success: true, data: result })
+  })
+
+  app.get('/summary', {
+    preHandler: [authenticate, attachCcUser, requirePermission('mitra', 'read')],
+  }, async (request, reply) => {
+    const { mitra_id, date_from, date_to } = request.query
+    const result = await getMitraActivitySummary({ mitra_id, date_from, date_to })
+    return reply.send({ success: true, data: result })
+  })
+}

backend/src/services/mitra-activity.service.js

@@ -0,0 +1,75 @@
+import { getDb } from '../db/client.js'
+
+const sql = getDb()
+
+export const getMitraActivityLog = async ({ mitra_id, date_from, date_to, page = 1, limit = 20 } = {}) => {
+  const offset = (page - 1) * limit
+  const conditions = []
+
+  if (mitra_id) conditions.push(sql`crn.mitra_id = ${mitra_id}`)
+  if (date_from) conditions.push(sql`crn.notified_at >= ${date_from}`)
+  if (date_to) conditions.push(sql`crn.notified_at <= ${date_to}`)
+
+  const where = conditions.length > 0
+    ? sql`WHERE ${conditions.reduce((a, b) => sql`${a} AND ${b}`)}`
+    : sql``
+
+  const items = await sql`
+    SELECT crn.id, crn.session_id, crn.mitra_id, crn.response,
+      crn.notified_at, crn.responded_at, crn.active_session_count,
+      m.display_name AS mitra_display_name,
+      CASE WHEN crn.responded_at IS NOT NULL
+        THEN EXTRACT(EPOCH FROM (crn.responded_at - crn.notified_at))::int
+        ELSE NULL
+      END AS response_time_seconds
+    FROM chat_request_notifications crn
+    INNER JOIN mitras m ON m.id = crn.mitra_id
+    ${where}
+    ORDER BY crn.notified_at DESC
+    LIMIT ${limit} OFFSET ${offset}
+  `
+
+  const [{ count }] = await sql`
+    SELECT COUNT(*) FROM chat_request_notifications crn ${where}
+  `
+
+  return { items, total: Number(count), page, limit }
+}
+
+export const getMitraActivitySummary = async ({ mitra_id, date_from, date_to } = {}) => {
+  const conditions = []
+
+  if (mitra_id) conditions.push(sql`crn.mitra_id = ${mitra_id}`)
+  if (date_from) conditions.push(sql`crn.notified_at >= ${date_from}`)
+  if (date_to) conditions.push(sql`crn.notified_at <= ${date_to}`)
+
+  const where = conditions.length > 0
+    ? sql`WHERE ${conditions.reduce((a, b) => sql`${a} AND ${b}`)}`
+    : sql``
+
+  const summaries = await sql`
+    SELECT crn.mitra_id,
+      m.display_name AS mitra_display_name,
+      COUNT(*)::int AS total_requests,
+      COUNT(*) FILTER (WHERE crn.response = 'accepted')::int AS accepted_count,
+      COUNT(*) FILTER (WHERE crn.response = 'declined')::int AS rejected_count,
+      COUNT(*) FILTER (WHERE crn.response = 'missed')::int AS missed_count,
+      COUNT(*) FILTER (WHERE crn.response = 'ignored')::int AS ignored_count,
+      ROUND(
+        100.0 * COUNT(*) FILTER (WHERE crn.response = 'accepted') / NULLIF(COUNT(*), 0), 1
+      ) AS acceptance_rate,
+      AVG(
+        CASE WHEN crn.responded_at IS NOT NULL
+          THEN EXTRACT(EPOCH FROM (crn.responded_at - crn.notified_at))
+          ELSE NULL
+        END
+      )::numeric(10,1) AS avg_response_time_seconds
+    FROM chat_request_notifications crn
+    INNER JOIN mitras m ON m.id = crn.mitra_id
+    ${where}
+    GROUP BY crn.mitra_id, m.display_name
+    ORDER BY acceptance_rate DESC NULLS LAST
+  `
+
+  return summaries
+}

backend/src/services/pairing.service.js

@@ -92,9 +92,14 @@ export const createPairingRequest = async (customerId, { duration_minutes, price
 
   // Create notifications for all available mitras
   for (const mitra of availableMitras) {
+    const [{ count: activeCount }] = await sql`
+      SELECT COUNT(*)::int AS count FROM chat_sessions
+      WHERE mitra_id = ${mitra.id}
+        AND status IN (${SessionStatus.ACTIVE}, ${SessionStatus.PENDING_PAYMENT})
+    `
     await sql`
-      INSERT INTO chat_request_notifications (session_id, mitra_id)
+      INSERT INTO chat_request_notifications (session_id, mitra_id, active_session_count)
-      VALUES (${session.id}, ${mitra.id})
+      VALUES (${session.id}, ${mitra.id}, ${activeCount})
     `
     // Notify mitra via WebSocket (FCM fallback if offline)
     await notifyMitra(mitra.id, {
@@ -139,10 +144,10 @@ export const acceptPairingRequest = async (sessionId, mitraId) => {
     WHERE session_id = ${sessionId} AND mitra_id = ${mitraId}
   `
 
-  // Mark other mitras' notifications as ignored
+  // Mark other mitras' notifications as missed (another mitra accepted)
   await sql`
     UPDATE chat_request_notifications
-    SET response = ${NotificationResponse.IGNORED}, responded_at = NOW()
+    SET response = ${NotificationResponse.MISSED}, responded_at = NOW()
     WHERE session_id = ${sessionId} AND mitra_id != ${mitraId} AND response IS NULL
   `
 

control_center/src/App.jsx

@@ -6,6 +6,7 @@ import MitrasPage from './pages/mitras/MitrasPage'
 import SessionsPage from './pages/sessions/SessionsPage'
 import UsersPage from './pages/users/UsersPage'
 import SettingsPage from './pages/settings/SettingsPage'
+import MitraActivityPage from './pages/mitra-activity/MitraActivityPage'
 import Layout from './components/Layout'
 
 const ProtectedRoute = ({ children }) => {
@@ -25,6 +26,7 @@ export default function App() {
         <Route path="sessions" element={<SessionsPage />} />
         <Route path="users" element={<UsersPage />} />
         <Route path="settings" element={<SettingsPage />} />
+        <Route path="mitra-activity" element={<MitraActivityPage />} />
       </Route>
     </Routes>
   )

control_center/src/components/Layout.jsx

@@ -13,6 +13,7 @@ export default function Layout() {
           <li><NavLink to="/mitras">Mitra</NavLink></li>
           <li><NavLink to="/sessions">Sesi</NavLink></li>
           <li><NavLink to="/users">Users</NavLink></li>
+          <li><NavLink to="/mitra-activity">Aktivitas Mitra</NavLink></li>
           <li><NavLink to="/settings">Settings</NavLink></li>
         </ul>
         <div style={{ marginTop: 'auto', paddingTop: 16 }}>

control_center/src/pages/mitra-activity/MitraActivityPage.jsx

@@ -0,0 +1,177 @@
+import { useState } from 'react'
+import { useQuery } from '@tanstack/react-query'
+import { apiClient } from '../../core/api/api-client'
+
+const fetchSummary = async ({ mitra_id, date_from, date_to }) => {
+  const params = new URLSearchParams()
+  if (mitra_id) params.set('mitra_id', mitra_id)
+  if (date_from) params.set('date_from', date_from)
+  if (date_to) params.set('date_to', date_to)
+  const res = await apiClient.get(`/internal/mitra-activity/summary?${params}`)
+  return res.data.data
+}
+
+const fetchLog = async ({ mitra_id, date_from, date_to, page, limit }) => {
+  const params = new URLSearchParams()
+  if (mitra_id) params.set('mitra_id', mitra_id)
+  if (date_from) params.set('date_from', date_from)
+  if (date_to) params.set('date_to', date_to)
+  params.set('page', String(page))
+  params.set('limit', String(limit))
+  const res = await apiClient.get(`/internal/mitra-activity/log?${params}`)
+  return res.data.data
+}
+
+const fetchMitras = async () => {
+  const res = await apiClient.get('/internal/mitras')
+  return res.data.data
+}
+
+const responseColor = (response) => {
+  switch (response) {
+    case 'accepted': return '#22c55e'
+    case 'declined': return '#ef4444'
+    case 'missed': return '#f97316'
+    case 'ignored': return '#9ca3af'
+    default: return '#6b7280'
+  }
+}
+
+const formatDate = (dateStr) => {
+  if (!dateStr) return '-'
+  const d = new Date(dateStr)
+  return `${d.toLocaleDateString('id-ID')} ${d.toLocaleTimeString('id-ID', { hour: '2-digit', minute: '2-digit' })}`
+}
+
+export default function MitraActivityPage() {
+  const [mitraFilter, setMitraFilter] = useState('')
+  const [dateFrom, setDateFrom] = useState('')
+  const [dateTo, setDateTo] = useState('')
+  const [logPage, setLogPage] = useState(1)
+  const logLimit = 20
+
+  const filters = { mitra_id: mitraFilter || undefined, date_from: dateFrom || undefined, date_to: dateTo || undefined }
+
+  const { data: mitras } = useQuery({ queryKey: ['mitras-list'], queryFn: fetchMitras })
+
+  const { data: summary, isLoading: summaryLoading } = useQuery({
+    queryKey: ['mitra-activity-summary', filters],
+    queryFn: () => fetchSummary(filters),
+  })
+
+  const { data: logData, isLoading: logLoading } = useQuery({
+    queryKey: ['mitra-activity-log', filters, logPage],
+    queryFn: () => fetchLog({ ...filters, page: logPage, limit: logLimit }),
+  })
+
+  return (
+    <div>
+      <h1>Aktivitas Mitra</h1>
+
+      <div style={{ display: 'flex', gap: 12, marginBottom: 24, flexWrap: 'wrap', alignItems: 'end' }}>
+        <div>
+          <label style={{ display: 'block', fontSize: 12, marginBottom: 4 }}>Mitra</label>
+          <select value={mitraFilter} onChange={e => { setMitraFilter(e.target.value); setLogPage(1) }} style={{ padding: '6px 8px' }}>
+            <option value="">Semua Mitra</option>
+            {(mitras || []).map(m => (
+              <option key={m.id} value={m.id}>{m.display_name}</option>
+            ))}
+          </select>
+        </div>
+        <div>
+          <label style={{ display: 'block', fontSize: 12, marginBottom: 4 }}>Dari</label>
+          <input type="date" value={dateFrom} onChange={e => { setDateFrom(e.target.value); setLogPage(1) }} />
+        </div>
+        <div>
+          <label style={{ display: 'block', fontSize: 12, marginBottom: 4 }}>Sampai</label>
+          <input type="date" value={dateTo} onChange={e => { setDateTo(e.target.value); setLogPage(1) }} />
+        </div>
+      </div>
+
+      <section style={{ marginBottom: 32 }}>
+        <h2>Ringkasan</h2>
+        {summaryLoading ? <p>Loading...</p> : (
+          <table style={{ width: '100%', borderCollapse: 'collapse' }}>
+            <thead>
+              <tr style={{ borderBottom: '2px solid #ddd', textAlign: 'left' }}>
+                <th style={{ padding: 8 }}>Mitra</th>
+                <th style={{ padding: 8 }}>Total</th>
+                <th style={{ padding: 8 }}>Accepted</th>
+                <th style={{ padding: 8 }}>Rejected</th>
+                <th style={{ padding: 8 }}>Missed</th>
+                <th style={{ padding: 8 }}>Ignored</th>
+                <th style={{ padding: 8 }}>Rate (%)</th>
+                <th style={{ padding: 8 }}>Avg Response (s)</th>
+              </tr>
+            </thead>
+            <tbody>
+              {(summary || []).map(s => (
+                <tr key={s.mitra_id} style={{ borderBottom: '1px solid #eee' }}>
+                  <td style={{ padding: 8 }}>{s.mitra_display_name}</td>
+                  <td style={{ padding: 8 }}>{s.total_requests}</td>
+                  <td style={{ padding: 8, color: '#22c55e' }}>{s.accepted_count}</td>
+                  <td style={{ padding: 8, color: '#ef4444' }}>{s.rejected_count}</td>
+                  <td style={{ padding: 8, color: '#f97316' }}>{s.missed_count}</td>
+                  <td style={{ padding: 8, color: '#9ca3af' }}>{s.ignored_count}</td>
+                  <td style={{ padding: 8 }}>{s.acceptance_rate ?? '-'}%</td>
+                  <td style={{ padding: 8 }}>{s.avg_response_time_seconds ?? '-'}</td>
+                </tr>
+              ))}
+              {(!summary || summary.length === 0) && (
+                <tr><td colSpan={8} style={{ padding: 16, textAlign: 'center', color: '#999' }}>Tidak ada data</td></tr>
+              )}
+            </tbody>
+          </table>
+        )}
+      </section>
+
+      <section>
+        <h2>Detail Log</h2>
+        {logLoading ? <p>Loading...</p> : (
+          <>
+            <table style={{ width: '100%', borderCollapse: 'collapse' }}>
+              <thead>
+                <tr style={{ borderBottom: '2px solid #ddd', textAlign: 'left' }}>
+                  <th style={{ padding: 8 }}>Mitra</th>
+                  <th style={{ padding: 8 }}>Session</th>
+                  <th style={{ padding: 8 }}>Response</th>
+                  <th style={{ padding: 8 }}>Response Time (s)</th>
+                  <th style={{ padding: 8 }}>Active Sessions</th>
+                  <th style={{ padding: 8 }}>Notified At</th>
+                  <th style={{ padding: 8 }}>Responded At</th>
+                </tr>
+              </thead>
+              <tbody>
+                {(logData?.items || []).map(item => (
+                  <tr key={item.id} style={{ borderBottom: '1px solid #eee' }}>
+                    <td style={{ padding: 8 }}>{item.mitra_display_name}</td>
+                    <td style={{ padding: 8, fontSize: 11, fontFamily: 'monospace' }}>{item.session_id?.substring(0, 8)}...</td>
+                    <td style={{ padding: 8 }}>
+                      <span style={{ color: responseColor(item.response), fontWeight: 'bold' }}>
+                        {item.response || '-'}
+                      </span>
+                    </td>
+                    <td style={{ padding: 8 }}>{item.response_time_seconds ?? '-'}</td>
+                    <td style={{ padding: 8 }}>{item.active_session_count}</td>
+                    <td style={{ padding: 8, fontSize: 12 }}>{formatDate(item.notified_at)}</td>
+                    <td style={{ padding: 8, fontSize: 12 }}>{formatDate(item.responded_at)}</td>
+                  </tr>
+                ))}
+                {(!logData?.items || logData.items.length === 0) && (
+                  <tr><td colSpan={7} style={{ padding: 16, textAlign: 'center', color: '#999' }}>Tidak ada data</td></tr>
+                )}
+              </tbody>
+            </table>
+            {logData && logData.total > logLimit && (
+              <div style={{ display: 'flex', gap: 8, marginTop: 12, alignItems: 'center' }}>
+                <button disabled={logPage <= 1} onClick={() => setLogPage(p => p - 1)}>Prev</button>
+                <span>Halaman {logData.page} dari {Math.ceil(logData.total / logLimit)}</span>
+                <button disabled={logPage >= Math.ceil(logData.total / logLimit)} onClick={() => setLogPage(p => p + 1)}>Next</button>
+              </div>
+            )}
+          </>
+        )}
+      </section>
+    </div>
+  )
+}