334 lines
11 KiB
TypeScript
334 lines
11 KiB
TypeScript
import { getCalendarPagination } from "@/service/schedule/schedule";
|
|
import { ChevronLeft, ChevronRight } from "lucide-react";
|
|
import { useTranslations } from "next-intl";
|
|
import React, { useEffect, useState } from "react";
|
|
|
|
interface CalendarItem {
|
|
id: number;
|
|
title: string;
|
|
description: string;
|
|
assignedTo: string;
|
|
assignedToLevel: string;
|
|
startDate: string;
|
|
endDate: string;
|
|
isActive: boolean;
|
|
createdById: number;
|
|
createdByName: string;
|
|
thumbnailUrl: string;
|
|
createdAt: string;
|
|
updatedAt: string;
|
|
}
|
|
|
|
const EventCalender = () => {
|
|
const today = new Date();
|
|
const currentMonth = today.getMonth();
|
|
const currentYear = today.getFullYear();
|
|
const currentDate = today.getDate();
|
|
|
|
const [events, setEvents] = useState<CalendarItem[]>([]);
|
|
const [selectedEvent, setSelectedEvent] = useState<CalendarItem | null>(null);
|
|
const [month, setMonth] = useState(currentMonth);
|
|
const [year, setYear] = useState(currentYear);
|
|
const t = useTranslations("LandingPage");
|
|
|
|
const monthNames = [
|
|
t("january"),
|
|
t("february"),
|
|
t("march"),
|
|
"April",
|
|
t("may"),
|
|
t("june"),
|
|
t("july"),
|
|
t("august"),
|
|
"September",
|
|
t("october"),
|
|
"November",
|
|
t("december"),
|
|
];
|
|
|
|
const fetchData = async () => {
|
|
try {
|
|
const res = await getCalendarPagination(100, 0);
|
|
const data = res?.data?.data;
|
|
const contentData = data?.content;
|
|
setEvents(contentData || []);
|
|
if (contentData && contentData.length > 0) {
|
|
setSelectedEvent(contentData[0]);
|
|
}
|
|
} catch (error) {
|
|
console.error("Error fetching calendar events:", error);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
fetchData();
|
|
}, []);
|
|
|
|
const firstDayOfMonth = new Date(year, month, 1);
|
|
const lastDayOfMonth = new Date(year, month + 1, 0);
|
|
const daysInMonth = lastDayOfMonth.getDate();
|
|
const startingDayOfWeek = firstDayOfMonth.getDay();
|
|
const adjustedStartingDay =
|
|
startingDayOfWeek === 0 ? 6 : startingDayOfWeek - 1;
|
|
|
|
const generateCalendarDays = () => {
|
|
const days = [];
|
|
for (let i = 0; i < adjustedStartingDay; i++) {
|
|
days.push(null);
|
|
}
|
|
for (let day = 1; day <= daysInMonth; day++) {
|
|
days.push(day);
|
|
}
|
|
while (days.length < 42) {
|
|
days.push(null);
|
|
}
|
|
return days;
|
|
};
|
|
|
|
const calendarDays = generateCalendarDays();
|
|
|
|
const getDateFromString = (dateString: string) => {
|
|
try {
|
|
const date = new Date(dateString);
|
|
if (date.getMonth() === month && date.getFullYear() === year) {
|
|
return date.getDate();
|
|
}
|
|
return null;
|
|
} catch {
|
|
return null;
|
|
}
|
|
};
|
|
|
|
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 {
|
|
return `${startDay} ${startMonth} - ${endDay} ${endMonth}`;
|
|
}
|
|
} catch {
|
|
return "Tanggal tidak valid";
|
|
}
|
|
};
|
|
|
|
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 endTime = end.toLocaleTimeString("id-ID", {
|
|
hour: "2-digit",
|
|
minute: "2-digit",
|
|
timeZone: "Asia/Jakarta",
|
|
});
|
|
|
|
return `${startTime} - ${endTime} WIB`;
|
|
} catch {
|
|
return "Waktu tidak tersedia";
|
|
}
|
|
};
|
|
|
|
const eventDates = events
|
|
.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">
|
|
<h2 className="text-lg font-bold text-red-600 border-b border-red-600 mb-4 pb-2">
|
|
{t("calendar")}
|
|
</h2>
|
|
<div className="flex flex-col lg:flex-row gap-6">
|
|
<div className="w-full lg:w-1/2">
|
|
<div className="bg-gray-100 dark:bg-zinc-800 p-4 rounded-md mb-4">
|
|
<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) => (
|
|
<div key={d} className="font-medium p-1">
|
|
{d}
|
|
</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>
|
|
|
|
<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">
|
|
{t("eventList")}
|
|
</h3>
|
|
{events?.length === 0 ? (
|
|
<div className="text-center text-gray-500 dark:text-gray-400 py-8">
|
|
{t("noEvent")}
|
|
</div>
|
|
) : (
|
|
events.map((event) => (
|
|
<div
|
|
key={event.id}
|
|
onClick={() => setSelectedEvent(event)}
|
|
className={`flex items-center rounded-xl shadow-sm p-3 cursor-pointer transition-all duration-200 hover:shadow-md ${
|
|
selectedEvent?.id === event.id
|
|
? "bg-red-100 dark:bg-red-900/20 border-2 border-red-500"
|
|
: "bg-gray-200 dark:bg-zinc-800 hover:bg-gray-300 dark:hover:bg-zinc-700"
|
|
}`}
|
|
>
|
|
<img
|
|
src={event.thumbnailUrl || "/images/default-event.png"}
|
|
alt={event.title}
|
|
className="w-16 h-12 object-cover rounded flex-shrink-0"
|
|
onError={(e) => {
|
|
const target = e.target as HTMLImageElement;
|
|
target.src = "/images/default-event.png";
|
|
}}
|
|
/>
|
|
<div className="ml-3 flex-1 min-w-0">
|
|
<div className="text-sm font-semibold text-gray-800 dark:text-gray-200 line-clamp-2">
|
|
{event.title}
|
|
</div>
|
|
<div className="text-xs text-gray-600 dark:text-gray-400 mt-1">
|
|
{formatDateRange(event.startDate, event.endDate)}
|
|
</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>
|
|
</div>
|
|
))
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<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">
|
|
{t("eventDetails")}
|
|
</h3>
|
|
|
|
{selectedEvent ? (
|
|
<div className="space-y-4">
|
|
<img
|
|
src={
|
|
selectedEvent.thumbnailUrl || "/images/default-event.png"
|
|
}
|
|
alt={selectedEvent.title}
|
|
className="w-full h-48 object-cover rounded-lg"
|
|
onError={(e) => {
|
|
const target = e.target as HTMLImageElement;
|
|
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">
|
|
{t("date")}
|
|
</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">
|
|
{selectedEvent.description ||
|
|
"Tidak ada deskripsi tersedia."}
|
|
</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">
|
|
{t("share")}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="text-center text-gray-500 dark:text-gray-400 py-8">
|
|
{t("selectEvent")}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default EventCalender;
|