humas
/
web-humas-fe
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat:ads table, ads landing

This commit is contained in:
Rama Priyanto 2025-03-11 17:19:37 +07:00
parent 5c2a544a9f
commit 7d6c7ff927
19 changed files with 280 additions and 124 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
app/(admin)/admin/advertise/page.tsx
View File

@ -30,12 +30,13 @@ import withReactContent from "sweetalert2-react-content";
import { useDropzone } from "react-dropzone";
import { close, error, loading } from "@/config/swal";
import Image from "next/image";
import { createAdvertise } from "@/service/advertisement";
const createArticleSchema = z.object({
title: z.string().min(2, {
message: "Judul harus diisi",
}),
url: z.string().min(2, {
url: z.string().min(1, {
message: "Link harus diisi",
}),
description: z.string().min(2, {
@ -79,19 +80,24 @@ export default function AdvertisePage() {
title: values.title,
description: values.description,
placement: placement,
url: values.url,
redirectLink: values.url,
};
const res = await createAdvertise(formData);
if (res?.error) {
error(res?.message);
return false;
}
close();
// setRefresh(!refresh);
// MySwal.fire({
// title: "Sukses",
// icon: "success",
// confirmButtonColor: "#3085d6",
// confirmButtonText: "OK",
// }).then((result) => {
// if (result.isConfirmed) {
// }
// });
setRefresh(!refresh);
MySwal.fire({
title: "Sukses",
icon: "success",
confirmButtonColor: "#3085d6",
confirmButtonText: "OK",
}).then((result) => {
if (result.isConfirmed) {
}
});
};
const handleRemoveFile = (file: File) => {
@ -275,7 +281,7 @@ export default function AdvertisePage() {
<Button
color="primary"
type="submit"
isDisabled={files.length < 1}
// isDisabled={files.length < 1}
>
Simpan
</Button>

14
app/auth/page.tsx
View File

@ -1,19 +1,5 @@
import Login from "@/components/form/login";
export default function AuthPage() {
// const isAuthenticated = Cookies.get("is_authenticated") || "false";
// console.log("isAuthenticated : ", isAuthenticated);
// const [hasMounted, setHasMounted] = useState(false);
// useEffect(() => {
// setHasMounted(true);
// }, []);
// // Render
// if (!hasMounted) return null;
// return isAuthenticated == "true" ? <Login /> : <QudoLogin />;
return <Login />;
}

5
app/layout.tsx
View File

@ -53,6 +53,9 @@ export default function RootLayout({ children }: { children: ReactNode }) {
return (
<html lang="en" suppressHydrationWarning className="scroll-smooth">
<head>
<title>
DIVISI HUMAS POLRI - Pengelolaan Informasi & Dokumentasi Polri
</title>
<meta
name="theme-color"
content="white"
@ -64,6 +67,8 @@ export default function RootLayout({ children }: { children: ReactNode }) {
content="black"
media="(prefers-color-scheme: dark)"
/>
<meta property="og:image" content="/logohumas.png" />
<LoadScript />
</head>
<body

15
components/form/article/create-article-form.tsx
View File

@ -48,7 +48,7 @@ import {
} from "@heroui/react";
import GenerateSingleArticleForm from "./generate-ai-single-form";
import { convertDateFormatNoTime, htmlToString } from "@/utils/global";
import { close, error, loading } from "@/config/swal";
import { close, error, loading, successToast } from "@/config/swal";
import { useRouter } from "next/navigation";
import Link from "next/link";
import { getCategoryById } from "@/service/master-categories";
@ -289,7 +289,6 @@ export default function CreateArticleForm() {
const getUserLevelApprovalStatus = async () => {
const res = await getUserLevels(String(userLevel));
console.log("res", res?.data?.data?.isApprovalActive);
return res?.data?.data?.isApprovalActive;
};
@ -354,10 +353,14 @@ export default function CreateArticleForm() {
}
close();
successSubmit("/admin/article");
successSubmit("/admin/article", articleId, values.slug);
};
function successSubmit(redirect: string) {
function successSubmit(redirect: string, id: number, slug: string) {
const url =
`${window.location.protocol}//${window.location.host}` +
"/news/detail/" +
`${id}-${slug}`;
MySwal.fire({
title: "Sukses",
icon: "success",
@ -366,6 +369,10 @@ export default function CreateArticleForm() {
}).then((result) => {
if (result.isConfirmed) {
router.push(redirect);
successToast("Article Url", url);
} else {
router.push(redirect);
successToast("Article Url", url);
}
});
}

2
components/form/login.tsx
View File

@ -236,6 +236,7 @@ export default function Login() {
label=""
placeholder=""
className="my-2"
classNames={{ input: "rounded-md", inputWrapper: "rounded-md" }}
value={username}
onChange={(e: any) => {
setValUsername(e.target.value.trim());
@ -251,6 +252,7 @@ export default function Login() {
<Input
isRequired
className="my-2"
classNames={{ input: "rounded-md", inputWrapper: "rounded-md" }}
endContent={
<button
className="focus:outline-none"

32
components/icons.tsx
View File

@ -2622,3 +2622,35 @@ export const LandingAnalyticIcon = ({
/>
</svg>
);
export const CopyIcon = ({
size,
height = 24,
width = 24,
fill = "currentColor",
...props
}: IconSvgProps) => (
<svg
xmlns="http://www.w3.org/2000/svg"
width={size || width}
height={size || height}
{...props}
viewBox="0 0 36 36"
>
<path
fill="currentColor"
d="M27 3.56A1.56 1.56 0 0 0 25.43 2H5.57A1.56 1.56 0 0 0 4 3.56v24.88A1.56 1.56 0 0 0 5.57 30h.52V4.07H27Z"
className="clr-i-solid clr-i-solid-path-1"
/>
<rect
width="23"
height="28"
x="8"
y="6"
fill="currentColor"
className="clr-i-solid clr-i-solid-path-2"
rx="1.5"
ry="1.5"
/>
<path fill="none" d="M0 0h36v36H0z" />
</svg>
);

12
components/landing/HeaderNews.tsx
View File

@ -66,7 +66,7 @@ export default function HeaderNews() {
return (
<div className="w-full">
<div className="flex flex-col lg:flex-row gap-3 lg:gap-8 bg-white dark:bg-black p-1 lg:p-8 lg:h-[55vh] w-full lg:w-[75%] lg:mx-auto">
<div className="lg:hidden w-[90%] h-[300px] mx-auto">
<div className="lg:hidden w-[90%] h-[300px] md:h-[500px] mx-auto">
{article ? (
<Swiper
centeredSlides={true}
@ -82,15 +82,15 @@ export default function HeaderNews() {
"bg-white/70",
"!text-black",
"rounded-full",
"!w-[24px]",
"!h-[24px]"
"!w-[32px]",
"!h-[32px]"
);
swiper.navigation.prevEl?.classList.add(
"bg-white/70",
"!text-black",
"rounded-full",
"!w-[24px]",
"!h-[24px]"
"!w-[32px]",
"!h-[32px]"
);
}}
>
@ -107,7 +107,7 @@ export default function HeaderNews() {
? "/no-image.jpg"
: newsItem?.thumbnailUrl
}
className="w-[90%] !h-[200px] object-cover"
className="!w-[90vh] md:!w-[95vh] !h-[200px] md:!h-[400px] object-cover"
/>
<CardFooter className="before:bg-white/10 border-gray-100 border-1 rounded-b-xl shadow-sm bottom-1 w-full">

36
components/landing/adds-carousel.tsx
View File

@ -13,17 +13,38 @@ import { Swiper, SwiperSlide, useSwiper } from "swiper/react";
import "swiper/css";
import "swiper/css/navigation";
import Link from "next/link";
import { Autoplay, Pagination, Navigation, Controller } from "swiper/modules";
import { useEffect, useState } from "react";
import { getAdvertise } from "@/service/advertisement";
const datas = [
{ id: 1, src: "/props-1.png" },
{ id: 2, src: "/props-2.png" },
{ id: 2, src: "/props-3.png" },
{ id: 1, src: "/sample-banner.png" },
{ id: 2, src: "/sample-banner-2.png" },
{ id: 2, src: "/sample-banner-3.jpg" },
];
interface Jumbotron {
id: number;
title: string;
description: string;
redirectLink: string;
}
export default function AddsCarousel() {
const [jumbotronList, setJumbotronList] = useState<Jumbotron[]>([]);
useEffect(() => {
initFetch();
}, []);
const initFetch = async () => {
const req = { page: 1, limit: 5, placement: "banner" };
const res = await getAdvertise(req);
setJumbotronList(res?.data?.data);
};
return (
<div className="w-[90%] lg:w-[75%] mx-auto">
{datas ? (
{jumbotronList ? (
<Swiper
centeredSlides={true}
autoplay={{
@ -50,7 +71,7 @@ export default function AddsCarousel() {
);
}}
>
{datas?.map((newsItem: any, index: number) => (
{jumbotronList?.map((newsItem, index) => (
<SwiperSlide key={newsItem?.id} className="h-[20vh] lg:h-[50vh]">
<Card
isFooterBlurred
@ -61,8 +82,9 @@ export default function AddsCarousel() {
alt="headernews"
width={1440}
height={1080}
src={newsItem?.src == "" ? "/no-image.jpg" : newsItem?.src}
className="w-full h-[20vh] lg:!h-[50vh] object-cover rounded-lg"
// src={newsItem?.src == "" ? "/no-image.jpg" : newsItem?.src}
src={datas[index % 3].src}
/>
</Card>
</SwiperSlide>

38
components/landing/banner-new.tsx
View File

@ -39,6 +39,7 @@ import {
import storedLanguage from "@/store/language-store";
import { ThemeSwitch } from "../theme-switch";
import { siteConfig, SiteConfig } from "@/config/site";
import { getAdvertise } from "@/service/advertisement";
const images = [
"/landing-1.jpg",
@ -47,6 +48,13 @@ const images = [
"/landing-4.jpg",
];
interface Jumbotron {
id: number;
title: string;
description: string;
redirectLink: string;
}
export default function BannerHumasNew() {
const t = useTranslations("Banner");
const { isOpen, onOpen, onOpenChange } = useDisclosure();
@ -55,28 +63,40 @@ export default function BannerHumasNew() {
const [resetTimer, setResetTimer] = useState(0);
const [onOpenDropdown, setOnOpenDropdown] = useState(false);
const [searchValue, setSearchValue] = useState("");
const [jumbotronList, setJumbotronList] = useState<Jumbotron[]>([]);
const language = storedLanguage((state) => state.locale);
const setLanguage = storedLanguage((state) => state.setLocale);
useEffect(() => {
const interval = setInterval(() => {
setCurrentIndex((prevIndex) => (prevIndex + 1) % images.length);
setCurrentIndex((prevIndex) => (prevIndex + 1) % jumbotronList?.length);
}, 25000);
return () => clearInterval(interval);
}, [resetTimer]);
const nextImage = () => {
setCurrentIndex((prevIndex) => (prevIndex + 1) % images.length);
setCurrentIndex((prevIndex) => (prevIndex + 1) % jumbotronList?.length);
setResetTimer((prev) => prev + 1);
};
const prevImage = () => {
setCurrentIndex(
(prevIndex) => (prevIndex - 1 + images.length) % images.length
(prevIndex) =>
(prevIndex - 1 + jumbotronList?.length) % jumbotronList?.length
);
setResetTimer((prev) => prev + 1);
};
useEffect(() => {
initFetch();
}, []);
const initFetch = async () => {
const req = { page: 1, limit: 5, placement: "jumbotron" };
const res = await getAdvertise(req);
setJumbotronList(res?.data?.data);
};
const MenuPopover = (props: {
title: string;
menus: any;
@ -193,12 +213,16 @@ export default function BannerHumasNew() {
className="flex w-full h-[45vh] lg:h-[93vh] transition-transform duration-700 ease-in-out"
style={{ transform: `translateX(-${currentIndex * 100}%)` }}
>
{images.map((img, index) => (
<Link href="" key={index} className="w-full shrink-0">
{jumbotronList.map((img, index) => (
<Link
href={img?.redirectLink}
key={img?.id}
className="w-full shrink-0"
>
<Image
src={img}
src={images[index % 4]}
alt={`humasbanner-${index}`}
className="w-full h-full object-cover object-center opacity-[25] dark:opacity-70 rounded-none"
className="w-screen h-[45vh] lg:h-[93vh] object-cover object-center opacity-[25] dark:opacity-70 rounded-none"
/>
</Link>
))}

12
components/landing/drawer.tsx
View File

@ -17,7 +17,17 @@ export default function AnalyticDrawer() {
<>
<div className="fixed bottom-1/3 -translate-y-1/2 right-4 lg:right-9 z-50">
<Button
className="rotate-90 origin-right rounded-b-md rounded-t-none flex flex-row items-center gap-2 text-white bg-red-600 font-semibold"
className="lg:hidden rotate-90 origin-right rounded-b-md rounded-t-none flex flex-row items-center gap-2 text-white bg-red-600 font-semibold"
onPress={onOpen}
size="sm"
>
<div className="bg-red-950 p-1 rounded-full">
<ChevronDownIcon size={12} />
</div>{" "}
Statistik Kunjungan
</Button>
<Button
className="hidden lg:flex rotate-90 origin-right rounded-b-md rounded-t-none flex-row items-center gap-2 text-white bg-red-600 font-semibold"
onPress={onOpen}
>
<div className="bg-red-950 p-1 rounded-full">

138
components/table/advertise/advertise-table.tsx
View File

@ -32,6 +32,8 @@ import {
ModalFooter,
ModalHeader,
Pagination,
Radio,
RadioGroup,
Select,
SelectItem,
Spinner,
@ -55,12 +57,18 @@ import Swal from "sweetalert2";
import withReactContent from "sweetalert2-react-content";
import { useDropzone } from "react-dropzone";
import Image from "next/image";
import {
createAdvertiseById,
editAdvertise,
getAdvertise,
} from "@/service/advertisement";
const columns = [
{ name: "No", uid: "no" },
{ name: "Judul", uid: "title" },
{ name: "Deskripsi", uid: "descriptions" },
{ name: "Link", uid: "url" },
{ name: "Deskripsi", uid: "description" },
{ name: "Penempatan", uid: "placement" },
{ name: "Link", uid: "redirectLink" },
{ name: "Aksi", uid: "actions" },
];
@ -74,8 +82,8 @@ const createArticleSchema = z.object({
title: z.string().min(2, {
message: "Judul harus diisi",
}),
url: z.string().min(2, {
message: "Link harus diisi",
url: z.string().min(1, {
message: "Url harus diisi",
}),
description: z.string().min(2, {
message: "Deskripsi harus diisi",
@ -92,14 +100,9 @@ export default function AdvertiseTable(props: { triggerRefresh: boolean }) {
const [article, setArticle] = useState<any[]>([]);
const [showData, setShowData] = useState("10");
const [search, setSearch] = useState("");
const [categories, setCategoies] = useState<any>([]);
const [selectedCategories, setSelectedCategories] = useState<any>([]);
const [startDateValue, setStartDateValue] = useState({
startDate: null,
endDate: null,
});
const [isHeader, setIsHeader] = useState(false);
const [placement, setPlacement] = useState("banner");
const [refresh, setRefresh] = useState(false);
const [files, setFiles] = useState<File[]>([]);
@ -127,23 +130,7 @@ export default function AdvertiseTable(props: { triggerRefresh: boolean }) {
useEffect(() => {
initState();
}, [
page,
showData,
startDateValue,
selectedCategories,
props.triggerRefresh,
]);
useEffect(() => {
getCategories();
}, []);
async function getCategories() {
const res = await getArticleByCategory();
const data = res?.data?.data;
setCategoies(data);
}
}, [page, showData, props.triggerRefresh, refresh]);
const handleRemoveFile = (file: File) => {
const uploadedFiles = files;
@ -156,14 +143,11 @@ export default function AdvertiseTable(props: { triggerRefresh: boolean }) {
limit: showData,
page: page,
search: search,
startDate:
startDateValue.startDate === null ? "" : startDateValue.startDate,
endDate: startDateValue.endDate === null ? "" : startDateValue.endDate,
category: Array.from(selectedCategories).join(","),
sort: "desc",
sortBy: "created_at",
};
const res = await getListArticle(req);
const res = await getAdvertise(req);
getTableNumber(parseInt(showData), res.data?.data);
setTotalPage(res?.data?.meta?.totalPage);
}
@ -183,12 +167,12 @@ export default function AdvertiseTable(props: { triggerRefresh: boolean }) {
async function doDelete(id: any) {
// loading();
const resDelete = await deleteArticle(id);
// const resDelete = await deleteArticle(id);
if (resDelete?.error) {
error(resDelete.message);
return false;
}
// if (resDelete?.error) {
// error(resDelete.message);
// return false;
// }
close();
success("Berhasil Hapus");
initState();
@ -212,32 +196,38 @@ export default function AdvertiseTable(props: { triggerRefresh: boolean }) {
const onSubmit = async (values: z.infer<typeof createArticleSchema>) => {
loading();
const formData = {
id: Number(values.id),
title: values.title,
description: values.description,
isHeader: isHeader,
url: values.url,
placement: placement,
redirectLink: values.url,
};
console.log("dataas", formData);
const res = await editAdvertise(formData);
if (res?.error) {
error(res?.message);
return false;
}
close();
// setRefresh(!refresh);
// MySwal.fire({
// title: "Sukses",
// icon: "success",
// confirmButtonColor: "#3085d6",
// confirmButtonText: "OK",
// }).then((result) => {
// if (result.isConfirmed) {
// }
// });
MySwal.fire({
title: "Sukses",
icon: "success",
confirmButtonColor: "#3085d6",
confirmButtonText: "OK",
}).then((result) => {
if (result.isConfirmed) {
setRefresh(!refresh);
}
});
};
const openModal = async (id: number) => {
// const res = await getCategoryById(Number(id));
// const data = res?.data?.data;
// setValue("id", String(data?.id));
// setValue("title", data?.title);
// setValue("description", data?.description);
// setValue("url", data?.url);
const res = await createAdvertiseById(Number(id));
const data = res?.data?.data;
setValue("id", String(data?.id));
setValue("title", data?.title);
setValue("description", data?.description);
setValue("url", data?.redirectLink);
setPlacement(data?.placement);
// setValue("file", data?.thumbnailUrl);
onOpen();
@ -248,17 +238,20 @@ export default function AdvertiseTable(props: { triggerRefresh: boolean }) {
const cellValue = advertise[columnKey as keyof any];
switch (columnKey) {
case "url":
return (
case "redirectLink":
return cellValue.includes("https") ? (
<Link
href={`https://www.google.com/`}
href={cellValue}
target="_blank"
className="text-primary hover:underline"
className="text-primary hover:underline cursor-pointer"
>
https://www.google.com/
{cellValue}
</Link>
) : (
<p> {cellValue}</p>
);
case "placement":
return <p className="capitalize">{cellValue}</p>;
case "actions":
return (
<div className="relative flex justify-star items-center gap-2">
@ -303,7 +296,7 @@ export default function AdvertiseTable(props: { triggerRefresh: boolean }) {
return cellValue;
}
},
[article]
[article, props.triggerRefresh, refresh]
);
let typingTimer: NodeJS.Timeout;
@ -520,14 +513,17 @@ export default function AdvertiseTable(props: { triggerRefresh: boolean }) {
)}
</div>
<p className="text-sm mt-3">Header</p>
<Switch
<p className="text-sm mt-3">Penempatan</p>
<RadioGroup
label=""
orientation="horizontal"
size="sm"
isSelected={isHeader}
onValueChange={setIsHeader}
value={placement}
onValueChange={setPlacement}
>
<p className="text-sm"> {isHeader ? "Ya" : "Tidak"}</p>
</Switch>
<Radio value="banner">Banner</Radio>
<Radio value="jumbotron">Jumbotron</Radio>
</RadioGroup>
<Controller
control={control}
name="file"
@ -594,7 +590,7 @@ export default function AdvertiseTable(props: { triggerRefresh: boolean }) {
<Button
color="primary"
type="submit"
isDisabled={files.length < 1}
// isDisabled={files.length < 1}
>
Simpan
</Button>

24
components/table/article-table.tsx
View File

@ -1,13 +1,14 @@
"use client";
import {
BannerIcon,
CopyIcon,
CreateIconIon,
DeleteIcon,
DotsYIcon,
EyeIconMdi,
SearchIcon,
} from "@/components/icons";
import { error, success } from "@/config/swal";
import { error, success, successToast } from "@/config/swal";
import {
deleteArticle,
getArticleByCategory,
@ -158,6 +159,20 @@ export default function ArticleTable() {
console.log("vbanner", id, status);
};
const copyUrlArticle = async (id: number, slug: string) => {
const url =
`${window.location.protocol}//${window.location.host}` +
"/news/detail/" +
`${id}-${slug}`;
try {
await navigator.clipboard.writeText(url);
successToast("Success", "Article Copy to Clipboard");
setTimeout(() => {}, 1500);
} catch (err) {
("Failed to copy!");
}
};
const renderCell = useCallback(
(article: any, columnKey: Key) => {
const cellValue = article[columnKey as keyof any];
@ -199,6 +214,13 @@ export default function ArticleTable() {
</Button>
</DropdownTrigger>
<DropdownMenu>
<DropdownItem
key="copy-article"
onPress={() => copyUrlArticle(article.id, article.slug)}
>
<CopyIcon className="inline mr-2 mb-1" />
Copy Url Article
</DropdownItem>
<DropdownItem key="detail">
<Link href={`/admin/article/detail/${article.id}`}>
<EyeIconMdi className="inline mr-2 mb-1" />

BIN
public/props-1.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 691 KiB

BIN
public/props-2.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 761 KiB

BIN
public/props-3.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 321 KiB

BIN
public/sample-banner-2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 344 KiB

BIN
public/sample-banner-3.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 341 KiB

BIN
public/sample-banner.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 876 KiB

44
service/advertisement.ts Normal file
View File

@ -0,0 +1,44 @@
import {
httpDeleteInterceptor,
httpGet,
httpPost,
httpPut,
} from "./http-config/axios-base-service";
import Cookies from "js-cookie";
const token = Cookies.get("access_token");
export async function createAdvertise(data: any) {
const headers = {
"content-type": "application/json",
Authorization: `Bearer ${token}`,
};
const pathUrl = `/advertisement`;
return await httpPost(pathUrl, headers, data);
}
export async function getAdvertise(data: any) {
const headers = {
"content-type": "application/json",
};
const pathUrl = `/advertisement?page=${data?.page || 1}&limit=${
data?.limit || ""
}&placement=${data?.placement || ""}`;
return await httpGet(pathUrl, headers);
}
export async function createAdvertiseById(id: number) {
const headers = {
"content-type": "application/json",
};
const pathUrl = `/advertisement/${id}`;
return await httpGet(pathUrl, headers);
}
export async function editAdvertise(data: any) {
const headers = {
"content-type": "application/json",
};
const pathUrl = `/advertisement/${data?.id}`;
return await httpPut(pathUrl, headers, data);
}