update UI
continuous-integration/drone/push Build is passing Details

This commit is contained in:
Anang Yusman 2026-04-15 11:12:34 +08:00
parent c46fdf1c5d
commit 086a3e858e
3 changed files with 85 additions and 11 deletions

View File

@ -16,7 +16,7 @@ import { cn } from "@/lib/utils";
export default function ApproverDetail() {
const [activeTab, setActiveTab] = useState<"detail" | "buatKonten">("detail");
const [step, setStep] = useState<"configuration" | "publish">(
"configuration"
"configuration",
);
return (
@ -32,7 +32,7 @@ export default function ApproverDetail() {
"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"
: "text-gray-600 hover:text-black",
)}
>
Detail Konten
@ -43,7 +43,7 @@ export default function ApproverDetail() {
"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"
: "text-gray-600 hover:text-black",
)}
>
Buat Konten
@ -162,7 +162,7 @@ export default function ApproverDetail() {
"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"
: "border-blue-300 text-gray-400",
)}
>
{step === "publish" ? (
@ -174,7 +174,7 @@ export default function ApproverDetail() {
<span
className={cn(
"text-sm mt-1 font-semibold",
step === "publish" ? "text-blue-600" : "text-gray-400"
step === "publish" ? "text-blue-600" : "text-gray-400",
)}
>
Publish
@ -251,6 +251,9 @@ export default function ApproverDetail() {
<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."

View File

@ -53,6 +53,15 @@ export default function FormCampaign() {
const [contentType, setContentType] = useState("Meme");
const [talkshowType, setTalkshowType] = useState("Renjani Nyrah");
const [musicType, setMusicType] = useState("Sendrasena");
const [selectedItems, setSelectedItems] = useState<number[]>([]);
const [description, setDescription] = useState("");
const handleCheckboxChange = (index: number) => {
setSelectedItems((prev) =>
prev.includes(index) ? prev.filter((i) => i !== index) : [...prev, index],
);
};
const toggleMediaOnline = (item: string) => {
setSelectedMediaOnline((prev) =>
@ -414,6 +423,8 @@ export default function FormCampaign() {
<input
type="checkbox"
checked={selectedItems.includes(i)}
onChange={() => handleCheckboxChange(i)}
className="absolute top-2 left-2 w-4 h-4"
/>
@ -428,6 +439,18 @@ export default function FormCampaign() {
</div>
))}
</div>
{selectedItems.length > 0 && (
<div className="mt-4">
<Label className="my-2">Deskripsi</Label>
<textarea
value={description}
onChange={(e) => setDescription(e.target.value)}
placeholder="Masukkan deskripsi untuk item yang dipilih..."
className="w-full p-3 border rounded-md text-sm"
rows={4}
/>
</div>
)}
</div>
)}
@ -465,14 +488,31 @@ export default function FormCampaign() {
{/* Overlay bawah */}
<div className="absolute bottom-0 left-0 right-0 bg-white/80 backdrop-blur px-3 py-2 flex items-center gap-2">
<input type="checkbox" className="w-4 h-4" />
<span className="text-xs font-medium">
<input
type="checkbox"
checked={selectedItems.includes(i)}
onChange={() => handleCheckboxChange(i)}
className="absolute top-2 left-2 w-4 h-4"
/>
<span className="text-xs font-medium ml-5">
{item.name}
</span>
</div>
</div>
))}
</div>
{selectedItems.length > 0 && (
<div className="mt-4">
<Label className="my-2">Deskripsi</Label>
<textarea
value={description}
onChange={(e) => setDescription(e.target.value)}
placeholder="Masukkan deskripsi untuk item yang dipilih..."
className="w-full p-3 border rounded-md text-sm"
rows={4}
/>
</div>
)}
{/* Footer */}
<div className="flex justify-end items-center text-xs text-gray-500 gap-4">
@ -544,9 +584,10 @@ export default function FormCampaign() {
className="w-full h-40 object-cover"
/>
{/* Checkbox */}
<input
type="checkbox"
checked={selectedItems.includes(i)}
onChange={() => handleCheckboxChange(i)}
className="absolute top-2 left-2 w-4 h-4"
/>
@ -563,6 +604,18 @@ export default function FormCampaign() {
</div>
))}
</div>
{selectedItems.length > 0 && (
<div className="mt-4">
<Label className="my-2">Deskripsi</Label>
<textarea
value={description}
onChange={(e) => setDescription(e.target.value)}
placeholder="Masukkan deskripsi untuk item yang dipilih..."
className="w-full p-3 border rounded-md text-sm"
rows={4}
/>
</div>
)}
</div>
)}
{contentType === "Musik" && (
@ -635,6 +688,8 @@ export default function FormCampaign() {
{/* Checkbox */}
<input
type="checkbox"
checked={selectedItems.includes(i)}
onChange={() => handleCheckboxChange(i)}
className="absolute top-2 left-2 w-4 h-4"
/>
@ -651,6 +706,18 @@ export default function FormCampaign() {
</div>
))}
</div>
{selectedItems.length > 0 && (
<div className="mt-4">
<Label className="my-2">Deskripsi</Label>
<textarea
value={description}
onChange={(e) => setDescription(e.target.value)}
placeholder="Masukkan deskripsi untuk item yang dipilih..."
className="w-full p-3 border rounded-md text-sm"
rows={4}
/>
</div>
)}
</div>
)}
</div>

View File

@ -83,9 +83,13 @@ export default function UserManagementTable() {
>
Lihat
</button>
{row.status !== "Approved" && (
<button className="text-green-600 hover:underline">
Approve
</button>
)}
<button className="text-red-500 hover:underline">
Hapus
</button>