Close #5

admin-panel/src/App.tsx

@@ -33,15 +33,30 @@ interface EnvVars {
   [key: string]: string | undefined;
 }
 
+interface FeedRequest {
+  id: string;
+  url: string;
+  requestedBy?: string;
+  requestMessage?: string;
+  status: 'pending' | 'approved' | 'rejected';
+  createdAt: string;
+  reviewedAt?: string;
+  reviewedBy?: string;
+  adminNotes?: string;
+}
+
 function App() {
   const [feeds, setFeeds] = useState<Feed[]>([]);
   const [stats, setStats] = useState<Stats | null>(null);
   const [envVars, setEnvVars] = useState<EnvVars>({});
+  const [feedRequests, setFeedRequests] = useState<FeedRequest[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const [success, setSuccess] = useState<string | null>(null);
   const [newFeedUrl, setNewFeedUrl] = useState('');
-  const [activeTab, setActiveTab] = useState<'dashboard' | 'feeds' | 'env' | 'batch'>('dashboard');
+  const [requestFilter, setRequestFilter] = useState<'all' | 'pending' | 'approved' | 'rejected'>('all');
+  const [approvalNotes, setApprovalNotes] = useState<{[key: string]: string}>({});
+  const [activeTab, setActiveTab] = useState<'dashboard' | 'feeds' | 'env' | 'batch' | 'requests'>('dashboard');
 
   useEffect(() => {
     loadData();
@@ -50,25 +65,28 @@ function App() {
   const loadData = async () => {
     setLoading(true);
     try {
-      const [feedsRes, statsRes, envRes] = await Promise.all([
+      const [feedsRes, statsRes, envRes, requestsRes] = await Promise.all([
         fetch('/api/admin/feeds'),
         fetch('/api/admin/stats'),
-        fetch('/api/admin/env')
+        fetch('/api/admin/env'),
+        fetch('/api/admin/feed-requests')
       ]);
 
-      if (!feedsRes.ok || !statsRes.ok || !envRes.ok) {
+      if (!feedsRes.ok || !statsRes.ok || !envRes.ok || !requestsRes.ok) {
         throw new Error('Failed to load data');
       }
 
-      const [feedsData, statsData, envData] = await Promise.all([
+      const [feedsData, statsData, envData, requestsData] = await Promise.all([
         feedsRes.json(),
         statsRes.json(),
-        envRes.json()
+        envRes.json(),
+        requestsRes.json()
       ]);
 
       setFeeds(feedsData);
       setStats(statsData);
       setEnvVars(envData);
+      setFeedRequests(requestsData);
       setError(null);
     } catch (err) {
       setError('データの読み込みに失敗しました');
@@ -218,6 +236,65 @@ function App() {
     }
   };
 
+  const approveFeedRequest = async (requestId: string, notes: string) => {
+    try {
+      const res = await fetch(`/api/admin/feed-requests/${requestId}/approve`, {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ adminNotes: notes })
+      });
+
+      const data = await res.json();
+
+      if (res.ok) {
+        setSuccess(data.message || 'フィードリクエストを承認しました');
+        setApprovalNotes({ ...approvalNotes, [requestId]: '' });
+        loadData();
+      } else {
+        setError(data.error || 'フィードリクエストの承認に失敗しました');
+      }
+    } catch (err) {
+      setError('フィードリクエストの承認に失敗しました');
+      console.error('Error approving feed request:', err);
+    }
+  };
+
+  const rejectFeedRequest = async (requestId: string, notes: string) => {
+    if (!confirm('このフィードリクエストを拒否しますか？')) {
+      return;
+    }
+
+    try {
+      const res = await fetch(`/api/admin/feed-requests/${requestId}/reject`, {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ adminNotes: notes })
+      });
+
+      const data = await res.json();
+
+      if (res.ok) {
+        setSuccess(data.message || 'フィードリクエストを拒否しました');
+        setApprovalNotes({ ...approvalNotes, [requestId]: '' });
+        loadData();
+      } else {
+        setError(data.error || 'フィードリクエストの拒否に失敗しました');
+      }
+    } catch (err) {
+      setError('フィードリクエストの拒否に失敗しました');
+      console.error('Error rejecting feed request:', err);
+    }
+  };
+
+  const updateApprovalNotes = (requestId: string, notes: string) => {
+    setApprovalNotes({ ...approvalNotes, [requestId]: notes });
+  };
+
+  const filteredRequests = feedRequests.filter(request => {
+    if (requestFilter === 'all') return true;
+    return request.status === requestFilter;
+  });
+
   if (loading) {
     return <div className="container"><div className="loading">読み込み中...</div></div>;
   }
@@ -253,6 +330,12 @@ function App() {
             >
               バッチ管理
             </button>
+            <button 
+              className={`btn ${activeTab === 'requests' ? 'btn-primary' : 'btn-secondary'}`}
+              onClick={() => setActiveTab('requests')}
+            >
+              フィード承認
+            </button>
             <button 
               className={`btn ${activeTab === 'env' ? 'btn-primary' : 'btn-secondary'}`}
               onClick={() => setActiveTab('env')}
@@ -481,6 +564,118 @@ function App() {
             </>
           )}
 
+          {activeTab === 'requests' && (
+            <>
+              <h3>フィードリクエスト管理</h3>
+              <p style={{ marginBottom: '20px', color: '#7f8c8d' }}>
+                ユーザーから送信されたフィード追加リクエストを承認・拒否できます。
+              </p>
+
+              <div style={{ marginBottom: '20px' }}>
+                <div style={{ display: 'flex', gap: '8px' }}>
+                  <button 
+                    className={`btn ${requestFilter === 'all' ? 'btn-primary' : 'btn-secondary'}`}
+                    onClick={() => setRequestFilter('all')}
+                  >
+                    すべて ({feedRequests.length})
+                  </button>
+                  <button 
+                    className={`btn ${requestFilter === 'pending' ? 'btn-primary' : 'btn-secondary'}`}
+                    onClick={() => setRequestFilter('pending')}
+                  >
+                    保留中 ({feedRequests.filter(r => r.status === 'pending').length})
+                  </button>
+                  <button 
+                    className={`btn ${requestFilter === 'approved' ? 'btn-primary' : 'btn-secondary'}`}
+                    onClick={() => setRequestFilter('approved')}
+                  >
+                    承認済み ({feedRequests.filter(r => r.status === 'approved').length})
+                  </button>
+                  <button 
+                    className={`btn ${requestFilter === 'rejected' ? 'btn-primary' : 'btn-secondary'}`}
+                    onClick={() => setRequestFilter('rejected')}
+                  >
+                    拒否済み ({feedRequests.filter(r => r.status === 'rejected').length})
+                  </button>
+                </div>
+              </div>
+
+              {filteredRequests.length === 0 ? (
+                <p style={{ color: '#7f8c8d', textAlign: 'center', padding: '20px' }}>
+                  {requestFilter === 'all' ? 'フィードリクエストがありません' : `${requestFilter === 'pending' ? '保留中' : requestFilter === 'approved' ? '承認済み' : '拒否済み'}のリクエストがありません`}
+                </p>
+              ) : (
+                <div className="requests-list">
+                  {filteredRequests.map((request) => (
+                    <div key={request.id} className="feed-item" style={{ marginBottom: '16px' }}>
+                      <div className="feed-info">
+                        <h4 style={{ margin: '0 0 8px 0', fontSize: '16px' }}>{request.url}</h4>
+                        {request.requestMessage && (
+                          <p style={{ margin: '0 0 8px 0', fontSize: '14px', color: '#666' }}>
+                            メッセージ: {request.requestMessage}
+                          </p>
+                        )}
+                        <div style={{ fontSize: '12px', color: '#999' }}>
+                          <span>申請者: {request.requestedBy || '匿名'}</span>
+                          <span style={{ margin: '0 8px' }}>|</span>
+                          <span>申請日: {new Date(request.createdAt).toLocaleString('ja-JP')}</span>
+                          {request.reviewedAt && (
+                            <>
+                              <span style={{ margin: '0 8px' }}>|</span>
+                              <span>審査日: {new Date(request.reviewedAt).toLocaleString('ja-JP')}</span>
+                            </>
+                          )}
+                        </div>
+                        <span className={`status ${request.status === 'approved' ? 'active' : request.status === 'rejected' ? 'inactive' : ''}`}>
+                          {request.status === 'pending' ? '保留中' : request.status === 'approved' ? '承認済み' : '拒否済み'}
+                        </span>
+                        {request.adminNotes && (
+                          <div style={{ marginTop: '8px', padding: '8px', background: '#f8f9fa', borderRadius: '4px', fontSize: '14px' }}>
+                            <strong>管理者メモ:</strong> {request.adminNotes}
+                          </div>
+                        )}
+                      </div>
+                      {request.status === 'pending' && (
+                        <div className="feed-actions" style={{ flexDirection: 'column', gap: '8px', minWidth: '200px' }}>
+                          <textarea
+                            placeholder="管理者メモ（任意）"
+                            value={approvalNotes[request.id] || ''}
+                            onChange={(e) => updateApprovalNotes(request.id, e.target.value)}
+                            style={{
+                              width: '100%',
+                              minHeight: '60px',
+                              padding: '8px',
+                              border: '1px solid #ddd',
+                              borderRadius: '4px',
+                              fontSize: '12px',
+                              resize: 'vertical'
+                            }}
+                          />
+                          <div style={{ display: 'flex', gap: '4px' }}>
+                            <button
+                              className="btn btn-success"
+                              onClick={() => approveFeedRequest(request.id, approvalNotes[request.id] || '')}
+                              style={{ fontSize: '12px', padding: '6px 12px' }}
+                            >
+                              承認
+                            </button>
+                            <button
+                              className="btn btn-danger"
+                              onClick={() => rejectFeedRequest(request.id, approvalNotes[request.id] || '')}
+                              style={{ fontSize: '12px', padding: '6px 12px' }}
+                            >
+                              拒否
+                            </button>
+                          </div>
+                        </div>
+                      )}
+                    </div>
+                  ))}
+                </div>
+              )}
+            </>
+          )}
+
           {activeTab === 'env' && (
             <>
               <h3>環境変数設定</h3>