update
This commit is contained in:
parent
a6f5697541
commit
1300e3a67e
|
|
@ -7,6 +7,7 @@ import { close, loading } from "@/config/swal";
|
|||
import { useParams } from "next/navigation";
|
||||
import Author from "../landing-page/author";
|
||||
import { Link2, MailIcon } from "lucide-react";
|
||||
import { getAdvertise } from "@/service/advertisement";
|
||||
|
||||
type TabKey = "trending" | "comments" | "latest";
|
||||
|
||||
|
|
@ -17,6 +18,7 @@ type Article = {
|
|||
categoryName: string;
|
||||
createdAt: string;
|
||||
createdByName: string;
|
||||
customCreatorName: string;
|
||||
thumbnailUrl: string;
|
||||
categories: {
|
||||
title: string;
|
||||
|
|
@ -27,6 +29,15 @@ type Article = {
|
|||
}[];
|
||||
};
|
||||
|
||||
type Advertise = {
|
||||
id: number;
|
||||
title: string;
|
||||
description: string;
|
||||
placement: string;
|
||||
contentFileUrl: string;
|
||||
redirectLink: string;
|
||||
};
|
||||
|
||||
interface CategoryType {
|
||||
id: number;
|
||||
label: string;
|
||||
|
|
@ -69,6 +80,36 @@ 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];
|
||||
|
||||
// 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(() => {
|
||||
fetchTabArticles();
|
||||
}, [activeTab]);
|
||||
|
|
@ -234,7 +275,7 @@ export default function DetailContent() {
|
|||
</div>
|
||||
|
||||
<span className="text-orange-400 font-medium">
|
||||
{articleDetail?.createdByName}
|
||||
{articleDetail?.customCreatorName || articleDetail?.createdByName}
|
||||
</span>
|
||||
<span>•</span>
|
||||
<span>
|
||||
|
|
@ -384,7 +425,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">
|
||||
|
|
@ -519,13 +561,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,6 +88,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",
|
||||
}),
|
||||
|
|
@ -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,7 +190,9 @@ 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("source", data?.source);
|
||||
setValue("description", data?.htmlDescription);
|
||||
setValue("tags", data?.tags ? data.tags.split(",") : []);
|
||||
setThumbnail(data?.thumbnailUrl);
|
||||
|
|
@ -783,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>
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ import { getListArticle } from "@/service/article";
|
|||
import { ScrollArea } from "@/components/ui/scroll-area"; // pastikan ada komponen ini
|
||||
import { Calendar } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { getAdvertise } from "@/service/advertisement";
|
||||
|
||||
type Article = {
|
||||
id: number;
|
||||
|
|
@ -18,9 +19,48 @@ type Article = {
|
|||
files: { fileUrl: string; file_alt: string }[];
|
||||
};
|
||||
|
||||
type Advertise = {
|
||||
id: number;
|
||||
title: string;
|
||||
description: string;
|
||||
placement: string;
|
||||
contentFileUrl: string;
|
||||
redirectLink: string;
|
||||
};
|
||||
|
||||
export default function News() {
|
||||
const [articles, setArticles] = useState<Article[]>([]);
|
||||
const [recentPosts, setRecentPosts] = useState<Article[]>([]);
|
||||
const [bannerAd, setBannerAd] = useState<Advertise | null>(null);
|
||||
const [bannerImageAd, setBannerImageAd] = 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 || [];
|
||||
|
||||
// ambil iklan placement jumbotron
|
||||
const jumbotron = data.find((ad) => ad.placement === "jumbotron");
|
||||
if (jumbotron) setBannerAd(jumbotron);
|
||||
|
||||
// ambil iklan placement banner
|
||||
const banner = data.find((ad) => ad.placement === "banner");
|
||||
if (banner) setBannerImageAd(banner);
|
||||
} catch (err) {
|
||||
console.error("Error fetching advertisement:", err);
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
fetchArticles();
|
||||
|
|
@ -116,12 +156,28 @@ export default function News() {
|
|||
|
||||
{/* Banner */}
|
||||
<div className="relative w-full my-10 h-[160px] md:h-[188px] overflow-hidden flex items-center border">
|
||||
<Image
|
||||
src="/image-kolom.png"
|
||||
alt="Berita Utama"
|
||||
fill
|
||||
className="object-cover"
|
||||
/>
|
||||
{bannerImageAd ? (
|
||||
<a
|
||||
href={bannerImageAd.redirectLink}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="w-full h-full relative"
|
||||
>
|
||||
<Image
|
||||
src={bannerImageAd.contentFileUrl}
|
||||
alt={bannerImageAd.title || "Iklan Banner"}
|
||||
fill
|
||||
className="object-cover"
|
||||
/>
|
||||
</a>
|
||||
) : (
|
||||
<Image
|
||||
src="/image-kolom.png"
|
||||
alt="Banner Default"
|
||||
fill
|
||||
className="object-cover"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Artikel kedua */}
|
||||
|
|
@ -172,12 +228,28 @@ export default function News() {
|
|||
|
||||
{/* Banner */}
|
||||
<div className="relative w-full my-10 h-[160px] md:h-[188px] overflow-hidden flex items-center border">
|
||||
<Image
|
||||
src="/image-kolom.png"
|
||||
alt="Berita Utama"
|
||||
fill
|
||||
className="object-cover"
|
||||
/>
|
||||
{bannerImageAd ? (
|
||||
<a
|
||||
href={bannerImageAd.redirectLink}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="w-full h-full relative"
|
||||
>
|
||||
<Image
|
||||
src={bannerImageAd.contentFileUrl}
|
||||
alt={bannerImageAd.title || "Iklan Banner"}
|
||||
fill
|
||||
className="object-cover"
|
||||
/>
|
||||
</a>
|
||||
) : (
|
||||
<Image
|
||||
src="/image-kolom.png"
|
||||
alt="Banner Default"
|
||||
fill
|
||||
className="object-cover"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Pagination (sementara statis, bisa pakai API meta untuk dinamis) */}
|
||||
|
|
@ -258,13 +330,32 @@ export default function News() {
|
|||
|
||||
{/* Ads / Subscribe */}
|
||||
<div className="relative rounded w-full md:w-[300px] border ">
|
||||
<Image
|
||||
src="/kolom.png"
|
||||
alt="Iklan 2"
|
||||
width={300}
|
||||
height={200}
|
||||
className="object-cover"
|
||||
/>
|
||||
{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 className="border p-5 w-full md:w-[300px] ">
|
||||
<h3 className="text-[#2481D3] text-lg font-semibold mb-2 w-10/12">
|
||||
|
|
@ -284,13 +375,32 @@ export default function News() {
|
|||
</button>
|
||||
</div>
|
||||
<div className="relative rounded w-full md:w-[300px] border ">
|
||||
<Image
|
||||
src="/kolom.png"
|
||||
alt="Iklan 2"
|
||||
width={300}
|
||||
height={200}
|
||||
className="object-cover"
|
||||
/>
|
||||
{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>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
);
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ const axiosBaseInstance = axios.create({
|
|||
baseURL,
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
"X-Client-Key": "e41eefe6-70da-4cb2-bf90-aa033fd082be",
|
||||
"X-Client-Key": "59cbca27-ce92-40b7-866a-218a4936e701",
|
||||
},
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ const axiosInterceptorInstance = axios.create({
|
|||
baseURL,
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
"X-Client-Key": "e41eefe6-70da-4cb2-bf90-aa033fd082be",
|
||||
"X-Client-Key": "59cbca27-ce92-40b7-866a-218a4936e701",
|
||||
},
|
||||
withCredentials: true,
|
||||
});
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import axiosBaseInstance from "./axios-base-instance";
|
|||
|
||||
const defaultHeaders = {
|
||||
"Content-Type": "application/json",
|
||||
"X-Client-Key": "e41eefe6-70da-4cb2-bf90-aa033fd082be",
|
||||
"X-Client-Key": "59cbca27-ce92-40b7-866a-218a4936e701",
|
||||
};
|
||||
|
||||
export async function httpGet(pathUrl: any, headers?: any) {
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import { getCsrfToken } from "../master-user";
|
|||
|
||||
const defaultHeaders = {
|
||||
"Content-Type": "application/json",
|
||||
"X-Client-Key": "e41eefe6-70da-4cb2-bf90-aa033fd082be",
|
||||
"X-Client-Key": "59cbca27-ce92-40b7-866a-218a4936e701",
|
||||
};
|
||||
|
||||
export async function httpGetInterceptor(pathUrl: any) {
|
||||
|
|
|
|||
|
|
@ -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