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

2025-06-11 10:51:03 +07:00 · 2025-06-11 10:51:03 +07:00 · 6e353b1fce
parent 6f853d4680
commit 6e353b1fce
3 changed files with 106 additions and 72 deletions
--- 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<CalendarItem[]>([]);
  const [selectedEvent, setSelectedEvent] = useState<CalendarItem | null>(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 (
    <div className="mt-8 rounded-lg bg-white dark:bg-zinc-900 p-4 shadow">
@ -154,12 +166,18 @@ const EventCalender = () => {
        KALENDER ACARA
      </h2>
      <div className="flex flex-col lg:flex-row gap-6">
-        {/* Left Side - Calendar and Event List */}
        <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="text-center font-semibold mb-2">
-              {monthNames[currentMonth]} {currentYear}
+            <div className="flex items-center justify-between mb-2">
+              <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 className="grid grid-cols-7 gap-1 text-sm text-center">
              {["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"].map((d) => (
@ -167,26 +185,32 @@ const EventCalender = () => {
                  {d}
                </div>
              ))}
-              {calendarDays?.map((day, index) => (
-                <div
-                  key={index}
-                  className={`p-1 rounded min-h-[24px] flex items-center justify-center text-xs ${
-                    day === null 
-                      ? "" 
-                      : eventDates.includes(day)
-                      ? "bg-red-600 text-white font-semibold"
-                      : day === currentDate
-                      ? "bg-blue-500 text-white font-semibold"
-                      : "hover:bg-gray-200 dark:hover:bg-zinc-700"
-                  }`}
-                >
-                  {day}
-                </div>
-              ))}
+              {calendarDays.map((day, index) => {
+                const isToday =
+                  day === currentDate &&
+                  month === currentMonth &&
+                  year === currentYear;
+
+                return (
+                  <div
+                    key={index}
+                    className={`p-1 rounded min-h-[24px] flex items-center justify-center text-xs ${
+                      day === null
+                        ? ""
+                        : eventDates.includes(day)
+                        ? "bg-red-600 text-white font-semibold"
+                        : isToday
+                        ? "bg-blue-500 text-white font-semibold"
+                        : "hover:bg-gray-200 dark:hover:bg-zinc-700"
+                    }`}
+                  >
+                    {day}
+                  </div>
+                );
+              })}
            </div>
          </div>

-          {/* Event List */}
          <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">
              Daftar Acara
@ -224,7 +248,11 @@ const EventCalender = () => {
                    </div>
                  </div>
                  <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>
              ))
@ -232,13 +260,12 @@ const EventCalender = () => {
          </div>
        </div>

-        {/* Right Side - Event Detail */}
        <div className="w-full lg:w-1/2">
          <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">
              Detail Acara
            </h3>
-            
+
            {selectedEvent ? (
              <div className="space-y-4">
                <img
@ -250,16 +277,23 @@ const EventCalender = () => {
                    target.src = "/images/default-event.png";
                  }}
                />
-                
+
                <div>
                  <h4 className="text-lg font-bold text-gray-800 dark:text-gray-200 mb-2">
                    {selectedEvent.title}
                  </h4>
-                  
+
                  <div className="grid grid-cols-1 gap-3 mb-4">
                    <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>{formatDateRange(selectedEvent.startDate, selectedEvent.endDate)}</span>
+                      <span className="w-20 font-semibold flex-shrink-0">
+                        Tanggal:
+                      </span>
+                      <span>
+                        {formatDateRange(
+                          selectedEvent.startDate,
+                          selectedEvent.endDate
+                        )}
+                      </span>
                    </div>
                    <div className="mb-4">
                      <p className="text-sm text-gray-600 dark:text-gray-400 leading-relaxed">
@ -267,7 +301,7 @@ const EventCalender = () => {
                      </p>
                    </div>
                  </div>
-                  
+
                  <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">
                      Bagikan
@ -287,4 +321,4 @@ const EventCalender = () => {
  );
 };

-export default EventCalender;
+export default EventCalender;
--- a/components/landing-page/search-section-polda.tsx
+++ b/components/landing-page/search-section-polda.tsx
@ -30,7 +30,7 @@ const SearchSectionPolda = () => {
        <NewContent group="polda" type="latest" />
        <NewContent group="polda" type="popular" />
        <ContentCategory group="polda" type="popular" />
-        <AreaCoverageWorkUnits />
+        {/* <AreaCoverageWorkUnits /> */}
        <EventCalender />
        <UserSurveyBox />
      </div>
--- a/components/landing-page/search-section-satker.tsx
+++ b/components/landing-page/search-section-satker.tsx
@ -31,7 +31,7 @@ const SearchSectionSatker = () => {
        <NewContent group="satker" type="latest" />
        <NewContent group="satker" type="popular" />
        <ContentCategory group="satker" type="popular" />
-        <AreaCoverageWorkUnits />
+        {/* <AreaCoverageWorkUnits /> */}
        <EventCalender />
        <UserSurveyBox />
      </div>