diff --git a/app/[locale]/page.tsx b/app/[locale]/page.tsx index ca11da46..2bbdbef6 100644 --- a/app/[locale]/page.tsx +++ b/app/[locale]/page.tsx @@ -13,24 +13,19 @@ import { ReactLenis } from "@studio-freight/react-lenis"; import MountedProvider from "@/providers/mounted.provider"; import NewsTicker from "@/components/landing-page/news-tickers"; import AreaCoverageWorkUnits from "@/components/landing-page/area-coverage-and-work-units"; +import HeroNew from "@/components/landing-page/hero-new"; const Home = ({ params: { locale } }: { params: { locale: string } }) => { return ( -
+
- - - - - {/* */} - - {/* */} - {/* */} - + +
+ +
-
diff --git a/components/landing-page/area-coverage-and-work-units.tsx b/components/landing-page/area-coverage-and-work-units.tsx index b9441f73..e01d7bfd 100644 --- a/components/landing-page/area-coverage-and-work-units.tsx +++ b/components/landing-page/area-coverage-and-work-units.tsx @@ -30,12 +30,11 @@ const AreaCoverageWorkUnits = () => { }; }, [openPolda, openSatker]); return ( -
-

+
+

Liputan Wilayah &{" "} Satker

-
{/* POLDA */} diff --git a/components/landing-page/content-category.tsx b/components/landing-page/content-category.tsx index 05386094..d9ad516f 100644 --- a/components/landing-page/content-category.tsx +++ b/components/landing-page/content-category.tsx @@ -79,79 +79,78 @@ const ContentCategory = (props: { group?: string; type: string }) => { : window.btoa(str); return ( -
+
-

- {pathname?.split("/")[1] == "in" ? ( - <> - - {t("category")}  - - {t("content")} - - ) : ( - <> - - {t("content")}  - - {t("category")} - - )} -

-
+
+

+ {pathname?.split("/")[1] == "in" ? ( + <> + + {t("category")}  + + {t("content")} + + ) : ( + <> + + {t("content")}  + + {t("category")} + + )} +

+
+ {(seeAllValue ? categories : categories?.slice(0, 4))?.map( + (category: any) => ( +
+
+ router.push( + `${prefixPath}all/filter?category=${category?.id}` + ) + } + className="cursor-pointer relative group rounded-md overflow-hidden shadow-md hover:shadow-lg block" + > + {/* Gambar */} + category -
- {(seeAllValue ? categories : categories?.slice(0, 4))?.map( - (category: any) => ( -
-
- router.push( - `${prefixPath}all/filter?category=${category?.id}` - ) - } - className="cursor-pointer relative group rounded-md overflow-hidden shadow-md hover:shadow-lg block" - > - {/* Gambar */} - category + {/* Overlay gelap */} +
- {/* Overlay gelap */} -
- - {/* Judul */} -
-

- {category?.name} -

+ {/* Judul */} +
+

+ {category?.name} +

+
-
- ) - )} -
- - {/* Tombol See More / See Less */} - {categories?.length > 10 && ( -
- + ) + )}
- )} - {/*
+ {/* Tombol See More / See Less */} + {categories?.length > 8 && ( +
+ +
+ )} + + {/*
router.push( @@ -163,6 +162,7 @@ const ContentCategory = (props: { group?: string; type: string }) => { {t("seeAll")}
*/} +
); diff --git a/components/landing-page/event-calender.tsx b/components/landing-page/event-calender.tsx new file mode 100644 index 00000000..efd9553c --- /dev/null +++ b/components/landing-page/event-calender.tsx @@ -0,0 +1,91 @@ +import React from "react"; + +const EventCalender = () => { + return ( +
+

+ KALENDER ACARA +

+
+
+
+
Mei 2025
+
+ {["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"].map((d) => ( +
+ {d} +
+ ))} + {[...Array(35)].map((_, i) => ( +
+ {i >= 2 && i - 1} +
+ ))} +
+
+
+
+ HUT Polwan +
+
+ HUT Polwan ke-76, Kapolri... +
+
+ 16 Mei - 16 Mei +
+
+
+ +
+ Olahraga +
+
+ Olahraga Bersama Pad... +
+
+ 22 Mei - 22 Mei +
+
+
+
+
+ + {/* Detail Acara */} +
+
+ Detail Event +

+ HUT Polwan ke-76, Kapolri Apresiasi Prestasi yang Diberikan +

+

+ Kapolri Jenderal Pol. Listyo Sigit Prabowo memberikan apresiasi + kepada polisi wanita yang berprestasi... +

+ + Lihat Selengkapnya + +
+
+
+
+ ); +}; + +export default EventCalender; diff --git a/components/landing-page/hero-new.tsx b/components/landing-page/hero-new.tsx new file mode 100644 index 00000000..9b06fbc7 --- /dev/null +++ b/components/landing-page/hero-new.tsx @@ -0,0 +1,423 @@ +import { formatDateToIndonesian, shimmer, toBase64 } from "@/utils/globals"; +import React, { useEffect, useState } from "react"; +import "swiper/css/bundle"; +import "swiper/css/navigation"; +import { getHeroData, listStaticBanner } from "@/service/landing/landing"; +import Link from "next/link"; +import { useParams, usePathname, useRouter } from "next/navigation"; +import { + Carousel, + CarouselContent, + CarouselItem, + CarouselNext, + CarouselPrevious, +} from "@/components/ui/carousel"; +import { Skeleton } from "../ui/skeleton"; +import Image from "next/image"; +import Cookies from "js-cookie"; +import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs"; +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "../ui/card"; +import { Label } from "../ui/label"; +import { Input } from "../ui/input"; +import { Button } from "../ui/button"; +import { Textarea } from "../ui/textarea"; +import { Checkbox } from "../ui/checkbox"; +import { + Dialog, + DialogClose, + DialogContent, + DialogDescription, + DialogHeader, + DialogTitle, +} from "../ui/dialog"; +import { Autoplay, Pagination } from "swiper/modules"; +import { Swiper, SwiperSlide } from "swiper/react"; +import "swiper/css"; +import "swiper/css/pagination"; +import FormSurvey from "./survey"; + +const HeroModal = ({ onClose }: { onClose: () => void }) => { + const [heroData, setHeroData] = useState(); + const params = useParams(); + const locale = params?.locale; + + useEffect(() => { + async function fetchCategories() { + const url = "https://netidhub.com/api/csrf"; + + try { + const response = await fetch(url); + + if (!response.ok) { + throw new Error(`HTTP error! status: ${response.status}`); + } + + const data = await response.json(); + return data; + } catch (error) { + console.error("Fetch error: ", error); + } + } + + fetchCategories(); + initFetch(); + }, []); + + useEffect(() => { + document.body.classList.add("overflow-hidden"); + + return () => { + document.body.classList.remove("overflow-hidden"); + }; + }, []); + + const initFetch = async () => { + const response = await getHeroData(); + console.log(response); + setHeroData(response?.data?.data?.content); + }; + return ( +
+
+ + {heroData?.map((list: any, index: number) => ( + +
+ + gambar-utama + +
+
+ + {list?.categoryName || "Liputan Kegiatan"} + + + +

{list?.title}

+ + +

+ {formatDateToIndonesian(new Date(list?.createdAt))}{" "} + {list?.timezone || "WIB"} |{" "} + + + + {list?.clickCount} +

+
+
+ + ))} + + +
+
+ ); +}; + +const ONE_MONTH = 30 * 24 * 60 * 60 * 1000; + +const HeroNew = (props: { group?: string }) => { + const router = useRouter(); + const pathname = usePathname(); + const params = useParams(); + const locale = params?.locale; + const [isLoading, setIsLoading] = useState(true); + const [heroData, setHeroData] = useState(); + const [content, setContent] = useState(); + const [showModal, setShowModal] = useState(false); + const [showSurveyModal, setShowSurveyModal] = useState(false); + const [showFormModal, setShowFormModal] = useState(false); + const poldaName = params?.polda_name; + const satkerName = params?.satker_name; + + useEffect(() => { + const timer = setTimeout(() => { + setIsLoading(false); + }, 3000); + + return () => clearTimeout(timer); + }, []); + + useEffect(() => { + const roleId = Cookies.get("urie"); + if (!roleId) { + setShowModal(true); + } + initFetch(); + }, []); + + // useEffect(() => { + // const roleId = Cookies.get("urie"); + // const lastShown = Cookies.get("surveyLastShown"); + // const now = new Date().getTime(); + + // if (roleId && roleId !== "2") { + // if (!lastShown || now - parseInt(lastShown) > ONE_MONTH) { + // setShowSurveyModal(true); + // Cookies.set("surveyLastShown", now.toString(), { expires: 30 }); + // } + // } + + // initFetch(); + // }, []); + + useEffect(() => { + const roleId = Cookies.get("urie"); + const lastShown = Cookies.get("surveyLastShown"); + const now = new Date().getTime(); + + const allowedRoles = ["1", "2", "3"]; + + if (roleId && allowedRoles.includes(roleId)) { + if (!lastShown || now - parseInt(lastShown) > ONE_MONTH) { + setShowSurveyModal(true); + Cookies.set("surveyLastShown", now.toString(), { expires: 30 }); + } + } + + initFetch(); + }, []); + + useEffect(() => { + async function fetchCategories() { + const url = "https://netidhub.com/api/csrf"; + + try { + const response = await fetch(url); + + if (!response.ok) { + throw new Error(`HTTP error! status: ${response.status}`); + } + + const data = await response.json(); + return data; + } catch (error) { + console.error("Fetch error: ", error); + } + } + + fetchCategories(); + initFetch(); + }, []); + + const initFetch = async () => { + const response = await getHeroData(); + console.log(response); + let data = response?.data?.data?.content; + setHeroData(response?.data?.data?.content); + if (data) { + const resStatic = await listStaticBanner( + props.group == "mabes" + ? "" + : props.group == "polda" && poldaName && String(poldaName)?.length > 1 + ? poldaName + : props.group == "satker" && + satkerName && + String(satkerName)?.length > 1 + ? "satker-" + satkerName + : "" + ); + for (let i = 0; i < resStatic?.data?.data?.length; i++) { + const media = resStatic?.data.data[i]?.mediaUpload; + media.fileTypeId = media.fileType?.id; + data = data.filter((item: any) => item.id != media.id); + data.splice(0, 0, media); + } + setContent(data); + } + }; + + const shimmer = (w: number, h: number) => ` + + + + + + + + + + + +`; + + const toBase64 = (str: string) => + typeof window === "undefined" + ? Buffer.from(str).toString("base64") + : window.btoa(str); + + return ( +
+
+ {showModal && setShowModal(false)} />} + + {/* {showFormModal && } */} +
+ {isLoading ? ( +
+ +
+ + +
+
+ ) : ( + + + {content?.map((list: any) => ( + +
+ gambar-utama +
+ + +
+ + {list?.categoryName || "Liputan Kegiatan"} + + +

+ {list?.title} +

+ +

+ {formatDateToIndonesian(new Date(list?.createdAt))}{" "} + {list?.timezone || "WIB"} | 👁 {list?.clickCount} +

+
+ +
+ {heroData?.slice(0, 3).map((item: any) => ( +
  • +
    + {item?.title} +
    +
    + + + {item?.categoryName} + + +

    + {item?.title} +

    + +

    + {formatDateToIndonesian( + new Date(item?.createdAt) + )}{" "} + {item?.timezone ? item?.timezone : "WIB"} |{" "} + + + {" "} + {item?.clickCount} +

    + +
    +
    • + ))} +
    +
    + + ))} + + + )} +
    + ); +}; + +export default HeroNew; diff --git a/components/landing-page/hero.tsx b/components/landing-page/hero.tsx index b1b7d48c..d230d5ab 100644 --- a/components/landing-page/hero.tsx +++ b/components/landing-page/hero.tsx @@ -494,6 +494,7 @@ const Hero = (props: { group?: string }) => { {heroData ?.filter((item: any) => item.isPublishOnPolda === true) + .map((item: any, index: any) => (
  • { const satkerName = params?.satker_name; const t = useTranslations("LandingPage"); - let prefixPath = poldaName ? `/polda/${poldaName}` : satkerName ? `/satker/${satkerName}` : "/"; + let prefixPath = poldaName + ? `/polda/${poldaName}` + : satkerName + ? `/satker/${satkerName}` + : "/"; useEffect(() => { const timer = setTimeout(() => { @@ -45,8 +55,26 @@ const NewContent = (props: { group: string; type: string }) => { page: 0, size: 5, sortBy: props.type == "popular" ? "clickCount" : "createdAt", - contentTypeId: selectedTab == "image" ? "1" : selectedTab == "video" ? "2" : selectedTab == "text" ? "3" : selectedTab == "audio" ? "4" : "", - group: props.group == "mabes" ? "" : props.group == "polda" && poldaName && String(poldaName)?.length > 1 ? poldaName : props.group == "satker" && satkerName && String(satkerName)?.length > 1 ? "satker-" + satkerName : "", + contentTypeId: + selectedTab == "image" + ? "1" + : selectedTab == "video" + ? "2" + : selectedTab == "text" + ? "3" + : selectedTab == "audio" + ? "4" + : "", + group: + props.group == "mabes" + ? "" + : props.group == "polda" && poldaName && String(poldaName)?.length > 1 + ? poldaName + : props.group == "satker" && + satkerName && + String(satkerName)?.length > 1 + ? "satker-" + satkerName + : "", isInt: locale == "en" ? true : false, }; const response = await getListContent(request); @@ -68,56 +96,62 @@ const NewContent = (props: { group: string; type: string }) => { `; - const toBase64 = (str: string) => (typeof window === "undefined" ? Buffer.from(str).toString("base64") : window.btoa(str)); + const toBase64 = (str: string) => + typeof window === "undefined" + ? Buffer.from(str).toString("base64") + : window.btoa(str); return ( -
    +
    +

    + {pathname?.split("/")[1] == "in" ? ( + <> + {t("content")}  + {props.type == "popular" + ? "Terpopuler" + : props.type == "latest" + ? t("new") + : "Serupa"} + + ) : ( + <> + + {props.type == "popular" + ? "Popular" + : props.type == "latest" + ? t("new") + : "Serupa"} + +   + {t("content")} + + )} +

    -

    - {pathname?.split("/")[1] == "in" ? ( - <> - {t("content")}  - {props.type == "popular" ? "Terpopuler" : props.type == "latest" ? t("new") : "Serupa"} - - ) : ( - <> - {props.type == "popular" ? "Popular" : props.type == "latest" ? t("new") : "Serupa"} -   - {t("content")} - - )} -

    - - - {t("image")} - -
    |
    - - {t("video")} - -
    |
    - - {t("text")} - -
    |
    - - {t("audio")} - + + {[ + { label: "video", value: "video" }, + { label: "Audio", value: "audio" }, + { label: "Foto", value: "image" }, + { label: "Teks", value: "text" }, + ].map((tab) => ( + + {tab.label} + + ))}
    @@ -135,10 +169,22 @@ const NewContent = (props: { group: string; type: string }) => { {newContent?.map((image: any) => ( - -
    router.push(prefixPath + `/image/detail/${image?.slug}`)} className="cursor-pointer relative group overflow-hidden shadow-md hover:shadow-lg"> + +
    + router.push( + prefixPath + `/image/detail/${image?.slug}` + ) + } + className="cursor-pointer relative group overflow-hidden shadow-md hover:shadow-lg" + > image { className="w-full rounded-lg h-48 lg:h-60 object-cover group-hover:scale-100 transition-transform duration-300" />
    -

    {image?.title}

    +

    + {image?.title} +

    - {formatDateToIndonesian(new Date(image?.createdAt))} {image?.timezone ? image?.timezone : "WIB"} | {image.clickCount}{" "} + {formatDateToIndonesian( + new Date(image?.createdAt) + )}{" "} + {image?.timezone ? image?.timezone : "WIB"} |{" "} + {" "} + {image.clickCount}{" "}

    @@ -160,7 +217,13 @@ const NewContent = (props: { group: string; type: string }) => { ) : (

    - empty + empty

    ) ) : selectedTab == "audio" ? ( @@ -168,14 +231,27 @@ const NewContent = (props: { group: string; type: string }) => { {newContent?.map((audio: any) => ( - +
    router.push(prefixPath + `/audio/detail/${audio?.slug}`)} + onClick={() => + router.push( + prefixPath + `/audio/detail/${audio?.slug}` + ) + } className="cursor-pointer flex flex-row sm:flex-row items-center bg-white dark:bg-gray-800 shadow-md border rounded-lg p-4 my-3 gap-4 w-full " >
    - + {
    - {formatDateToIndonesian(new Date(audio?.createdAt))} {audio?.timezone ? audio?.timezone : "WIB"} |  + {formatDateToIndonesian( + new Date(audio?.createdAt) + )}{" "} + {audio?.timezone ? audio?.timezone : "WIB"}{" "} + | {" "} +   {audio?.clickCount}{" "}
    -
    {audio?.title}
    -

    {audio?.duration ? secondToTimes(Number(audio?.duration)) : "00:00:00"}

    +
    + {audio?.title} +
    +

    + {" "} + {audio?.duration + ? secondToTimes(Number(audio?.duration)) + : "00:00:00"} +

    @@ -201,7 +293,13 @@ const NewContent = (props: { group: string; type: string }) => { ) : (

    - empty + empty

    ) ) : selectedTab == "video" ? ( @@ -209,10 +307,22 @@ const NewContent = (props: { group: string; type: string }) => { {newContent?.map((video: any) => ( - -
    router.push(prefixPath + `/video/detail/${video?.slug}`)} className="cursor-pointer relative group rounded-md overflow-hidden shadow-md hover:shadow-lg"> + +
    + router.push( + prefixPath + `/video/detail/${video?.slug}` + ) + } + className="cursor-pointer relative group rounded-md overflow-hidden shadow-md hover:shadow-lg" + > video { className="w-full h-40 lg:h-60 object-cover rounded-lg group-hover:scale-100 transition-transform duration-300" />
    -

    {video?.title}

    +

    + {video?.title} +

    - {formatDateToIndonesian(new Date(video?.createdAt))} {video?.timezone ? video?.timezone : "WIB"}| {video?.clickCount}{" "} + {formatDateToIndonesian( + new Date(video?.createdAt) + )}{" "} + {video?.timezone ? video?.timezone : "WIB"}|{" "} + {" "} + {video?.clickCount}{" "}

    @@ -234,18 +355,40 @@ const NewContent = (props: { group: string; type: string }) => { ) : (

    - empty + empty

    ) ) : newContent.length > 0 ? ( {newContent?.map((text: any) => ( - +
    -
    router.push(prefixPath + `/document/detail/${text?.slug}`)} className="flex flex-row bg-yellow-500 sm:flex-row items-center dark:bg-gray-800 cursor-pointer shadow-md rounded-lg p-4 gap-4"> +
    + router.push( + prefixPath + `/document/detail/${text?.slug}` + ) + } + className="flex flex-row bg-yellow-500 sm:flex-row items-center dark:bg-gray-800 cursor-pointer shadow-md rounded-lg p-4 gap-4" + >
    - + {
    - {formatDateToIndonesian(new Date(text?.createdAt))} + {formatDateToIndonesian( + new Date(text?.createdAt) + )} {text?.timezone ? text?.timezone : "WIB"}| - + {text?.clickCount}
    -
    {text?.title}
    +
    + {text?.title} +
    - - + + Download {t("document")}
    @@ -278,14 +437,27 @@ const NewContent = (props: { group: string; type: string }) => { ) : (

    - empty + empty

    )}
    )}
    -
    router.push(prefixPath + `/${selectedTab}/filter?sortBy=${props.type}`)} className="cursor-pointer border text-[#bb3523] rounded-lg text-sm lg:text-md px-4 py-1 border-[#bb3523]"> +
    + router.push( + prefixPath + `/${selectedTab}/filter?sortBy=${props.type}` + ) + } + className="cursor-pointer border text-[#bb3523] rounded-lg text-sm lg:text-md px-4 py-1 border-[#bb3523]" + > {t("seeAll")}
    diff --git a/components/landing-page/search-section-new.tsx b/components/landing-page/search-section-new.tsx new file mode 100644 index 00000000..e90db7a6 --- /dev/null +++ b/components/landing-page/search-section-new.tsx @@ -0,0 +1,278 @@ +import search from "@/app/[locale]/(protected)/app/chat/components/search"; +import { useTranslations } from "next-intl"; +import { useParams, useRouter } from "next/navigation"; +import router from "next/router"; +import React, { useEffect, useState } from "react"; +import { Icon } from "@iconify/react/dist/iconify.js"; +import { + Select, + SelectContent, + SelectGroup, + SelectItem, + SelectTrigger, + SelectValue, +} from "../ui/select"; +import Image from "next/image"; +import { getHeroData } from "@/service/landing/landing"; +import { title } from "process"; +import { htmlToString } from "@/utils/globals"; +import { Link } from "@/i18n/routing"; + +const ScrollableContent = () => { + const [contentType, setContentType] = useState("all"); + const [search, setSearch] = useState(""); + const router = useRouter(); + const params = useParams(); + const locale = params?.locale; + const t = useTranslations("LandingPage"); + const [content, setContent] = useState(); + useEffect(() => { + async function fetchCategories() { + const url = "https://netidhub.com/api/csrf"; + + try { + const response = await fetch(url); + + if (!response.ok) { + throw new Error(`HTTP error! status: ${response.status}`); + } + + const data = await response.json(); + return data; + } catch (error) { + console.error("Fetch error: ", error); + } + } + + fetchCategories(); + initFetch(); + }, []); + + const initFetch = async () => { + const response = await getHeroData(); + console.log(response); + let data = response?.data?.data?.content; + + setContent(data); + }; + return ( + <> +
    +

    + + {t("exploration")} + {" "} + {t("and")}{" "} + + {t("download")} + {" "} + {t("coverage")}{" "} +

    +
    +

    + {t("officialCoverage")} +

    + +
    +
    + +
    + + + + + + setSearch(e.target.value)} + /> +
    +
    + +
    +
    +
    +
    +

    + Berita Polda +

    +
    + {content?.slice(0, 4).map((item: any, index: number) => ( +
    +
    + + {item.title} +
    + + + +
    + +
    + {/* */} +
    +

    + {item.categoryName} +

    +

    + {item.title} +

    +

    + {htmlToString(item.description)} +

    +
    + {/* */} +
    + ))} + +
    +
    + + {/* Berita SATKER */} +
    +

    + Berita Satker +

    +
    + {content + ?.filter((item: any) => item.isPublishOnPolda === true) + .slice(0, 4) + .map((item: any, index: number) => ( +
    +
    + + {item.title} +
    + + + +
    + +
    +
    +

    + {item.categoryName} +

    +

    + {item.title} +

    +

    + {htmlToString(item.description)} +

    +
    +
    + ))} + +
    +
    +
    + + ); +}; + +export default ScrollableContent; diff --git a/components/landing-page/search-section.tsx b/components/landing-page/search-section.tsx index dffaa6a4..b9f3692b 100644 --- a/components/landing-page/search-section.tsx +++ b/components/landing-page/search-section.tsx @@ -1,64 +1,63 @@ -import React, { useState } from "react"; -import { Icon } from "@iconify/react/dist/iconify.js"; -import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; -import { useRouter } from "@/i18n/routing"; +import search from "@/app/[locale]/(protected)/app/chat/components/search"; +import { + Select, + SelectTrigger, + SelectValue, + SelectContent, + SelectGroup, + SelectItem, +} from "@radix-ui/react-select"; +import { Icon } from "lucide-react"; import { useTranslations } from "next-intl"; +import { useRouter } from "next/navigation"; +import router from "next/router"; +import React, { useState } from "react"; +import ScrollableContent from "./search-section-new"; +import NewContent from "./new-content"; +import ContentCategory from "./content-category"; +import AreaCoverageWorkUnits from "./area-coverage-and-work-units"; +import EventCalender from "./event-calender"; +import UserSurveyBox from "./survey-box"; + +const LeftBanner = () => ( +
    + Banner Kiri 1 + Banner Kiri 2 +
    +); + +const RightBanner = () => ( +
    + Banner Kanan 1 + Banner Kanan 2 +
    +); const SearchSection = () => { const [contentType, setContentType] = useState("all"); const [search, setSearch] = useState(""); const router = useRouter(); const t = useTranslations("LandingPage"); - return ( -
    -
    - {/* Heading */} -

    - {t("exploration")} {t("and")} {t("download")} {t("coverage")}{" "} -

    -
    -

    {t("officialCoverage")}

    - - {/* Search Form */} -
    - {/* Dropdown */} -
    - -
    - - - - - - setSearch(e.target.value)} /> -
    -
    - - {/* Search Input */} - -
    +
    +
    +
    -
    + +
    + + + + + + + +
    + +
    + +
    +
    ); }; diff --git a/components/landing-page/survey-box.tsx b/components/landing-page/survey-box.tsx new file mode 100644 index 00000000..414a2a21 --- /dev/null +++ b/components/landing-page/survey-box.tsx @@ -0,0 +1,259 @@ +import React, { useState } from "react"; +import { + Dialog, + DialogClose, + DialogContent, + DialogDescription, + DialogHeader, + DialogTitle, + DialogTrigger, +} from "../ui/dialog"; +import FormSurvey from "./survey"; +import { Controller, useForm } from "react-hook-form"; +import { Textarea } from "../ui/textarea"; +import { Button } from "../ui/button"; +import { z } from "zod"; +import { zodResolver } from "@hookform/resolvers/zod"; +import { Checkbox } from "../ui/checkbox"; +import { createSurveyData } from "@/service/survey/survey"; + +const surveySchema = z.object({ + accessFrequency: z.string(), + uiExperienceDesign: z.string(), + uiExperienceNavigation: z.string(), + uiExperienceSpeed: z.string(), + infoAccuracy: z.string(), + infoCompleteness: z.string(), + usefulness: z.string(), + suggestion: z.string().optional(), +}); + +type SurveySchema = z.infer; + +const UserSurveyBox = () => { + const [openPolda, setOpenPolda] = useState(); + const [showSurvey, setShowSurvey] = useState(true); + const [isLoading, setIsLoading] = useState(false); + const { + control, + handleSubmit, + formState: { errors }, + } = useForm({ + resolver: zodResolver(surveySchema), + mode: "all", + defaultValues: { + accessFrequency: "", + uiExperienceDesign: "", + uiExperienceNavigation: "", + uiExperienceSpeed: "", + infoAccuracy: "", + infoCompleteness: "", + usefulness: "", + suggestion: "", + }, + }); + + const options = { + accessFrequency: [ + "Setiap hari", + "Beberapa kali seminggu", + "Beberapa kali dalam sebulan", + "Baru pertama kali", + ], + uiExperienceDesign: ["Sangat baik", "Baik", "Cukup", "Kurang", "Buruk"], + uiExperienceNavigation: [ + "Sangat mudah", + "Mudah", + "Cukup", + "Sulit", + "Sangat sulit", + ], + uiExperienceSpeed: [ + "Sangat cepat", + "Cepat", + "Cukup", + "Lambat", + "Sangat lambat", + ], + infoAccuracy: ["Sangat puas", "Puas", "Cukup", "Kurang puas", "Tidak puas"], + infoCompleteness: [ + "Sangat lengkap", + "Lengkap", + "Cukup", + "Kurang lengkap", + "Tidak lengkap", + ], + usefulness: [ + "Sangat membantu", + "Membantu", + "Cukup membantu", + "Kurang membantu", + "Tidak membantu", + ], + }; + + const renderControllerGroup = ( + name: keyof SurveySchema, + question: string, + choices: string[] + ) => ( +
    +

    {question}

    +
    + {choices.map((choice, i) => ( + ( + + )} + /> + ))} +
    + {errors[name] && ( +

    + {errors[name]?.message as string} +

    + )} +
    + ); + + const onSubmit = async (data: SurveySchema) => { + setIsLoading(true); + try { + const response = await createSurveyData(data); + console.log("API Response:", response); + setShowSurvey(false); + } catch (error) { + console.error("Error submitting survey:", error); + } finally { + setIsLoading(false); + } + }; + return ( +
    +

    + SURVEI KEPUASAN PENGGUNA MEDIAHUB POLRI +

    +

    + Kami menghargai pendapat Anda! Survei ini bertujuan untuk meningkatkan + kualitas layanan MediaHub Polri. Mohon luangkan waktu beberapa menit + untuk mengisi survei ini. +

    + + + + + + + + SURVEI KEPUASAN PENGGUNA MEDIAHUB POLRI + + + Kami menghargai pendapat Anda! Survei ini bertujuan untuk + meningkatkan kualitas layanan MediaHub Polri. + + + +
    + {renderControllerGroup( + "accessFrequency", + "1. Seberapa sering Anda mengakses MediaHub Polri?", + options.accessFrequency + )} + +
    +

    + 2. Bagaimana pengalaman Anda dalam mengakses website ini? +

    +
    + {renderControllerGroup( + "uiExperienceDesign", + "a) Tampilan dan desain website", + options.uiExperienceDesign + )} + {renderControllerGroup( + "uiExperienceNavigation", + "b) Kemudahan navigasi", + options.uiExperienceNavigation + )} + {renderControllerGroup( + "uiExperienceSpeed", + "c) Kecepatan akses website", + options.uiExperienceSpeed + )} +
    +
    + +
    +

    + 3. Seberapa puas Anda dengan informasi yang tersedia di MediaHub + Polri? +

    +
    + {renderControllerGroup( + "infoAccuracy", + "a) Akurat dan terpercaya", + options.infoAccuracy + )} + {renderControllerGroup( + "infoCompleteness", + "b) Kelengkapan berita dan informasi", + options.infoCompleteness + )} +
    +
    + + {renderControllerGroup( + "usefulness", + "4. Apakah Anda merasa website ini membantu dalam mendapatkan informasi terkait Polri?", + options.usefulness + )} + +
    +

    5. Apa saran atau masukan Anda?

    + ( +