759851fe5e
Translate UI elements, including button labels and descriptive text within the MediaOutletManagement component, from Korean to English. Replit-Commit-Author: Agent Replit-Commit-Session-Id: 069d4324-6c40-4355-955e-c714a50de1ea Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/3df548ff-50ae-432f-9be4-25d34eccc983/069d4324-6c40-4355-955e-c714a50de1ea/gVirbWH
283 lines
12 KiB
TypeScript
283 lines
12 KiB
TypeScript
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">
|
|
<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" />
|
|
Edit
|
|
</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">Overview</TabsTrigger>
|
|
<TabsTrigger value="articles" data-testid="tab-articles">Articles</TabsTrigger>
|
|
<TabsTrigger value="predictions" data-testid="tab-predictions">Prediction Markets</TabsTrigger>
|
|
<TabsTrigger value="auctions" data-testid="tab-auctions">Auctions</TabsTrigger>
|
|
<TabsTrigger value="comments" data-testid="tab-comments">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">Total Articles</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">Active Prediction Markets</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">Active Auctions</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">Total Comments</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>Media Outlet Information</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<div>
|
|
<label className="text-sm font-medium text-gray-700">Name</label>
|
|
<Input value={outlet.name} readOnly className="mt-1" />
|
|
</div>
|
|
<div>
|
|
<label className="text-sm font-medium text-gray-700">Description</label>
|
|
<Input value={outlet.description || ""} readOnly className="mt-1" />
|
|
</div>
|
|
<div>
|
|
<label className="text-sm font-medium text-gray-700">Category</label>
|
|
<Input value={outlet.category} readOnly className="mt-1" />
|
|
</div>
|
|
<div>
|
|
<label className="text-sm font-medium text-gray-700">Slug</label>
|
|
<Input value={outlet.slug} readOnly className="mt-1" />
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Quick Actions</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" />
|
|
Create New Article
|
|
</Button>
|
|
<Button
|
|
className="w-full justify-start"
|
|
variant="outline"
|
|
data-testid="button-create-prediction"
|
|
>
|
|
<BarChart3 className="h-4 w-4 mr-2" />
|
|
Create Prediction Market
|
|
</Button>
|
|
<Button
|
|
className="w-full justify-start"
|
|
variant="outline"
|
|
data-testid="button-start-auction"
|
|
>
|
|
<Gavel className="h-4 w-4 mr-2" />
|
|
Start Auction
|
|
</Button>
|
|
<Button
|
|
className="w-full justify-start"
|
|
variant="outline"
|
|
data-testid="button-moderate-comments"
|
|
>
|
|
<MessageSquare className="h-4 w-4 mr-2" />
|
|
Manage Comments
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</TabsContent>
|
|
|
|
<TabsContent value="articles" className="mt-6">
|
|
<Card>
|
|
<CardHeader>
|
|
<div className="flex items-center justify-between">
|
|
<CardTitle>Article Management</CardTitle>
|
|
<Button data-testid="button-new-article">
|
|
<Plus className="h-4 w-4 mr-2" />
|
|
Create New Article
|
|
</Button>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-center py-12">
|
|
<div className="text-gray-400 text-lg mb-2">No articles yet</div>
|
|
<div className="text-gray-500 text-sm">Create your first article</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</TabsContent>
|
|
|
|
<TabsContent value="predictions" className="mt-6">
|
|
<Card>
|
|
<CardHeader>
|
|
<div className="flex items-center justify-between">
|
|
<CardTitle>Prediction Market Management</CardTitle>
|
|
<Button data-testid="button-new-prediction">
|
|
<Plus className="h-4 w-4 mr-2" />
|
|
Create New Market
|
|
</Button>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-center py-12">
|
|
<div className="text-gray-400 text-lg mb-2">No active prediction markets</div>
|
|
<div className="text-gray-500 text-sm">Create a new prediction market</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</TabsContent>
|
|
|
|
<TabsContent value="auctions" className="mt-6">
|
|
<Card>
|
|
<CardHeader>
|
|
<div className="flex items-center justify-between">
|
|
<CardTitle>Auction Management</CardTitle>
|
|
<Button data-testid="button-new-auction">
|
|
<Plus className="h-4 w-4 mr-2" />
|
|
Start New Auction
|
|
</Button>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-center py-12">
|
|
<div className="text-gray-400 text-lg mb-2">No active auctions</div>
|
|
<div className="text-gray-500 text-sm">Start a new auction</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</TabsContent>
|
|
|
|
<TabsContent value="comments" className="mt-6">
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Comment Management</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-center py-12">
|
|
<div className="text-gray-400 text-lg mb-2">No comments to manage</div>
|
|
<div className="text-gray-500 text-sm">Comments will appear here when posted</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</TabsContent>
|
|
</Tabs>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |