Merge branch 'main' of https://gitlab.com/hanifsalafi/mediahub_redesign into dev-rama
This commit is contained in:
Rama Priyanto
commit
1c33c0cdfe
|
|
@ -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),
|
||||
|
|
|
|||
|
|
@ -43,5 +43,5 @@ export async function generateMetadata({ params }: any): Promise<Metadata> {
|
|||
}
|
||||
|
||||
export default async function DetailInfo({ params }: Props) {
|
||||
return <DetailImage />;
|
||||
return <div className="w-full"><DetailImage /></div>;
|
||||
}
|
||||
|
|
|
|||
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>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,74 @@
|
|||
import { listDataAdvertisements } from "@/service/broadcast/broadcast";
|
||||
import { useEffect, useState } from "react";
|
||||
import * as React from "react";
|
||||
|
||||
interface Advertisement {
|
||||
id: string;
|
||||
imageUrl: string;
|
||||
[key: string]: any; // Tambahan kalau ada properti lain
|
||||
}
|
||||
|
||||
// // Simulasi fungsi API (replace dengan yang asli)
|
||||
// async function listDataAdvertisements(
|
||||
// page: number,
|
||||
// size: number,
|
||||
// search: string,
|
||||
// category: string,
|
||||
// status: string
|
||||
// ) {
|
||||
// // contoh struktur response dummy
|
||||
// return {
|
||||
// data: {
|
||||
// data: {
|
||||
// content: [
|
||||
// { id: "1", imageUrl: "/images/all-img/kiri1.png" },
|
||||
// { id: "2", imageUrl: "/images/all-img/kiri2.png" },
|
||||
// ],
|
||||
// totalElements: 2,
|
||||
// totalPages: 1,
|
||||
// },
|
||||
// },
|
||||
// };
|
||||
// }
|
||||
|
||||
const AdvertisementPlacements = (props: { placement?: string }) => {
|
||||
const [ads, setAds] = useState<Advertisement[]>([]);
|
||||
const [loading, setLoading] = useState<boolean>(false);
|
||||
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const res = await listDataAdvertisements(
|
||||
0,
|
||||
"4",
|
||||
""
|
||||
);
|
||||
const data = res?.data?.data;
|
||||
const contentData = data?.content;
|
||||
if (props.placement == "left") {
|
||||
setAds(contentData.slice(0,2));
|
||||
} else {
|
||||
setAds(contentData.slice(2));
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error fetching advertisements:", error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchData();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<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.contentFileUrl} alt={`Banner ${ad.id}`} className="w-full" />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AdvertisementPlacements;
|
||||
|
|
@ -13,7 +13,7 @@ const regions = [
|
|||
{
|
||||
name: "Polda Bangka Belitung",
|
||||
slug: "bangka-belitung",
|
||||
logo: "/logo/polda/polda-bangkabelitung.png",
|
||||
logo: "/logo/polda/polda-bangka-belitung.png",
|
||||
},
|
||||
{
|
||||
name: "Polda Banten",
|
||||
|
|
@ -27,7 +27,7 @@ const regions = [
|
|||
},
|
||||
{
|
||||
name: "Polda DIY",
|
||||
slug: "di-yogyakarta",
|
||||
slug: "jogja",
|
||||
logo: "/logo/polda/polda-jogja.png",
|
||||
},
|
||||
{
|
||||
|
|
@ -39,17 +39,17 @@ const regions = [
|
|||
{
|
||||
name: "Polda Jawa Barat",
|
||||
slug: "jawa-barat",
|
||||
logo: "/logo/polda/polda-jawabarat.png",
|
||||
logo: "/logo/polda/polda-jawa-barat.png",
|
||||
},
|
||||
{
|
||||
name: "Polda Jawa Tengah",
|
||||
slug: "jawa-tengah",
|
||||
logo: "/logo/polda/polda-jawatengah.png",
|
||||
logo: "/logo/polda/polda-jawa-tengah.png",
|
||||
},
|
||||
{
|
||||
name: "Polda Jawa Timur",
|
||||
slug: "jawa-timur",
|
||||
logo: "/logo/polda/polda-jawatimur.png",
|
||||
logo: "/logo/polda/polda-jawa-timur.png",
|
||||
},
|
||||
{
|
||||
name: "Polda Kalimantan Barat",
|
||||
|
|
@ -79,7 +79,7 @@ const regions = [
|
|||
{
|
||||
name: "Polda Kepulauan Riau",
|
||||
slug: "kepulauan-riau",
|
||||
logo: "/logo/polda/polda-kepri.png",
|
||||
logo: "/logo/polda/polda-kepulauan-riau.png",
|
||||
},
|
||||
{
|
||||
name: "Polda Lampung",
|
||||
|
|
@ -99,7 +99,7 @@ const regions = [
|
|||
{
|
||||
name: "Polda Metro Jaya",
|
||||
slug: "metro-jaya",
|
||||
logo: "/logo/polda/polda-metro.png",
|
||||
logo: "/logo/polda/polda-metro-jaya.png",
|
||||
},
|
||||
{
|
||||
name: "Polda NTB",
|
||||
|
|
@ -121,12 +121,12 @@ const regions = [
|
|||
{
|
||||
name: "Polda Sulawesi Barat",
|
||||
slug: "sulawesi-barat",
|
||||
logo: "/logo/polda/polda-sulbar.png",
|
||||
logo: "/logo/polda/polda-sulawesi-barat.png",
|
||||
},
|
||||
{
|
||||
name: "Polda Sulawesi Selatan",
|
||||
slug: "sulawesi-selatan",
|
||||
logo: "/logo/polda/polda-sulsel.png",
|
||||
logo: "/logo/polda/polda-sulawesi-selatan.png",
|
||||
},
|
||||
{
|
||||
name: "Polda Sulawesi Tengah",
|
||||
|
|
@ -151,12 +151,12 @@ const regions = [
|
|||
{
|
||||
name: "Polda Sumatera Selatan",
|
||||
slug: "sumatera-selatan",
|
||||
logo: "/logo/polda/polda-sumsel.png",
|
||||
logo: "/logo/polda/polda-sumatera-selatan.png",
|
||||
},
|
||||
{
|
||||
name: "Polda Sumatera Utara",
|
||||
slug: "sumatera-utara",
|
||||
logo: "/logo/polda/polda-sumut.png",
|
||||
logo: "/logo/polda/polda-sumatera-utara.png",
|
||||
},
|
||||
// {
|
||||
// name: "Satuan Kerja POLRI",
|
||||
|
|
|
|||
|
|
@ -18,13 +18,13 @@ const regions = [
|
|||
{ name: "STAMARENA POLRI", slug: "srena", logo: "/logo/satker/SRENA.png" },
|
||||
{ name: "SSDM POLRI", slug: "ssdm", logo: "/logo/satker/SSDM.png" },
|
||||
{ name: "SLOG POLRI", slug: "slog", logo: "/logo/satker/SLOG.png" },
|
||||
{ name: "SAHLI KAPOLRI", slug: "sahli-kapolri", logo: "/logo/satker/STAFAHLI.png" },
|
||||
{ name: "SAHLI KAPOLRI", slug: "stafahli", logo: "/logo/satker/STAFAHLI.png" },
|
||||
{ name: "DIVPROPRAM POLRI", slug: "divpropram", logo: "/logo/satker/DIVPROPAM.png" },
|
||||
{ name: "DIVKUM", slug: "divkum", logo: "/assets/satker/divkum.png" },
|
||||
{ name: "DIVHUBINTER POLRI", slug: "divhubinter", logo: "/logo/satker/DIVHUBINTER.png" },
|
||||
{ name: "DIVTIK POLRI", slug: "div-tik", logo: "/logo/satker/DIV-TIK.png" },
|
||||
{ name: "KORLANTAS POLRI", slug: "korlantas", logo: "/logo/satker/KORLANTAS.png" },
|
||||
{ name: "DENSUS 88 POLRI", slug: "densus-88", logo: "/logo/satker/DENSUS88.png" },
|
||||
{ name: "DENSUS 88 POLRI", slug: "densus-88", logo: "/logo/satker/DENSUS-88.png" },
|
||||
{ name: "PUSDOKKES POLRI", slug: "pusdokkes", logo: "/logo/satker/PUSDOKKES.png" },
|
||||
{ name: "PUSLITBANG POLRI", slug: "puslitbang", logo: "/logo/satker/PUSLITBANG.png" },
|
||||
{ name: "PUSKEU POLRI", slug: "puskeu", logo: "/logo/satker/PUSKEU.png" },
|
||||
|
|
@ -47,10 +47,10 @@ const regions = [
|
|||
{ name: "STIK LEMDIKLAT POLRI", slug: "stik-ptik", logo: "/logo/satker/STIK-PTIK.png" },
|
||||
{ name: "AKPOL LEMDIKLAT POLRI", slug: "akpol", logo: "/logo/satker/AKPOL.png" },
|
||||
{ name: "SESPIM LEMDIKLAT POLRI", slug: "sespim-polri", logo: "/logo/satker/SESPIM-POLRI.png" },
|
||||
{ name: "SETUKPA LEMDIKLAT POLRI", slug: "setupa-polri", logo: "/assets/satker/setupa-polri.png" },
|
||||
{ name: "SEPOLWAN LEMDIKLAT POLRI", slug: "sepolwan-polri", logo: "/assets/satker/sepolwan.png" },
|
||||
{ name: "SEBASA LEMDIKLAT POLRI", slug: "sebasa-polri", logo: "/assets/satker/sebasa.png" },
|
||||
{ name: "RUMKIT BHAYANGKARA TK I", slug: "rumkit-bhayangkara", logo: "/assets/satker/rumkit.png" },
|
||||
{ name: "SETUKPA LEMDIKLAT POLRI", slug: "setupa-polri", logo: "/logo/satker/SETUPA-POLRI.png" },
|
||||
{ name: "SEPOLWAN LEMDIKLAT POLRI", slug: "sepolwan-polri", logo: "/logo/satker/SEPOLWAN-POLRI.png" },
|
||||
{ name: "SEBASA LEMDIKLAT POLRI", slug: "sebasa-polri", logo: "/logo/satker/SEBASA-POLRI.png" },
|
||||
{ name: "RUMKIT BHAYANGKARA TK I", slug: "rumkit-bhayangkara", logo: "/logo/satker/RUMKIT-BHAYANGKARA.png" },
|
||||
{ name: "POLAIR", slug: "polair", logo: "/logo/satker/POLAIR.png" },
|
||||
{ name: "POLUDARA", slug: "poludara", logo: "/logo/satker/POLUDARA.png" },
|
||||
{ name: "PUSINAFIS", slug: "pusinafis", logo: "/logo/satker/PUSINAFIS.png" },
|
||||
|
|
@ -91,7 +91,6 @@ const Division = () => {
|
|||
|
||||
return (
|
||||
<div className="mx-auto px-4 w-full">
|
||||
{/* Header */}
|
||||
{/* <Reveal> */}
|
||||
{/* <h2 className="text-center text-2xl font-bold text-gray-800 dark:text-white mb-3">
|
||||
{pathname?.split("/")[1] == "in" ? (
|
||||
|
|
|
|||
|
|
@ -0,0 +1,22 @@
|
|||
"use client";
|
||||
|
||||
import Image from "next/image";
|
||||
import { usePathname } from "next/navigation";
|
||||
|
||||
export const DynamicLogoSatker = () => {
|
||||
const pathname = usePathname();
|
||||
const satker = pathname?.split("/")[3];
|
||||
console.log("satker", satker?.toUpperCase())
|
||||
|
||||
return <div className="p-2">
|
||||
{pathname?.includes("/satker") && (
|
||||
<Image
|
||||
src={`/logo/satker/${satker?.toUpperCase()}.png`}
|
||||
alt="Logo"
|
||||
width={1920}
|
||||
height={1080}
|
||||
className="object-contain h-[150px] w-[50px]"
|
||||
/>
|
||||
)}
|
||||
</div>;
|
||||
};
|
||||
|
|
@ -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;
|
||||
|
|
@ -0,0 +1,143 @@
|
|||
import { useParams, usePathname, useRouter } from "next/navigation";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { Icon } from "@iconify/react/dist/iconify.js";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||
|
||||
const WelcomePoldaKaltara = () => {
|
||||
const router = useRouter();
|
||||
const asPath: any = usePathname();
|
||||
const params = useParams();
|
||||
const poldaName: any = params?.polda_name;
|
||||
const [categorySelect, setCategorySelect] = useState("0");
|
||||
const t = useTranslations("LandingPage");
|
||||
const [contentType, setContentType] = useState("all");
|
||||
const [search, setSearch] = useState("");
|
||||
|
||||
useEffect(() => {
|
||||
function initState() {
|
||||
console.log(categorySelect);
|
||||
}
|
||||
|
||||
initState();
|
||||
}, [categorySelect]);
|
||||
|
||||
return (
|
||||
<section className="w-full py-8 px-4">
|
||||
<div className="">
|
||||
{/* Heading */}
|
||||
<h1 className="text-2xl md:text-3xl font-bold text-gray-800 dark:text-white">
|
||||
<span className="text-[#bb3523] dark:text-white">{t("welcome")} Di Polda</span> <span className="capitalize text-[#bb3523] dark:text-white">{poldaName.replace("-", " ")}</span>
|
||||
</h1>
|
||||
<div className="w-[80%] h-1 bg-[#bb3523] mx-auto mt-2"></div>
|
||||
<p className="text-sm md:text-base text-gray-500 dark:text-gray-100 mt-4">
|
||||
{t("polda")} <span className="capitalize">{poldaName.replace("-", " ")}</span>
|
||||
</p>
|
||||
|
||||
{/* Search Form */}
|
||||
{/* <div className="mt-6 flex flex-col md:flex-row justify-center gap-4"> */}
|
||||
{/* Dropdown */}
|
||||
{/* <div className="flex flex-row items-center w-full rounded-lg gap-2 overflow-hidden">
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<a className="text-black dark:text-white flex flex-row justify-center items-center ml-5 cursor-pointer">
|
||||
<svg className="mx-2" width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M20 7.5H5C4.6023 7.5004 4.221 7.65856 3.93978 7.93978C3.65856 8.221 3.5004 8.6023 3.5 9V19.5C3.5004 19.8977 3.65856 20.279 3.93978 20.5602C4.221 20.8414 4.6023 20.9996 5 21H20C20.3977 20.9996 20.779 20.8414 21.0602 20.5602C21.3414 20.279 21.4996 19.8977 21.5 19.5V9C21.4996 8.6023 21.3414 8.221 21.0602 7.93978C20.779 7.65856 20.3977 7.5004 20 7.5ZM10.25 17.25V11.25L15.5 14.25L10.25 17.25ZM5 4.5H20V6H5V4.5ZM6.5 1.5H18.5V3H6.5V1.5Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
{t("content")}
|
||||
<svg className="flex items-center justify-center" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
|
||||
<path fill="currentColor" fill-rule="evenodd" d="m6 7l6 6l6-6l2 2l-8 8l-8-8z" />
|
||||
</svg>
|
||||
</a>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end" className="p-0 rounded-md overflow-hidden">
|
||||
<DropdownMenuItem className="flex items-center gap-1.5 p-2 border-b text-default-600 group focus:bg-default focus:text-primary-foreground rounded-none group">
|
||||
<span className="text-default-700c flex flex-row justify-center items-center group-hover:text-primary-foreground">
|
||||
<FiYoutube className="mr-2" />
|
||||
{t("video")}
|
||||
</span>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem className="flex items-center gap-1.5 p-2 border-b text-default-600 group focus:bg-default focus:text-primary-foreground rounded-none group">
|
||||
<span className="text-default-700 flex flex-row justify-center items-center group-hover:text-primary-foreground">
|
||||
<FiMusic className="mr-2" />
|
||||
{t("audio")}
|
||||
</span>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem className="flex items-center gap-1.5 p-2 border-b text-default-600 group focus:bg-default focus:text-primary-foreground rounded-none group">
|
||||
<span className="text-default-700 flex flex-row justify-center items-center group-hover:text-primary-foreground">
|
||||
<FiImage className="mr-2" />
|
||||
{t("image")}
|
||||
</span>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem className="flex items-center gap-1.5 p-2 border-b text-default-600 group focus:bg-default focus:text-primary-foreground rounded-none group">
|
||||
<span className="text-default-700 flex flex-row justify-center items-center group-hover:text-primary-foreground">
|
||||
<FiFile className="mr-2" />
|
||||
{t("text")}
|
||||
</span>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
<div className="flex items-center flex-1 border border-gray-300 rounded-lg overflow-hidden">
|
||||
<span className="material-icons text-black dark:text-white px-4">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="m19.6 21l-6.3-6.3q-.75.6-1.725.95T9.5 16q-2.725 0-4.612-1.888T3 9.5t1.888-4.612T9.5 3t4.613 1.888T16 9.5q0 1.1-.35 2.075T14.7 13.3l6.3 6.3zM9.5 14q1.875 0 3.188-1.312T14 9.5t-1.312-3.187T9.5 5T6.313 6.313T5 9.5t1.313 3.188T9.5 14"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<Input type="text" placeholder={t("search")} className="w-full py-2 px-2 text-sm text-gray-700 dark:text-gray-100 focus:outline-none" />
|
||||
</div>
|
||||
</div> */}
|
||||
|
||||
{/* Button */}
|
||||
{/* <button className="flex justify-center items-center px-6 w-full lg:w-[20%] py-2 bg-[#bb3523] gap-2 text-white rounded-lg hover:bg-red-700">
|
||||
{t("searchCoverage")} <Icon icon="ri:arrow-right-s-line" fontSize={20} />
|
||||
</button> */}
|
||||
{/* </div> */}
|
||||
|
||||
<div className="mt-6 flex flex-col md:flex-row justify-center gap-4">
|
||||
{/* Dropdown */}
|
||||
<div className="flex flex-row items-center w-full rounded-lg gap-2 overflow-hidden">
|
||||
<Select value={contentType} onValueChange={setContentType}>
|
||||
<SelectTrigger className="w-[180px]">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectGroup>
|
||||
<SelectItem value="all">{t("allContent")}</SelectItem>
|
||||
<SelectItem value="image">{t("image")}</SelectItem>
|
||||
<SelectItem value="video">{t("video")}</SelectItem>
|
||||
<SelectItem value="document">{t("text")}</SelectItem>
|
||||
<SelectItem value="audio">{t("audio")}</SelectItem>
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<div className="flex items-center flex-1 border border-gray-300 rounded-lg overflow-hidden">
|
||||
<span className="material-icons text-black dark:text-white px-4">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="m19.6 21l-6.3-6.3q-.75.6-1.725.95T9.5 16q-2.725 0-4.612-1.888T3 9.5t1.888-4.612T9.5 3t4.613 1.888T16 9.5q0 1.1-.35 2.075T14.7 13.3l6.3 6.3zM9.5 14q1.875 0 3.188-1.312T14 9.5t-1.312-3.187T9.5 5T6.313 6.313T5 9.5t1.313 3.188T9.5 14"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<input type="text" placeholder={t("search")} className="w-full py-2 px-2 text-sm text-gray-700 dark:text-gray-100 focus:outline-none" onChange={(e) => setSearch(e.target.value)} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Search Input */}
|
||||
<button onClick={() => router.push(`/${contentType}/filter?title=${search}`)} className="flex justify-center items-center px-6 w-full lg:w-[20%] py-2 bg-[#bb3523] gap-2 text-white rounded-lg hover:bg-red-700">
|
||||
{t("searchCoverage")}
|
||||
<Icon icon="ri:arrow-right-s-line" fontSize={20} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default WelcomePoldaKaltara;
|
||||
|
|
@ -23,6 +23,7 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
|||
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
|
||||
import PoldaLogo from "./polda-logo";
|
||||
import { DynamicLogoPolda } from "./dynamic-logo-polda";
|
||||
import { DynamicLogoSatker } from "./dynamic-logo-satker";
|
||||
|
||||
type Detail = {
|
||||
id: number;
|
||||
|
|
@ -162,7 +163,7 @@ const Navbar = () => {
|
|||
<Link href={prefixPath} className="flex items-center">
|
||||
<Image src="/assets/mediahub-logo.gif" alt="Media Hub Logo" width={2560} height={1440} className=" w-[200px] h-full shrink-0 object-contain" />
|
||||
</Link>
|
||||
<DynamicLogoPolda />
|
||||
<DynamicLogoPolda /> <DynamicLogoSatker />
|
||||
{/* Nav Menu */}
|
||||
<div className="hidden custom-lg-button:flex items-center gap-5">
|
||||
<NavigationMenu>
|
||||
|
|
|
|||
|
|
@ -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,21 +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";
|
||||
import ScrollableContentPolda from "./scrollable-content-polda";
|
||||
|
||||
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");
|
||||
|
|
@ -45,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">
|
||||
|
|
@ -59,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>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ const WelcomePolda = () => {
|
|||
}, [categorySelect]);
|
||||
|
||||
return (
|
||||
<section className="w-full py-8 px-4 ">
|
||||
<section className="w-full py-8 px-4">
|
||||
<div className="">
|
||||
{/* Heading */}
|
||||
<h1 className="text-2xl md:text-3xl font-bold text-gray-800 dark:text-white">
|
||||
|
|
|
|||
|
|
@ -513,29 +513,29 @@ const DetailImage = (data: any) => {
|
|||
|
||||
return (
|
||||
<>
|
||||
<div className="min-h-screen px-4 md:px-24 py-4">
|
||||
<div className="rounded-md overflow-hidden md:flex">
|
||||
<div className="w-full max-w-screen-xl mx-auto px-4 py-4">
|
||||
<div className="rounded-md overflow-hidden md:flex flex-row justify-center">
|
||||
{/* Bagian Kiri */}
|
||||
<div className="md:w-3/4">
|
||||
<div className="">
|
||||
{/* Gambar Besar */}
|
||||
{isLoading ? (
|
||||
<div className="relative">
|
||||
<Skeleton className="rounded-lg h-[300px] w-screen lg:h-[600px] lg:w-[900px]" />
|
||||
</div>
|
||||
) : (
|
||||
<div className="relative">
|
||||
<Image
|
||||
placeholder={`data:image/svg+xml;base64,${toBase64(
|
||||
shimmer(700, 475)
|
||||
)}`}
|
||||
width={2560}
|
||||
height={1440}
|
||||
src={detailDataImage?.files[selectedImage]?.url}
|
||||
alt="Main"
|
||||
className="rounded-lg w-auto h-fit"
|
||||
/>
|
||||
<div className="absolute top-4 left-4"></div>
|
||||
</div>
|
||||
<div className="relative self-end ml-auto">
|
||||
<Image
|
||||
placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
|
||||
width={2560}
|
||||
height={1440}
|
||||
src={detailDataImage?.files[selectedImage]?.url}
|
||||
alt="Main"
|
||||
className="rounded-md w-full h-[670px] object-contain"
|
||||
/>
|
||||
|
||||
<div className="absolute top-4 right-4"></div>
|
||||
</div>
|
||||
|
||||
)}
|
||||
|
||||
{/* Gambar bawah Kecil */}
|
||||
|
|
@ -616,7 +616,7 @@ const DetailImage = (data: any) => {
|
|||
</div>
|
||||
|
||||
{/* Bagian Kanan */}
|
||||
<div className="md:w-1/4 p-4 bg-[#f7f7f7] dark:bg-slate-600 h-fit rounded-lg mx-4">
|
||||
<div className="p-4 bg-[#f7f7f7] dark:bg-slate-600 h-fit rounded-lg mx-4">
|
||||
{isSaved ? (
|
||||
<a
|
||||
onClick={() => handleDeleteWishlist()}
|
||||
|
|
@ -1135,7 +1135,7 @@ const DetailImage = (data: any) => {
|
|||
</div>
|
||||
|
||||
{/* Konten Serupa */}
|
||||
<div className="">
|
||||
<div className="px-4 lg:px-[300px]">
|
||||
<NewContent group="mabes" type={"similar"} />
|
||||
</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",
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 116 KiB After Width: | Height: | Size: 116 KiB |
|
Before Width: | Height: | Size: 392 KiB After Width: | Height: | Size: 392 KiB |
|
Before Width: | Height: | Size: 268 KiB After Width: | Height: | Size: 268 KiB |
|
Before Width: | Height: | Size: 64 KiB After Width: | Height: | Size: 64 KiB |
|
Before Width: | Height: | Size: 50 KiB After Width: | Height: | Size: 50 KiB |
|
Before Width: | Height: | Size: 33 KiB After Width: | Height: | Size: 33 KiB |
|
Before Width: | Height: | Size: 44 KiB After Width: | Height: | Size: 44 KiB |
|
Before Width: | Height: | Size: 61 KiB After Width: | Height: | Size: 61 KiB |
|
Before Width: | Height: | Size: 37 KiB After Width: | Height: | Size: 37 KiB |
|
Before Width: | Height: | Size: 57 KiB After Width: | Height: | Size: 57 KiB |
|
Before Width: | Height: | Size: 42 KiB After Width: | Height: | Size: 42 KiB |
|
Before Width: | Height: | Size: 56 KiB After Width: | Height: | Size: 56 KiB |
|
Before Width: | Height: | Size: 57 KiB After Width: | Height: | Size: 57 KiB |
|
Before Width: | Height: | Size: 61 KiB After Width: | Height: | Size: 61 KiB |
|
Before Width: | Height: | Size: 67 KiB After Width: | Height: | Size: 67 KiB |
|
Before Width: | Height: | Size: 42 KiB After Width: | Height: | Size: 42 KiB |
|
Before Width: | Height: | Size: 48 KiB After Width: | Height: | Size: 48 KiB |
|
Before Width: | Height: | Size: 76 KiB After Width: | Height: | Size: 76 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 116 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 392 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 268 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.3 KiB |
|
|
@ -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