From 6e353b1fce860e557430be84b8b3f4f89e6ed352 Mon Sep 17 00:00:00 2001 From: Sabda Yagra Date: Wed, 11 Jun 2025 10:51:03 +0700 Subject: [PATCH] fix: menghapus liputan wilayah&satker pada halaman polda & satker, memperbaiki kalender dinamis --- components/landing-page/event-calender.tsx | 174 +++++++++++------- .../landing-page/search-section-polda.tsx | 2 +- .../landing-page/search-section-satker.tsx | 2 +- 3 files changed, 106 insertions(+), 72 deletions(-) diff --git a/components/landing-page/event-calender.tsx b/components/landing-page/event-calender.tsx index cc194daf..3f7fb101 100644 --- a/components/landing-page/event-calender.tsx +++ b/components/landing-page/event-calender.tsx @@ -1,4 +1,5 @@ import { getCalendarPagination } from "@/service/schedule/schedule"; +import { ChevronLeft, ChevronRight } from "lucide-react"; import React, { useEffect, useState } from "react"; interface CalendarItem { @@ -7,7 +8,7 @@ interface CalendarItem { description: string; assignedTo: string; assignedToLevel: string; - startDate: string; + startDate: string; endDate: string; isActive: boolean; createdById: number; @@ -18,7 +19,6 @@ interface CalendarItem { } const EventCalender = () => { - // Get current date const today = new Date(); const currentMonth = today.getMonth(); const currentYear = today.getFullYear(); @@ -26,11 +26,22 @@ const EventCalender = () => { const [events, setEvents] = useState([]); const [selectedEvent, setSelectedEvent] = useState(null); + const [month, setMonth] = useState(currentMonth); + const [year, setYear] = useState(currentYear); - // Month names in Indonesian const monthNames = [ - "Januari", "Februari", "Maret", "April", "Mei", "Juni", - "Juli", "Agustus", "September", "Oktober", "November", "Desember" + "Januari", + "Februari", + "Maret", + "April", + "Mei", + "Juni", + "Juli", + "Agustus", + "September", + "Oktober", + "November", + "Desember", ]; const fetchData = async () => { @@ -39,8 +50,6 @@ const EventCalender = () => { const data = res?.data?.data; const contentData = data?.content; setEvents(contentData || []); - - // Set first event as selected by default if (contentData && contentData.length > 0) { setSelectedEvent(contentData[0]); } @@ -48,49 +57,37 @@ const EventCalender = () => { console.error("Error fetching calendar events:", error); } }; - + useEffect(() => { fetchData(); }, []); - // Get first day of the month and number of days - const firstDayOfMonth = new Date(currentYear, currentMonth, 1); - const lastDayOfMonth = new Date(currentYear, currentMonth + 1, 0); + const firstDayOfMonth = new Date(year, month, 1); + const lastDayOfMonth = new Date(year, month + 1, 0); const daysInMonth = lastDayOfMonth.getDate(); const startingDayOfWeek = firstDayOfMonth.getDay(); - - // Convert Sunday (0) to 7 for Monday-first week const adjustedStartingDay = startingDayOfWeek === 0 ? 6 : startingDayOfWeek - 1; - // Generate calendar days const generateCalendarDays = () => { const days = []; - - // Empty cells for days before the first day of month for (let i = 0; i < adjustedStartingDay; i++) { days.push(null); } - - // Days of the month for (let day = 1; day <= daysInMonth; day++) { days.push(day); } - - // Fill remaining cells to complete the grid (6 rows × 7 days = 42 cells) while (days.length < 42) { days.push(null); } - return days; }; const calendarDays = generateCalendarDays(); - // Helper function to extract day from date string const getDateFromString = (dateString: string) => { try { const date = new Date(dateString); - if (date.getMonth() === currentMonth && date.getFullYear() === currentYear) { + if (date.getMonth() === month && date.getFullYear() === year) { return date.getDate(); } return null; @@ -99,17 +96,16 @@ const EventCalender = () => { } }; - // Helper function to format date range const formatDateRange = (startDate: string, endDate: string) => { try { const start = new Date(startDate); const end = new Date(endDate); - + const startDay = start.getDate(); const endDay = end.getDate(); const startMonth = monthNames[start.getMonth()]; const endMonth = monthNames[end.getMonth()]; - + if (startDay === endDay && startMonth === endMonth) { return `${startDay} ${startMonth}`; } else { @@ -120,33 +116,49 @@ const EventCalender = () => { } }; - // Helper function to format time range const formatTimeRange = (startDate: string, endDate: string) => { try { const start = new Date(startDate); const end = new Date(endDate); - - const startTime = start.toLocaleTimeString('id-ID', { - hour: '2-digit', - minute: '2-digit', - timeZone: 'Asia/Jakarta' + + const startTime = start.toLocaleTimeString("id-ID", { + hour: "2-digit", + minute: "2-digit", + timeZone: "Asia/Jakarta", }); - const endTime = end.toLocaleTimeString('id-ID', { - hour: '2-digit', - minute: '2-digit', - timeZone: 'Asia/Jakarta' + const endTime = end.toLocaleTimeString("id-ID", { + hour: "2-digit", + minute: "2-digit", + timeZone: "Asia/Jakarta", }); - + return `${startTime} - ${endTime} WIB`; } catch { return "Waktu tidak tersedia"; } }; - // Get event dates for highlighting calendar const eventDates = events - .map(event => getDateFromString(event.startDate)) - .filter(date => date !== null); + .map((event) => getDateFromString(event.startDate)) + .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 (
@@ -154,12 +166,18 @@ const EventCalender = () => { KALENDER ACARA
- {/* Left Side - Calendar and Event List */}
- {/* Mini Calendar */}
-
- {monthNames[currentMonth]} {currentYear} +
+ +
+ {monthNames[month]} {year} +
+
{["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"].map((d) => ( @@ -167,26 +185,32 @@ const EventCalender = () => { {d}
))} - {calendarDays?.map((day, index) => ( -
- {day} -
- ))} + {calendarDays.map((day, index) => { + const isToday = + day === currentDate && + month === currentMonth && + year === currentYear; + + return ( +
+ {day} +
+ ); + })}
- {/* Event List */}

Daftar Acara @@ -224,7 +248,11 @@ const EventCalender = () => {

-
+
)) @@ -232,13 +260,12 @@ const EventCalender = () => {
- {/* Right Side - Event Detail */}

Detail Acara

- + {selectedEvent ? (
{ target.src = "/images/default-event.png"; }} /> - +

{selectedEvent.title}

- +
- Tanggal: - {formatDateRange(selectedEvent.startDate, selectedEvent.endDate)} + + Tanggal: + + + {formatDateRange( + selectedEvent.startDate, + selectedEvent.endDate + )} +

@@ -267,7 +301,7 @@ const EventCalender = () => {

- +
diff --git a/components/landing-page/search-section-satker.tsx b/components/landing-page/search-section-satker.tsx index e9aefa93..7595741e 100644 --- a/components/landing-page/search-section-satker.tsx +++ b/components/landing-page/search-section-satker.tsx @@ -31,7 +31,7 @@ const SearchSectionSatker = () => { - + {/* */}