update
This commit is contained in:
parent
85a8275eca
commit
7ced42966b
|
|
@ -23,7 +23,7 @@ export default function Home() {
|
|||
/>
|
||||
</div>
|
||||
|
||||
<div className="relative z-10 bg-[#F2F4F3] max-w-7xl mx-auto">
|
||||
<div className="relative z-10 bg-[#F2F4F3] max-w-6xl mx-auto">
|
||||
<Navbar />
|
||||
<div className="flex-1">
|
||||
<Header />
|
||||
|
|
|
|||
|
|
@ -4,9 +4,18 @@ import Author from "../landing-page/author";
|
|||
import { useEffect, useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { getArticleById, getListArticle } from "@/service/article";
|
||||
import { close, loading } from "@/config/swal";
|
||||
import { useParams } from "next/navigation";
|
||||
import { close, error, loading } from "@/config/swal";
|
||||
import { useParams, usePathname } from "next/navigation";
|
||||
import { Link2, MailIcon } from "lucide-react";
|
||||
import { getAdvertise } from "@/service/advertisement";
|
||||
import { saveActivity } from "@/service/activity-log";
|
||||
import {
|
||||
getArticleComment,
|
||||
otpRequest,
|
||||
otpValidation,
|
||||
postArticleComment,
|
||||
} from "@/service/master-user";
|
||||
import { useForm } from "react-hook-form";
|
||||
|
||||
type TabKey = "trending" | "comments" | "latest";
|
||||
|
||||
|
|
@ -18,6 +27,7 @@ type Article = {
|
|||
categoryName: string;
|
||||
createdAt: string;
|
||||
createdByName: string;
|
||||
customCreatorName: string;
|
||||
thumbnailUrl: string;
|
||||
categories: {
|
||||
title: string;
|
||||
|
|
@ -34,9 +44,19 @@ interface CategoryType {
|
|||
value: number;
|
||||
}
|
||||
|
||||
type Advertise = {
|
||||
id: number;
|
||||
title: string;
|
||||
description: string;
|
||||
placement: string;
|
||||
contentFileUrl: string;
|
||||
redirectLink: string;
|
||||
};
|
||||
|
||||
export default function DetailContent() {
|
||||
const params = useParams();
|
||||
const id = params?.id;
|
||||
const pathname = usePathname();
|
||||
const [page, setPage] = useState(1);
|
||||
const [totalPage, setTotalPage] = useState(1);
|
||||
const [articles, setArticles] = useState<Article[]>([]);
|
||||
|
|
@ -62,6 +82,67 @@ export default function DetailContent() {
|
|||
const [tabArticles, setTabArticles] = useState<Article[]>([]);
|
||||
|
||||
const [activeTab, setActiveTab] = useState<TabKey>("trending");
|
||||
const [needOtp, setNeedOtp] = useState(false);
|
||||
const [otpValue, setOtpValue] = useState("");
|
||||
const { register, handleSubmit, reset, watch } = useForm();
|
||||
const [commentList, setCommentList] = useState<any>([]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchData();
|
||||
}, [id]);
|
||||
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
const res = await getArticleComment(String(id));
|
||||
const data = res?.data?.data;
|
||||
setCommentList(data);
|
||||
console.log("komen", data);
|
||||
} catch (err) {
|
||||
console.error("❌ Gagal memuat komentar:", err);
|
||||
setCommentList([]);
|
||||
}
|
||||
};
|
||||
|
||||
const onSubmit = async (values: any) => {
|
||||
if (!needOtp) {
|
||||
const res = await otpRequest(values.email, values?.name);
|
||||
if (res?.error) {
|
||||
error(res.message);
|
||||
return false;
|
||||
}
|
||||
setNeedOtp(true);
|
||||
} else {
|
||||
const validation = await otpValidation(values.email, otpValue);
|
||||
if (validation?.error) {
|
||||
error("OTP Tidak Sesuai");
|
||||
return false;
|
||||
}
|
||||
|
||||
const data = {
|
||||
commentFromName: values.name,
|
||||
commentFromEmail: values.email,
|
||||
articleId: Number(id),
|
||||
isPublic: false,
|
||||
message: values.comment,
|
||||
parentId: 0,
|
||||
};
|
||||
const res = await postArticleComment(data);
|
||||
if (res?.error) {
|
||||
error(res?.message);
|
||||
return false;
|
||||
}
|
||||
const req: any = {
|
||||
activityTypeId: 5,
|
||||
url: "https://dev.mikulnews/" + pathname,
|
||||
articleId: Number(id),
|
||||
};
|
||||
|
||||
const resActivity = await saveActivity(req);
|
||||
reset();
|
||||
fetchData();
|
||||
setNeedOtp(false);
|
||||
}
|
||||
};
|
||||
|
||||
const tabs: { id: TabKey; label: string }[] = [
|
||||
{ id: "trending", label: "Trending" },
|
||||
|
|
@ -69,6 +150,35 @@ export default function DetailContent() {
|
|||
{ id: "latest", label: "Latest" },
|
||||
];
|
||||
|
||||
const [bannerAd, setBannerAd] = useState<Advertise | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
initStateAdver();
|
||||
}, []);
|
||||
|
||||
async function initStateAdver() {
|
||||
const req = {
|
||||
limit: 100,
|
||||
page: 1,
|
||||
sort: "desc",
|
||||
sortBy: "created_at",
|
||||
isPublish: true,
|
||||
};
|
||||
|
||||
try {
|
||||
const res = await getAdvertise(req);
|
||||
const data: Advertise[] = res?.data?.data || [1];
|
||||
|
||||
const banner = data.find((ad) => ad.placement === "jumbotron");
|
||||
|
||||
if (banner) {
|
||||
setBannerAd(banner);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Error fetching advertisement:", err);
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
fetchTabArticles();
|
||||
}, [activeTab]);
|
||||
|
|
@ -83,7 +193,6 @@ export default function DetailContent() {
|
|||
sortBy: "created_at",
|
||||
};
|
||||
|
||||
// Sesuaikan sortBy berdasarkan tab
|
||||
if (activeTab === "trending") {
|
||||
req.sortBy = "view_count";
|
||||
} else if (activeTab === "comments") {
|
||||
|
|
@ -92,7 +201,6 @@ export default function DetailContent() {
|
|||
req.sortBy = "created_at";
|
||||
}
|
||||
|
||||
// Hanya kirimkan search jika valid
|
||||
if (search && search !== "-" && search !== "") {
|
||||
req.search = search;
|
||||
}
|
||||
|
|
@ -243,7 +351,7 @@ export default function DetailContent() {
|
|||
</div>
|
||||
|
||||
<span className="text-[#31942E] font-medium">
|
||||
{articleDetail?.createdByName}
|
||||
{articleDetail?.customCreatorName || articleDetail?.createdByName}
|
||||
</span>
|
||||
<span>•</span>
|
||||
<span>
|
||||
|
|
@ -394,7 +502,8 @@ export default function DetailContent() {
|
|||
{/* Info Author */}
|
||||
<div className="flex-1">
|
||||
<h3 className="text-lg font-semibold text-gray-800">
|
||||
{articleDetail?.createdByName}
|
||||
{articleDetail?.customCreatorName ||
|
||||
articleDetail?.createdByName}
|
||||
</h3>
|
||||
|
||||
<div className="mt-2 flex items-center gap-4 flex-wrap">
|
||||
|
|
@ -435,14 +544,14 @@ export default function DetailContent() {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative mb-2 h-[120px] overflow-hidden flex items-center border my-8">
|
||||
{/* <div className="relative mb-2 h-[120px] overflow-hidden flex items-center border my-8">
|
||||
<Image
|
||||
src={"/image-kolom.png"}
|
||||
alt="Berita Utama"
|
||||
fill
|
||||
className="object-contain"
|
||||
/>
|
||||
</div>
|
||||
</div> */}
|
||||
<div className="mt-10">
|
||||
{/* <div className="flex items-center space-x-4 p-4 border rounded-lg mb-6">
|
||||
<Image
|
||||
|
|
@ -464,86 +573,121 @@ export default function DetailContent() {
|
|||
Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib
|
||||
ditandai <span className="text-green-600">*</span>
|
||||
</p>
|
||||
|
||||
<form className="space-y-6 mt-6">
|
||||
<div>
|
||||
<label
|
||||
htmlFor="komentar"
|
||||
className="block text-sm font-medium mb-1"
|
||||
>
|
||||
Komentar <span className="text-green-600">*</span>
|
||||
</label>
|
||||
<textarea
|
||||
id="komentar"
|
||||
className="w-full border border-gray-300 rounded-md p-3 h-40 focus:outline-none focus:ring-2 focus:ring-green-600"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label
|
||||
htmlFor="nama"
|
||||
className="block text-sm font-medium mb-1"
|
||||
>
|
||||
Nama <span className="text-green-600">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="nama"
|
||||
className="w-full border border-gray-300 rounded-md p-2"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label
|
||||
htmlFor="email"
|
||||
className="block text-sm font-medium mb-1"
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold border-b pb-2">Komentar</h3>
|
||||
{commentList.length === 0 ? (
|
||||
<p className="text-sm text-gray-500">Belum ada komentar.</p>
|
||||
) : (
|
||||
commentList.map((comment: any) => (
|
||||
<div
|
||||
key={comment.id}
|
||||
className="border rounded-lg p-3 bg-gray-50 shadow-sm"
|
||||
>
|
||||
Email <span className="text-green-600">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
className="w-full border border-gray-300 rounded-md p-2"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label
|
||||
htmlFor="website"
|
||||
className="block text-sm font-medium mb-1"
|
||||
<p className="text-sm text-gray-800 whitespace-pre-line">
|
||||
{comment.message}
|
||||
</p>
|
||||
<p className="text-xs text-gray-500 mt-1">
|
||||
{comment.commentFromName || "Anonim"} •{" "}
|
||||
{new Date(comment.createdAt).toLocaleString("id-ID", {
|
||||
dateStyle: "short",
|
||||
timeStyle: "short",
|
||||
})}
|
||||
</p>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
<form className="space-y-6 mt-6" onSubmit={handleSubmit(onSubmit)}>
|
||||
{!needOtp ? (
|
||||
<>
|
||||
{/* Komentar */}
|
||||
<div>
|
||||
<label
|
||||
htmlFor="komentar"
|
||||
className="block text-sm font-medium mb-1"
|
||||
>
|
||||
Komentar <span className="text-green-600">*</span>
|
||||
</label>
|
||||
<textarea
|
||||
id="komentar"
|
||||
className="w-full border border-gray-300 rounded-md p-3 h-40 focus:outline-none focus:ring-2 focus:ring-green-600"
|
||||
{...register("comment", { required: true })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Nama */}
|
||||
<div>
|
||||
<label
|
||||
htmlFor="nama"
|
||||
className="block text-sm font-medium mb-1"
|
||||
>
|
||||
Nama <span className="text-green-600">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="nama"
|
||||
className="w-full border border-gray-300 rounded-md p-2"
|
||||
{...register("name", { required: true })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Email */}
|
||||
<div>
|
||||
<label
|
||||
htmlFor="email"
|
||||
className="block text-sm font-medium mb-1"
|
||||
>
|
||||
Email <span className="text-green-600">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
className="w-full border border-gray-300 rounded-md p-2"
|
||||
{...register("email", { required: true })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
className="bg-green-600 hover:bg-green-700 text-white font-semibold px-6 py-2 rounded-md transition mt-2 w-full"
|
||||
>
|
||||
Situs Web
|
||||
</label>
|
||||
<input
|
||||
type="url"
|
||||
id="website"
|
||||
className="w-full border border-gray-300 rounded-md p-2"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start space-x-2 mt-2">
|
||||
<input type="checkbox" id="saveInfo" className="mt-1" />
|
||||
<label htmlFor="saveInfo" className="text-sm text-gray-700">
|
||||
Simpan nama, email, dan situs web saya pada peramban ini untuk
|
||||
komentar saya berikutnya.
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<p className="text-red-600 text-sm">
|
||||
The reCAPTCHA verification period has expired. Please reload the
|
||||
page.
|
||||
</p>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
className="bg-green-600 hover:bg-green-700 text-white font-semibold px-6 py-2 rounded-md transition mt-2"
|
||||
>
|
||||
KIRIM KOMENTAR
|
||||
</button>
|
||||
KIRIM KOMENTAR
|
||||
</button>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<p className="text-sm text-gray-600">
|
||||
Kode verifikasi sudah dikirimkan. Silakan cek Email Anda!
|
||||
</p>
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1 mt-4">
|
||||
OTP
|
||||
</label>
|
||||
<div className="flex gap-2 justify-center">
|
||||
{[...Array(6)].map((_, i) => (
|
||||
<input
|
||||
key={i}
|
||||
type="text"
|
||||
maxLength={1}
|
||||
className="w-10 h-10 text-center border border-gray-300 rounded-md text-lg"
|
||||
value={otpValue[i] || ""}
|
||||
onChange={(e) => {
|
||||
const newValue = otpValue.split("");
|
||||
newValue[i] = e.target.value.replace(/[^0-9]/g, "");
|
||||
setOtpValue(newValue.join(""));
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
type="submit"
|
||||
className="bg-green-600 hover:bg-green-700 text-white font-semibold px-6 py-2 rounded-md transition mt-4 w-full"
|
||||
>
|
||||
Kirim
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -551,13 +695,32 @@ export default function DetailContent() {
|
|||
<div className="md:col-span-1 space-y-6">
|
||||
<div className="sticky top-0 space-y-6">
|
||||
<div className="bg-white shadow p-4 rounded-lg">
|
||||
<Image
|
||||
src={"/kolom.png"}
|
||||
alt="Iklan"
|
||||
width={345}
|
||||
height={345}
|
||||
className="rounded"
|
||||
/>
|
||||
{bannerAd ? (
|
||||
<a
|
||||
href={bannerAd.redirectLink}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="block w-full"
|
||||
>
|
||||
<div className="relative w-full h-[350px] flex justify-center">
|
||||
<Image
|
||||
src={bannerAd.contentFileUrl}
|
||||
alt={bannerAd.title || "Iklan Banner"}
|
||||
width={1200} // ukuran dasar untuk responsive
|
||||
height={350}
|
||||
className="object-cover w-full h-full"
|
||||
/>
|
||||
</div>
|
||||
</a>
|
||||
) : (
|
||||
<Image
|
||||
src="/kolom.png"
|
||||
alt="Berita Utama"
|
||||
width={1200}
|
||||
height={188}
|
||||
className="object-contain w-full h-[188px]"
|
||||
/>
|
||||
)}
|
||||
<button className="mt-4 w-full bg-black text-white py-2 rounded hover:opacity-90">
|
||||
Learn More
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ import { CloudUploadIcon, TimesIcon } from "@/components/icons";
|
|||
import Image from "next/image";
|
||||
import ReactSelect from "react-select";
|
||||
import makeAnimated from "react-select/animated";
|
||||
import { htmlToString } from "@/utils/global";
|
||||
import { convertDateFormatNoTime, htmlToString } from "@/utils/global";
|
||||
import { close, error, loading, successToast } from "@/config/swal";
|
||||
import { useRouter } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
|
|
@ -44,6 +44,13 @@ import GenerateSingleArticleForm from "./generate-ai-single-form";
|
|||
import GenerateContentRewriteForm from "./generate-ai-content-rewrite-form";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import {
|
||||
Popover,
|
||||
PopoverContent,
|
||||
PopoverTrigger,
|
||||
} from "@/components/ui/popover";
|
||||
import { Calendar } from "@/components/ui/calendar";
|
||||
import DatePicker from "react-datepicker";
|
||||
|
||||
const CustomEditor = dynamic(
|
||||
() => {
|
||||
|
|
@ -82,6 +89,9 @@ const createArticleSchema = z.object({
|
|||
title: z.string().min(2, {
|
||||
message: "Judul harus diisi",
|
||||
}),
|
||||
customCreatorName: z.string().min(2, {
|
||||
message: "Judul harus diisi",
|
||||
}),
|
||||
slug: z.string().min(2, {
|
||||
message: "Slug harus diisi",
|
||||
}),
|
||||
|
|
@ -94,6 +104,7 @@ const createArticleSchema = z.object({
|
|||
tags: z.array(z.string()).nonempty({
|
||||
message: "Minimal 1 tag",
|
||||
}),
|
||||
source: z.enum(["internal", "external"]).optional(),
|
||||
});
|
||||
|
||||
export default function CreateArticleForm() {
|
||||
|
|
@ -117,8 +128,8 @@ export default function CreateArticleForm() {
|
|||
"publish"
|
||||
);
|
||||
const [isScheduled, setIsScheduled] = useState(false);
|
||||
|
||||
const [startDateValue, setStartDateValue] = useState<any>(null);
|
||||
const [startDateValue, setStartDateValue] = useState<Date | undefined>();
|
||||
const [startTimeValue, setStartTimeValue] = useState<string>("");
|
||||
|
||||
const { getRootProps, getInputProps } = useDropzone({
|
||||
onDrop: (acceptedFiles) => {
|
||||
|
|
@ -225,6 +236,8 @@ export default function CreateArticleForm() {
|
|||
const request = {
|
||||
id: diseData?.id,
|
||||
title: values.title,
|
||||
customCreatorName: values.customCreatorName,
|
||||
source: values.source,
|
||||
articleBody: removeImgTags(values.description),
|
||||
metaDescription: diseData?.metaDescription,
|
||||
metaTitle: diseData?.metaTitle,
|
||||
|
|
@ -280,6 +293,8 @@ export default function CreateArticleForm() {
|
|||
title: values.title,
|
||||
typeId: 1,
|
||||
slug: values.slug,
|
||||
customCreatorName: values.customCreatorName,
|
||||
source: values.source,
|
||||
categoryIds: values.category.map((a) => a.id).join(","),
|
||||
tags: values.tags.join(","),
|
||||
description: htmlToString(removeImgTags(values.description)),
|
||||
|
|
@ -324,12 +339,34 @@ export default function CreateArticleForm() {
|
|||
}
|
||||
}
|
||||
|
||||
if (status === "scheduled") {
|
||||
if (status === "scheduled" && startDateValue) {
|
||||
// ambil waktu, default 00:00 jika belum diisi
|
||||
const [hours, minutes] = startTimeValue
|
||||
? startTimeValue.split(":").map(Number)
|
||||
: [0, 0];
|
||||
|
||||
// gabungkan tanggal + waktu
|
||||
const combinedDate = new Date(startDateValue);
|
||||
combinedDate.setHours(hours, minutes, 0, 0);
|
||||
|
||||
// format: 2025-10-08 14:30:00
|
||||
const formattedDateTime = `${combinedDate.getFullYear()}-${String(
|
||||
combinedDate.getMonth() + 1
|
||||
).padStart(2, "0")}-${String(combinedDate.getDate()).padStart(
|
||||
2,
|
||||
"0"
|
||||
)} ${String(combinedDate.getHours()).padStart(2, "0")}:${String(
|
||||
combinedDate.getMinutes()
|
||||
).padStart(2, "0")}:00`;
|
||||
|
||||
const request = {
|
||||
id: articleId,
|
||||
date: `${startDateValue?.year}-${startDateValue?.month}-${startDateValue?.day}`,
|
||||
date: formattedDateTime,
|
||||
};
|
||||
|
||||
console.log("📤 Sending schedule request:", request);
|
||||
const res = await createArticleSchedule(request);
|
||||
console.log("✅ Schedule response:", res);
|
||||
}
|
||||
|
||||
close();
|
||||
|
|
@ -659,7 +696,38 @@ export default function CreateArticleForm() {
|
|||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
<p className="text-sm">Kreator</p>
|
||||
<Controller
|
||||
control={control}
|
||||
name="customCreatorName"
|
||||
render={({ field }) => (
|
||||
<Input
|
||||
id="customCreatorName"
|
||||
type="text"
|
||||
placeholder="Masukkan judul artikel"
|
||||
className="w-full border rounded-lg dark:border-gray-400"
|
||||
{...field}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<div className="mt-2">
|
||||
<p className="text-sm">Tipe Kreator</p>
|
||||
<Controller
|
||||
control={control}
|
||||
name="source"
|
||||
render={({ field }) => (
|
||||
<Select onValueChange={field.onChange} value={field.value}>
|
||||
<SelectTrigger className="w-full border rounded-lg text-sm dark:border-gray-400">
|
||||
<SelectValue placeholder="Pilih tipe kreator" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="internal">Internal</SelectItem>
|
||||
<SelectItem value="external">External</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<p className="text-sm mt-3">Kategori</p>
|
||||
<Controller
|
||||
control={control}
|
||||
|
|
@ -773,32 +841,49 @@ export default function CreateArticleForm() {
|
|||
</label>
|
||||
</div>
|
||||
|
||||
{/* {isScheduled && (
|
||||
<div className="flex flex-col lg:flex-row gap-3">
|
||||
<div className="w-full lg:w-[140px] flex flex-col gal-2 ">
|
||||
{isScheduled && (
|
||||
<div className="flex flex-col lg:flex-row gap-3 mt-2">
|
||||
{/* Pilih tanggal */}
|
||||
<div className="w-full lg:w-[140px] flex flex-col gap-2">
|
||||
<p className="text-sm">Tanggal</p>
|
||||
<Popover>
|
||||
<PopoverTrigger>
|
||||
<Button
|
||||
type="button"
|
||||
className="w-full !h-[30px] lg:h-[40px] border-1 rounded-lg text-black"
|
||||
className="w-full !h-[37px] lg:h-[37px] border-1 rounded-lg text-black"
|
||||
variant="outline"
|
||||
>
|
||||
{startDateValue
|
||||
? convertDateFormatNoTime(startDateValue)
|
||||
? startDateValue.toISOString().split("T")[0]
|
||||
: "-"}
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="bg-transparent p-0">
|
||||
<Calendar
|
||||
<DatePicker
|
||||
selected={startDateValue}
|
||||
onSelect={setStartDateValue}
|
||||
onChange={(date) =>
|
||||
setStartDateValue(date ?? undefined)
|
||||
}
|
||||
dateFormat="yyyy-MM-dd"
|
||||
className="w-full border rounded-lg px-2 py-1 text-black cursor-pointer h-[150px]"
|
||||
placeholderText="Pilih tanggal"
|
||||
/>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
|
||||
{/* Pilih waktu */}
|
||||
<div className="w-full lg:w-[140px] flex flex-col gap-2">
|
||||
<p className="text-sm">Waktu</p>
|
||||
<input
|
||||
type="time"
|
||||
value={startTimeValue}
|
||||
onChange={(e) => setStartTimeValue(e.target.value)}
|
||||
className="w-full border rounded-lg px-2 py-[6px] text-black"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)} */}
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -48,6 +48,13 @@ import {
|
|||
DialogTitle,
|
||||
DialogClose,
|
||||
} from "@/components/ui/dialog";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
|
||||
const ViewEditor = dynamic(
|
||||
() => {
|
||||
|
|
@ -81,10 +88,13 @@ const createArticleSchema = z.object({
|
|||
title: z.string().min(2, {
|
||||
message: "Judul harus diisi",
|
||||
}),
|
||||
customCreatorName: z.string().min(2, {
|
||||
message: "Judul harus diisi",
|
||||
}),
|
||||
slug: z.string().min(2, {
|
||||
message: "Slug harus diisi",
|
||||
}),
|
||||
htmlDescription: z.string().min(2, {
|
||||
description: z.string().min(2, {
|
||||
message: "Deskripsi harus diisi",
|
||||
}),
|
||||
category: z.array(categorySchema).nonempty({
|
||||
|
|
@ -92,7 +102,8 @@ const createArticleSchema = z.object({
|
|||
}),
|
||||
tags: z.array(z.string()).nonempty({
|
||||
message: "Minimal 1 tag",
|
||||
}), // Array berisi string
|
||||
}),
|
||||
source: z.enum(["internal", "external"]).optional(),
|
||||
});
|
||||
|
||||
interface DiseData {
|
||||
|
|
@ -179,8 +190,10 @@ export default function EditArticleForm(props: { isDetail: boolean }) {
|
|||
const data = res.data?.data;
|
||||
setDetailData(data);
|
||||
setValue("title", data?.title);
|
||||
setValue("customCreatorName", data?.customCreatorName);
|
||||
setValue("slug", data?.slug);
|
||||
setValue("htmlDescription", data?.htmlDescription);
|
||||
setValue("source", data?.source);
|
||||
setValue("description", data?.htmlDescription);
|
||||
setValue("tags", data?.tags ? data.tags.split(",") : []);
|
||||
setThumbnail(data?.thumbnailUrl);
|
||||
setDiseId(data?.aiArticleId);
|
||||
|
|
@ -267,8 +280,8 @@ export default function EditArticleForm(props: { isDetail: boolean }) {
|
|||
.map((val) => val.id)
|
||||
.join(","),
|
||||
tags: getValues("tags").join(","),
|
||||
description: htmlToString(getValues("htmlDescription")),
|
||||
htmlDescription: getValues("htmlDescription"),
|
||||
description: htmlToString(getValues("description")),
|
||||
htmlDescription: getValues("description"),
|
||||
});
|
||||
|
||||
if (response?.error) {
|
||||
|
|
@ -287,8 +300,8 @@ export default function EditArticleForm(props: { isDetail: boolean }) {
|
|||
slug: values.slug,
|
||||
categoryIds: values.category.map((val) => val.id).join(","),
|
||||
tags: values.tags.join(","),
|
||||
description: htmlToString(values.htmlDescription),
|
||||
htmlDescription: values.htmlDescription,
|
||||
description: htmlToString(values.description),
|
||||
htmlDescription: values.description,
|
||||
// createdAt: `${startDateValue} ${timeValue}:00`,
|
||||
};
|
||||
|
||||
|
|
@ -544,7 +557,7 @@ export default function EditArticleForm(props: { isDetail: boolean }) {
|
|||
|
||||
{useAi && (
|
||||
<GenerateSingleArticleForm
|
||||
content={(data) => setValue("htmlDescription", data?.articleBody)}
|
||||
content={(data) => setValue("description", data?.articleBody)}
|
||||
/>
|
||||
)}
|
||||
|
||||
|
|
@ -575,15 +588,13 @@ export default function EditArticleForm(props: { isDetail: boolean }) {
|
|||
)} */}
|
||||
<Controller
|
||||
control={control}
|
||||
name="htmlDescription"
|
||||
name="description"
|
||||
render={({ field }) => (
|
||||
<CustomEditor onChange={field.onChange} initialData={field.value} />
|
||||
)}
|
||||
/>
|
||||
{errors.htmlDescription?.message && (
|
||||
<p className="text-red-400 text-sm">
|
||||
{errors.htmlDescription.message}
|
||||
</p>
|
||||
{errors.description?.message && (
|
||||
<p className="text-red-400 text-sm">{errors.description.message}</p>
|
||||
)}
|
||||
<p className="text-sm mt-3">File Media</p>
|
||||
{!isDetail && (
|
||||
|
|
@ -785,6 +796,43 @@ export default function EditArticleForm(props: { isDetail: boolean }) {
|
|||
)}
|
||||
</>
|
||||
)}
|
||||
<p className="text-sm">Kreator</p>
|
||||
<Controller
|
||||
control={control}
|
||||
name="customCreatorName"
|
||||
render={({ field }) => (
|
||||
<Input
|
||||
id="customCreatorName"
|
||||
type="text"
|
||||
placeholder="Masukkan Kreator artikel"
|
||||
readOnly={isDetail}
|
||||
className="w-full border rounded-lg dark:border-gray-400"
|
||||
{...field}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<div className="mt-2">
|
||||
<p className="text-sm">Tipe Kreator</p>
|
||||
<Controller
|
||||
control={control}
|
||||
name="source"
|
||||
render={({ field }) => (
|
||||
<Select
|
||||
onValueChange={field.onChange}
|
||||
value={field.value}
|
||||
disabled={isDetail}
|
||||
>
|
||||
<SelectTrigger className="w-full border rounded-lg text-sm dark:border-gray-400">
|
||||
<SelectValue placeholder="Pilih tipe kreator" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="internal">Internal</SelectItem>
|
||||
<SelectItem value="external">External</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<p className="text-sm mt-3">Kategori</p>
|
||||
<Controller
|
||||
control={control}
|
||||
|
|
|
|||
|
|
@ -76,10 +76,9 @@ interface DiseData {
|
|||
export default function GenerateSingleArticleForm(props: {
|
||||
content: (data: DiseData) => void;
|
||||
}) {
|
||||
const [selectedWritingSyle, setSelectedWritingStyle] =
|
||||
useState("Informational");
|
||||
const [selectedArticleSize, setSelectedArticleSize] = useState("News");
|
||||
const [selectedLanguage, setSelectedLanguage] = useState("id");
|
||||
const [selectedWritingSyle, setSelectedWritingStyle] = useState("");
|
||||
const [selectedArticleSize, setSelectedArticleSize] = useState("");
|
||||
const [selectedLanguage, setSelectedLanguage] = useState("");
|
||||
const [mainKeyword, setMainKeyword] = useState("");
|
||||
const [title, setTitle] = useState("");
|
||||
const [additionalKeyword, setAdditionalKeyword] = useState("");
|
||||
|
|
@ -271,11 +270,11 @@ export default function GenerateSingleArticleForm(props: {
|
|||
}}
|
||||
>
|
||||
<SelectTrigger className="w-full border border-gray-300 dark:border-gray-400 rounded-lg text-black">
|
||||
<SelectValue placeholder="Writing Style" />
|
||||
<SelectValue placeholder="Article Size" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{articleSize.map((style) => (
|
||||
<SelectItem key={style.name} value={style.name}>
|
||||
<SelectItem key={style.name} value={style.value}>
|
||||
{style.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
|
|
@ -307,7 +306,7 @@ export default function GenerateSingleArticleForm(props: {
|
|||
}}
|
||||
>
|
||||
<SelectTrigger className="w-full border border-gray-300 dark:border-gray-400 rounded-lg text-black">
|
||||
<SelectValue placeholder="Bahasa" />
|
||||
<SelectValue placeholder="Language" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="id">Indonesia</SelectItem>
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ import { usePathname } from "next/navigation";
|
|||
import { useEffect, useState } from "react";
|
||||
import news from "../news";
|
||||
import Link from "next/link";
|
||||
import { getAdvertise } from "@/service/advertisement";
|
||||
|
||||
type Article = {
|
||||
id: number;
|
||||
|
|
@ -13,6 +14,7 @@ type Article = {
|
|||
categoryName: string;
|
||||
createdAt: string;
|
||||
createdByName: string;
|
||||
customCreatorName: string;
|
||||
thumbnailUrl: string;
|
||||
categories: {
|
||||
title: string;
|
||||
|
|
@ -32,6 +34,15 @@ const slugToLabel = (slug: string) => {
|
|||
return mapping[slug] || slug.charAt(0).toUpperCase() + slug.slice(1);
|
||||
};
|
||||
|
||||
type Advertise = {
|
||||
id: number;
|
||||
title: string;
|
||||
description: string;
|
||||
placement: string;
|
||||
contentFileUrl: string;
|
||||
redirectLink: string;
|
||||
};
|
||||
|
||||
export default function CitizenNews() {
|
||||
const [activeTab, setActiveTab] = useState("comments");
|
||||
const [page, setPage] = useState(1);
|
||||
|
|
@ -51,6 +62,36 @@ export default function CitizenNews() {
|
|||
const categorySlug = pathSegments[1];
|
||||
const categoryLabel = slugToLabel(categorySlug);
|
||||
|
||||
const [bannerAd, setBannerAd] = useState<Advertise | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
initStateAdver();
|
||||
}, []);
|
||||
|
||||
async function initStateAdver() {
|
||||
const req = {
|
||||
limit: 100,
|
||||
page: 1,
|
||||
sort: "desc",
|
||||
sortBy: "created_at",
|
||||
isPublish: true,
|
||||
};
|
||||
|
||||
try {
|
||||
const res = await getAdvertise(req);
|
||||
const data: Advertise[] = res?.data?.data || [1];
|
||||
|
||||
// filter iklan dengan placement = "banner"
|
||||
const banner = data.find((ad) => ad.placement === "jumbotron");
|
||||
|
||||
if (banner) {
|
||||
setBannerAd(banner);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Error fetching advertisement:", err);
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
initState();
|
||||
}, [page, showData, startDateValue, selectedCategories, activeTab]);
|
||||
|
|
@ -81,8 +122,8 @@ export default function CitizenNews() {
|
|||
}
|
||||
|
||||
const citizenArticles = articles.filter((article) =>
|
||||
article.categories?.some(
|
||||
(category) => category.title.toLowerCase() === "berita warga"
|
||||
article.categories?.some((category) =>
|
||||
category.title?.toLowerCase().includes("berita warga")
|
||||
)
|
||||
);
|
||||
|
||||
|
|
@ -132,7 +173,7 @@ export default function CitizenNews() {
|
|||
<div className="text-sm text-gray-600 mt-2">
|
||||
BY{" "}
|
||||
<span className="text-green-600 font-semibold">
|
||||
{item.createdByName || "Admin"}
|
||||
{item?.customCreatorName || item.createdByName}
|
||||
</span>{" "}
|
||||
• {new Date(item.createdAt).toLocaleDateString("id-ID")}
|
||||
</div>
|
||||
|
|
@ -204,12 +245,32 @@ export default function CitizenNews() {
|
|||
<div className="space-y-6">
|
||||
{/* Advertisement */}
|
||||
<div className="w-full h-[400px] relative">
|
||||
<Image
|
||||
src="/advertisiment.png"
|
||||
alt="Advertisement"
|
||||
fill
|
||||
className="object-cover rounded"
|
||||
/>
|
||||
{bannerAd ? (
|
||||
<a
|
||||
href={bannerAd.redirectLink}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="block w-full"
|
||||
>
|
||||
<div className="relative w-full h-[350px] flex justify-center">
|
||||
<Image
|
||||
src={bannerAd.contentFileUrl}
|
||||
alt={bannerAd.title || "Iklan Banner"}
|
||||
width={1200} // ukuran dasar untuk responsive
|
||||
height={350}
|
||||
className="object-cover w-full h-full"
|
||||
/>
|
||||
</div>
|
||||
</a>
|
||||
) : (
|
||||
<Image
|
||||
src="/kolom.png"
|
||||
alt="Berita Utama"
|
||||
width={1200}
|
||||
height={188}
|
||||
className="object-contain w-full h-[188px]"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Connect with us */}
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@ type Article = {
|
|||
categoryName: string;
|
||||
createdAt: string;
|
||||
createdByName: string;
|
||||
customCreatorName: string;
|
||||
thumbnailUrl: string;
|
||||
categories: {
|
||||
title: string;
|
||||
|
|
@ -76,8 +77,8 @@ export default function HeaderCitizen() {
|
|||
}
|
||||
|
||||
const citizenArticles = articles.filter((article) =>
|
||||
article.categories?.some(
|
||||
(category) => category.title.toLowerCase() === "berita warga"
|
||||
article.categories?.some((category) =>
|
||||
category.title?.toLowerCase().includes("berita warga")
|
||||
)
|
||||
);
|
||||
|
||||
|
|
@ -124,7 +125,9 @@ export default function HeaderCitizen() {
|
|||
{mainArticle.title}
|
||||
</h2>
|
||||
<p className="text-white text-xs">
|
||||
{mainArticle.createdByName} -{" "}
|
||||
{mainArticle?.customCreatorName ||
|
||||
mainArticle.createdByName}{" "}
|
||||
-{" "}
|
||||
{new Date(mainArticle.createdAt).toLocaleDateString(
|
||||
"id-ID",
|
||||
{
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ import { usePathname } from "next/navigation";
|
|||
import { useEffect, useState } from "react";
|
||||
import news from "../news";
|
||||
import Link from "next/link";
|
||||
import { getAdvertise } from "@/service/advertisement";
|
||||
|
||||
type Article = {
|
||||
id: number;
|
||||
|
|
@ -13,6 +14,7 @@ type Article = {
|
|||
categoryName: string;
|
||||
createdAt: string;
|
||||
createdByName: string;
|
||||
customCreatorName: string;
|
||||
thumbnailUrl: string;
|
||||
categories: {
|
||||
title: string;
|
||||
|
|
@ -23,6 +25,15 @@ type Article = {
|
|||
}[];
|
||||
};
|
||||
|
||||
type Advertise = {
|
||||
id: number;
|
||||
title: string;
|
||||
description: string;
|
||||
placement: string;
|
||||
contentFileUrl: string;
|
||||
redirectLink: string;
|
||||
};
|
||||
|
||||
const slugToLabel = (slug: string) => {
|
||||
const mapping: Record<string, string> = {
|
||||
development: "Pembangunan",
|
||||
|
|
@ -48,6 +59,36 @@ export default function DevelopmentNews() {
|
|||
const pathname = usePathname();
|
||||
const pathSegments = pathname.split("/").filter(Boolean);
|
||||
|
||||
const [bannerAd, setBannerAd] = useState<Advertise | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
initStateAdver();
|
||||
}, []);
|
||||
|
||||
async function initStateAdver() {
|
||||
const req = {
|
||||
limit: 100,
|
||||
page: 1,
|
||||
sort: "desc",
|
||||
sortBy: "created_at",
|
||||
isPublish: true,
|
||||
};
|
||||
|
||||
try {
|
||||
const res = await getAdvertise(req);
|
||||
const data: Advertise[] = res?.data?.data || [1];
|
||||
|
||||
// filter iklan dengan placement = "banner"
|
||||
const banner = data.find((ad) => ad.placement === "jumbotron");
|
||||
|
||||
if (banner) {
|
||||
setBannerAd(banner);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Error fetching advertisement:", err);
|
||||
}
|
||||
}
|
||||
|
||||
const categorySlug = pathSegments[1];
|
||||
const categoryLabel = slugToLabel(categorySlug);
|
||||
|
||||
|
|
@ -81,8 +122,8 @@ export default function DevelopmentNews() {
|
|||
}
|
||||
|
||||
const pembangunanArticles = articles.filter((article) =>
|
||||
article.categories?.some(
|
||||
(category) => category.title.toLowerCase() === "pembangunan"
|
||||
article.categories?.some((category) =>
|
||||
category.title?.toLowerCase().includes("berita warga")
|
||||
)
|
||||
);
|
||||
|
||||
|
|
@ -134,7 +175,7 @@ export default function DevelopmentNews() {
|
|||
<div className="text-sm text-gray-600 mt-2">
|
||||
BY{" "}
|
||||
<span className="text-green-600 font-semibold">
|
||||
{item.createdByName || "Admin"}
|
||||
{item?.customCreatorName || item.createdByName}
|
||||
</span>{" "}
|
||||
• {new Date(item.createdAt).toLocaleDateString("id-ID")}
|
||||
</div>
|
||||
|
|
@ -203,12 +244,32 @@ export default function DevelopmentNews() {
|
|||
<div className="space-y-6">
|
||||
{/* Advertisement */}
|
||||
<div className="w-full h-[400px] relative">
|
||||
<Image
|
||||
src="/advertisiment.png"
|
||||
alt="Advertisement"
|
||||
fill
|
||||
className="object-cover rounded"
|
||||
/>
|
||||
{bannerAd ? (
|
||||
<a
|
||||
href={bannerAd.redirectLink}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="block w-full"
|
||||
>
|
||||
<div className="relative w-full h-[350px] flex justify-center">
|
||||
<Image
|
||||
src={bannerAd.contentFileUrl}
|
||||
alt={bannerAd.title || "Iklan Banner"}
|
||||
width={1200} // ukuran dasar untuk responsive
|
||||
height={350}
|
||||
className="object-cover w-full h-full"
|
||||
/>
|
||||
</div>
|
||||
</a>
|
||||
) : (
|
||||
<Image
|
||||
src="/kolom.png"
|
||||
alt="Berita Utama"
|
||||
width={1200}
|
||||
height={188}
|
||||
className="object-contain w-full h-[188px]"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Connect with us */}
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@ type Article = {
|
|||
categoryName: string;
|
||||
createdAt: string;
|
||||
createdByName: string;
|
||||
customCreatorName: string;
|
||||
thumbnailUrl: string;
|
||||
categories: {
|
||||
title: string;
|
||||
|
|
@ -70,19 +71,21 @@ export default function HeaderDevelopment() {
|
|||
const res = await getListArticle(req);
|
||||
setArticles(res?.data?.data || []);
|
||||
setTotalPage(res?.data?.meta?.totalPage || 1);
|
||||
console.log("develo", res?.data?.data || []);
|
||||
} finally {
|
||||
// close();
|
||||
}
|
||||
}
|
||||
|
||||
const pembangunanArticles = articles.filter((article) =>
|
||||
article.categories?.some(
|
||||
(category) => category.title.toLowerCase() === "pembangunan"
|
||||
article.categories?.some((category) =>
|
||||
category.title?.toLowerCase().includes("berita warga")
|
||||
)
|
||||
);
|
||||
|
||||
const mainArticle = pembangunanArticles[0];
|
||||
const otherArticles = pembangunanArticles.slice(1, 3);
|
||||
console.log("otherArticles:", otherArticles);
|
||||
|
||||
return (
|
||||
<section className="max-w-7xl mx-auto bg-white">
|
||||
|
|
@ -128,7 +131,9 @@ export default function HeaderDevelopment() {
|
|||
{mainArticle.title}
|
||||
</h2>
|
||||
<p className="text-white text-xs">
|
||||
{mainArticle.createdByName} -{" "}
|
||||
{mainArticle?.customCreatorName ||
|
||||
mainArticle.createdByName}{" "}
|
||||
-{" "}
|
||||
{new Date(mainArticle.createdAt).toLocaleDateString(
|
||||
"id-ID",
|
||||
{
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import { getListArticle } from "@/service/article";
|
|||
import { useEffect, useState } from "react";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { getAdvertise } from "@/service/advertisement";
|
||||
|
||||
type Article = {
|
||||
id: number;
|
||||
|
|
@ -12,6 +13,7 @@ type Article = {
|
|||
categoryName: string;
|
||||
createdAt: string;
|
||||
createdByName: string;
|
||||
customCreatorName: string;
|
||||
thumbnailUrl: string;
|
||||
categories: {
|
||||
title: string;
|
||||
|
|
@ -22,6 +24,15 @@ type Article = {
|
|||
}[];
|
||||
};
|
||||
|
||||
type Advertise = {
|
||||
id: number;
|
||||
title: string;
|
||||
description: string;
|
||||
placement: string;
|
||||
contentFileUrl: string;
|
||||
redirectLink: string;
|
||||
};
|
||||
|
||||
export default function HeroNewsSection() {
|
||||
const [page, setPage] = useState(1);
|
||||
const [totalPage, setTotalPage] = useState(1);
|
||||
|
|
@ -34,6 +45,36 @@ export default function HeroNewsSection() {
|
|||
endDate: null,
|
||||
});
|
||||
|
||||
const [bannerAd, setBannerAd] = useState<Advertise | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
initStateAdver();
|
||||
}, []);
|
||||
|
||||
async function initStateAdver() {
|
||||
const req = {
|
||||
limit: 100,
|
||||
page: 1,
|
||||
sort: "desc",
|
||||
sortBy: "created_at",
|
||||
isPublish: true,
|
||||
};
|
||||
|
||||
try {
|
||||
const res = await getAdvertise(req);
|
||||
const data: Advertise[] = res?.data?.data || [];
|
||||
|
||||
// filter iklan dengan placement = "banner"
|
||||
const banner = data.find((ad) => ad.placement === "banner");
|
||||
|
||||
if (banner) {
|
||||
setBannerAd(banner);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Error fetching advertisement:", err);
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
initState();
|
||||
}, [page, showData, startDateValue, selectedCategories]);
|
||||
|
|
@ -96,7 +137,9 @@ export default function HeroNewsSection() {
|
|||
{articles[0].title}
|
||||
</h2>
|
||||
<p className="text-white text-xs flex items-center gap-2">
|
||||
{articles[0].createdByName} -{" "}
|
||||
{articles[0]?.customCreatorName ||
|
||||
articles[0]?.createdByName}{" "}
|
||||
-{" "}
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
|
|
@ -154,13 +197,33 @@ export default function HeroNewsSection() {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div className="relative mt-10 mb-2 h-[188px] overflow-hidden flex items-center mx-8 border my-8">
|
||||
<Image
|
||||
src="/image-kolom.png"
|
||||
alt="Berita Utama"
|
||||
fill
|
||||
className="object-contain"
|
||||
/>
|
||||
<div className="relative mt-10 mb-2 flex justify-center mx-8 border my-8 h-[350px] overflow-hidden bg-white">
|
||||
{bannerAd ? (
|
||||
<a
|
||||
href={bannerAd.redirectLink}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="block w-full"
|
||||
>
|
||||
<div className="relative w-full h-[350px] flex justify-center">
|
||||
<Image
|
||||
src={bannerAd.contentFileUrl}
|
||||
alt={bannerAd.title || "Iklan Banner"}
|
||||
width={1200} // ukuran dasar untuk responsive
|
||||
height={350}
|
||||
className="object-cover w-full h-full"
|
||||
/>
|
||||
</div>
|
||||
</a>
|
||||
) : (
|
||||
<Image
|
||||
src="/image-kolom.png"
|
||||
alt="Berita Utama"
|
||||
width={1200}
|
||||
height={188}
|
||||
className="object-contain w-full h-[188px]"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@ type Article = {
|
|||
categoryName: string;
|
||||
createdAt: string;
|
||||
createdByName: string;
|
||||
customCreatorName: string;
|
||||
thumbnailUrl: string;
|
||||
categories: {
|
||||
title: string;
|
||||
|
|
@ -76,8 +77,8 @@ export default function HeaderHealth() {
|
|||
}
|
||||
|
||||
const healthArticles = articles.filter((article) =>
|
||||
article.categories?.some(
|
||||
(category) => category.title.toLowerCase() === "kesehatan"
|
||||
article.categories?.some((category) =>
|
||||
category.title?.toLowerCase().includes("berita warga")
|
||||
)
|
||||
);
|
||||
|
||||
|
|
@ -124,7 +125,9 @@ export default function HeaderHealth() {
|
|||
{mainArticle.title}
|
||||
</h2>
|
||||
<p className="text-white text-xs">
|
||||
{mainArticle.createdByName} -{" "}
|
||||
{mainArticle?.customCreatorName ||
|
||||
mainArticle.createdByName}{" "}
|
||||
-{" "}
|
||||
{new Date(mainArticle.createdAt).toLocaleDateString(
|
||||
"id-ID",
|
||||
{
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ import { usePathname } from "next/navigation";
|
|||
import { useEffect, useState } from "react";
|
||||
import news from "../news";
|
||||
import Link from "next/link";
|
||||
import { getAdvertise } from "@/service/advertisement";
|
||||
|
||||
type Article = {
|
||||
id: number;
|
||||
|
|
@ -13,6 +14,7 @@ type Article = {
|
|||
categoryName: string;
|
||||
createdAt: string;
|
||||
createdByName: string;
|
||||
customCreatorName: string;
|
||||
thumbnailUrl: string;
|
||||
categories: {
|
||||
title: string;
|
||||
|
|
@ -32,6 +34,15 @@ const slugToLabel = (slug: string) => {
|
|||
return mapping[slug] || slug.charAt(0).toUpperCase() + slug.slice(1);
|
||||
};
|
||||
|
||||
type Advertise = {
|
||||
id: number;
|
||||
title: string;
|
||||
description: string;
|
||||
placement: string;
|
||||
contentFileUrl: string;
|
||||
redirectLink: string;
|
||||
};
|
||||
|
||||
export default function HealthNews() {
|
||||
const [activeTab, setActiveTab] = useState("comments");
|
||||
const [page, setPage] = useState(1);
|
||||
|
|
@ -48,6 +59,36 @@ export default function HealthNews() {
|
|||
const pathname = usePathname();
|
||||
const pathSegments = pathname.split("/").filter(Boolean);
|
||||
|
||||
const [bannerAd, setBannerAd] = useState<Advertise | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
initStateAdver();
|
||||
}, []);
|
||||
|
||||
async function initStateAdver() {
|
||||
const req = {
|
||||
limit: 100,
|
||||
page: 1,
|
||||
sort: "desc",
|
||||
sortBy: "created_at",
|
||||
isPublish: true,
|
||||
};
|
||||
|
||||
try {
|
||||
const res = await getAdvertise(req);
|
||||
const data: Advertise[] = res?.data?.data || [1];
|
||||
|
||||
// filter iklan dengan placement = "banner"
|
||||
const banner = data.find((ad) => ad.placement === "jumbotron");
|
||||
|
||||
if (banner) {
|
||||
setBannerAd(banner);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Error fetching advertisement:", err);
|
||||
}
|
||||
}
|
||||
|
||||
const categorySlug = pathSegments[1];
|
||||
const categoryLabel = slugToLabel(categorySlug);
|
||||
|
||||
|
|
@ -81,11 +122,10 @@ export default function HealthNews() {
|
|||
}
|
||||
|
||||
const kesehatanArticles = articles.filter((article) =>
|
||||
article.categories?.some(
|
||||
(category) => category.title.toLowerCase() === "kesehatan"
|
||||
article.categories?.some((category) =>
|
||||
category.title?.toLowerCase().includes("berita warga")
|
||||
)
|
||||
);
|
||||
|
||||
const itemsPerPage = 2;
|
||||
const calculatedTotalPage = Math.ceil(
|
||||
kesehatanArticles.length / itemsPerPage
|
||||
|
|
@ -131,7 +171,7 @@ export default function HealthNews() {
|
|||
<div className="text-sm text-gray-600 mt-2">
|
||||
BY{" "}
|
||||
<span className="text-green-600 font-semibold">
|
||||
{item.createdByName || "Admin"}
|
||||
{item?.customCreatorName || item.createdByName || "Admin"}
|
||||
</span>{" "}
|
||||
• {new Date(item.createdAt).toLocaleDateString("id-ID")}
|
||||
</div>
|
||||
|
|
@ -197,12 +237,32 @@ export default function HealthNews() {
|
|||
|
||||
<div className="space-y-6">
|
||||
<div className="w-full h-[400px] relative">
|
||||
<Image
|
||||
src="/advertisiment.png"
|
||||
alt="Advertisement"
|
||||
fill
|
||||
className="object-cover rounded"
|
||||
/>
|
||||
{bannerAd ? (
|
||||
<a
|
||||
href={bannerAd.redirectLink}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="block w-full"
|
||||
>
|
||||
<div className="relative w-full h-[350px] flex justify-center">
|
||||
<Image
|
||||
src={bannerAd.contentFileUrl}
|
||||
alt={bannerAd.title || "Iklan Banner"}
|
||||
width={1200} // ukuran dasar untuk responsive
|
||||
height={350}
|
||||
className="object-cover w-full h-full"
|
||||
/>
|
||||
</div>
|
||||
</a>
|
||||
) : (
|
||||
<Image
|
||||
src="/kolom.png"
|
||||
alt="Berita Utama"
|
||||
width={1200}
|
||||
height={188}
|
||||
className="object-contain w-full h-[188px]"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
|
|
|
|||
|
|
@ -173,6 +173,7 @@ type Article = {
|
|||
categoryName: string;
|
||||
createdAt: string;
|
||||
createdByName: string;
|
||||
customCreatorName: string;
|
||||
thumbnailUrl: string;
|
||||
categories: {
|
||||
title: string;
|
||||
|
|
@ -280,7 +281,7 @@ export default function LatestandPopular() {
|
|||
<div className="text-xs text-[#999999] mb-2 flex items-center gap-2">
|
||||
by{" "}
|
||||
<span className="text-[#31942E]">
|
||||
{article.createdByName}
|
||||
{article?.customCreatorName || article.createdByName}
|
||||
</span>{" "}
|
||||
|{" "}
|
||||
<div className="text-xs mt-1.5 text-[#A0A0A0] space-x-2 flex items-center">
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
"use client";
|
||||
import { getAdvertise } from "@/service/advertisement";
|
||||
import { getListArticle } from "@/service/article";
|
||||
import { Clock } from "lucide-react";
|
||||
import Image from "next/image";
|
||||
|
|
@ -12,6 +13,7 @@ type postsData = {
|
|||
categoryName: string;
|
||||
createdAt: string;
|
||||
createdByName: string;
|
||||
customCreatorName: string;
|
||||
thumbnailUrl: string;
|
||||
categories: {
|
||||
title: string;
|
||||
|
|
@ -22,6 +24,15 @@ type postsData = {
|
|||
}[];
|
||||
};
|
||||
|
||||
type Advertise = {
|
||||
id: number;
|
||||
title: string;
|
||||
description: string;
|
||||
placement: string;
|
||||
contentFileUrl: string;
|
||||
redirectLink: string;
|
||||
};
|
||||
|
||||
export default function Beranda() {
|
||||
const [page, setPage] = useState(1);
|
||||
const [totalPage, setTotalPage] = useState(1);
|
||||
|
|
@ -34,6 +45,36 @@ export default function Beranda() {
|
|||
endDate: null,
|
||||
});
|
||||
|
||||
const [bannerAd, setBannerAd] = useState<Advertise | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
initStateAdver();
|
||||
}, []);
|
||||
|
||||
async function initStateAdver() {
|
||||
const req = {
|
||||
limit: 100,
|
||||
page: 1,
|
||||
sort: "desc",
|
||||
sortBy: "created_at",
|
||||
isPublish: true,
|
||||
};
|
||||
|
||||
try {
|
||||
const res = await getAdvertise(req);
|
||||
const data: Advertise[] = res?.data?.data || [1];
|
||||
|
||||
// filter iklan dengan placement = "banner"
|
||||
const banner = data.find((ad) => ad.placement === "banner");
|
||||
|
||||
if (banner) {
|
||||
setBannerAd(banner);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Error fetching advertisement:", err);
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
initState();
|
||||
}, [page, showData, startDateValue, selectedCategories]);
|
||||
|
|
@ -107,7 +148,7 @@ export default function Beranda() {
|
|||
<div className="text-xs flex items-center gap-2">
|
||||
<Clock className="w-3 h-3" />
|
||||
<span>
|
||||
{post.createdByName} -{" "}
|
||||
{post?.customCreatorName || post.createdByName} -{" "}
|
||||
{new Date(post.createdAt).toLocaleDateString("id-ID", {
|
||||
day: "numeric",
|
||||
month: "long",
|
||||
|
|
@ -121,13 +162,33 @@ export default function Beranda() {
|
|||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="relative my-5 max-w-full h-[125px] overflow-hidden flex items-center mx-auto border">
|
||||
<Image
|
||||
src="/image-kolom.png"
|
||||
alt="Berita Utama"
|
||||
fill
|
||||
className="object-cover"
|
||||
/>
|
||||
<div className="relative mt-10 mb-2 flex justify-center mx-8 border my-8 h-[350px] overflow-hidden bg-white">
|
||||
{bannerAd ? (
|
||||
<a
|
||||
href={bannerAd.redirectLink}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="block w-full"
|
||||
>
|
||||
<div className="relative w-full h-[350px] flex justify-center">
|
||||
<Image
|
||||
src={bannerAd.contentFileUrl}
|
||||
alt={bannerAd.title || "Iklan Banner"}
|
||||
width={1200} // ukuran dasar untuk responsive
|
||||
height={350}
|
||||
className="object-cover w-full h-full"
|
||||
/>
|
||||
</div>
|
||||
</a>
|
||||
) : (
|
||||
<Image
|
||||
src="/image-kolom.png"
|
||||
alt="Berita Utama"
|
||||
width={1200}
|
||||
height={188}
|
||||
className="object-contain w-full h-[188px]"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex flex-col md:flex-row md:items-center md:justify-between mb-8 pb-1 gap-2 bg-white border-b-2 pt-2 ">
|
||||
<h2 className="text-sm font-bold">Kesehatan</h2>
|
||||
|
|
@ -176,7 +237,7 @@ export default function Beranda() {
|
|||
<div className="text-xs flex items-center gap-2">
|
||||
<Clock className="w-3 h-3" />
|
||||
<span>
|
||||
{post.createdByName} -{" "}
|
||||
{post?.customCreatorName || post.createdByName} -{" "}
|
||||
{new Date(post.createdAt).toLocaleDateString("id-ID", {
|
||||
day: "numeric",
|
||||
month: "long",
|
||||
|
|
@ -190,13 +251,33 @@ export default function Beranda() {
|
|||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="relative my-5 max-w-full h-[125px] overflow-hidden flex items-center mx-auto border">
|
||||
<Image
|
||||
src="/image-kolom.png"
|
||||
alt="Berita Utama"
|
||||
fill
|
||||
className="object-cover"
|
||||
/>
|
||||
<div className="relative mt-10 mb-2 flex justify-center mx-8 border my-8 h-[350px] overflow-hidden bg-white">
|
||||
{bannerAd ? (
|
||||
<a
|
||||
href={bannerAd.redirectLink}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="block w-full"
|
||||
>
|
||||
<div className="relative w-full h-[350px] flex justify-center">
|
||||
<Image
|
||||
src={bannerAd.contentFileUrl}
|
||||
alt={bannerAd.title || "Iklan Banner"}
|
||||
width={1200} // ukuran dasar untuk responsive
|
||||
height={350}
|
||||
className="object-cover w-full h-full"
|
||||
/>
|
||||
</div>
|
||||
</a>
|
||||
) : (
|
||||
<Image
|
||||
src="/image-kolom.png"
|
||||
alt="Berita Utama"
|
||||
width={1200}
|
||||
height={188}
|
||||
className="object-contain w-full h-[188px]"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -106,7 +106,7 @@ export default function DashboardContainer() {
|
|||
|
||||
async function initState() {
|
||||
const req = {
|
||||
limit: "4",
|
||||
limit: "5",
|
||||
page: page,
|
||||
search: "",
|
||||
};
|
||||
|
|
@ -195,7 +195,7 @@ export default function DashboardContainer() {
|
|||
{/* Stats Cards */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-6 gap-6">
|
||||
{/* User Profile Card */}
|
||||
<motion.div
|
||||
<motion.div
|
||||
className="col-span-1 md:col-span-2 bg-white rounded-2xl shadow-lg border border-slate-200/60 p-6 hover:shadow-xl transition-all duration-300"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
|
|
@ -207,11 +207,15 @@ export default function DashboardContainer() {
|
|||
<p className="text-slate-600">{username}</p>
|
||||
<div className="flex space-x-6 pt-2">
|
||||
<div className="text-center">
|
||||
<p className="text-2xl font-bold text-blue-600">{summary?.totalToday}</p>
|
||||
<p className="text-2xl font-bold text-blue-600">
|
||||
{summary?.totalToday}
|
||||
</p>
|
||||
<p className="text-sm text-slate-500">Today</p>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<p className="text-2xl font-bold text-purple-600">{summary?.totalThisWeek}</p>
|
||||
<p className="text-2xl font-bold text-purple-600">
|
||||
{summary?.totalThisWeek}
|
||||
</p>
|
||||
<p className="text-sm text-slate-500">This Week</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -223,7 +227,7 @@ export default function DashboardContainer() {
|
|||
</motion.div>
|
||||
|
||||
{/* Total Posts */}
|
||||
<motion.div
|
||||
<motion.div
|
||||
className="bg-white rounded-2xl shadow-lg border border-slate-200/60 p-6 hover:shadow-xl transition-all duration-300"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
|
|
@ -234,14 +238,16 @@ export default function DashboardContainer() {
|
|||
<DashboardSpeecIcon />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-3xl font-bold text-slate-800">{summary?.totalAll}</p>
|
||||
<p className="text-3xl font-bold text-slate-800">
|
||||
{summary?.totalAll}
|
||||
</p>
|
||||
<p className="text-sm text-slate-500">Total Posts</p>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Total Views */}
|
||||
<motion.div
|
||||
<motion.div
|
||||
className="bg-white rounded-2xl shadow-lg border border-slate-200/60 p-6 hover:shadow-xl transition-all duration-300"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
|
|
@ -252,14 +258,16 @@ export default function DashboardContainer() {
|
|||
<DashboardConnectIcon />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-3xl font-bold text-slate-800">{summary?.totalViews}</p>
|
||||
<p className="text-3xl font-bold text-slate-800">
|
||||
{summary?.totalViews}
|
||||
</p>
|
||||
<p className="text-sm text-slate-500">Total Views</p>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Total Shares */}
|
||||
<motion.div
|
||||
<motion.div
|
||||
className="bg-white rounded-2xl shadow-lg border border-slate-200/60 p-6 hover:shadow-xl transition-all duration-300"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
|
|
@ -270,14 +278,16 @@ export default function DashboardContainer() {
|
|||
<DashboardShareIcon />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-3xl font-bold text-slate-800">{summary?.totalShares}</p>
|
||||
<p className="text-3xl font-bold text-slate-800">
|
||||
{summary?.totalShares}
|
||||
</p>
|
||||
<p className="text-sm text-slate-500">Total Shares</p>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Total Comments */}
|
||||
<motion.div
|
||||
<motion.div
|
||||
className="bg-white rounded-2xl shadow-lg border border-slate-200/60 p-6 hover:shadow-xl transition-all duration-300"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
|
|
@ -288,7 +298,9 @@ export default function DashboardContainer() {
|
|||
<DashboardCommentIcon size={40} />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-3xl font-bold text-slate-800">{summary?.totalComments}</p>
|
||||
<p className="text-3xl font-bold text-slate-800">
|
||||
{summary?.totalComments}
|
||||
</p>
|
||||
<p className="text-sm text-slate-500">Total Comments</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -298,20 +310,27 @@ export default function DashboardContainer() {
|
|||
{/* Content Section */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
||||
{/* Analytics Chart */}
|
||||
<motion.div
|
||||
<motion.div
|
||||
className="bg-white rounded-2xl shadow-lg border border-slate-200/60 p-6"
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ delay: 0.6 }}
|
||||
>
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<h3 className="text-lg font-semibold text-slate-800">Analytics Overview</h3>
|
||||
<h3 className="text-lg font-semibold text-slate-800">
|
||||
Analytics Overview
|
||||
</h3>
|
||||
<div className="flex space-x-4">
|
||||
{options.map((option) => (
|
||||
<label key={option.value} className="flex items-center space-x-2">
|
||||
<label
|
||||
key={option.value}
|
||||
className="flex items-center space-x-2"
|
||||
>
|
||||
<Checkbox
|
||||
checked={analyticsView.includes(option.value)}
|
||||
onCheckedChange={(checked) => handleChange(option.value, checked as boolean)}
|
||||
onCheckedChange={(checked) =>
|
||||
handleChange(option.value, checked as boolean)
|
||||
}
|
||||
/>
|
||||
<span className="text-sm text-slate-600">{option.label}</span>
|
||||
</label>
|
||||
|
|
@ -319,30 +338,32 @@ export default function DashboardContainer() {
|
|||
</div>
|
||||
</div>
|
||||
<div className="h-80">
|
||||
<ApexChartColumn
|
||||
type="monthly"
|
||||
date={`${new Date().getMonth() + 1} ${new Date().getFullYear()}`}
|
||||
view={analyticsView}
|
||||
/>
|
||||
</div>
|
||||
<ApexChartColumn
|
||||
type="monthly"
|
||||
date={`${new Date().getMonth() + 1} ${new Date().getFullYear()}`}
|
||||
view={analyticsView}
|
||||
/>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Recent Articles */}
|
||||
<motion.div
|
||||
<motion.div
|
||||
className="bg-white rounded-2xl shadow-lg border border-slate-200/60 p-6"
|
||||
initial={{ opacity: 0, x: 20 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ delay: 0.7 }}
|
||||
>
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<h3 className="text-lg font-semibold text-slate-800">Recent Articles</h3>
|
||||
<Link href="/admin/article/create">
|
||||
<h3 className="text-lg font-semibold text-slate-800">
|
||||
Recent Articles
|
||||
</h3>
|
||||
{/* <Link href="/admin/article/create">
|
||||
<Button className="bg-gradient-to-r from-blue-500 to-purple-500 hover:from-blue-600 hover:to-purple-600 text-white shadow-lg">
|
||||
Create Article
|
||||
</Button>
|
||||
</Link>
|
||||
</Link> */}
|
||||
</div>
|
||||
|
||||
|
||||
<div className="space-y-4 max-h-96 overflow-y-auto scrollbar-thin">
|
||||
{article?.map((list: any) => (
|
||||
<motion.div
|
||||
|
|
@ -369,7 +390,7 @@ export default function DashboardContainer() {
|
|||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
|
||||
<div className="mt-6 flex justify-center">
|
||||
<CustomPagination
|
||||
totalPage={totalPage}
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ import {
|
|||
} from "@/components/icons";
|
||||
import { close, error, loading, success, successToast } from "@/config/swal";
|
||||
import { Article } from "@/types/globals";
|
||||
import { convertDateFormat } from "@/utils/global";
|
||||
import { convertDateFormat, formatDate } from "@/utils/global";
|
||||
import Link from "next/link";
|
||||
import { Key, useCallback, useEffect, useState } from "react";
|
||||
import Swal from "sweetalert2";
|
||||
|
|
@ -54,7 +54,7 @@ const columns = [
|
|||
{ name: "Banner", uid: "isBanner" },
|
||||
{ name: "Kategori", uid: "category" },
|
||||
{ name: "Tanggal Unggah", uid: "createdAt" },
|
||||
{ name: "Kreator", uid: "createdByName" },
|
||||
{ name: "Kreator", uid: "customCreatorName" },
|
||||
{ name: "Status", uid: "isPublish" },
|
||||
{ name: "Aksi", uid: "actions" },
|
||||
];
|
||||
|
|
@ -64,7 +64,7 @@ const columnsOtherRole = [
|
|||
{ name: "Source", uid: "source" },
|
||||
{ name: "Kategori", uid: "category" },
|
||||
{ name: "Tanggal Unggah", uid: "createdAt" },
|
||||
{ name: "Kreator", uid: "createdByName" },
|
||||
{ name: "Kreator", uid: "customCreatorName" },
|
||||
{ name: "Status", uid: "isPublish" },
|
||||
{ name: "Aksi", uid: "actions" },
|
||||
];
|
||||
|
|
@ -86,6 +86,7 @@ export default function ArticleTable() {
|
|||
const [search, setSearch] = useState("");
|
||||
const [categories, setCategories] = useState<any>([]);
|
||||
const [selectedCategories, setSelectedCategories] = useState<any>("");
|
||||
const [selectedCategoryId, setSelectedCategoryId] = useState<any>("");
|
||||
const [selectedSource, setSelectedSource] = useState<any>("");
|
||||
const [selectedStatus, setSelectedStatus] = useState<string>("");
|
||||
const [dateRange, setDateRange] = useState<any>({
|
||||
|
|
@ -111,7 +112,7 @@ export default function ArticleTable() {
|
|||
page,
|
||||
showData,
|
||||
search,
|
||||
selectedCategories,
|
||||
selectedCategoryId,
|
||||
selectedSource,
|
||||
dateRange,
|
||||
selectedStatus,
|
||||
|
|
@ -123,16 +124,12 @@ export default function ArticleTable() {
|
|||
limit: showData,
|
||||
page: page,
|
||||
search: search,
|
||||
category: selectedCategories || "",
|
||||
category: selectedCategoryId || "",
|
||||
source: selectedSource || "",
|
||||
isPublish:
|
||||
selectedStatus !== "" ? selectedStatus === "publish" : undefined,
|
||||
startDate: dateRange.startDate
|
||||
? new Date(dateRange.startDate).toISOString()
|
||||
: "",
|
||||
endDate: dateRange.endDate
|
||||
? new Date(dateRange.endDate).toISOString()
|
||||
: "",
|
||||
startDate: formatDate(dateRange.startDate),
|
||||
endDate: formatDate(dateRange.endDate),
|
||||
sort: "desc",
|
||||
sortBy: "created_at",
|
||||
};
|
||||
|
|
@ -221,6 +218,15 @@ export default function ArticleTable() {
|
|||
const cellValue = article[columnKey as keyof any];
|
||||
|
||||
switch (columnKey) {
|
||||
case "customCreatorName":
|
||||
return (
|
||||
<p>
|
||||
{article.customCreatorName &&
|
||||
article.customCreatorName.trim() !== ""
|
||||
? article.customCreatorName
|
||||
: article.createdByName}
|
||||
</p>
|
||||
);
|
||||
case "isPublish":
|
||||
return (
|
||||
// <Chip
|
||||
|
|
@ -367,8 +373,8 @@ export default function ArticleTable() {
|
|||
<div className="flex flex-col gap-1 w-full lg:w-[230px]">
|
||||
<p className="font-semibold text-sm">Kategori</p>
|
||||
<Select
|
||||
value={selectedCategories}
|
||||
onValueChange={(value) => setSelectedCategories(value)}
|
||||
value={selectedCategoryId}
|
||||
onValueChange={(value) => setSelectedCategoryId(value)} // simpan ID
|
||||
>
|
||||
<SelectTrigger className="w-full text-sm border">
|
||||
<SelectValue placeholder="Kategori" />
|
||||
|
|
@ -377,7 +383,10 @@ export default function ArticleTable() {
|
|||
{categories
|
||||
?.filter((category: any) => category.title != null)
|
||||
.map((category: any) => (
|
||||
<SelectItem key={category.id} value={category.title}>
|
||||
<SelectItem
|
||||
key={category.id}
|
||||
value={category.id.toString()} // kirim ID, bukan title
|
||||
>
|
||||
{category.title}
|
||||
</SelectItem>
|
||||
))}
|
||||
|
|
@ -394,8 +403,8 @@ export default function ArticleTable() {
|
|||
<SelectValue placeholder="Pilih Source" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="INTERNAL">INTERNAL</SelectItem>
|
||||
<SelectItem value="EXTERNAL">EXTERNAL</SelectItem>
|
||||
<SelectItem value="internal">INTERNAL</SelectItem>
|
||||
<SelectItem value="external">EXTERNAL</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -21,13 +21,14 @@ export async function getListArticle(props: PaginationRequest) {
|
|||
categorySlug,
|
||||
isBanner,
|
||||
} = props;
|
||||
|
||||
return await httpGet(
|
||||
`/articles?limit=${limit}&page=${page}&isPublish=${
|
||||
isPublish === undefined ? "" : isPublish
|
||||
}&title=${search}&startDate=${startDate || ""}&endDate=${
|
||||
endDate || ""
|
||||
}&categoryId=${category || ""}&sortBy=${sortBy || "created_at"}&sort=${
|
||||
sort || "asc"
|
||||
sort || "desc"
|
||||
}&category=${categorySlug || ""}&isBanner=${isBanner || ""}`,
|
||||
null
|
||||
);
|
||||
|
|
|
|||
|
|
@ -94,16 +94,21 @@ export async function otpValidation(email: string, otpCode: string) {
|
|||
return await httpPost(pathUrl, { email, otpCode });
|
||||
}
|
||||
|
||||
// export async function postArticleComment(data: any) {
|
||||
// const headers = token
|
||||
// ? {
|
||||
// "content-type": "application/json",
|
||||
// Authorization: `${token}`,
|
||||
// }
|
||||
// : {
|
||||
// "content-type": "application/json",
|
||||
// };
|
||||
// return await httpPost(`/article-comments`, headers, data);
|
||||
// }
|
||||
|
||||
export async function postArticleComment(data: any) {
|
||||
const headers = token
|
||||
? {
|
||||
"content-type": "application/json",
|
||||
Authorization: `Bearer ${token}`,
|
||||
}
|
||||
: {
|
||||
"content-type": "application/json",
|
||||
};
|
||||
return await httpPost(`/article-comments`, headers, data);
|
||||
const pathUrl = `/article-comments`;
|
||||
return await httpPostInterceptor(pathUrl, data);
|
||||
}
|
||||
|
||||
export async function editArticleComment(data: any, id: number) {
|
||||
|
|
@ -112,7 +117,7 @@ export async function editArticleComment(data: any, id: number) {
|
|||
}
|
||||
|
||||
export async function getArticleComment(id: string) {
|
||||
const pathUrl = `/article-comments?isPublic=true&articleId=${id}`;
|
||||
const pathUrl = `/article-comments?isPublic=false&articleId=${id}`;
|
||||
return await httpGet(pathUrl);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -164,3 +164,11 @@ export function convertDateFormatNoTime(date: Date): string {
|
|||
const day = `${date.getDate()}`.padStart(2, "0");
|
||||
return `${year}-${month}-${day}`;
|
||||
}
|
||||
|
||||
export function formatDate(date: Date | null) {
|
||||
if (!date) return "";
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, "0");
|
||||
const day = String(date.getDate()).padStart(2, "0");
|
||||
return `${year}-${month}-${day}`;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue