371 lines
14 KiB
TypeScript
371 lines
14 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import {
|
|
Paperclip,
|
|
Send,
|
|
Smile,
|
|
Mic,
|
|
CheckCircle2,
|
|
Upload,
|
|
} from "lucide-react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
export default function ApproverDetail() {
|
|
const [activeTab, setActiveTab] = useState<"detail" | "buatKonten">("detail");
|
|
const [step, setStep] = useState<"configuration" | "publish">(
|
|
"configuration",
|
|
);
|
|
|
|
return (
|
|
<div className="max-w-full mx-auto bg-white rounded-lg shadow-sm p-6 space-y-6">
|
|
{/* Header Tabs */}
|
|
<div className="flex gap-2 border-b pb-3">
|
|
<button
|
|
onClick={() => {
|
|
setActiveTab("detail");
|
|
setStep("configuration");
|
|
}}
|
|
className={cn(
|
|
"px-4 py-2 text-sm font-medium rounded-md transition",
|
|
activeTab === "detail"
|
|
? "bg-black text-white font-semibold"
|
|
: "text-gray-600 hover:text-black",
|
|
)}
|
|
>
|
|
Detail Konten
|
|
</button>
|
|
<button
|
|
onClick={() => setActiveTab("buatKonten")}
|
|
className={cn(
|
|
"px-4 py-2 text-sm font-medium rounded-md transition",
|
|
activeTab === "buatKonten"
|
|
? "bg-black text-white font-semibold"
|
|
: "text-gray-600 hover:text-black",
|
|
)}
|
|
>
|
|
Buat Konten
|
|
</button>
|
|
</div>
|
|
|
|
{/* DETAIL KONTEN */}
|
|
{activeTab === "detail" ? (
|
|
<>
|
|
<div>
|
|
<h2 className="text-sm text-gray-600 mb-1">Status</h2>
|
|
<span className="bg-gray-200 text-gray-700 px-3 py-1 rounded-full text-xs font-medium">
|
|
Tertunda
|
|
</span>
|
|
</div>
|
|
|
|
<div>
|
|
<h2 className="text-sm text-gray-600 mb-1">Judul Campaign</h2>
|
|
<p className="text-sm font-medium text-gray-800">
|
|
Lorem ipsum dolor sit amet consectetur. In faucibus diam eu ut
|
|
quisque.
|
|
</p>
|
|
</div>
|
|
|
|
<div>
|
|
<h2 className="text-sm text-gray-600 mb-1">Durasi</h2>
|
|
<p className="text-sm font-medium text-gray-800">
|
|
22/08/2025 - 22/08/2026
|
|
</p>
|
|
</div>
|
|
|
|
<div>
|
|
<h2 className="text-sm text-gray-600 mb-1">Media</h2>
|
|
<p className="font-semibold text-sm text-gray-900 mb-1">
|
|
Media Online
|
|
</p>
|
|
<ul className="text-sm text-gray-700 list-disc ml-4 space-y-1">
|
|
<li>Tribrata News Mabes</li>
|
|
<li>Tribrata News Polda Aceh</li>
|
|
<li>Tribrata News Polda Jawa Timur</li>
|
|
<li>Tribrata News Polda Jawa Tengah</li>
|
|
<li>Tribrata News Polda Jawa Barat</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div>
|
|
<h2 className="text-sm text-gray-600 mb-1">Tujuan</h2>
|
|
<p className="text-sm font-semibold text-gray-800">Sosialisasi</p>
|
|
</div>
|
|
|
|
<div>
|
|
<h2 className="text-sm text-gray-600 mb-1">Materi Promote</h2>
|
|
<div className="flex items-center justify-between border rounded-lg px-3 py-2 bg-gray-50">
|
|
<div>
|
|
<p className="text-sm font-medium text-gray-800">
|
|
Report name_T1.pdf
|
|
</p>
|
|
<p className="text-xs text-gray-500">23.5MB</p>
|
|
</div>
|
|
<Paperclip className="w-4 h-4 text-gray-500" />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="pt-2 border-t">
|
|
<h2 className="text-sm text-gray-600 mb-2">Komentar</h2>
|
|
|
|
<div className="flex items-start gap-3">
|
|
<img
|
|
src="https://ui-avatars.com/api/?name=Kurator+POLRI&background=16a34a&color=fff"
|
|
alt="Kurator POLRI"
|
|
className="w-10 h-10 rounded-full"
|
|
/>
|
|
<div className="flex-1 border rounded-lg px-3 py-2 bg-gray-50">
|
|
<textarea
|
|
placeholder="Tuliskan komentar Anda di sini.."
|
|
className="w-full text-sm bg-transparent focus:outline-none resize-none"
|
|
rows={2}
|
|
/>
|
|
<div className="flex justify-between items-center mt-2 text-gray-500">
|
|
<div className="flex gap-3">
|
|
<Mic className="w-4 h-4 cursor-pointer hover:text-black" />
|
|
<Paperclip className="w-4 h-4 cursor-pointer hover:text-black" />
|
|
<Smile className="w-4 h-4 cursor-pointer hover:text-black" />
|
|
</div>
|
|
<Button
|
|
size="sm"
|
|
className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-1 text-sm"
|
|
>
|
|
Kirim
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
) : (
|
|
// ==============================
|
|
// BUAT KONTEN
|
|
// ==============================
|
|
<div>
|
|
{/* STEP PROGRESS */}
|
|
<div className="relative flex items-center justify-between mb-6">
|
|
<div className="flex-1 h-0.5 bg-blue-500 absolute top-1/2 left-0 right-0 z-0" />
|
|
<div className="relative z-10 flex justify-between w-full">
|
|
<div className="flex flex-col items-center">
|
|
<div className="w-6 h-6 rounded-full bg-blue-600 flex items-center justify-center text-white">
|
|
<CheckCircle2 className="w-4 h-4" />
|
|
</div>
|
|
<span className="text-blue-600 text-sm mt-1 font-semibold">
|
|
Configuration
|
|
</span>
|
|
</div>
|
|
<div className="flex flex-col items-center">
|
|
<div
|
|
className={cn(
|
|
"w-6 h-6 rounded-full border-2 flex items-center justify-center",
|
|
step === "publish"
|
|
? "bg-blue-600 border-blue-600 text-white"
|
|
: "border-blue-300 text-gray-400",
|
|
)}
|
|
>
|
|
{step === "publish" ? (
|
|
<CheckCircle2 className="w-4 h-4" />
|
|
) : (
|
|
<div className="w-2 h-2 bg-blue-300 rounded-full" />
|
|
)}
|
|
</div>
|
|
<span
|
|
className={cn(
|
|
"text-sm mt-1 font-semibold",
|
|
step === "publish" ? "text-blue-600" : "text-gray-400",
|
|
)}
|
|
>
|
|
Publish
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* CONFIGURATION FORM */}
|
|
{step === "configuration" && (
|
|
<div>
|
|
<h2 className="text-lg font-semibold mb-4">Configuration</h2>
|
|
<div className="space-y-4">
|
|
<div>
|
|
<label className="block text-sm font-medium mb-1">
|
|
Select AI Journalist
|
|
</label>
|
|
<select className="border w-full rounded-md px-3 py-2 text-sm">
|
|
<option>Select AI Journalist</option>
|
|
<option>AI Journalist 1</option>
|
|
<option>AI Journalist 2</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium mb-1">
|
|
Main Keywords
|
|
</label>
|
|
<Input placeholder="Enter your main keyword here..." />
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium mb-1">
|
|
Title
|
|
</label>
|
|
<Input placeholder="Enter your title here..." />
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium mb-1">
|
|
SEO Keywords
|
|
</label>
|
|
<Input placeholder="Enter SEO keywords..." />
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium mb-1">
|
|
Advanced Configuration
|
|
</label>
|
|
<textarea
|
|
className="w-full border rounded-md px-3 py-2 text-sm"
|
|
rows={3}
|
|
placeholder="Advanced settings..."
|
|
/>
|
|
</div>
|
|
|
|
<Button
|
|
className="bg-blue-600 hover:bg-blue-700 text-white"
|
|
onClick={() => setStep("publish")}
|
|
>
|
|
⚡ Generate Article
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* PUBLISH STEP */}
|
|
{step === "publish" && (
|
|
<div className="mt-4">
|
|
<h2 className="text-lg font-semibold text-blue-600 mb-3">
|
|
Publish
|
|
</h2>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
{/* LEFT CONTENT */}
|
|
<div className="md:col-span-2 space-y-4">
|
|
<label className="text-sm font-medium text-gray-700 mb-1 block">
|
|
Judul
|
|
</label>
|
|
<Input
|
|
placeholder="Judul"
|
|
defaultValue="Lorem ipsum dolor sit amet consectetur. In faucibus diam eu ut quisque."
|
|
/>
|
|
|
|
<div>
|
|
<label className="text-sm font-medium text-gray-700 mb-1 block">
|
|
Deskripsi
|
|
</label>
|
|
<textarea
|
|
rows={8}
|
|
className="w-full border rounded-md px-3 py-2 text-sm focus:outline-none"
|
|
defaultValue={`Kapolri Jenderal Polisi Drs. Listyo Sigit Prabowo, M.Si. mendampingi Presiden Joko Widodo menghadiri upacara Peringatan Hari Kesaktian Pancasila di Monumen Pancasila Sakti, Lubang Buaya, Jakarta Timur, pada Selasa (1/10/2024)...`}
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="text-sm font-medium text-gray-700 mb-1 block">
|
|
File Media
|
|
</label>
|
|
|
|
<div className="grid grid-cols-2 md:grid-cols-3 gap-3">
|
|
{/* Dummy image sementara, nanti diganti dari API */}
|
|
{["/p1.jpg", "/p2.png"].map((url, i) => (
|
|
<div
|
|
key={i}
|
|
className="relative w-full h-24 rounded-md overflow-hidden border"
|
|
>
|
|
<img
|
|
src={url}
|
|
alt={`Media ${i + 1}`}
|
|
className="object-cover w-full h-full"
|
|
/>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* RIGHT SIDEBAR */}
|
|
<div className="space-y-4">
|
|
<div>
|
|
<label className="text-sm font-medium text-gray-700 mb-1 block">
|
|
Kreator
|
|
</label>
|
|
<Input defaultValue="Humas POLRI" />
|
|
</div>
|
|
|
|
<div>
|
|
<label className="text-sm font-medium text-gray-700 mb-1 block">
|
|
Thumbnail
|
|
</label>
|
|
<div className="border border-dashed rounded-md py-6 flex flex-col items-center justify-center text-gray-400 text-sm">
|
|
<Upload className="w-5 h-5 mb-1" />
|
|
Drag and drop
|
|
<p className="text-xs text-gray-500 mt-1">
|
|
.PNG, .JPG max 3MB
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="text-sm font-medium text-gray-700 mb-1 block">
|
|
Tag
|
|
</label>
|
|
<Input
|
|
placeholder="Masukkan tag..."
|
|
defaultValue="Humas POLRI"
|
|
/>
|
|
<div className="flex flex-wrap gap-2 mt-2">
|
|
<span className="px-2 py-1 text-xs bg-blue-100 text-blue-700 rounded-md">
|
|
Poldakaltim
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="text-sm font-medium text-gray-700 mb-2 block">
|
|
Target Publish
|
|
</label>
|
|
<div className="space-y-2">
|
|
{[
|
|
"Tribrata News Mabes",
|
|
"Tribrata News Polda Aceh",
|
|
"Tribrata News Polda Jawa Timur",
|
|
"Tribrata News Polda Jawa Tengah",
|
|
"Tribrata News Polda Jawa Barat",
|
|
].map((item) => (
|
|
<label
|
|
key={item}
|
|
className="flex items-center text-sm gap-2"
|
|
>
|
|
<input
|
|
type="checkbox"
|
|
className="rounded border-gray-300"
|
|
/>
|
|
{item}
|
|
</label>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<Button className="w-full bg-blue-600 hover:bg-blue-700 text-white">
|
|
✓ Publish Terjadwal
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|