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

feat: update advertisements and calendars in landing

This commit is contained in:
hanif salafi 2025-06-07 02:59:54 +07:00
parent 43ae5c480a
commit 7fc65833b0
9 changed files with 286 additions and 141 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/[locale]/(protected)/admin/settings/iklan/component/table.tsx
View File

@ -154,8 +154,6 @@ const AdvertisementsList = () => {
page - 1,
showData,
"",
categoryFilter?.sort().join(","),
statusFilter?.sort().join(",")
);
const data = res?.data?.data;
const contentData = data?.content;

5
app/[locale]/(protected)/contributor/schedule/calendar-polri/component/calendar-polri-table.tsx
View File

@ -44,7 +44,7 @@ import { useRouter, useSearchParams } from "next/navigation";
import TablePagination from "@/components/table/table-pagination";
import columns from "./columns";
import {
paginationCalendar,
getCalendarPagination,
paginationSchedule,
} from "@/service/schedule/schedule";
import { CardHeader, CardTitle } from "@/components/ui/card";
@ -120,10 +120,9 @@ const CalendarPolriTable = () => {
async function fetchData() {
try {
const res = await paginationCalendar(
const res = await getCalendarPagination(
showData,
page - 1,
1,
search,
statusFilter
);

35
components/landing-page/left-banner.tsx → components/landing-page/advertisement-placements.tsx
View File

@ -31,34 +31,25 @@ interface Advertisement {
// };
// }
const LeftBanner = () => {
const AdvertisementPlacements = (props: { placement?: string }) => {
const [ads, setAds] = useState<Advertisement[]>([]);
const [loading, setLoading] = useState<boolean>(false);
const [showData, setShowData] = React.useState("10");
const [categories, setCategories] = React.useState<any>();
const [dataTable, setDataTable] = React.useState<any[]>([]);
const [totalData, setTotalData] = React.useState<number>(1);
const [categoryFilter, setCategoryFilter] = React.useState<number[]>([]);
const [statusFilter, setStatusFilter] = React.useState<number[]>([]);
const [page, setPage] = React.useState(1);
const fetchData = async () => {
try {
setLoading(true);
const res = await listDataAdvertisements( page - 1,
showData,
"",
categoryFilter?.sort().join(","),
statusFilter?.sort().join(","));
const res = await listDataAdvertisements(
0,
"3",
""
);
const data = res?.data?.data;
const contentData = data?.content;
contentData.forEach((item: Advertisement, index: number) => {
item.no = index + 1;
});
setAds(contentData);
if (props.placement == "left") {
setAds(contentData.slice(0,2));
} else {
setAds(contentData.slice(2));
}
} catch (error) {
console.error("Error fetching advertisements:", error);
} finally {
@ -74,10 +65,10 @@ const LeftBanner = () => {
<div className="sticky top-0 space-y-4 ml-14">
{loading && <p className="text-sm text-gray-500">Loading...</p>}
{ads.map((ad) => (
<img key={ad.id} src={ad.imageUrl} alt={`Banner ${ad.id}`} width={180} />
<img key={ad.id} src={ad.contentFileUrl} alt={`Banner ${ad.id}`} width={180} />
))}
</div>
);
};
export default LeftBanner;
export default AdvertisementPlacements;

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

@ -1,86 +1,285 @@
import React from "react";
import { getCalendarPagination } from "@/service/schedule/schedule";
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 = () => {
// Get current date
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);
// Month names in Indonesian
const monthNames = [
"Januari", "Februari", "Maret", "April", "Mei", "Juni",
"Juli", "Agustus", "September", "Oktober", "November", "Desember"
];
const fetchData = async () => {
try {
const res = await getCalendarPagination(100, 0);
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]);
}
} catch (error) {
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 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) {
return date.getDate();
}
return null;
} catch {
return null;
}
};
// 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 {
return `${startDay} ${startMonth} - ${endDay} ${endMonth}`;
}
} catch {
return "Tanggal tidak valid";
}
};
// 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 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);
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">
KALENDER ACARA
</h2>
<div className="flex flex-col md:flex-row gap-4">
<div className="w-full md:w-1/2">
<div className="bg-gray-100 dark:bg-zinc-800 p-4 rounded-md ">
<div className="text-center font-semibold mb-2">Mei 2025</div>
<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>
<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">
<div key={d} className="font-medium p-1">
{d}
</div>
))}
{[...Array(35)].map((_, i) => (
{calendarDays?.map((day, index) => (
<div
key={i}
className={`p-1 rounded ${
[6, 7, 15].includes(i) ? "bg-red-600 text-white" : ""
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"
}`}
>
{i >= 2 && i - 1}
{day}
</div>
))}
</div>
</div>
<div className="space-y-4 mt-3">
<div className="flex items-center bg-gray-200 rounded-xl shadow-sm p-2">
<img
src="/images/all-img/calendar1.png"
alt="HUT Polwan"
className="w-24 h-20 object-cover rounded"
/>
<div className="flex justify-between items-center w-full ml-3">
<div className="text-sm font-semibold line-clamp-2">
HUT Polwan ke-76, Kapolri...
</div>
<div className="text-sm font-semibold whitespace-nowrap ml-3">
16 Mei - 16 Mei
</div>
</div>
</div>
<div className="flex items-center bg-gray-200 rounded-xl shadow-sm p-2">
<img
src="/images/all-img/calendar2.png"
alt="Olahraga"
className="w-24 h-20 object-cover rounded"
/>
<div className="flex justify-between items-center w-full ml-3">
<div className="text-sm font-semibold line-clamp-2 uppercase">
Olahraga Bersama Pad...
</div>
<div className="text-sm font-semibold whitespace-nowrap ml-3">
22 Mei - 22 Mei
</div>
{/* Event List */}
<div className="space-y-3 max-h-[230px] overflow-y-auto pr-5">
<h3 className="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-3">
Daftar Acara
</h3>
{events?.length === 0 ? (
<div className="text-center text-gray-500 dark:text-gray-400 py-8">
Tidak ada acara yang tersedia
</div>
</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>
{/* Detail Acara */}
<div className="w-full md:w-1/2 space-y-4">
<div className="bg-gray-100 dark:bg-zinc-800 rounded-md p-2 mt-4">
<img
src="/images/all-img/calendar1.png"
alt="Detail Event"
className="rounded mb-2"
/>
<p className="text-sm font-semibold mb-1">
HUT Polwan ke-76, Kapolri Apresiasi Prestasi yang Diberikan
</p>
<p className="text-xs text-gray-500 mb-1">
Kapolri Jenderal Pol. Listyo Sigit Prabowo memberikan apresiasi
kepada polisi wanita yang berprestasi...
</p>
<a href="#" className="text-xs text-blue-500">
Lihat Selengkapnya
</a>
{/* 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
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">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">
{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">
Bagikan
</button>
</div>
</div>
</div>
) : (
<div className="text-center text-gray-500 dark:text-gray-400 py-8">
Pilih acara untuk melihat detail
</div>
)}
</div>
</div>
</div>
@ -88,4 +287,4 @@ const EventCalender = () => {
);
};
export default EventCalender;
export default EventCalender;

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

@ -12,20 +12,7 @@ import AreaCoverageWorkUnits from "./area-coverage-and-work-units";
import EventCalender from "./event-calender";
import UserSurveyBox from "./survey-box";
import ScrollableContentPolda from "./scrollable-content-polda";
const LeftBanner = () => (
<div className="sticky top-0 space-y-4">
<img src="/images/all-img/kiri1.png" alt="Banner Kiri 1" />
<img src="/images/all-img/kiri2.png" alt="Banner Kiri 2" />
</div>
);
const RightBanner = () => (
<div className="sticky top-0 space-y-4">
<img src="/images/all-img/kanan2.png" alt="Banner Kanan 1" />
<img src="/images/all-img/kanan1.png" alt="Banner Kanan 2" />
</div>
);
import AdvertisementPlacements from "./advertisement-placements";
const SearchSectionPolda = () => {
const [contentType, setContentType] = useState("all");
@ -35,7 +22,7 @@ const SearchSectionPolda = () => {
return (
<div className="flex w-full min-h-screen bg-center bg-cover bg-no-repeat" style={{ backgroundImage: "url('/assets/background.png')" }}>
<div className="hidden xl:block w-[15%] pr-4 py-5 sticky top-[150px] space-y-4 self-start">
<LeftBanner />
<AdvertisementPlacements placement="left"/>
</div>
<div className="w-full xl:w-[70%] px-4 py-8 bg-white">
@ -49,7 +36,7 @@ const SearchSectionPolda = () => {
</div>
<div className="hidden xl:block w-[15%] pl-4 py-5 sticky top-[150px] space-y-4 self-start">
<RightBanner />
<AdvertisementPlacements placement="right"/>
</div>
</div>
);

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

@ -13,20 +13,7 @@ import EventCalender from "./event-calender";
import UserSurveyBox from "./survey-box";
import ScrollableContentPolda from "./scrollable-content-polda";
import ScrollableContentSatker from "./scrollable-content-satker";
const LeftBanner = () => (
<div className="sticky top-0 space-y-4">
<img src="/images/all-img/kiri1.png" alt="Banner Kiri 1" />
<img src="/images/all-img/kiri2.png" alt="Banner Kiri 2" />
</div>
);
const RightBanner = () => (
<div className="sticky top-0 space-y-4">
<img src="/images/all-img/kanan2.png" alt="Banner Kanan 1" />
<img src="/images/all-img/kanan1.png" alt="Banner Kanan 2" />
</div>
);
import AdvertisementPlacements from "./advertisement-placements";
const SearchSectionSatker = () => {
const [contentType, setContentType] = useState("all");
@ -36,7 +23,7 @@ const SearchSectionSatker = () => {
return (
<div className="flex w-full min-h-screen bg-center bg-cover bg-no-repeat" style={{ backgroundImage: "url('/assets/background.png')" }}>
<div className="hidden xl:block w-[15%] pr-4 py-5 sticky top-[150px] space-y-4 self-start">
<LeftBanner />
<AdvertisementPlacements placement="left"/>
</div>
<div className="w-full xl:w-[70%] px-4 py-8 bg-white">
@ -50,7 +37,7 @@ const SearchSectionSatker = () => {
</div>
<div className="hidden xl:block w-[15%] pl-4 py-5 sticky top-[150px] space-y-4 self-start">
<RightBanner />
<AdvertisementPlacements placement="right"/>
</div>
</div>
);

19
components/landing-page/search-section.tsx
View File

@ -18,20 +18,7 @@ import ContentCategory from "./content-category";
import AreaCoverageWorkUnits from "./area-coverage-and-work-units";
import EventCalender from "./event-calender";
import UserSurveyBox from "./survey-box";
const LeftBanner = () => (
<div className="sticky top-0 space-y-4 ml-14">
<img src="/images/all-img/kiri1.png" alt="Banner Kiri 1" width={180} />
<img src="/images/all-img/kiri2.png" alt="Banner Kiri 2" width={180} />
</div>
);
const RightBanner = () => (
<div className="sticky top-0 space-y-4">
<img src="/images/all-img/kanan2.png" alt="Banner Kanan 1" width={180} />
<img src="/images/all-img/kanan1.png" alt="Banner Kanan 2" width={180} />
</div>
);
import AdvertisementPlacements from "./advertisement-placements";
const SearchSection = () => {
const [contentType, setContentType] = useState("all");
@ -44,7 +31,7 @@ const SearchSection = () => {
style={{ backgroundImage: "url('/assets/background.png')" }}
>
<div className="hidden xl:block w-[15%] pr-4 py-5 sticky top-[130px] space-y-4 self-start">
<LeftBanner />
<AdvertisementPlacements placement="left"/>
</div>
<div className="w-full xl:w-[70%] px-4 py-8 bg-white">
@ -58,7 +45,7 @@ const SearchSection = () => {
</div>
<div className="hidden xl:block w-[15%] pl-4 py-5 sticky top-[130px] space-y-4 self-start">
<RightBanner />
<AdvertisementPlacements placement="right" />
</div>
</div>
);

4
service/broadcast/broadcast.ts
View File

@ -20,11 +20,9 @@ export async function listDataAdvertisements(
page: number,
limit: string,
search: string,
categoryFilter: string,
statusFilter: string
) {
const name = search || "";
const url = `advertisements/pagination?title=${name}&enablePage=1&sortBy=createdAt&sort=desc&size=${limit}&page=${page}&typeId=1&categoryId=${categoryFilter}&statusId=${statusFilter}`;
const url = `advertisements/pagination?title=${search}&enablePage=1&sortBy=createdAt&sort=desc&size=${limit}&page=${page}`;
return httpGetInterceptor(url);
}

5
service/schedule/schedule.ts
View File

@ -20,17 +20,16 @@ export async function paginationSchedule(
);
}
export async function paginationCalendar(
export async function getCalendarPagination(
size: any,
page: number,
type: any,
title: string = "",
statusFilter: number[] = []
) {
const statusQuery =
statusFilter.length > 0 ? `&statusId=${statusFilter.join(",")}` : "";
return await httpGetInterceptor(
`calendars/pagination?enablePage=1&scheduleTypeId=${type}&page=${page}&size=${size}&title=${title}${statusQuery}`
`calendars/pagination?enablePage=1&page=${page}&size=${size}&title=${title}${statusQuery}`
);
}