From 11e51583784b1ce69942f904e18ce4ba8f06ee81 Mon Sep 17 00:00:00 2001
From: zephyrdark <zephyrdark@gmail.com>
Date: Tue, 3 Feb 2026 00:02:15 +0900
Subject: [PATCH] feat: add data management admin page

Add frontend page for admin data collection management at /admin/data.
The page displays available collectors (stocks, sectors, prices, valuations)
with buttons to trigger collection jobs, and shows recent job history
with status, timing, record counts, and error information.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 frontend/src/app/admin/data/page.tsx | 180 +++++++++++++++++++++++++++
 1 file changed, 180 insertions(+)
 create mode 100644 frontend/src/app/admin/data/page.tsx

diff --git a/frontend/src/app/admin/data/page.tsx b/frontend/src/app/admin/data/page.tsx
new file mode 100644
index 0000000..f65c978
--- /dev/null
+++ b/frontend/src/app/admin/data/page.tsx
@@ -0,0 +1,180 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import Sidebar from '@/components/layout/Sidebar';
+import Header from '@/components/layout/Header';
+import { api } from '@/lib/api';
+
+interface JobLog {
+  id: number;
+  job_name: string;
+  status: string;
+  started_at: string;
+  finished_at: string | null;
+  records_count: number | null;
+  error_msg: string | null;
+}
+
+interface User {
+  id: number;
+  username: string;
+  email: string;
+}
+
+const collectors = [
+  { key: 'stocks', label: '종목 마스터', description: 'KRX에서 종목 정보 수집' },
+  { key: 'sectors', label: '섹터 정보', description: 'WISEindex에서 섹터 분류 수집' },
+  { key: 'prices', label: '가격 데이터', description: 'pykrx로 OHLCV 데이터 수집' },
+  { key: 'valuations', label: '밸류 지표', description: 'KRX에서 PER/PBR 등 수집' },
+];
+
+export default function DataManagementPage() {
+  const router = useRouter();
+  const [user, setUser] = useState<User | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [jobs, setJobs] = useState<JobLog[]>([]);
+  const [collecting, setCollecting] = useState<string | null>(null);
+
+  useEffect(() => {
+    const init = async () => {
+      try {
+        const userData = await api.getCurrentUser() as User;
+        setUser(userData);
+        await fetchJobs();
+      } catch {
+        router.push('/login');
+      } finally {
+        setLoading(false);
+      }
+    };
+    init();
+  }, [router]);
+
+  const fetchJobs = async () => {
+    try {
+      const data = await api.get<JobLog[]>('/api/admin/collect/status');
+      setJobs(data);
+    } catch (err) {
+      console.error('Failed to fetch jobs:', err);
+    }
+  };
+
+  const runCollector = async (key: string) => {
+    setCollecting(key);
+    try {
+      await api.post(`/api/admin/collect/${key}`);
+      await fetchJobs();
+    } catch (err) {
+      console.error('Collection failed:', err);
+    } finally {
+      setCollecting(null);
+    }
+  };
+
+  const getStatusBadge = (status: string) => {
+    const colors: Record<string, string> = {
+      success: 'bg-green-100 text-green-800',
+      failed: 'bg-red-100 text-red-800',
+      running: 'bg-yellow-100 text-yellow-800',
+    };
+    return colors[status] || 'bg-gray-100 text-gray-800';
+  };
+
+  if (loading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center">
+        <div className="text-gray-500">Loading...</div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex min-h-screen">
+      <Sidebar />
+      <div className="flex-1">
+        <Header username={user?.username} />
+        <main className="p-6">
+          <h1 className="text-2xl font-bold text-gray-800 mb-6">데이터 수집 관리</h1>
+
+          <div className="bg-white rounded-lg shadow mb-6">
+            <div className="p-4 border-b">
+              <h2 className="text-lg font-semibold">수집 작업</h2>
+            </div>
+            <div className="p-4">
+              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+                {collectors.map((col) => (
+                  <div
+                    key={col.key}
+                    className="border rounded-lg p-4 flex flex-col"
+                  >
+                    <h3 className="font-medium text-gray-800">{col.label}</h3>
+                    <p className="text-sm text-gray-500 mb-4">{col.description}</p>
+                    <button
+                      onClick={() => runCollector(col.key)}
+                      disabled={collecting !== null}
+                      className="mt-auto px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 disabled:bg-blue-400 transition-colors"
+                    >
+                      {collecting === col.key ? '수집 중...' : '실행'}
+                    </button>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+
+          <div className="bg-white rounded-lg shadow">
+            <div className="p-4 border-b flex justify-between items-center">
+              <h2 className="text-lg font-semibold">최근 작업 이력</h2>
+              <button
+                onClick={fetchJobs}
+                className="text-sm text-blue-600 hover:text-blue-800"
+              >
+                새로고침
+              </button>
+            </div>
+            <div className="overflow-x-auto">
+              <table className="w-full">
+                <thead className="bg-gray-50">
+                  <tr>
+                    <th className="px-4 py-3 text-left text-sm font-medium text-gray-600">작업명</th>
+                    <th className="px-4 py-3 text-left text-sm font-medium text-gray-600">상태</th>
+                    <th className="px-4 py-3 text-left text-sm font-medium text-gray-600">시작 시간</th>
+                    <th className="px-4 py-3 text-left text-sm font-medium text-gray-600">건수</th>
+                    <th className="px-4 py-3 text-left text-sm font-medium text-gray-600">에러</th>
+                  </tr>
+                </thead>
+                <tbody className="divide-y">
+                  {jobs.map((job) => (
+                    <tr key={job.id}>
+                      <td className="px-4 py-3 text-sm">{job.job_name}</td>
+                      <td className="px-4 py-3">
+                        <span className={`px-2 py-1 rounded text-xs ${getStatusBadge(job.status)}`}>
+                          {job.status}
+                        </span>
+                      </td>
+                      <td className="px-4 py-3 text-sm text-gray-600">
+                        {new Date(job.started_at).toLocaleString('ko-KR')}
+                      </td>
+                      <td className="px-4 py-3 text-sm">{job.records_count ?? '-'}</td>
+                      <td className="px-4 py-3 text-sm text-red-600 truncate max-w-xs">
+                        {job.error_msg || '-'}
+                      </td>
+                    </tr>
+                  ))}
+                  {jobs.length === 0 && (
+                    <tr>
+                      <td colSpan={5} className="px-4 py-8 text-center text-gray-500">
+                        아직 수집 이력이 없습니다.
+                      </td>
+                    </tr>
+                  )}
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </main>
+      </div>
+    </div>
+  );
+}