mediahub
/
mediahub-fe
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: menghapus liputan wilayah&satker pada halaman polda & satker, memperbaiki kalender dinamis

This commit is contained in:
Sabda Yagra 2025-06-11 10:51:03 +07:00
parent 6f853d4680
commit 6e353b1fce
3 changed files with 106 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

174
components/landing-page/event-calender.tsx
View File

@ -1,4 +1,5 @@
import { getCalendarPagination } from "@/service/schedule/schedule"; import { getCalendarPagination } from "@/service/schedule/schedule";
import { ChevronLeft, ChevronRight } from "lucide-react";
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
interface CalendarItem { interface CalendarItem {
@ -7,7 +8,7 @@ interface CalendarItem {
description: string; description: string;
assignedTo: string; assignedTo: string;
assignedToLevel: string; assignedToLevel: string;
startDate: string; startDate: string;
endDate: string; endDate: string;
isActive: boolean; isActive: boolean;
createdById: number; createdById: number;
@ -18,7 +19,6 @@ interface CalendarItem {
} }
const EventCalender = () => { const EventCalender = () => {
// Get current date
const today = new Date(); const today = new Date();
const currentMonth = today.getMonth(); const currentMonth = today.getMonth();
const currentYear = today.getFullYear(); const currentYear = today.getFullYear();
@ -26,11 +26,22 @@ const EventCalender = () => {
const [events, setEvents] = useState<CalendarItem[]>([]); const [events, setEvents] = useState<CalendarItem[]>([]);
const [selectedEvent, setSelectedEvent] = useState<CalendarItem | null>(null); const [selectedEvent, setSelectedEvent] = useState<CalendarItem | null>(null);
const [month, setMonth] = useState(currentMonth);
const [year, setYear] = useState(currentYear);
// Month names in Indonesian
const monthNames = [ const monthNames = [
"Januari", "Februari", "Maret", "April", "Mei", "Juni", "Januari",
"Juli", "Agustus", "September", "Oktober", "November", "Desember" "Februari",
"Maret",
"April",
"Mei",
"Juni",
"Juli",
"Agustus",
"September",
"Oktober",
"November",
"Desember",
]; ];
const fetchData = async () => { const fetchData = async () => {
@ -39,8 +50,6 @@ const EventCalender = () => {
const data = res?.data?.data; const data = res?.data?.data;
const contentData = data?.content; const contentData = data?.content;
setEvents(contentData || []); setEvents(contentData || []);
// Set first event as selected by default
if (contentData && contentData.length > 0) { if (contentData && contentData.length > 0) {
setSelectedEvent(contentData[0]); setSelectedEvent(contentData[0]);
} }
@ -48,49 +57,37 @@ const EventCalender = () => {
console.error("Error fetching calendar events:", error); console.error("Error fetching calendar events:", error);
} }
}; };
useEffect(() => { useEffect(() => {
fetchData(); fetchData();
}, []); }, []);
// Get first day of the month and number of days const firstDayOfMonth = new Date(year, month, 1);
const firstDayOfMonth = new Date(currentYear, currentMonth, 1); const lastDayOfMonth = new Date(year, month + 1, 0);
const lastDayOfMonth = new Date(currentYear, currentMonth + 1, 0);
const daysInMonth = lastDayOfMonth.getDate(); const daysInMonth = lastDayOfMonth.getDate();
const startingDayOfWeek = firstDayOfMonth.getDay(); const startingDayOfWeek = firstDayOfMonth.getDay();
// Convert Sunday (0) to 7 for Monday-first week
const adjustedStartingDay = startingDayOfWeek === 0 ? 6 : startingDayOfWeek - 1; const adjustedStartingDay = startingDayOfWeek === 0 ? 6 : startingDayOfWeek - 1;
// Generate calendar days
const generateCalendarDays = () => { const generateCalendarDays = () => {
const days = []; const days = [];
// Empty cells for days before the first day of month
for (let i = 0; i < adjustedStartingDay; i++) { for (let i = 0; i < adjustedStartingDay; i++) {
days.push(null); days.push(null);
} }
// Days of the month
for (let day = 1; day <= daysInMonth; day++) { for (let day = 1; day <= daysInMonth; day++) {
days.push(day); days.push(day);
} }
// Fill remaining cells to complete the grid (6 rows × 7 days = 42 cells)
while (days.length < 42) { while (days.length < 42) {
days.push(null); days.push(null);
} }
return days; return days;
}; };
const calendarDays = generateCalendarDays(); const calendarDays = generateCalendarDays();
// Helper function to extract day from date string
const getDateFromString = (dateString: string) => { const getDateFromString = (dateString: string) => {
try { try {
const date = new Date(dateString); const date = new Date(dateString);
if (date.getMonth() === currentMonth && date.getFullYear() === currentYear) { if (date.getMonth() === month && date.getFullYear() === year) {
return date.getDate(); return date.getDate();
} }
return null; return null;
@ -99,17 +96,16 @@ const EventCalender = () => {
} }
}; };
// Helper function to format date range
const formatDateRange = (startDate: string, endDate: string) => { const formatDateRange = (startDate: string, endDate: string) => {
try { try {
const start = new Date(startDate); const start = new Date(startDate);
const end = new Date(endDate); const end = new Date(endDate);
const startDay = start.getDate(); const startDay = start.getDate();
const endDay = end.getDate(); const endDay = end.getDate();
const startMonth = monthNames[start.getMonth()]; const startMonth = monthNames[start.getMonth()];
const endMonth = monthNames[end.getMonth()]; const endMonth = monthNames[end.getMonth()];
if (startDay === endDay && startMonth === endMonth) { if (startDay === endDay && startMonth === endMonth) {
return `${startDay} ${startMonth}`; return `${startDay} ${startMonth}`;
} else { } else {
@ -120,33 +116,49 @@ const EventCalender = () => {
} }
}; };
// Helper function to format time range
const formatTimeRange = (startDate: string, endDate: string) => { const formatTimeRange = (startDate: string, endDate: string) => {
try { try {
const start = new Date(startDate); const start = new Date(startDate);
const end = new Date(endDate); const end = new Date(endDate);
const startTime = start.toLocaleTimeString('id-ID', { const startTime = start.toLocaleTimeString("id-ID", {
hour: '2-digit', hour: "2-digit",
minute: '2-digit', minute: "2-digit",
timeZone: 'Asia/Jakarta' timeZone: "Asia/Jakarta",
}); });
const endTime = end.toLocaleTimeString('id-ID', { const endTime = end.toLocaleTimeString("id-ID", {
hour: '2-digit', hour: "2-digit",
minute: '2-digit', minute: "2-digit",
timeZone: 'Asia/Jakarta' timeZone: "Asia/Jakarta",
}); });
return `${startTime} - ${endTime} WIB`; return `${startTime} - ${endTime} WIB`;
} catch { } catch {
return "Waktu tidak tersedia"; return "Waktu tidak tersedia";
} }
}; };
// Get event dates for highlighting calendar
const eventDates = events const eventDates = events
.map(event => getDateFromString(event.startDate)) .map((event) => getDateFromString(event.startDate))
.filter(date => date !== null); .filter((date) => date !== null);
const handlePreviousMonth = () => {
if (month === 0) {
setMonth(11);
setYear((y) => y - 1);
} else {
setMonth((m) => m - 1);
}
};
const handleNextMonth = () => {
if (month === 11) {
setMonth(0);
setYear((y) => y + 1);
} else {
setMonth((m) => m + 1);
}
};
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">
@ -154,12 +166,18 @@ const EventCalender = () => {
KALENDER ACARA KALENDER ACARA
</h2> </h2>
<div className="flex flex-col lg:flex-row gap-6"> <div className="flex flex-col lg:flex-row gap-6">
{/* Left Side - Calendar and Event List */}
<div className="w-full lg:w-1/2"> <div className="w-full lg:w-1/2">
{/* Mini Calendar */}
<div className="bg-gray-100 dark:bg-zinc-800 p-4 rounded-md mb-4"> <div className="bg-gray-100 dark:bg-zinc-800 p-4 rounded-md mb-4">
<div className="text-center font-semibold mb-2"> <div className="flex items-center justify-between mb-2">
{monthNames[currentMonth]} {currentYear} <button onClick={handlePreviousMonth}>
<ChevronLeft className="w-4 h-4" />
</button>
<div className="text-center font-semibold">
{monthNames[month]} {year}
</div>
<button onClick={handleNextMonth}>
<ChevronRight className="w-4 h-4" />
</button>
</div> </div>
<div className="grid grid-cols-7 gap-1 text-sm text-center"> <div className="grid grid-cols-7 gap-1 text-sm text-center">
{["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"].map((d) => ( {["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"].map((d) => (
@ -167,26 +185,32 @@ const EventCalender = () => {
{d} {d}
</div> </div>
))} ))}
{calendarDays?.map((day, index) => ( {calendarDays.map((day, index) => {
<div const isToday =
key={index} day === currentDate &&
className={`p-1 rounded min-h-[24px] flex items-center justify-center text-xs ${ month === currentMonth &&
day === null year === currentYear;
? ""
: eventDates.includes(day) return (
? "bg-red-600 text-white font-semibold" <div
: day === currentDate key={index}
? "bg-blue-500 text-white font-semibold" className={`p-1 rounded min-h-[24px] flex items-center justify-center text-xs ${
: "hover:bg-gray-200 dark:hover:bg-zinc-700" day === null
}`} ? ""
> : eventDates.includes(day)
{day} ? "bg-red-600 text-white font-semibold"
</div> : isToday
))} ? "bg-blue-500 text-white font-semibold"
: "hover:bg-gray-200 dark:hover:bg-zinc-700"
}`}
>
{day}
</div>
);
})}
</div> </div>
</div> </div>
{/* Event List */}
<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 Daftar Acara
@ -224,7 +248,11 @@ const EventCalender = () => {
</div> </div>
</div> </div>
<div className="ml-2 flex-shrink-0"> <div className="ml-2 flex-shrink-0">
<div className={`w-2 h-2 rounded-full ${event.isActive ? 'bg-green-500' : 'bg-red-500'}`}></div> <div
className={`w-2 h-2 rounded-full ${
event.isActive ? "bg-green-500" : "bg-red-500"
}`}
></div>
</div> </div>
</div> </div>
)) ))
@ -232,13 +260,12 @@ const EventCalender = () => {
</div> </div>
</div> </div>
{/* Right Side - Event Detail */}
<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 Detail Acara
</h3> </h3>
{selectedEvent ? ( {selectedEvent ? (
<div className="space-y-4"> <div className="space-y-4">
<img <img
@ -250,16 +277,23 @@ const EventCalender = () => {
target.src = "/images/default-event.png"; target.src = "/images/default-event.png";
}} }}
/> />
<div> <div>
<h4 className="text-lg font-bold text-gray-800 dark:text-gray-200 mb-2"> <h4 className="text-lg font-bold text-gray-800 dark:text-gray-200 mb-2">
{selectedEvent.title} {selectedEvent.title}
</h4> </h4>
<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">Tanggal:</span> <span className="w-20 font-semibold flex-shrink-0">
<span>{formatDateRange(selectedEvent.startDate, selectedEvent.endDate)}</span> Tanggal:
</span>
<span>
{formatDateRange(
selectedEvent.startDate,
selectedEvent.endDate
)}
</span>
</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">
@ -267,7 +301,7 @@ const EventCalender = () => {
</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 Bagikan
@ -287,4 +321,4 @@ const EventCalender = () => {
); );
}; };
export default EventCalender; export default EventCalender;

2
components/landing-page/search-section-polda.tsx
View File

@ -30,7 +30,7 @@ const SearchSectionPolda = () => {
<NewContent group="polda" type="latest" /> <NewContent group="polda" type="latest" />
<NewContent group="polda" type="popular" /> <NewContent group="polda" type="popular" />
<ContentCategory group="polda" type="popular" /> <ContentCategory group="polda" type="popular" />
<AreaCoverageWorkUnits /> {/* <AreaCoverageWorkUnits /> */}
<EventCalender /> <EventCalender />
<UserSurveyBox /> <UserSurveyBox />
</div> </div>

2
components/landing-page/search-section-satker.tsx
View File

@ -31,7 +31,7 @@ const SearchSectionSatker = () => {
<NewContent group="satker" type="latest" /> <NewContent group="satker" type="latest" />
<NewContent group="satker" type="popular" /> <NewContent group="satker" type="popular" />
<ContentCategory group="satker" type="popular" /> <ContentCategory group="satker" type="popular" />
<AreaCoverageWorkUnits /> {/* <AreaCoverageWorkUnits /> */}
<EventCalender /> <EventCalender />
<UserSurveyBox /> <UserSurveyBox />
</div> </div>