pull main
This commit is contained in:
commit
87aa6c3e34
|
|
@ -230,11 +230,13 @@ export default function AddExpertForm() {
|
|||
};
|
||||
|
||||
const handleAddRow = () => {
|
||||
setPlacementRows((prevRows: any) => [
|
||||
...prevRows,
|
||||
{ index: incrementId, roleId: "", userLevelId: 0 },
|
||||
]);
|
||||
setIncrementId((prevId) => prevId + 1);
|
||||
if (placementRows.length < 2) {
|
||||
setPlacementRows((prevRows) => [
|
||||
...prevRows,
|
||||
{ index: incrementId, roleId: "", userLevelId: 0 },
|
||||
]);
|
||||
setIncrementId((prevId) => prevId + 1);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
|
|
@ -424,7 +426,7 @@ export default function AddExpertForm() {
|
|||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Select
|
||||
{/* <Select
|
||||
onValueChange={(e) =>
|
||||
handleSelectionChange(row.index, "userLevelId", e)
|
||||
}
|
||||
|
|
@ -441,6 +443,20 @@ export default function AddExpertForm() {
|
|||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select> */}
|
||||
<Select
|
||||
onValueChange={(e) =>
|
||||
handleSelectionChange(row.index, "userLevelId", e)
|
||||
}
|
||||
>
|
||||
<FormControl>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Pilih User Level" />
|
||||
</SelectTrigger>
|
||||
</FormControl>
|
||||
<SelectContent>
|
||||
<SelectItem value="216">MABES POLRI</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
{placementRows.length > 1 && (
|
||||
<Button
|
||||
|
|
@ -454,7 +470,12 @@ export default function AddExpertForm() {
|
|||
)}
|
||||
</div>
|
||||
))}
|
||||
<Button type="button" size="md" onClick={() => handleAddRow()}>
|
||||
<Button
|
||||
type="button"
|
||||
size="md"
|
||||
onClick={handleAddRow}
|
||||
disabled={placementRows.length >= 2} // optional: disable button if already 1 row added
|
||||
>
|
||||
Tambah
|
||||
</Button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -154,8 +154,6 @@ const AdvertisementsList = () => {
|
|||
page - 1,
|
||||
showData,
|
||||
"",
|
||||
categoryFilter?.sort().join(","),
|
||||
statusFilter?.sort().join(",")
|
||||
);
|
||||
const data = res?.data?.data;
|
||||
const contentData = data?.content;
|
||||
|
|
|
|||
|
|
@ -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
|
||||
);
|
||||
|
|
|
|||
|
|
@ -159,7 +159,7 @@ const useTableColumns = () => {
|
|||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent className="p-0" align="end">
|
||||
{roleId == 11 && (
|
||||
{(roleId == 11 || roleId == 12) && (
|
||||
<Link href={`/contributor/task-ta/detail/${row.original.id}`}>
|
||||
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
|
||||
<Eye className="w-4 h-4 me-1.5" />
|
||||
|
|
|
|||
|
|
@ -73,7 +73,7 @@ const TaskTaTable = () => {
|
|||
const [columnVisibility, setColumnVisibility] =
|
||||
React.useState<VisibilityState>({});
|
||||
const [rowSelection, setRowSelection] = React.useState({});
|
||||
const [showData, setShowData] = React.useState("50");
|
||||
const [showData, setShowData] = React.useState("10");
|
||||
const [pagination, setPagination] = React.useState<PaginationState>({
|
||||
pageIndex: 0,
|
||||
pageSize: Number(showData),
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -25,7 +25,6 @@ import DatePicker from "react-datepicker";
|
|||
import { id } from "date-fns/locale";
|
||||
import "react-datepicker/dist/react-datepicker.css";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import router from "next/router";
|
||||
import { Controller, useForm } from "react-hook-form";
|
||||
import { date, z } from "zod";
|
||||
import { error, loading } from "@/lib/swal";
|
||||
|
|
@ -51,6 +50,7 @@ import Image from "next/image";
|
|||
import FileUploader from "../shared/file-uploader";
|
||||
import { getCsrfToken } from "@/service/auth";
|
||||
import { Upload } from "tus-js-client";
|
||||
import { useRouter } from "next/navigation";
|
||||
|
||||
const calendarSchema = z.object({
|
||||
title: z.string().min(1, { message: "Judul diperlukan" }),
|
||||
|
|
@ -68,6 +68,7 @@ interface FileUploaded {
|
|||
|
||||
export function CalendarPolriAdd() {
|
||||
const MySwal = withReactContent(Swal);
|
||||
const router = useRouter();
|
||||
const [open, setOpen] = React.useState(false);
|
||||
const t = useTranslations("Schedule");
|
||||
type CalendarSchema = z.infer<typeof calendarSchema>;
|
||||
|
|
@ -212,9 +213,7 @@ export function CalendarPolriAdd() {
|
|||
return false;
|
||||
}
|
||||
|
||||
Cookies.set("scheduleId", response?.data?.data.id, {
|
||||
expires: 1,
|
||||
});
|
||||
const id = response?.data?.data?.id;
|
||||
|
||||
loading();
|
||||
if (imageFiles?.length === 0) {
|
||||
|
|
@ -242,7 +241,7 @@ export function CalendarPolriAdd() {
|
|||
};
|
||||
|
||||
const upload = new Upload(file, {
|
||||
endpoint: `${process.env.NEXT_PUBLIC_API}/agenda-settings/file/upload`,
|
||||
endpoint: `${process.env.NEXT_PUBLIC_API}/calendars/file/upload`,
|
||||
headers: headers,
|
||||
retryDelays: [0, 3000, 6000, 12_000, 24_000],
|
||||
chunkSize: 20_000,
|
||||
|
|
|
|||
|
|
@ -134,7 +134,7 @@ export function TambahIklanModal() {
|
|||
};
|
||||
|
||||
const handlePoldaPolresChange = () => {
|
||||
return Array.from(checkedLevels).join(","); // Mengonversi Set ke string
|
||||
return Array.from(checkedLevels).join(",");
|
||||
};
|
||||
|
||||
const handleUnitChange = (
|
||||
|
|
@ -185,34 +185,30 @@ export function TambahIklanModal() {
|
|||
.filter((key) => unitSelection[key as keyof typeof unitSelection])
|
||||
.map((key) => unitMapping[key as keyof typeof unitMapping])
|
||||
.join(",");
|
||||
const requestData = {
|
||||
title: data.title,
|
||||
placements: selectedPlacement,
|
||||
description: data.description,
|
||||
redirectLink: "https://new.netidhub.com",
|
||||
createdBy: assignmentToString,
|
||||
assignedToLevel: handlePoldaPolresChange(),
|
||||
};
|
||||
|
||||
console.log("Form Data Submitted:", requestData);
|
||||
|
||||
const formMedia = new FormData();
|
||||
formMedia.append("title", data.title);
|
||||
formMedia.append("placements", selectedPlacement);
|
||||
formMedia.append("description", data.description);
|
||||
formMedia.append("redirectLink", "https://new.netidhub.com");
|
||||
formMedia.append("assignedToLevel", handlePoldaPolresChange());
|
||||
formMedia.append("file", imageFiles[0]);
|
||||
|
||||
const response = await postAdvertisements(requestData);
|
||||
console.log("Form Data Submitted:", formMedia);
|
||||
|
||||
loading();
|
||||
const response = await postAdvertisements(formMedia);
|
||||
if (response?.error) {
|
||||
error(response?.message);
|
||||
return false;
|
||||
}
|
||||
close();
|
||||
|
||||
Cookies.set("scheduleId", response?.data?.data.id, {
|
||||
expires: 1,
|
||||
});
|
||||
|
||||
loading();
|
||||
if (imageFiles?.length === 0) {
|
||||
setIsImageUploadFinish(true);
|
||||
}
|
||||
imageFiles?.map(async (item: any, index: number) => {
|
||||
await uploadResumableFile(index, String(id), item, "1", "0");
|
||||
});
|
||||
};
|
||||
|
||||
async function uploadResumableFile(
|
||||
|
|
@ -232,7 +228,7 @@ export function TambahIklanModal() {
|
|||
};
|
||||
|
||||
const upload = new Upload(file, {
|
||||
endpoint: `${process.env.NEXT_PUBLIC_API}/advertisment/file/upload`,
|
||||
endpoint: `${process.env.NEXT_PUBLIC_API}/advertisements/file/upload`,
|
||||
headers: headers,
|
||||
retryDelays: [0, 3000, 6000, 12_000, 24_000],
|
||||
chunkSize: 20_000,
|
||||
|
|
|
|||
|
|
@ -907,7 +907,7 @@ export default function FormTaskTaDetail() {
|
|||
<div className="px-6 py-6">
|
||||
<div className="flex flex-col sm:flex-row lg:flex-row justify-between">
|
||||
<p className="text-lg font-semibold mb-3">{t("detail-task")}</p>
|
||||
<div
|
||||
{/* <div
|
||||
className="flex gap-3"
|
||||
style={
|
||||
detail?.createdBy?.id === Number(userId)
|
||||
|
|
@ -950,7 +950,7 @@ export default function FormTaskTaDetail() {
|
|||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
</div>
|
||||
</div> */}
|
||||
</div>
|
||||
|
||||
<form>
|
||||
|
|
@ -1320,7 +1320,7 @@ export default function FormTaskTaDetail() {
|
|||
</div>
|
||||
</div>
|
||||
<div className="flex flex-wrap lg:flex-row justify-between gap-3 my-3">
|
||||
<div className="lg:px-1">
|
||||
{/* <div className="lg:px-1">
|
||||
{detail?.isDone !== true &&
|
||||
(Number(userLevelNumber) !== 3 ||
|
||||
Number(userLevelNumber) == 2) ? (
|
||||
|
|
@ -1336,9 +1336,9 @@ export default function FormTaskTaDetail() {
|
|||
) : (
|
||||
""
|
||||
)}
|
||||
</div>
|
||||
</div> */}
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<div className="">
|
||||
{/* <div className="">
|
||||
<Button
|
||||
type="button"
|
||||
color="primary"
|
||||
|
|
@ -1347,8 +1347,8 @@ export default function FormTaskTaDetail() {
|
|||
>
|
||||
Beri Tanggapan
|
||||
</Button>
|
||||
</div>
|
||||
<div className="">
|
||||
</div> */}
|
||||
{/* <div className="">
|
||||
<Button
|
||||
type="button"
|
||||
className="btn btn-primary lg:mx-3"
|
||||
|
|
@ -1364,9 +1364,9 @@ export default function FormTaskTaDetail() {
|
|||
>
|
||||
Terima Tugas
|
||||
</Button>
|
||||
</div>
|
||||
</div> */}
|
||||
<div
|
||||
className="task-response w-100 lg:px-3 "
|
||||
className="task-response w-100 lg:px-3"
|
||||
// style={
|
||||
// Number(detail?.createdBy?.id) == Number(userId)
|
||||
// ? {}
|
||||
|
|
@ -1384,7 +1384,7 @@ export default function FormTaskTaDetail() {
|
|||
if (!isTableResult) fetchAllData(); // Panggil API saat tombol diklik
|
||||
}}
|
||||
>
|
||||
Hasil Upload {Number(userId)}
|
||||
Hasil Upload
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1406,7 +1406,7 @@ export default function FormTaskTaDetail() {
|
|||
/>
|
||||
</InputGroup>
|
||||
</div>
|
||||
<Dialog>
|
||||
{/* <Dialog>
|
||||
<DialogTrigger asChild>
|
||||
<Button variant="outline" size="md" color="primary">
|
||||
Filter Polda/Polres
|
||||
|
|
@ -1486,7 +1486,7 @@ export default function FormTaskTaDetail() {
|
|||
))}
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</Dialog> */}
|
||||
</div>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="min-w-full border-collapse border border-gray-300">
|
||||
|
|
|
|||
|
|
@ -157,7 +157,7 @@ export default function FormTaskTa() {
|
|||
const [isAudioUploadFinish, setIsAudioUploadFinish] = useState(false);
|
||||
const [voiceNoteLink, setVoiceNoteLink] = useState("");
|
||||
const [date, setDate] = React.useState<DateRange | undefined>({
|
||||
from: new Date(2024, 0, 1),
|
||||
from: new Date(),
|
||||
});
|
||||
|
||||
const [platformTypeVisible, setPlatformTypeVisible] = useState(false);
|
||||
|
|
@ -400,7 +400,7 @@ export default function FormTaskTa() {
|
|||
fileTypeId: string,
|
||||
duration: string
|
||||
) {
|
||||
console.log(idx, id, file, fileTypeId, duration);
|
||||
console.log("Tus Upload : ", idx, id, file, fileTypeId, duration);
|
||||
|
||||
const resCsrf = await getCsrfToken();
|
||||
const csrfToken = resCsrf?.data?.token;
|
||||
|
|
@ -631,7 +631,10 @@ export default function FormTaskTa() {
|
|||
}
|
||||
className="mr-3"
|
||||
/>
|
||||
{expert.fullname}
|
||||
<div className="flex flex-col gap-2">
|
||||
<div className="font-bold">{expert.fullname}</div>
|
||||
<div className="italic">({expert.username})</div>
|
||||
</div>
|
||||
</Label>
|
||||
</div>
|
||||
))}
|
||||
|
|
@ -639,6 +642,36 @@ export default function FormTaskTa() {
|
|||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
{checkedLevels.size > 0 && (
|
||||
<div className="mt-3">
|
||||
<Label className="text-sm text-gray-600 mb-2 block">
|
||||
Tenaga Ahli Terpilih ({checkedLevels.size})
|
||||
</Label>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{Array.from(checkedLevels).map((expertId) => {
|
||||
const expert = listExpert?.find((exp: any) => exp.id === expertId);
|
||||
return expert ? (
|
||||
<div
|
||||
key={expert.id}
|
||||
className="inline-flex items-center gap-2 bg-blue-100 text-blue-800 text-sm font-medium px-3 py-1.5 rounded-full border border-blue-200"
|
||||
>
|
||||
<span>{expert.fullname}</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleCheckboxChange(expert.id)}
|
||||
className="ml-1 text-blue-600 hover:text-blue-800 hover:bg-blue-200 rounded-full p-0.5 transition-colors"
|
||||
title="Remove expert"
|
||||
>
|
||||
<svg className="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clipRule="evenodd" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
) : null;
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="mt-5 space-y-2">
|
||||
<Label>{t("description")}</Label>
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
"4",
|
||||
""
|
||||
);
|
||||
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 {
|
||||
|
|
@ -71,13 +62,13 @@ const LeftBanner = () => {
|
|||
}, []);
|
||||
|
||||
return (
|
||||
<div className="sticky top-0 space-y-4 ml-14">
|
||||
<div className={`sticky top-0 space-y-4 ${props.placement == "left" ? "ml-14" : "mr-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} />
|
||||
{ads?.map((ad) => (
|
||||
<img key={ad.id} src={ad.contentFileUrl} alt={`Banner ${ad.id}`} className="w-full" />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default LeftBanner;
|
||||
export default AdvertisementPlacements;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -690,7 +690,7 @@
|
|||
"type-task": "Tipe Penugasan",
|
||||
"category-task": "Kategori Penugasan",
|
||||
"areas-expertise": "Bidang Keahlian",
|
||||
"choose-expert": "Pilih Tenaga Ahli",
|
||||
"choose-expert": "Tenaga Ahli",
|
||||
"code": "Kode",
|
||||
"start-date": "Tanggal Mulai",
|
||||
"end-date": "Tanggal Selesai",
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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}`
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -132,5 +132,8 @@ export async function getTagsByParentId(parentId: string | number) {
|
|||
|
||||
export async function postAdvertisements(data: any) {
|
||||
const url = "advertisements";
|
||||
return httpPostInterceptor(url, data);
|
||||
const headers = {
|
||||
"Content-Type": "multipart/form-data",
|
||||
};
|
||||
return httpPostInterceptor(url, data, headers);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -146,7 +146,7 @@ export async function listTaskTa(
|
|||
}
|
||||
|
||||
return httpGetInterceptor(
|
||||
`assignment-expert/pagination?enablePage=1&size=${size}&page=${page}&title=${title}&taskType=${taskType}&uniqueCode=${code}&createdAt=${createdAt}${statusQuery}`
|
||||
`assignment-expert/pagination?enablePage=1&size=${size}&page=${page}&title=${title}&assignmentType=${taskType}&uniqueCode=${code}&createdAt=${createdAt}${statusQuery}`
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue