merge main
This commit is contained in:
Rama Priyanto
commit
6657edeee9
|
|
@ -102,23 +102,31 @@ const columns: ColumnDef<any>[] = [
|
|||
},
|
||||
|
||||
{
|
||||
accessorKey: "isDone",
|
||||
accessorKey: "statusName",
|
||||
header: "Status",
|
||||
cell: ({ row }) => {
|
||||
const isDone = row.getValue<boolean>("isDone");
|
||||
const statusColors: Record<string, string> = {
|
||||
diterima: "bg-green-100 text-green-600",
|
||||
"menunggu review": "bg-orange-100 text-orange-600",
|
||||
};
|
||||
|
||||
// Mengambil `statusName` dari data API
|
||||
const status = row.getValue("statusName") as string;
|
||||
const statusName = status?.toLocaleLowerCase(); // Ubah ke huruf kecil
|
||||
|
||||
// Gunakan `statusName` untuk pencocokan
|
||||
const statusStyles =
|
||||
statusColors[statusName] || "bg-gray-100 text-gray-600";
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Button
|
||||
size="sm"
|
||||
color="success"
|
||||
variant="outline"
|
||||
className={` btn btn-sm ${
|
||||
isDone ? "btn-outline-success" : "btn-outline-primary"
|
||||
} pill-btn ml-1`}
|
||||
>
|
||||
{isDone ? "Selesai" : "Aktif"}
|
||||
</Button>
|
||||
</div>
|
||||
<Badge
|
||||
className={cn(
|
||||
"rounded-full px-5 w-full whitespace-nowrap",
|
||||
statusStyles
|
||||
)}
|
||||
>
|
||||
{status} {/* Tetap tampilkan nilai asli */}
|
||||
</Badge>
|
||||
);
|
||||
},
|
||||
},
|
||||
|
|
|
|||
|
|
@ -0,0 +1,21 @@
|
|||
"use client";
|
||||
|
||||
import ContentCategory from "@/components/landing-page/content-category";
|
||||
import HeaderBannerSatker from "@/components/landing-page/header-banner-satker";
|
||||
import NewContent from "@/components/landing-page/new-content";
|
||||
import WelcomeSatker from "@/components/landing-page/welcome-satker";
|
||||
import React from "react";
|
||||
|
||||
const page = () => {
|
||||
return (
|
||||
<div>
|
||||
<HeaderBannerSatker />
|
||||
<WelcomeSatker />
|
||||
<NewContent type="latest" />
|
||||
<NewContent type="popular" />
|
||||
<ContentCategory />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default page;
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
import LayoutProvider from "@/providers/layout.provider";
|
||||
import LayoutContentProvider from "@/providers/content.provider";
|
||||
import DashCodeSidebar from "@/components/partials/sidebar";
|
||||
import DashCodeFooter from "@/components/partials/footer";
|
||||
import ThemeCustomize from "@/components/partials/customizer";
|
||||
import DashCodeHeader from "@/components/partials/header";
|
||||
|
||||
import { redirect } from "@/components/navigation";
|
||||
import Footer from "@/components/landing-page/footer";
|
||||
import Navbar from "@/components/landing-page/navbar";
|
||||
|
||||
const layout = async ({ children }: { children: React.ReactNode }) => {
|
||||
return (
|
||||
<>
|
||||
<Navbar />
|
||||
{children}
|
||||
<Footer />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default layout;
|
||||
|
|
@ -375,6 +375,18 @@ export default function FormImageDetail() {
|
|||
return false;
|
||||
};
|
||||
|
||||
const submitApprovalSuccesss = () => {
|
||||
MySwal.fire({
|
||||
title: "Sukses",
|
||||
text: "Data berhasil disimpan.",
|
||||
icon: "success",
|
||||
confirmButtonColor: "#3085d6",
|
||||
confirmButtonText: "OK",
|
||||
}).then(() => {
|
||||
router.push("/in/contributor/content/image");
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<form>
|
||||
{detail !== undefined ? (
|
||||
|
|
|
|||
|
|
@ -1,5 +1,11 @@
|
|||
"use client";
|
||||
import React, { ChangeEvent, useEffect, useRef, Fragment, useState } from "react";
|
||||
import React, {
|
||||
ChangeEvent,
|
||||
useEffect,
|
||||
useRef,
|
||||
Fragment,
|
||||
useState,
|
||||
} from "react";
|
||||
import { useForm, Controller } from "react-hook-form";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Button } from "@/components/ui/button";
|
||||
|
|
@ -7,7 +13,7 @@ import { Label } from "@/components/ui/label";
|
|||
import { Card } from "@/components/ui/card";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import * as z from "zod";
|
||||
import { Upload } from 'tus-js-client';
|
||||
import { Upload } from "tus-js-client";
|
||||
import Swal from "sweetalert2";
|
||||
import withReactContent from "sweetalert2-react-content";
|
||||
import { redirect, useRouter } from "next/navigation";
|
||||
|
|
@ -39,6 +45,12 @@ import {
|
|||
getGenerateTitle,
|
||||
} from "@/service/content/ai";
|
||||
import { getCookiesDecrypt } from "@/lib/utils";
|
||||
import { useDropzone } from "react-dropzone";
|
||||
import { Icon } from "@iconify/react";
|
||||
import { CloudUpload } from "lucide-react";
|
||||
import Image from "next/image";
|
||||
import { error, loading } from "@/config/swal";
|
||||
import { Item } from "@radix-ui/react-dropdown-menu";
|
||||
|
||||
const imageSchema = z.object({
|
||||
title: z.string().min(1, { message: "Judul diperlukan" }),
|
||||
|
|
@ -48,12 +60,6 @@ const imageSchema = z.object({
|
|||
creatorName: z.string().min(1, { message: "Creator diperlukan" }),
|
||||
// tags: z.string().min(1, { message: "Judul diperlukan" }),
|
||||
});
|
||||
import { useDropzone } from "react-dropzone";
|
||||
import { Icon } from "@iconify/react";
|
||||
import { CloudUpload } from "lucide-react";
|
||||
import Image from "next/image";
|
||||
import { error, loading } from "@/config/swal";
|
||||
import { Item } from "@radix-ui/react-dropdown-menu";
|
||||
|
||||
interface FileWithPreview extends File {
|
||||
preview: string;
|
||||
|
|
@ -119,7 +125,7 @@ export default function FormImage() {
|
|||
const [counterProgress, setCounterProgress] = useState(0);
|
||||
|
||||
const [files, setFiles] = useState<FileWithPreview[]>([]);
|
||||
|
||||
|
||||
const { getRootProps, getInputProps } = useDropzone({
|
||||
onDrop: (acceptedFiles) => {
|
||||
setFiles(acceptedFiles.map((file) => Object.assign(file)));
|
||||
|
|
@ -290,19 +296,19 @@ export default function FormImage() {
|
|||
setArticleImages(articleImagesData || []);
|
||||
};
|
||||
|
||||
// const handleKeyDown = (e: any) => {
|
||||
// const newTag = e.target.value.trim(); // Ambil nilai input
|
||||
// if (e.key === "Enter" && newTag) {
|
||||
// e.preventDefault(); // Hentikan submit form
|
||||
// if (!tags.includes(newTag)) {
|
||||
// setTags((prevTags) => [...prevTags, newTag]); // Tambah tag baru
|
||||
// setValue("tags", ""); // Kosongkan input
|
||||
// }
|
||||
// }
|
||||
// };
|
||||
const handleAddTag = (e: React.KeyboardEvent<HTMLInputElement>) => {
|
||||
if (e.key === "Enter" && e.currentTarget.value.trim()) {
|
||||
e.preventDefault();
|
||||
const newTag = e.currentTarget.value.trim();
|
||||
if (!tags.includes(newTag)) {
|
||||
setTags((prevTags) => [...prevTags, newTag]); // Add new tag
|
||||
// setValue("tags", ""); // Clear input field
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleRemoveTag = (index: any) => {
|
||||
setTags((prevTags) => prevTags.filter((_, i) => i !== index));
|
||||
const handleRemoveTag = (index: number) => {
|
||||
setTags((prevTags) => prevTags.filter((_, i) => i !== index)); // Remove tag
|
||||
};
|
||||
|
||||
const handleRemoveImage = (index: number) => {
|
||||
|
|
@ -346,6 +352,7 @@ export default function FormImage() {
|
|||
|
||||
const save = async (data: ImageSchema) => {
|
||||
loading();
|
||||
const finalTags = tags.join(", ");
|
||||
const finalTitle = isSwitchOn ? title : data.title;
|
||||
const requestData = {
|
||||
...data,
|
||||
|
|
@ -359,36 +366,32 @@ export default function FormImage() {
|
|||
statusId: "1",
|
||||
publishedFor: "6",
|
||||
creatorName: data.creatorName,
|
||||
tags: "siap",
|
||||
tags: finalTags,
|
||||
isYoutube: false,
|
||||
isInternationalMedia: false,
|
||||
};
|
||||
|
||||
let id = Cookies.get('idCreate');
|
||||
|
||||
let id = Cookies.get("idCreate");
|
||||
|
||||
if (id == undefined) {
|
||||
const response = await createMedia(requestData);
|
||||
console.log("Form Data Submitted:", requestData);
|
||||
|
||||
|
||||
if (response?.error) {
|
||||
MySwal.fire("Error", response?.message, "error");
|
||||
return;
|
||||
}
|
||||
Cookies.set('idCreate', response?.data.data, { expires: 1 });
|
||||
Cookies.set("idCreate", response?.data.data, { expires: 1 });
|
||||
id = response?.data?.data;
|
||||
|
||||
// Upload Thumbnail
|
||||
if (fileTypeId == '1') {
|
||||
const formMedia = new FormData();
|
||||
formMedia.append('file', files[0]);
|
||||
const responseThumbnail = await uploadThumbnail(
|
||||
formMedia,
|
||||
id,
|
||||
);
|
||||
if (responseThumbnail?.error == true) {
|
||||
error(responseThumbnail?.message);
|
||||
return false;
|
||||
}
|
||||
const formMedia = new FormData();
|
||||
console.log('Thumbnail : ', files[0]);
|
||||
formMedia.append("file", files[0]);
|
||||
const responseThumbnail = await uploadThumbnail(id, formMedia);
|
||||
if (responseThumbnail?.error == true) {
|
||||
error(responseThumbnail?.message);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -403,29 +406,20 @@ export default function FormImage() {
|
|||
|
||||
close();
|
||||
// showProgress();
|
||||
files.map( async (item: any, index: number) => {
|
||||
files.map(async (item: any, index: number) => {
|
||||
await uploadResumableFile(
|
||||
index,
|
||||
String(id),
|
||||
item,
|
||||
fileTypeId == '2' || fileTypeId == '4' ? item.duration : '0',
|
||||
fileTypeId == "2" || fileTypeId == "4" ? item.duration : "0"
|
||||
);
|
||||
});
|
||||
|
||||
|
||||
Cookies.remove('idCreate');
|
||||
Cookies.remove("idCreate");
|
||||
|
||||
// MySwal.fire("Sukses", "Data berhasil disimpan.", "success");
|
||||
};
|
||||
|
||||
// function showProgress() {
|
||||
// $('#modalProgress').modal('show');
|
||||
// }
|
||||
|
||||
// function hideProgress() {
|
||||
// $('#modalProgress').modal('hide');
|
||||
// }
|
||||
|
||||
const onSubmit = (data: ImageSchema) => {
|
||||
MySwal.fire({
|
||||
title: "Simpan Data",
|
||||
|
|
@ -442,7 +436,12 @@ export default function FormImage() {
|
|||
});
|
||||
};
|
||||
|
||||
async function uploadResumableFile(idx: number, id: string, file: any, duration: string) {
|
||||
async function uploadResumableFile(
|
||||
idx: number,
|
||||
id: string,
|
||||
file: any,
|
||||
duration: string
|
||||
) {
|
||||
console.log(idx, id, file, duration);
|
||||
|
||||
// const placements = getPlacement(file.placements);
|
||||
|
|
@ -457,13 +456,17 @@ export default function FormImage() {
|
|||
filename: file.name,
|
||||
filetype: file.type,
|
||||
duration,
|
||||
isWatermark: 'true', // hardcode
|
||||
isWatermark: "true", // hardcode
|
||||
},
|
||||
onError: async (e: any) => {
|
||||
console.log('Error upload :', e);
|
||||
console.log("Error upload :", e);
|
||||
error(e);
|
||||
},
|
||||
onChunkComplete: (chunkSize: any, bytesAccepted: any, bytesTotal: any) => {
|
||||
onChunkComplete: (
|
||||
chunkSize: any,
|
||||
bytesAccepted: any,
|
||||
bytesTotal: any
|
||||
) => {
|
||||
const uploadPersen = Math.floor((bytesAccepted / bytesTotal) * 100);
|
||||
progressInfo[idx].percentage = uploadPersen;
|
||||
counterUpdateProgress++;
|
||||
|
|
@ -493,7 +496,7 @@ export default function FormImage() {
|
|||
}).then(() => {
|
||||
router.push(redirect);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
function successTodo() {
|
||||
let counter = 0;
|
||||
|
|
@ -505,7 +508,7 @@ export default function FormImage() {
|
|||
if (counter == progressInfo.length) {
|
||||
setIsStartUpload(false);
|
||||
// hideProgress();
|
||||
Cookies.remove('idCreate');
|
||||
Cookies.remove("idCreate");
|
||||
successSubmit("/in/contributor/content/image/");
|
||||
}
|
||||
}
|
||||
|
|
@ -578,7 +581,6 @@ export default function FormImage() {
|
|||
const handleRemoveAllFiles = () => {
|
||||
setFiles([]);
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
|
|
@ -891,7 +893,8 @@ export default function FormImage() {
|
|||
Tarik file disini atau klik untuk upload.
|
||||
</h4>
|
||||
<div className=" text-xs text-muted-foreground">
|
||||
( Upload file dengan format .jpg, .jpeg, atau .png. Ukuran maksimal 100mb.)
|
||||
( Upload file dengan format .jpg, .jpeg, atau .png.
|
||||
Ukuran maksimal 100mb.)
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -905,14 +908,16 @@ export default function FormImage() {
|
|||
<Switch defaultChecked color="primary" id="c2" />
|
||||
</div>
|
||||
</div>
|
||||
<Button color="destructive" onClick={handleRemoveAllFiles}>
|
||||
<Button
|
||||
color="destructive"
|
||||
onClick={handleRemoveAllFiles}
|
||||
>
|
||||
Remove All
|
||||
</Button>
|
||||
</div>
|
||||
</Fragment>
|
||||
) : null}
|
||||
</Fragment>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -945,38 +950,29 @@ export default function FormImage() {
|
|||
</div>
|
||||
</div>
|
||||
<div className="px-3 py-3">
|
||||
<Label>Tags</Label>
|
||||
{/* <Controller
|
||||
control={control}
|
||||
name="tags"
|
||||
render={({ field }) => (
|
||||
<Input
|
||||
size="md"
|
||||
type="text"
|
||||
value={field.value}
|
||||
onChange={field.onChange}
|
||||
placeholder="Enter Title"
|
||||
onKeyDown={handleKeyDown}
|
||||
/>
|
||||
)}
|
||||
/> */}
|
||||
<div className="text-sm text-red-500">
|
||||
{tags.length === 0 && "Please add at least one tag."}
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2 border border-gray-300 mt-2 rounded-md p-2 items-center">
|
||||
<Label htmlFor="tags">Tags</Label>
|
||||
|
||||
<Input
|
||||
type="text"
|
||||
id="tags"
|
||||
placeholder="Add a tag and press Enter"
|
||||
onKeyDown={handleAddTag}
|
||||
/>
|
||||
<div className="mt-3 ">
|
||||
{tags.map((tag, index) => (
|
||||
<div
|
||||
<span
|
||||
key={index}
|
||||
className="flex items-center gap-1 bg-blue-100 text-blue-800 rounded-full px-3 py-1 text-sm font-medium"
|
||||
className=" px-1 py-1 rounded-lg bg-black text-white mr-2 text-sm font-sans"
|
||||
>
|
||||
<span>{tag}</span>
|
||||
{tag}{" "}
|
||||
<button
|
||||
className="text-blue-600 hover:text-blue-800 focus:outline-none"
|
||||
type="button"
|
||||
onClick={() => handleRemoveTag(index)}
|
||||
className="remove-tag-button"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,50 +2,51 @@ import React, { useState } from "react";
|
|||
import { Button } from "../ui/button";
|
||||
import { Reveal } from "./Reveal";
|
||||
import { Icon } from "@iconify/react/dist/iconify.js";
|
||||
import { Link } from "@/i18n/routing";
|
||||
|
||||
const Division = () => {
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
const [seeAllValue, setSeeAllValue] = useState(false);
|
||||
|
||||
const regions = [
|
||||
{ name: "SIBER", logo: "/assets/satker/siber.png" },
|
||||
{ name: "DIVKUM", logo: "/assets/satker/divkum.png" },
|
||||
{ name: "PUSKEU", logo: "/assets/satker/puskeu.png" },
|
||||
{ name: "SSDM", logo: "/assets/satker/ssdm.png" },
|
||||
{ name: "ITWASUM", logo: "/assets/satker/itwasum.png" },
|
||||
{ name: "STIK-PTIK", logo: "/assets/satker/stik-ptik.png" },
|
||||
{ name: "SATUAN KERJA POLRI", logo: "/assets/satker/satuan-kerja-polri.png" },
|
||||
{ name: "BRIMOB", logo: "/assets/satker/brimob.png" },
|
||||
{ name: "DIV HUMAS", logo: "/assets/satker/div-humas.png" },
|
||||
{ name: "PUSLITBANG", logo: "/assets/satker/puslitbang.png" },
|
||||
{ name: "BINMAS", logo: "/assets/satker/binmas.png" },
|
||||
{ name: "DIV TIK", logo: "/assets/satker/div-tik.png" },
|
||||
{ name: "SPRIPIM", logo: "/assets/satker/spripim.png" },
|
||||
{ name: "DIVPROPRAM", logo: "/assets/satker/div-propram.png" },
|
||||
{ name: "KORPS SABHARA BAHARKAM", logo: "/assets/satker/khorp-sabhara-baharkam.png" },
|
||||
{ name: "PUSDOKKES", logo: "/assets/satker/pusdokkes.png" },
|
||||
{ name: "BAHARKAM", logo: "/assets/satker/baharkam.png" },
|
||||
{ name: "POLAIRUD", logo: "/assets/satker/polairud.png" },
|
||||
{ name: "POLAIR", logo: "/assets/satker/polair.png" },
|
||||
{ name: "POLUDARA", logo: "/assets/satker/poludara.png" },
|
||||
{ name: "LEMDIKLAT", logo: "/assets/satker/lemdiklat.png" },
|
||||
{ name: "AKPOL", logo: "/assets/satker/akpol.png" },
|
||||
{ name: "KORLANTAS", logo: "/assets/satker/korlantas.png" },
|
||||
{ name: "PUSINAFIS", logo: "/assets/satker/pusinafis.png" },
|
||||
{ name: "PUSJARAH", logo: "/assets/satker/pusjarah.png" },
|
||||
{ name: "PUSIKNAS", logo: "/assets/satker/pusiknas.png" },
|
||||
{ name: "SLOG", logo: "/assets/satker/slog.png" },
|
||||
{ name: "BAINTELKAM", logo: "/assets/satker/baintelkam.jpg" },
|
||||
{ name: "BARESKRIM", logo: "/assets/satker/bareskrim.png" },
|
||||
{ name: "DIVHUBINTER", logo: "/assets/satker/divhubinter.png" },
|
||||
{ name: "SETUM", logo: "/assets/satker/setum.png" },
|
||||
{ name: "PUSLABFOR", logo: "/assets/satker/puslabfor.png" },
|
||||
{ name: "DENSUS 88", logo: "/assets/satker/densus88.png" },
|
||||
{ name: "SAHLI KAPOLRI", logo: "/assets/satker/sahli-kapolri.png" },
|
||||
{ name: "SOPS", logo: "/assets/satker/sops.png" },
|
||||
{ name: "SRENA", logo: "/assets/satker/srena.png" },
|
||||
{ name: "SESPIM POLRI", logo: "/assets/satker/sespim-polri.png" },
|
||||
{ name: "SETUPA POLRI", logo: "/assets/satker/setupa-polri.png" },
|
||||
{ name: "SIBER", slug: "siber", logo: "/assets/satker/siber.png" },
|
||||
{ name: "DIVKUM", slug: "divkum", logo: "/assets/satker/divkum.png" },
|
||||
{ name: "PUSKEU", slug: "puskeu", logo: "/assets/satker/puskeu.png" },
|
||||
{ name: "SSDM", slug: "ssdm", logo: "/assets/satker/ssdm.png" },
|
||||
{ name: "ITWASUM", slug: "itwasum", logo: "/assets/satker/itwasum.png" },
|
||||
{ name: "STIK-PTIK", slug: "stik-ptik", logo: "/assets/satker/stik-ptik.png" },
|
||||
{ name: "SATUAN KERJA POLRI", slug: "satuan-kerja-polri", logo: "/assets/satker/satuan-kerja-polri.png" },
|
||||
{ name: "BRIMOB", slug: "brimob", logo: "/assets/satker/brimob.png" },
|
||||
{ name: "DIV HUMAS", slug: "div-humas", logo: "/assets/satker/div-humas.png" },
|
||||
{ name: "PUSLITBANG", slug: "puslitbang", logo: "/assets/satker/puslitbang.png" },
|
||||
{ name: "BINMAS", slug: "binmas", logo: "/assets/satker/binmas.png" },
|
||||
{ name: "DIV TIK", slug: "div-tik", logo: "/assets/satker/div-tik.png" },
|
||||
{ name: "SPRIPIM", slug: "spripim", logo: "/assets/satker/spripim.png" },
|
||||
{ name: "DIVPROPRAM", slug: "divpropram", logo: "/assets/satker/div-propram.png" },
|
||||
{ name: "KORPS SABHARA BAHARKAM", slug: "korps-sabhara-baharkam", logo: "/assets/satker/khorp-sabhara-baharkam.png" },
|
||||
{ name: "PUSDOKKES", slug: "pusdokkes", logo: "/assets/satker/pusdokkes.png" },
|
||||
{ name: "BAHARKAM", slug: "baharkam", logo: "/assets/satker/baharkam.png" },
|
||||
{ name: "POLAIRUD", slug: "polairud", logo: "/assets/satker/polairud.png" },
|
||||
{ name: "POLAIR", slug: "polair", logo: "/assets/satker/polair.png" },
|
||||
{ name: "POLUDARA", slug: "poludara", logo: "/assets/satker/poludara.png" },
|
||||
{ name: "LEMDIKLAT", slug: "lemdiklat", logo: "/assets/satker/lemdiklat.png" },
|
||||
{ name: "AKPOL", slug: "akpol", logo: "/assets/satker/akpol.png" },
|
||||
{ name: "KORLANTAS", slug: "korlantas", logo: "/assets/satker/korlantas.png" },
|
||||
{ name: "PUSINAFIS", slug: "pusinafis", logo: "/assets/satker/pusinafis.png" },
|
||||
{ name: "PUSJARAH", slug: "pusjarah", logo: "/assets/satker/pusjarah.png" },
|
||||
{ name: "PUSIKNAS", slug: "pusiknas", logo: "/assets/satker/pusiknas.png" },
|
||||
{ name: "SLOG", slug: "slog", logo: "/assets/satker/slog.png" },
|
||||
{ name: "BAINTELKAM", slug: "baintelkam", logo: "/assets/satker/baintelkam.jpg" },
|
||||
{ name: "BARESKRIM", slug: "bareskrim", logo: "/assets/satker/bareskrim.png" },
|
||||
{ name: "DIVHUBINTER", slug: "divhubinter", logo: "/assets/satker/divhubinter.png" },
|
||||
{ name: "SETUM", slug: "setum", logo: "/assets/satker/setum.png" },
|
||||
{ name: "PUSLABFOR", slug: "puslabfor", logo: "/assets/satker/puslabfor.png" },
|
||||
{ name: "DENSUS 88", slug: "densus-88", logo: "/assets/satker/densus88.png" },
|
||||
{ name: "SAHLI KAPOLRI", slug: "sahli-kapolri", logo: "/assets/satker/sahli-kapolri.png" },
|
||||
{ name: "SOPS", slug: "sops", logo: "/assets/satker/sops.png" },
|
||||
{ name: "SRENA", slug: "srena", logo: "/assets/satker/srena.png" },
|
||||
{ name: "SESPIM POLRI", slug: "sespim-polri", logo: "/assets/satker/sespim-polri.png" },
|
||||
{ name: "SETUPA POLRI", slug: "setupa-polri", logo: "/assets/satker/setupa-polri.png" },
|
||||
];
|
||||
|
||||
return (
|
||||
|
|
@ -70,22 +71,22 @@ const Division = () => {
|
|||
{regions.map((region, index) =>
|
||||
!seeAllValue ? (
|
||||
index < 7 ? (
|
||||
<div key={index} className="flex flex-col items-center text-center group">
|
||||
<Link href={`/satker/${region.slug}`} key={index} className="flex flex-col items-center text-center group">
|
||||
<div className="relative w-20 h-20 rounded-full border-2 border-[#bb3523] overflow-hidden mb-2 flex items-center justify-center">
|
||||
<img src={region.logo} alt={region.name} className="w-3/4 h-3/4 object-contain group-hover:scale-110 transition-transform duration-300" />
|
||||
</div>
|
||||
<p className="text-md font-semibold">{region.name}</p>
|
||||
</div>
|
||||
</Link>
|
||||
) : (
|
||||
""
|
||||
)
|
||||
) : (
|
||||
<div key={index} className="flex flex-col items-center text-center group">
|
||||
<Link href={`/satker/${region.slug}`} key={index} className="flex flex-col items-center text-center group">
|
||||
<div className="relative w-20 h-20 rounded-full border-2 border-[#bb3523] overflow-hidden mb-2 flex items-center justify-center">
|
||||
<img src={region.logo} alt={region.name} className="w-3/4 h-3/4 object-contain group-hover:scale-110 transition-transform duration-300" />
|
||||
</div>
|
||||
<p className="text-md font-semibold">{region.name}</p>
|
||||
</div>
|
||||
</Link>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,121 @@
|
|||
"use client";
|
||||
import { listData } from "@/service/landing/landing";
|
||||
import { useParams, usePathname, useRouter } from "next/navigation";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import Skeleton, { SkeletonTheme } from "react-loading-skeleton";
|
||||
import { Link } from "@/i18n/routing";
|
||||
import { getPublicLocaleTimestamp } from "@/utils/globals";
|
||||
import { Icon } from "@iconify/react/dist/iconify.js";
|
||||
import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel";
|
||||
|
||||
const HeaderBannerSatker = () => {
|
||||
const router = useRouter();
|
||||
const params = useParams();
|
||||
const satkerName: any = params?.satker_name;
|
||||
const asPath: any = usePathname();
|
||||
const [content, setContent] = useState([]);
|
||||
|
||||
const [isBannerLoading, setIsBannerLoading] = useState(true);
|
||||
const [centerPadding, setCenterPadding] = useState<any>();
|
||||
|
||||
useEffect(() => {
|
||||
// async function initState() {
|
||||
// const res = await listCarousel();
|
||||
// setContent(res.data?.data);
|
||||
// setCenterPadding(`${Math.trunc(Number(window.innerWidth) / 10 + 40)}px`);
|
||||
// }
|
||||
|
||||
async function fetchData() {
|
||||
const res = await listData("1", "", "", 5, 0, "createdAt", "", "", satkerName);
|
||||
let data = res?.data?.data?.content;
|
||||
setContent(data);
|
||||
setCenterPadding(`${Math.trunc(Number(window.innerWidth) / 10 + 40)}px`);
|
||||
setIsBannerLoading(false);
|
||||
console.log("Done");
|
||||
}
|
||||
|
||||
fetchData();
|
||||
}, [params?.page]);
|
||||
|
||||
const settings = {
|
||||
className: "center",
|
||||
// centerMode: true,
|
||||
infinite: true,
|
||||
centerPadding,
|
||||
slidesToShow: 2,
|
||||
autoplay: true,
|
||||
speed: 1500,
|
||||
autoplaySpeed: 15_000,
|
||||
focusOnSelect: true,
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 768,
|
||||
settings: {
|
||||
arrows: false,
|
||||
centerMode: true,
|
||||
centerPadding: "60px",
|
||||
slidesToShow: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 480,
|
||||
settings: {
|
||||
arrows: false,
|
||||
centerMode: true,
|
||||
centerPadding: "20px",
|
||||
slidesToShow: 1,
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
return (
|
||||
<div>
|
||||
{/* Header */}
|
||||
<div className="p-6 lg:px-16 flex flex-col lg:flex-row">
|
||||
{isBannerLoading ? (
|
||||
<SkeletonTheme highlightColor="#f2f2f2">
|
||||
<Skeleton className="w-[100%] h-[480px]" />
|
||||
</SkeletonTheme>
|
||||
) : (
|
||||
<div className="mt-3">
|
||||
<Carousel className="w-full h-full">
|
||||
<CarouselContent>
|
||||
{content?.map((row: any) => (
|
||||
<CarouselItem key={row?.id} className="basis-1/2">
|
||||
<div className="relative h-[310px] lg:h-[420px]">
|
||||
<img src={row?.thumbnailLink} alt="" className="w-full h-[310px] lg:h-[420px] rounded-lg" />
|
||||
<div className="absolute bottom-0 left-0 right-0 bg-transparent backdrop-blur-sm text-white p-4 rounded-b-lg">
|
||||
<span className="text-white bg-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-sm px-4 py-1">{row?.categoryName}</span>
|
||||
<Link
|
||||
href={
|
||||
Number(row.fileType?.id) == 1
|
||||
? `${asPath.includes("/satker/") == true ? asPath : ""}/image/detail/${row.slug}`
|
||||
: Number(row.fileType?.id) == 2
|
||||
? `/video/detail/${row.slug}`
|
||||
: Number(row.fileType?.id) == 3
|
||||
? `/document/detail/${row.slug}`
|
||||
: `/audio/detail/${row.slug}`
|
||||
}
|
||||
>
|
||||
<h3>{row.title}</h3>
|
||||
</Link>
|
||||
<p className="text-xs flex flex-row items-center gap-1 mt-1 text-white">
|
||||
{getPublicLocaleTimestamp(new Date(row?.createdAt))} WIB {" | "}
|
||||
<Icon icon="formkit:eye" width="15" height="15" /> {row?.clickCount}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</CarouselItem>
|
||||
))}
|
||||
</CarouselContent>
|
||||
<CarouselPrevious />
|
||||
<CarouselNext />
|
||||
</Carousel>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default HeaderBannerSatker;
|
||||
|
|
@ -3,7 +3,6 @@ import React, { useEffect, useState } from "react";
|
|||
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../ui/dropdown-menu";
|
||||
import { FiFile, FiImage, FiMusic, FiYoutube } from "react-icons/fi";
|
||||
import { Icon } from "@iconify/react/dist/iconify.js";
|
||||
import { capitalize } from "@/utils/globals";
|
||||
|
||||
const WelcomePolda = () => {
|
||||
const router = useRouter();
|
||||
|
|
|
|||
|
|
@ -0,0 +1,109 @@
|
|||
"use client";
|
||||
|
||||
import { useParams, usePathname, useRouter } from "next/navigation";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../ui/dropdown-menu";
|
||||
import { FiFile, FiImage, FiMusic, FiYoutube } from "react-icons/fi";
|
||||
import { Icon } from "@iconify/react/dist/iconify.js";
|
||||
import { capitalize } from "@/utils/globals";
|
||||
|
||||
const WelcomeSatker = () => {
|
||||
const router = useRouter();
|
||||
const asPath: any = usePathname();
|
||||
const params = useParams();
|
||||
const satkerName: any = params?.satker_name;
|
||||
const [categorySelect, setCategorySelect] = useState("0");
|
||||
const [search, setSearch] = useState();
|
||||
|
||||
useEffect(() => {
|
||||
function initState() {
|
||||
console.log(categorySelect);
|
||||
}
|
||||
|
||||
initState();
|
||||
}, [categorySelect]);
|
||||
|
||||
return (
|
||||
<section className="w-full py-8 px-4 ">
|
||||
<div className="max-w-screen-xl mx-auto text-center">
|
||||
{/* Heading */}
|
||||
<h1 className="text-2xl md:text-3xl font-bold text-gray-800 dark:text-white">
|
||||
Selamat Datang di <span className="text-[#bb3523] dark:text-white">Satker</span> <span className="capitalize">{satkerName.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">
|
||||
Liputan resmi yang bersumber dari kegiatan Polri di Satker <span className="capitalize">{satkerName.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>
|
||||
Konten
|
||||
<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" />
|
||||
Audio Visual
|
||||
</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" />
|
||||
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" />
|
||||
Foto
|
||||
</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" />
|
||||
Teks
|
||||
</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="Pencarian" className="w-full py-2 px-2 text-sm text-gray-700 dark:text-gray-100 focus:outline-none" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Search Input */}
|
||||
|
||||
{/* 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">
|
||||
Cari Liputan <Icon icon="ri:arrow-right-s-line" fontSize={20} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default WelcomeSatker;
|
||||
|
|
@ -13,6 +13,7 @@ export async function login(data: any) {
|
|||
'content-type': 'application/x-www-form-urlencoded',
|
||||
};
|
||||
return httpPost(pathUrl, headers, qs.stringify(data));
|
||||
|
||||
}
|
||||
|
||||
export async function getProfile(token: any) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue