fix: language

This commit is contained in:
Sabda Yagra 2025-06-11 13:10:40 +07:00
parent 481cc9f930
commit 5477eca3d0
7 changed files with 298 additions and 70 deletions

View File

@ -1,14 +1,24 @@
"use client"; "use client";
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import { Dialog, DialogClose, DialogContent, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"; import {
Dialog,
DialogClose,
DialogContent,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog";
import Image from "next/image"; import Image from "next/image";
import Coverage from "./coverage"; import Coverage from "./coverage";
import Division from "./division"; import Division from "./division";
import { useTranslations } from "next-intl";
const AreaCoverageWorkUnits = () => { const AreaCoverageWorkUnits = () => {
const [openPolda, setOpenPolda] = useState(false); const [openPolda, setOpenPolda] = useState(false);
const [openSatker, setOpenSatker] = useState(false); const [openSatker, setOpenSatker] = useState(false);
const t = useTranslations("LandingPage");
useEffect(() => { useEffect(() => {
if (openPolda || openSatker) { if (openPolda || openSatker) {
@ -24,21 +34,34 @@ const AreaCoverageWorkUnits = () => {
return ( return (
<div className="mx-auto px-4 lg:px-0 py-6"> <div className="mx-auto px-4 lg:px-0 py-6">
<h2 className="text-start text-lg md:text-xl font-bold text-[#bb3523] border-b-2 border-[#bb3523] mb-4 uppercase"> <h2 className="text-start text-lg md:text-xl font-bold text-[#bb3523] border-b-2 border-[#bb3523] mb-4 uppercase">
Liputan <span className="text-[#bb3523]">Wilayah</span> & <span className="text-[#bb3523]">Satker</span> {t("areaCoverage")}
</h2> </h2>
<div className="flex flex-col justify-center lg:flex-row gap-8 "> <div className="flex flex-col justify-center lg:flex-row gap-8 ">
{/* POLDA */} {/* POLDA */}
<Dialog open={openPolda} onOpenChange={setOpenPolda}> <Dialog open={openPolda} onOpenChange={setOpenPolda}>
<DialogTrigger asChild> <DialogTrigger asChild>
<button onClick={() => setOpenPolda(true)} className="flex flex-col gap-2 justify-center items-center shadow-lg group rounded-xl py-5 w-full border-2 border-transparent hover:border-[#bb3523] transition-all duration-300"> <button
<Image width={1920} height={1080} alt="indo" src="/assets/indo.png" className="h-32 w-32 group-hover:scale-110 group-hover:border-[#bb3523] " /> onClick={() => setOpenPolda(true)}
<p className="text-base font-bold">Polda Jajaran</p> className="flex flex-col gap-2 justify-center items-center shadow-lg group rounded-xl py-5 w-full border-2 border-transparent hover:border-[#bb3523] transition-all duration-300"
>
<Image
width={1920}
height={1080}
alt="indo"
src="/assets/indo.png"
className="h-32 w-32 group-hover:scale-110 group-hover:border-[#bb3523] "
/>
<p className="text-base font-bold">{t("regionalPolice")}</p>
</button> </button>
</DialogTrigger> </DialogTrigger>
<DialogContent size="md" className="max-h-[90vh] overflow-hidden flex flex-col" data-lenis-prevent> <DialogContent
size="md"
className="max-h-[90vh] overflow-hidden flex flex-col"
data-lenis-prevent
>
<DialogHeader className="flex flex-col justify-center"> <DialogHeader className="flex flex-col justify-center">
<DialogTitle> <DialogTitle>
<p className="text-center">Polda Jajaran</p> <p className="text-center">{t("regionalPolice")}</p>
</DialogTitle> </DialogTitle>
<DialogTitle> <DialogTitle>
<div className="h-1 w-[150px] bg-[#bb3523] mx-auto mb-6 rounded"></div> <div className="h-1 w-[150px] bg-[#bb3523] mx-auto mb-6 rounded"></div>
@ -49,7 +72,9 @@ const AreaCoverageWorkUnits = () => {
</div> </div>
<div className="text-right mt-4"> <div className="text-right mt-4">
<DialogClose asChild> <DialogClose asChild>
<button className="text-[#bb3523] font-bold">Tutup</button> <button className="text-[#bb3523] font-bold">
{t("close")}
</button>
</DialogClose> </DialogClose>
</div> </div>
</DialogContent> </DialogContent>
@ -59,14 +84,20 @@ const AreaCoverageWorkUnits = () => {
<Dialog open={openSatker} onOpenChange={setOpenSatker}> <Dialog open={openSatker} onOpenChange={setOpenSatker}>
<DialogTrigger asChild> <DialogTrigger asChild>
<button className="flex flex-col gap-2 justify-center items-center shadow-lg group rounded-xl py-5 w-full border-2 border-transparent hover:border-[#bb3523] transition-all duration-300"> <button className="flex flex-col gap-2 justify-center items-center shadow-lg group rounded-xl py-5 w-full border-2 border-transparent hover:border-[#bb3523] transition-all duration-300">
<Image width={1920} height={1080} alt="polri" src="/assets/logo-polri.png" className="h-32 w-32 group-hover:scale-110 group-hover:border-[#bb3523] transition-transform duration-300" /> <Image
<p className="text-base font-bold">Satuan Kerja Polri</p> width={1920}
height={1080}
alt="polri"
src="/assets/logo-polri.png"
className="h-32 w-32 group-hover:scale-110 group-hover:border-[#bb3523] transition-transform duration-300"
/>
<p className="text-base font-bold">{t("policeDivision")}</p>
</button> </button>
</DialogTrigger> </DialogTrigger>
<DialogContent size="md" data-lenis-prevent> <DialogContent size="md" data-lenis-prevent>
<DialogHeader className="flex flex-col justify-center"> <DialogHeader className="flex flex-col justify-center">
<DialogTitle> <DialogTitle>
<p className="text-center">Satuan Kerja Polri</p> <p className="text-center">{t("policeDivision")}</p>
</DialogTitle> </DialogTitle>
<DialogTitle> <DialogTitle>
<div className="h-1 w-[150px] bg-[#bb3523] mx-auto mb-6 rounded"></div> <div className="h-1 w-[150px] bg-[#bb3523] mx-auto mb-6 rounded"></div>
@ -75,7 +106,9 @@ const AreaCoverageWorkUnits = () => {
<Division /> <Division />
<div className="text-right mt-4"> <div className="text-right mt-4">
<DialogClose asChild> <DialogClose asChild>
<button className="text-[#bb3523] font-bold">Tutup</button> <button className="text-[#bb3523] font-bold">
{t("close")}
</button>
</DialogClose> </DialogClose>
</div> </div>
</DialogContent> </DialogContent>

View File

@ -1,5 +1,6 @@
import { getCalendarPagination } from "@/service/schedule/schedule"; import { getCalendarPagination } from "@/service/schedule/schedule";
import { ChevronLeft, ChevronRight } from "lucide-react"; import { ChevronLeft, ChevronRight } from "lucide-react";
import { useTranslations } from "next-intl";
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
interface CalendarItem { interface CalendarItem {
@ -28,20 +29,21 @@ const EventCalender = () => {
const [selectedEvent, setSelectedEvent] = useState<CalendarItem | null>(null); const [selectedEvent, setSelectedEvent] = useState<CalendarItem | null>(null);
const [month, setMonth] = useState(currentMonth); const [month, setMonth] = useState(currentMonth);
const [year, setYear] = useState(currentYear); const [year, setYear] = useState(currentYear);
const t = useTranslations("LandingPage");
const monthNames = [ const monthNames = [
"Januari", t("january"),
"Februari", t("february"),
"Maret", t("march"),
"April", "April",
"Mei", t("may"),
"Juni", t("june"),
"Juli", t("july"),
"Agustus", t("august"),
"September", "September",
"Oktober", t("october"),
"November", "November",
"Desember", t("december"),
]; ];
const fetchData = async () => { const fetchData = async () => {
@ -66,7 +68,8 @@ const EventCalender = () => {
const lastDayOfMonth = new Date(year, month + 1, 0); const lastDayOfMonth = new Date(year, month + 1, 0);
const daysInMonth = lastDayOfMonth.getDate(); const daysInMonth = lastDayOfMonth.getDate();
const startingDayOfWeek = firstDayOfMonth.getDay(); const startingDayOfWeek = firstDayOfMonth.getDay();
const adjustedStartingDay = startingDayOfWeek === 0 ? 6 : startingDayOfWeek - 1; const adjustedStartingDay =
startingDayOfWeek === 0 ? 6 : startingDayOfWeek - 1;
const generateCalendarDays = () => { const generateCalendarDays = () => {
const days = []; const days = [];
@ -163,7 +166,7 @@ const EventCalender = () => {
return ( return (
<div className="mt-8 rounded-lg bg-white dark:bg-zinc-900 p-4 shadow"> <div className="mt-8 rounded-lg bg-white dark:bg-zinc-900 p-4 shadow">
<h2 className="text-lg font-bold text-red-600 border-b border-red-600 mb-4 pb-2"> <h2 className="text-lg font-bold text-red-600 border-b border-red-600 mb-4 pb-2">
KALENDER ACARA {t("calendar")}
</h2> </h2>
<div className="flex flex-col lg:flex-row gap-6"> <div className="flex flex-col lg:flex-row gap-6">
<div className="w-full lg:w-1/2"> <div className="w-full lg:w-1/2">
@ -211,13 +214,16 @@ const EventCalender = () => {
</div> </div>
</div> </div>
<div className="space-y-3 max-h-[230px] overflow-y-auto pr-5" data-lenis-prevent> <div
className="space-y-3 max-h-[230px] overflow-y-auto pr-5"
data-lenis-prevent
>
<h3 className="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-3"> <h3 className="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-3">
Daftar Acara {t("eventList")}
</h3> </h3>
{events?.length === 0 ? ( {events?.length === 0 ? (
<div className="text-center text-gray-500 dark:text-gray-400 py-8"> <div className="text-center text-gray-500 dark:text-gray-400 py-8">
Tidak ada acara yang tersedia {t("noEvent")}
</div> </div>
) : ( ) : (
events.map((event) => ( events.map((event) => (
@ -263,13 +269,15 @@ const EventCalender = () => {
<div className="w-full lg:w-1/2"> <div className="w-full lg:w-1/2">
<div className="bg-gray-100 dark:bg-zinc-800 rounded-lg p-4 sticky top-4"> <div className="bg-gray-100 dark:bg-zinc-800 rounded-lg p-4 sticky top-4">
<h3 className="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4"> <h3 className="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">
Detail Acara {t("eventDetails")}
</h3> </h3>
{selectedEvent ? ( {selectedEvent ? (
<div className="space-y-4"> <div className="space-y-4">
<img <img
src={selectedEvent.thumbnailUrl || "/images/default-event.png"} src={
selectedEvent.thumbnailUrl || "/images/default-event.png"
}
alt={selectedEvent.title} alt={selectedEvent.title}
className="w-full h-48 object-cover rounded-lg" className="w-full h-48 object-cover rounded-lg"
onError={(e) => { onError={(e) => {
@ -286,7 +294,7 @@ const EventCalender = () => {
<div className="grid grid-cols-1 gap-3 mb-4"> <div className="grid grid-cols-1 gap-3 mb-4">
<div className="flex items-start text-sm text-gray-600 dark:text-gray-400"> <div className="flex items-start text-sm text-gray-600 dark:text-gray-400">
<span className="w-20 font-semibold flex-shrink-0"> <span className="w-20 font-semibold flex-shrink-0">
Tanggal: {t("date")}
</span> </span>
<span> <span>
{formatDateRange( {formatDateRange(
@ -297,21 +305,22 @@ const EventCalender = () => {
</div> </div>
<div className="mb-4"> <div className="mb-4">
<p className="text-sm text-gray-600 dark:text-gray-400 leading-relaxed"> <p className="text-sm text-gray-600 dark:text-gray-400 leading-relaxed">
{selectedEvent.description || "Tidak ada deskripsi tersedia."} {selectedEvent.description ||
"Tidak ada deskripsi tersedia."}
</p> </p>
</div> </div>
</div> </div>
<div className="flex gap-2"> <div className="flex gap-2">
<button className="px-4 py-2 bg-gray-300 dark:bg-zinc-700 text-gray-700 dark:text-gray-300 text-sm font-medium rounded-lg hover:bg-gray-400 dark:hover:bg-zinc-600 transition-colors"> <button className="px-4 py-2 bg-gray-300 dark:bg-zinc-700 text-gray-700 dark:text-gray-300 text-sm font-medium rounded-lg hover:bg-gray-400 dark:hover:bg-zinc-600 transition-colors">
Bagikan {t("share")}
</button> </button>
</div> </div>
</div> </div>
</div> </div>
) : ( ) : (
<div className="text-center text-gray-500 dark:text-gray-400 py-8"> <div className="text-center text-gray-500 dark:text-gray-400 py-8">
Pilih acara untuk melihat detail {t("selectEvent")}
</div> </div>
)} )}
</div> </div>

View File

@ -113,10 +113,10 @@ const NewContent = (props: { group: string; type: string }) => {
<Tabs value={selectedTab} onValueChange={setSelectedTab}> <Tabs value={selectedTab} onValueChange={setSelectedTab}>
<TabsList className="flex gap-2 bg-transparent p-0"> <TabsList className="flex gap-2 bg-transparent p-0">
{[ {[
{ label: "Foto", value: "image" }, { label: t("image"), value: "image" },
{ label: "Audio Visual", value: "video" }, { label: t("video"), value: "video" },
{ label: "Teks", value: "text" }, { label: t("text"), value: "text" },
{ label: "Audio", value: "audio" }, { label: t("audio"), value: "audio" },
].map((tab) => ( ].map((tab) => (
<TabsTrigger <TabsTrigger
key={tab.value} key={tab.value}

View File

@ -113,7 +113,7 @@ const ScrollableContent = () => {
<div className="flex flex-col md:flex-row gap-6 py-8"> <div className="flex flex-col md:flex-row gap-6 py-8">
{/* Berita Polda */} {/* Berita Polda */}
<div className="w-full md:w-1/2 px-4"> <div className="w-full md:w-1/2 px-4">
<h2 className="text-lg md:text-xl font-bold text-[#bb3523] mb-2 uppercase">Berita Polda</h2> <h2 className="text-lg md:text-xl font-bold text-[#bb3523] mb-2 uppercase">{t("regionNews")}</h2>
<div className="w-[10%] h-1 bg-[#bb3523]"></div> <div className="w-[10%] h-1 bg-[#bb3523]"></div>
<div className="w-full h-1 bg-[#bb3523] mx-auto mb-4"></div> <div className="w-full h-1 bg-[#bb3523] mx-auto mb-4"></div>
<div className="grid gap-4"> <div className="grid gap-4">
@ -188,7 +188,7 @@ const ScrollableContent = () => {
{/* Berita SATKER */} {/* Berita SATKER */}
<div className="w-full md:w-1/2 px-4"> <div className="w-full md:w-1/2 px-4">
<h2 className="text-lg md:text-xl font-bold mb-2 text-[#bb3523] uppercase">Berita Satker</h2> <h2 className="text-lg md:text-xl font-bold mb-2 text-[#bb3523] uppercase">{t("divisionNews")}</h2>
<div className="w-[10%] h-1 bg-[#bb3523]"></div> <div className="w-[10%] h-1 bg-[#bb3523]"></div>
<div className="w-full h-1 bg-[#bb3523] mx-auto mb-4"></div> <div className="w-full h-1 bg-[#bb3523] mx-auto mb-4"></div>
<div className="grid gap-4"> <div className="grid gap-4">

View File

@ -1,5 +1,13 @@
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import { Dialog, DialogClose, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "../ui/dialog"; import {
Dialog,
DialogClose,
DialogContent,
DialogDescription,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "../ui/dialog";
import FormSurvey from "./survey"; import FormSurvey from "./survey";
import { Controller, useForm } from "react-hook-form"; import { Controller, useForm } from "react-hook-form";
import { Textarea } from "../ui/textarea"; import { Textarea } from "../ui/textarea";
@ -8,6 +16,7 @@ import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod"; import { zodResolver } from "@hookform/resolvers/zod";
import { Checkbox } from "../ui/checkbox"; import { Checkbox } from "../ui/checkbox";
import { createSurveyData } from "@/service/survey/survey"; import { createSurveyData } from "@/service/survey/survey";
import { useTranslations } from "next-intl";
const surveySchema = z.object({ const surveySchema = z.object({
accessFrequency: z.string(), accessFrequency: z.string(),
@ -26,6 +35,8 @@ const UserSurveyBox = () => {
const [openPolda, setOpenPolda] = useState<any>(); const [openPolda, setOpenPolda] = useState<any>();
const [showSurvey, setShowSurvey] = useState(true); const [showSurvey, setShowSurvey] = useState(true);
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
const t = useTranslations("LandingPage");
const { const {
control, control,
handleSubmit, handleSubmit,
@ -46,16 +57,49 @@ const UserSurveyBox = () => {
}); });
const options = { const options = {
accessFrequency: ["Setiap hari", "Beberapa kali seminggu", "Beberapa kali dalam sebulan", "Baru pertama kali"], accessFrequency: [
"Setiap hari",
"Beberapa kali seminggu",
"Beberapa kali dalam sebulan",
"Baru pertama kali",
],
uiExperienceDesign: ["Sangat baik", "Baik", "Cukup", "Kurang", "Buruk"], uiExperienceDesign: ["Sangat baik", "Baik", "Cukup", "Kurang", "Buruk"],
uiExperienceNavigation: ["Sangat mudah", "Mudah", "Cukup", "Sulit", "Sangat sulit"], uiExperienceNavigation: [
uiExperienceSpeed: ["Sangat cepat", "Cepat", "Cukup", "Lambat", "Sangat lambat"], "Sangat mudah",
"Mudah",
"Cukup",
"Sulit",
"Sangat sulit",
],
uiExperienceSpeed: [
"Sangat cepat",
"Cepat",
"Cukup",
"Lambat",
"Sangat lambat",
],
infoAccuracy: ["Sangat puas", "Puas", "Cukup", "Kurang puas", "Tidak puas"], infoAccuracy: ["Sangat puas", "Puas", "Cukup", "Kurang puas", "Tidak puas"],
infoCompleteness: ["Sangat lengkap", "Lengkap", "Cukup", "Kurang lengkap", "Tidak lengkap"], infoCompleteness: [
usefulness: ["Sangat membantu", "Membantu", "Cukup membantu", "Kurang membantu", "Tidak membantu"], "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[]) => ( const renderControllerGroup = (
name: keyof SurveySchema,
question: string,
choices: string[]
) => (
<div className="space-y-2"> <div className="space-y-2">
<p className="font-medium">{question}</p> <p className="font-medium">{question}</p>
<div className="grid grid-cols-2 gap-2"> <div className="grid grid-cols-2 gap-2">
@ -66,14 +110,21 @@ const UserSurveyBox = () => {
control={control} control={control}
render={({ field }) => ( render={({ field }) => (
<label className="flex items-center space-x-2"> <label className="flex items-center space-x-2">
<Checkbox checked={field.value === choice} onCheckedChange={() => field.onChange(choice)} /> <Checkbox
checked={field.value === choice}
onCheckedChange={() => field.onChange(choice)}
/>
<span>{choice}</span> <span>{choice}</span>
</label> </label>
)} )}
/> />
))} ))}
</div> </div>
{errors[name] && <p className="text-red-500 text-sm">{errors[name]?.message as string}</p>} {errors[name] && (
<p className="text-red-500 text-sm">
{errors[name]?.message as string}
</p>
)}
</div> </div>
); );
@ -107,50 +158,105 @@ const UserSurveyBox = () => {
<div className="relative z-10 grid grid-cols-1 md:grid-cols-2 gap-4 items-center"> <div className="relative z-10 grid grid-cols-1 md:grid-cols-2 gap-4 items-center">
{/* Kiri: Teks dan tombol */} {/* Kiri: Teks dan tombol */}
<div> <div>
<h2 className="text-2xl font-bold mb-2">SURVEI KEPUASAN PENGGUNA MEDIAHUB POLRI</h2> <h2 className="text-2xl font-bold mb-2">{t("survey1")}</h2>
<p className="text-sm text-gray-700 dark:text-gray-300 mb-6">Kami menghargai pendapat Anda! Survei ini bertujuan untuk meningkatkan kualitas layanan MediaHub Polri. Mohon luangkan waktu beberapa menit untuk mengisi survei ini.</p> <p className="text-sm text-gray-700 dark:text-gray-300 mb-6">
{t("survey2")}
</p>
<Dialog open={openPolda} onOpenChange={setOpenPolda}> <Dialog open={openPolda} onOpenChange={setOpenPolda}>
<DialogTrigger asChild> <DialogTrigger asChild>
<Button size="md" onClick={() => setOpenPolda(true)} className="bg-[#bb3523] hover:bg-[#9e2e1e] text-white font-bold px-6 py-3 rounded shadow-md transition-all duration-300"> <Button
SURVEY SEKARANG size="md"
onClick={() => setOpenPolda(true)}
className="bg-[#bb3523] hover:bg-[#9e2e1e] text-white font-bold px-6 py-3 rounded shadow-md transition-all duration-300"
>
{t("survey3")}
</Button> </Button>
</DialogTrigger> </DialogTrigger>
<DialogContent size="md" className="max-h-[90vh] overflow-auto flex flex-col" data-lenis-prevent> <DialogContent
size="md"
className="max-h-[90vh] overflow-auto flex flex-col"
data-lenis-prevent
>
<DialogHeader> <DialogHeader>
<DialogTitle className="text-lg font-bold">SURVEI KEPUASAN PENGGUNA MEDIAHUB POLRI</DialogTitle> <DialogTitle className="text-lg font-bold">
<DialogDescription className="text-sm">Kami menghargai pendapat Anda! Survei ini bertujuan untuk meningkatkan kualitas layanan MediaHub Polri.</DialogDescription> {t("survey4")}
</DialogTitle>
<DialogDescription className="text-sm">
{t("survey5")}
</DialogDescription>
</DialogHeader> </DialogHeader>
<form onSubmit={handleSubmit(onSubmit)} className="space-y-6 mt-4"> <form
{renderControllerGroup("accessFrequency", "1. Seberapa sering Anda mengakses MediaHub Polri?", options.accessFrequency)} onSubmit={handleSubmit(onSubmit)}
className="space-y-6 mt-4"
>
{renderControllerGroup(
"accessFrequency",
t("survey6"),
options.accessFrequency
)}
<div> <div>
<p className="font-medium">2. Bagaimana pengalaman Anda dalam mengakses website ini?</p> <p className="font-medium">{t("survey7")}</p>
<div className="space-y-3 mt-2"> <div className="space-y-3 mt-2">
{renderControllerGroup("uiExperienceDesign", "a) Tampilan dan desain website", options.uiExperienceDesign)} {renderControllerGroup(
{renderControllerGroup("uiExperienceNavigation", "b) Kemudahan navigasi", options.uiExperienceNavigation)} "uiExperienceDesign",
{renderControllerGroup("uiExperienceSpeed", "c) Kecepatan akses website", options.uiExperienceSpeed)} "a) Tampilan dan desain website",
options.uiExperienceDesign
)}
{renderControllerGroup(
"uiExperienceNavigation",
"b) Kemudahan navigasi",
options.uiExperienceNavigation
)}
{renderControllerGroup(
"uiExperienceSpeed",
"c) Kecepatan akses website",
options.uiExperienceSpeed
)}
</div> </div>
</div> </div>
<div> <div>
<p className="font-medium">3. Seberapa puas Anda dengan informasi yang tersedia di MediaHub Polri?</p> <p className="font-medium">{t("survey8")}</p>
<div className="space-y-3 mt-2"> <div className="space-y-3 mt-2">
{renderControllerGroup("infoAccuracy", "a) Akurat dan terpercaya", options.infoAccuracy)} {renderControllerGroup(
{renderControllerGroup("infoCompleteness", "b) Kelengkapan berita dan informasi", options.infoCompleteness)} "infoAccuracy",
"a) Akurat dan terpercaya",
options.infoAccuracy
)}
{renderControllerGroup(
"infoCompleteness",
"b) Kelengkapan berita dan informasi",
options.infoCompleteness
)}
</div> </div>
</div> </div>
{renderControllerGroup("usefulness", "4. Apakah Anda merasa website ini membantu dalam mendapatkan informasi terkait Polri?", options.usefulness)} {renderControllerGroup(
"usefulness",
t("survey9"),
options.usefulness
)}
<div> <div>
<p className="font-medium">5. Apa saran atau masukan Anda?</p> <p className="font-medium">{t("survey10")}</p>
<Controller name="suggestion" control={control} render={({ field }) => <Textarea placeholder="Tulis pesan Anda..." value={field.value} onChange={field.onChange} />} /> <Controller
name="suggestion"
control={control}
render={({ field }) => (
<Textarea
placeholder="Tulis pesan Anda..."
value={field.value}
onChange={field.onChange}
/>
)}
/>
</div> </div>
<div className="flex justify-end gap-2"> <div className="flex justify-end gap-2">
<Button variant="outline" onClick={() => setOpenPolda(false)}> <Button variant="outline" onClick={() => setOpenPolda(false)}>
Batal {t("cancel")}
</Button> </Button>
<Button type="submit" disabled={isLoading}> <Button type="submit" disabled={isLoading}>
{isLoading ? "Mengirim..." : "Kirim"} {isLoading ? "Mengirim..." : "Kirim"}
@ -163,7 +269,11 @@ const UserSurveyBox = () => {
{/* Kanan: Gambar survey */} {/* Kanan: Gambar survey */}
<div className="hidden lg:flex justify-center md:justify-end"> <div className="hidden lg:flex justify-center md:justify-end">
<img src="/assets/survey.png" alt="Survey Illustration" className="w-48 h-auto" /> <img
src="/assets/survey.png"
alt="Survey Illustration"
className="w-48 h-auto"
/>
</div> </div>
</div> </div>
</div> </div>

View File

@ -565,7 +565,38 @@
"welcome": "Welcome To", "welcome": "Welcome To",
"polda": "Official coverage sourced from Polri activities at Polda", "polda": "Official coverage sourced from Polri activities at Polda",
"satker": "Official coverage sourced from Polri activities at Satker", "satker": "Official coverage sourced from Polri activities at Satker",
"resending": "Resending" "resending": "Resending",
"regionNews": "Region Police News",
"divisionNews": "Division Police News",
"areaCoverage": "Area Coverage & Divison",
"calendar": "EVENTS CALENDAR",
"january": "January",
"february": "February",
"march": "March",
"may": "May",
"june": "June",
"july": "July",
"august": "August",
"october": "October",
"december": "December",
"eventList": "Event List",
"noEvent": "No events available",
"eventDetails": "Event Details",
"date": "Date:",
"selectEvent": "Select an event to view details",
"regionalPolice": "Regional Police List",
"policeDivision": "Police Division",
"close": "Close",
"survey1": "MEDIAHUB POLRI USER SATISFACTION SURVEY",
"survey2": "We value your opinion! This survey aims to improve the quality of Polri MediaHub services. Please take a few minutes to complete this survey.",
"survey3": "SURVEY NOW",
"survey4": "MEDIAHUB POLRI USER SATISFACTION SURVEY",
"survey5": "We value your opinion! This survey aims to improve the quality of Polri MediaHub services.",
"survey6": "1. How often do you access the Polri MediaHub?",
"survey7": "2. How was your experience in accessing this website?",
"survey8": "3. How satisfied are you with the information available on the Polri MediaHub?",
"survey9": "4. Do you feel this website is helpful in getting information related to the Police?",
"survey10": "5. What are your suggestions or input?"
}, },
"FilterPage": { "FilterPage": {
"image": "Image", "image": "Image",

View File

@ -566,7 +566,52 @@
"welcome": "Selamat Datang di", "welcome": "Selamat Datang di",
"polda": "Liputan resmi yang bersumber dari kegiatan Polri di Polda", "polda": "Liputan resmi yang bersumber dari kegiatan Polri di Polda",
"satker": "Liputan resmi yang bersumber dari kegiatan Polri di Satker", "satker": "Liputan resmi yang bersumber dari kegiatan Polri di Satker",
"resending": "Kirim Ulang" "resending": "Kirim Ulang",
"regionNews": "Berita Polda",
"divisionNews": "Berita Satker",
"areaCoverage": "Liputan Wilayah & Satker",
"calendar": "KALENDER ACARA",
"january": "Januari",
"february": "February",
"march": "March",
"may": "May",
"june": "Juni",
"july": "Juli",
"august": "Agustus",
"october": "Oktober",
"december": "Desember",
"eventList": "Daftar Acara",
"noEvent": "Tidak ada acara yang tersedia",
"eventDetails": "Detail Acara",
"date": "Tanggal:",
"selectEvent": "Pilih acara untuk melihat detail",
"regionalPolice": "Polda Jajaran",
"policeDivision": "Satuan Kerja Polri",
"close": "Tutup",
"survey1": "SURVEI KEPUASAN PENGGUNA MEDIAHUB POLRI",
"survey2": "Kami menghargai pendapat Anda! Survei ini bertujuan untuk meningkatkan kualitas layanan MediaHub Polri. Mohon luangkan waktu beberapa menit untuk mengisi survei ini.",
"survey3": "SURVEY SEKARANG",
"survey4": "SURVEI KEPUASAN PENGGUNA MEDIAHUB POLRI",
"survey5": "Kami menghargai pendapat Anda! Survei ini bertujuan untuk meningkatkan kualitas layanan MediaHub Polri.",
"survey6": "1. Seberapa sering Anda mengakses MediaHub Polri?",
"survey7": "2. Bagaimana pengalaman Anda dalam mengakses website ini?",
"survey8": "3. Seberapa puas Anda dengan informasi yang tersedia di MediaHub Polri?",
"survey9": "4. Apakah Anda merasa website ini membantu dalam mendapatkan informasi terkait Polri?",
"survey10": "5. Apa saran atau masukan Anda?"
}, },
"FilterPage": { "FilterPage": {
"image": "Foto", "image": "Foto",