Add ability to search and manage individual media outlets
Implement admin dashboard with media outlet search, selection, and a dedicated management page for each outlet. Replit-Commit-Author: Agent Replit-Commit-Session-Id: 069d4324-6c40-4355-955e-c714a50de1ea Replit-Commit-Checkpoint-Type: intermediate_checkpoint Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/3df548ff-50ae-432f-9be4-25d34eccc983/069d4324-6c40-4355-955e-c714a50de1ea/jvFIdY3
This commit is contained in:
kimjaehyeon0101
293
client/src/components/MediaOutletManagement.tsx
Normal file
293
client/src/components/MediaOutletManagement.tsx
Normal file
@ -0,0 +1,293 @@
|
||||
import { useState } from "react";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||
import { ArrowLeft, Edit, Plus, BarChart3, Gavel, MessageSquare } from "lucide-react";
|
||||
import type { MediaOutlet } from "@shared/schema";
|
||||
|
||||
interface MediaOutletManagementProps {
|
||||
outlet: MediaOutlet;
|
||||
onBack: () => void;
|
||||
}
|
||||
|
||||
export default function MediaOutletManagement({ outlet, onBack }: MediaOutletManagementProps) {
|
||||
const [activeTab, setActiveTab] = useState("overview");
|
||||
|
||||
// TODO: Add queries for articles, predictions, auctions, comments related to this outlet
|
||||
const { data: articles = [] } = useQuery({
|
||||
queryKey: ["/api/articles", outlet.id],
|
||||
enabled: false, // Disabled for now as articles API is not implemented
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
{/* Header */}
|
||||
<div className="bg-white border-b border-gray-200 sticky top-0 z-50">
|
||||
<div className="max-w-7xl mx-auto px-6 py-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center space-x-4">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={onBack}
|
||||
data-testid="button-back"
|
||||
>
|
||||
<ArrowLeft className="h-4 w-4 mr-2" />
|
||||
뒤로가기
|
||||
</Button>
|
||||
|
||||
<div className="flex items-center space-x-3">
|
||||
{outlet.imageUrl ? (
|
||||
<img
|
||||
src={outlet.imageUrl}
|
||||
alt={outlet.name}
|
||||
className="w-10 h-10 rounded-full object-cover"
|
||||
/>
|
||||
) : (
|
||||
<div className="w-10 h-10 bg-gray-200 rounded-full flex items-center justify-center">
|
||||
<span className="text-gray-600 font-medium">
|
||||
{outlet.name.charAt(0)}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
<div>
|
||||
<h1 className="text-xl font-bold text-gray-900">{outlet.name}</h1>
|
||||
<p className="text-sm text-gray-500">{outlet.description || "Media Outlet"}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-2">
|
||||
<span className="inline-block px-3 py-1 text-sm font-medium bg-blue-100 text-blue-800 rounded-full">
|
||||
{outlet.category}
|
||||
</span>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
data-testid="button-edit-outlet"
|
||||
>
|
||||
<Edit className="h-4 w-4 mr-2" />
|
||||
편집
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Main Content */}
|
||||
<div className="max-w-7xl mx-auto px-6 py-6">
|
||||
<Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
|
||||
<TabsList className="grid w-full grid-cols-5">
|
||||
<TabsTrigger value="overview" data-testid="tab-overview">개요</TabsTrigger>
|
||||
<TabsTrigger value="articles" data-testid="tab-articles">기사 관리</TabsTrigger>
|
||||
<TabsTrigger value="predictions" data-testid="tab-predictions">예측시장</TabsTrigger>
|
||||
<TabsTrigger value="auctions" data-testid="tab-auctions">경매</TabsTrigger>
|
||||
<TabsTrigger value="comments" data-testid="tab-comments">댓글</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value="overview" className="mt-6">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
|
||||
<Card>
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h3 className="text-sm font-medium text-gray-500">총 기사 수</h3>
|
||||
<p className="text-2xl font-bold">0</p>
|
||||
</div>
|
||||
<div className="text-blue-600">
|
||||
<BarChart3 className="h-6 w-6" />
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h3 className="text-sm font-medium text-gray-500">활성 예측시장</h3>
|
||||
<p className="text-2xl font-bold">0</p>
|
||||
</div>
|
||||
<div className="text-green-600">
|
||||
<BarChart3 className="h-6 w-6" />
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h3 className="text-sm font-medium text-gray-500">진행중인 경매</h3>
|
||||
<p className="text-2xl font-bold">0</p>
|
||||
</div>
|
||||
<div className="text-orange-600">
|
||||
<Gavel className="h-6 w-6" />
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h3 className="text-sm font-medium text-gray-500">총 댓글 수</h3>
|
||||
<p className="text-2xl font-bold">0</p>
|
||||
</div>
|
||||
<div className="text-purple-600">
|
||||
<MessageSquare className="h-6 w-6" />
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>언론매체 정보</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div>
|
||||
<label className="text-sm font-medium text-gray-700">이름</label>
|
||||
<Input value={outlet.name} readOnly className="mt-1" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-sm font-medium text-gray-700">설명</label>
|
||||
<Input value={outlet.description || ""} readOnly className="mt-1" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-sm font-medium text-gray-700">카테고리</label>
|
||||
<Input value={outlet.category} readOnly className="mt-1" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-sm font-medium text-gray-700">슬러그</label>
|
||||
<Input value={outlet.slug} readOnly className="mt-1" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>빠른 작업</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
<Button
|
||||
className="w-full justify-start"
|
||||
variant="outline"
|
||||
data-testid="button-create-article"
|
||||
>
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
새 기사 작성
|
||||
</Button>
|
||||
<Button
|
||||
className="w-full justify-start"
|
||||
variant="outline"
|
||||
data-testid="button-create-prediction"
|
||||
>
|
||||
<BarChart3 className="h-4 w-4 mr-2" />
|
||||
예측시장 생성
|
||||
</Button>
|
||||
<Button
|
||||
className="w-full justify-start"
|
||||
variant="outline"
|
||||
data-testid="button-start-auction"
|
||||
>
|
||||
<Gavel className="h-4 w-4 mr-2" />
|
||||
경매 시작
|
||||
</Button>
|
||||
<Button
|
||||
className="w-full justify-start"
|
||||
variant="outline"
|
||||
data-testid="button-moderate-comments"
|
||||
>
|
||||
<MessageSquare className="h-4 w-4 mr-2" />
|
||||
댓글 관리
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="articles" className="mt-6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="flex items-center justify-between">
|
||||
<CardTitle>기사 관리</CardTitle>
|
||||
<Button data-testid="button-new-article">
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
새 기사 작성
|
||||
</Button>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-center py-12">
|
||||
<div className="text-gray-400 text-lg mb-2">아직 기사가 없습니다</div>
|
||||
<div className="text-gray-500 text-sm">첫 번째 기사를 작성해보세요</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="predictions" className="mt-6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="flex items-center justify-between">
|
||||
<CardTitle>예측시장 관리</CardTitle>
|
||||
<Button data-testid="button-new-prediction">
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
새 예측시장 생성
|
||||
</Button>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-center py-12">
|
||||
<div className="text-gray-400 text-lg mb-2">활성 예측시장이 없습니다</div>
|
||||
<div className="text-gray-500 text-sm">새로운 예측시장을 생성해보세요</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="auctions" className="mt-6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="flex items-center justify-between">
|
||||
<CardTitle>경매 관리</CardTitle>
|
||||
<Button data-testid="button-new-auction">
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
새 경매 시작
|
||||
</Button>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-center py-12">
|
||||
<div className="text-gray-400 text-lg mb-2">진행중인 경매가 없습니다</div>
|
||||
<div className="text-gray-500 text-sm">새로운 경매를 시작해보세요</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="comments" className="mt-6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>댓글 관리</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-center py-12">
|
||||
<div className="text-gray-400 text-lg mb-2">관리할 댓글이 없습니다</div>
|
||||
<div className="text-gray-500 text-sm">댓글이 등록되면 여기서 관리할 수 있습니다</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user