fix: language
This commit is contained in:
parent
481cc9f930
commit
5477eca3d0
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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}
|
||||||
|
|
|
||||||
|
|
@ -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">
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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",
|
||||||
|
|
|
||||||
|
|
@ -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",
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue