humas
/
web-humas-fe
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branches 'dev-main' and 'dev-restructure' of https://gitlab.com/hanifsalafi/web-humas-polri into dev-main

This commit is contained in:
hanif salafi 2025-02-10 09:09:53 +07:00
parent b8f80c43a9 c49450e704
commit 6747a1011d
71 changed files with 2788 additions and 644 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
Dockerfile
View File

@ -1,4 +1,4 @@
FROM node:21-alpine
FROM node:23.5.0-alpine
ENV PORT 4000
@ -10,7 +10,7 @@ WORKDIR /usr/src/app
COPY package*.json /usr/src/app/
# RUN npm install --force
# RUN npm install -g npm@latest
RUN npm install -g npm@latest
RUN npm install
# Copying source files

2
app/(admin)/admin/article/create/page.tsx
View File

@ -4,7 +4,7 @@ import { Card } from "@nextui-org/react";
export default function CreateArticle() {
return (
<div className="bg-transparent p-8 !bg-slate-100 dark:!bg-black overflow-y-auto">
<div className="bg-transparent p-3 lg:p-8 !bg-slate-100 dark:!bg-black overflow-y-auto">
{/* <FormArticle /> */}
<CreateArticleForm />
</div>

2
app/(admin)/admin/article/detail/[id]/page.tsx
View File

@ -2,7 +2,7 @@ import EditArticleForm from "@/components/form/article/edit-article-form";
export default function DetailArticlePage() {
return (
<div className="h-[96vh] bg-transparent p-8 !bg-slate-100 dark:!bg-black overflow-y-auto">
<div className="h-[96vh] bg-transparent p-3 lg:p-8 !bg-slate-100 dark:!bg-black overflow-y-auto">
{/* <FormDetailArticle /> */}
<EditArticleForm isDetail={true} />
</div>

2
app/(admin)/admin/article/edit/[id]/page.tsx
View File

@ -2,7 +2,7 @@ import EditArticleForm from "@/components/form/article/edit-article-form";
export default function UpdateArticlePage() {
return (
<div className="h-[96vh] bg-transparent p-8 !bg-slate-100 dark:!bg-black overflow-y-auto">
<div className="h-[96vh] bg-transparent p-3 lg:p-8 !bg-slate-100 dark:!bg-black overflow-y-auto">
<EditArticleForm isDetail={false} />
</div>
);

9
app/(admin)/admin/article/page.tsx
View File

@ -10,9 +10,12 @@ export default function BasicPage() {
return (
<div className="overflow-x-hidden overflow-y-scroll">
<div className="px-2 md:px-4 md:py-4 w-full">
<div className="bg-white shadow-lg dark:bg-[#18181b] rounded-xl py-3">
<Link href="/admin/article/create" className="mx-3">
<Button size="md" className="bg-[#F07C00] text-white">
<div className="bg-white shadow-lg dark:bg-[#18181b] rounded-xl p-3">
<Link href="/admin/article/create">
<Button
size="md"
className="bg-[#F07C00] text-white w-full lg:w-fit"
>
Tambah Artikel
<AddIcon />
</Button>

2
app/(admin)/admin/dashboard/page.tsx
View File

@ -3,7 +3,7 @@ import DashboardContainer from "@/components/main/dashboard/dashboard-container"
export default function AdminPage() {
return (
<div className="h-[96vh] overflow-x-hidden overflow-y-scroll gap-0 grid">
<div className="px-4">
<div className="lg:px-4 !w-screen lg:!w-auto">
<DashboardContainer />
</div>
</div>

2
app/(admin)/admin/magazine/create/page.tsx
View File

@ -4,7 +4,7 @@ import React from "react";
const AdminMagazineCreate = () => {
return (
<div className="h-[96vh] bg-transparent p-8 !bg-slate-100 dark:!bg-black overflow-y-auto">
<div className="h-[96vh] bg-transparent p-3 lg:p-8 !bg-slate-100 dark:!bg-black overflow-y-auto">
<NewCreateMagazineForm />
</div>
);

2
app/(admin)/admin/magazine/detail/[id]/page.tsx
View File

@ -2,7 +2,7 @@ import EditMagazineForm from "@/components/form/magazine/edit-magazine-form";
export default function DetailArticlePage() {
return (
<div className="h-[96vh] bg-transparent p-8 !bg-slate-100 dark:!bg-black overflow-y-auto">
<div className="h-[96vh] bg-transparent p-3 lg:p-8 !bg-slate-100 dark:!bg-black overflow-y-auto">
<EditMagazineForm isDetail={true} />
</div>
);

2
app/(admin)/admin/magazine/edit/[id]/page.tsx
View File

@ -2,7 +2,7 @@ import EditMagazineForm from "@/components/form/magazine/edit-magazine-form";
export default function EditArticlePage() {
return (
<div className="h-[96vh] bg-transparent p-8 !bg-slate-100 dark:!bg-black overflow-y-auto">
<div className="h-[96vh] bg-transparent p-3 lg:p-8 !bg-slate-100 dark:!bg-black overflow-y-auto">
<EditMagazineForm isDetail={false} />
</div>
);

9
app/(admin)/admin/magazine/page.tsx
View File

@ -8,9 +8,12 @@ export default function MagazineTablePage() {
return (
<div className="overflow-x-hidden overflow-y-scroll">
<div className="px-2 md:px-4 md:py-4 w-full">
<div className="bg-white shadow-lg dark:bg-[#18181b] rounded-xl py-3">
<Link href="/admin/magazine/create" className="mx-3">
<Button size="md" className="bg-[#F07C00] text-white">
<div className="bg-white shadow-lg dark:bg-[#18181b] rounded-xl p-3">
<Link href="/admin/magazine/create">
<Button
size="md"
className="bg-[#F07C00] text-white w-full lg:w-fit"
>
Tambah Majalah
<AddIcon />
</Button>

4
app/(admin)/admin/master-category/page.tsx
View File

@ -164,10 +164,10 @@ export default function MasterCategoryTable() {
return (
<div className="overflow-x-hidden overflow-y-scroll">
<div className="px-2 md:px-4 md:py-4 w-full">
<div className="bg-white shadow-lg dark:bg-[#18181b] rounded-xl py-3">
<div className="bg-white shadow-lg dark:bg-[#18181b] rounded-xl p-3">
<Button
size="md"
className="bg-[#F07C00] text-white mx-3"
className="bg-[#F07C00] text-white w-full lg:w-fit"
onPress={onOpen}
>
Tambah Kategori

21
app/(admin)/admin/master-user-level/page.tsx
View File

@ -1,13 +1,14 @@
import MagazineTable from '@/components/table/magazine/magazine-table'
import MenuDataTable from '@/components/table/master/master-menu/menu-data/menu-data-table'
import MasterModuleTable from '@/components/table/master/master-module/master-module-table'
import MasterUserLevelTable from '@/components/table/master/master-user-level/master-user-level-table'
import React from 'react'
import MappingUserLevel from "@/components/table/master/master-user-level/mapping-user-level";
import MasterUserLevelTable from "@/components/table/master/master-user-level/master-user-level-table";
import React from "react";
const AdminMasterUserLevel = () => {
return (
<div><MasterUserLevelTable /></div>
)
}
return (
// <div><MasterUserLevelTable /></div>
<div>
<MappingUserLevel />
</div>
);
};
export default AdminMasterUserLevel
export default AdminMasterUserLevel;

6
app/(admin)/admin/static-page/page.tsx
View File

@ -7,12 +7,12 @@ export default function StaticPageGeneratorList() {
return (
<div className="overflow-x-hidden overflow-y-scroll rounded-lg">
<div className="px-2 md:px-4 md:py-4 w-full">
<div className="bg-white shadow-lg dark:bg-[#18181b] rounded-xl py-3">
<Link href="/admin/static-page/create" className="mx-3">
<div className="bg-white shadow-lg dark:bg-[#18181b] rounded-xl p-3">
<Link href="/admin/static-page/create">
<Button
size="md"
color="primary"
className="bg-[#F07C00] text-white"
className="bg-[#F07C00] text-white w-full lg:w-fit"
>
Tambah Halaman
<AddIcon />

5
app/(admin)/settings/page.tsx
View File

@ -1,6 +1,7 @@
"use client";
import PasswordForm from "@/components/form/settings/password";
import ProfileForm from "@/components/form/settings/profile";
import { close, loading } from "@/config/swal";
import { getProfile } from "@/service/master-user";
import { Tab, Tabs } from "@nextui-org/react";
import { useEffect, useState } from "react";
@ -11,11 +12,13 @@ export default function Settings() {
initFetch();
}, []);
const initFetch = async () => {
loading();
const profile = await getProfile();
setProfile(profile?.data?.data);
close();
};
return (
<div className="w-full lg:w-[60%] p-5">
<div className="w-full lg:w-[60%] p-3">
<div className="flex flex-col bg-gray-50 shadow-md dark:bg-stone-900 text-black dark:text-white rounded-md p-5">
<Tabs aria-label="Tabs radius" radius="sm">
<Tab key="profile" title="Profile">

26
app/auth/page.tsx
View File

@ -1,4 +1,4 @@
"use client"
"use client";
import Login from "@/components/form/login";
import QudoLogin from "@/components/form/qudo-login";
@ -6,23 +6,23 @@ import Cookies from "js-cookie";
import React, { useEffect, useState } from "react";
export default function AuthPage() {
// const isAuthenticated = Cookies.get("is_authenticated") || "false";
const isAuthenticated = Cookies.get("is_authenticated") || "false";
// console.log("isAuthenticated : ", isAuthenticated);
console.log("isAuthenticated : ", isAuthenticated);
const [hasMounted, setHasMounted] = useState(false);
// const [hasMounted, setHasMounted] = useState(false);
useEffect(() => {
setHasMounted(true);
}, []);
// useEffect(() => {
// setHasMounted(true);
// }, []);
// Render
if (!hasMounted) return null;
// // Render
// if (!hasMounted) return null;
return (
isAuthenticated == "true" ?
<Login /> :
<QudoLogin />
// isAuthenticated == "true" ?
<Login />
// :
// <QudoLogin />
);
}

8
app/layout.tsx
View File

@ -2,6 +2,8 @@
"use client";
import { fontSans } from "@/config/fonts";
import { siteConfig } from "@/config/site";
import { Inter } from "next/font/google";
import "@/styles/globals.css";
import clsx from "clsx";
import { Metadata } from "next";
@ -10,6 +12,7 @@ import LoadScript from "@/utils/global";
import { NextIntlClientProvider } from "next-intl";
import { useEffect, useState, type ReactNode } from "react";
import storedLanguage from "@/store/language-store";
const inter = Inter({ subsets: ["latin"] });
// export const metadata: Metadata = {
// title: {
@ -63,10 +66,7 @@ export default function RootLayout({ children }: { children: ReactNode }) {
<LoadScript />
</head>
<body
className={clsx(
"bg-background font-sans antialiased",
fontSans.variable
)}
className={clsx("bg-background font-sans antialiased", inter.className)}
>
<NextIntlClientProvider locale={localeNow} messages={messages}>
<Providers themeProps={{ attribute: "class", defaultTheme: "dark" }}>

2
app/setup-password/page.tsx
View File

@ -5,7 +5,7 @@ import { Button } from "@nextui-org/button";
import Link from "next/link";
import Cookies from "js-cookie";
import { close, error, loading } from "@/config/swal";
import { getProfile, postSignIn, resetPassword } from "@/service/master-user";
import { postSignIn, resetPassword } from "@/service/master-user";
import { useRouter, useSearchParams } from "next/navigation";
import Swal from "sweetalert2";
import withReactContent from "sweetalert2-react-content";

102
components/form/article/create-article-form.tsx
View File

@ -21,7 +21,13 @@ import {
} from "@/service/article";
import ReactSelect from "react-select";
import makeAnimated from "react-select/animated";
import { Checkbox, Chip } from "@nextui-org/react";
import {
Checkbox,
Chip,
Select,
SelectItem,
SelectSection,
} from "@nextui-org/react";
import GenerateSingleArticleForm from "./generate-ai-single-form";
import { htmlToString } from "@/utils/global";
import { close, error, loading } from "@/config/swal";
@ -32,6 +38,7 @@ import {
saveManualContext,
updateManualArticle,
} from "@/service/generate-article";
import GenerateContentRewriteForm from "./generate-ai-content-rewrite-form";
const CustomEditor = dynamic(
() => {
@ -98,7 +105,9 @@ export default function CreateArticleForm() {
null
);
const [thumbnailValidation, setThumbnailValidation] = useState("");
const [filesValidation, setFileValidation] = useState("");
const [diseData, setDiseData] = useState<DiseData>();
const [selectedWritingType, setSelectedWritingType] = useState("single");
const { getRootProps, getInputProps } = useDropzone({
onDrop: (acceptedFiles) => {
@ -108,6 +117,9 @@ export default function CreateArticleForm() {
]);
},
multiple: true,
accept: {
"image/*": [],
},
});
const formOptions = {
@ -151,10 +163,21 @@ export default function CreateArticleForm() {
};
const onSubmit = async (values: z.infer<typeof createArticleSchema>) => {
if (thumbnailImg.length < 1 && !selectedMainImage) {
setThumbnailValidation("Required");
if ((thumbnailImg.length < 1 && !selectedMainImage) || files.length < 1) {
if (files.length < 1) {
setFileValidation("Required");
} else {
setFileValidation("");
}
if (thumbnailImg.length < 1 && !selectedMainImage) {
setThumbnailValidation("Required");
} else {
setThumbnailValidation("");
}
} else {
setThumbnailValidation("");
setFileValidation("Required");
MySwal.fire({
title: "Simpan Data",
text: "",
@ -410,10 +433,10 @@ export default function CreateArticleForm() {
return (
<form
className="flex flex-row gap-8 text-black"
className="flex flex-col lg:flex-row gap-8 text-black"
onSubmit={handleSubmit(onSubmit)}
>
<div className="w-[65%] bg-white rounded-lg p-8 flex flex-col gap-1">
<div className="w-full lg:w-[65%] bg-white rounded-lg p-8 flex flex-col gap-1">
<p className="text-sm">Judul</p>
<Controller
control={control}
@ -452,7 +475,6 @@ export default function CreateArticleForm() {
placeholder=""
label=""
value={value}
isReadOnly
onChange={onChange}
labelPlacement="outside"
className="w-full "
@ -475,15 +497,55 @@ export default function CreateArticleForm() {
</Switch>
{useAi && (
<GenerateSingleArticleForm
content={(data) => {
setDiseData(data);
setValue(
"description",
data?.articleBody ? data?.articleBody : ""
);
}}
/>
<div className="flex flex-col gap-2">
<Select
label="Writing Style"
variant="bordered"
labelPlacement="outside"
placeholder=""
selectedKeys={[selectedWritingType]}
onChange={(e) =>
e.target.value !== ""
? setSelectedWritingType(e.target.value)
: ""
}
className="w-full"
classNames={{
label: "!text-black",
value: "!text-black",
trigger: [
"border-1 rounded-lg",
"dark:group-data-[focused=false]:bg-transparent !border-1 dark:!border-gray-400",
],
}}
>
<SelectSection>
<SelectItem key="single">Single Article</SelectItem>
<SelectItem key="rewrite">Content Rewrite</SelectItem>
</SelectSection>
</Select>
{selectedWritingType === "single" ? (
<GenerateSingleArticleForm
content={(data) => {
setDiseData(data);
setValue(
"description",
data?.articleBody ? data?.articleBody : ""
);
}}
/>
) : (
<GenerateContentRewriteForm
content={(data) => {
setDiseData(data);
setValue(
"description",
data?.articleBody ? data?.articleBody : ""
);
}}
/>
)}
</div>
)}
<p className="text-sm mt-3">Deskripsi</p>
@ -526,8 +588,11 @@ export default function CreateArticleForm() {
</Fragment>
) : null}
</Fragment>
{filesValidation !== "" && files.length < 1 && (
<p className="text-red-400 text-sm mb-3">Upload File Media</p>
)}
</div>
<div className="w-[35%] flex flex-col gap-8">
<div className="w-full lg:w-[35%] flex flex-col gap-8">
<div className="h-fit bg-white rounded-lg p-8 flex flex-col gap-1">
<p className="text-sm">Thubmnail</p>
@ -575,10 +640,13 @@ export default function CreateArticleForm() {
type="file"
multiple
className="w-fit h-fit"
accept="image/*"
onChange={handleFileChange}
/>
{thumbnailValidation !== "" && (
<p className="text-red-400 text-sm mb-3">Thumbnail harus ada</p>
<p className="text-red-400 text-sm mb-3">
Upload thumbnail atau pilih dari File Media
</p>
)}
</>
)}

133
components/form/article/edit-article-form.tsx
View File

@ -121,6 +121,9 @@ export default function EditArticleForm(props: { isDetail: boolean }) {
]);
},
multiple: true,
accept: {
"image/*": [],
},
});
const formOptions = {
@ -372,10 +375,10 @@ export default function EditArticleForm(props: { isDetail: boolean }) {
return (
<form
className="flex flex-row gap-8 text-black"
className="flex flex-col lg:flex-row gap-8 text-black"
onSubmit={handleSubmit(onSubmit)}
>
<div className="w-[65%] bg-white rounded-lg p-8 flex flex-col gap-1">
<div className="w-full lg:w-[65%] bg-white rounded-lg p-8 flex flex-col gap-1">
{isDetail && <GetSeoScore id={String(diseId)} />}
<p className="text-sm">Judul</p>
<Controller
@ -416,7 +419,6 @@ export default function EditArticleForm(props: { isDetail: boolean }) {
placeholder=""
label=""
value={value}
isReadOnly
onChange={onChange}
labelPlacement="outside"
className="w-full "
@ -506,8 +508,11 @@ export default function EditArticleForm(props: { isDetail: boolean }) {
detailfiles ? (
<>
<div>
<img
src={`http://38.47.180.165:8802${detailfiles[mainImage]?.file_url}`}
<Image
alt="main"
width={720}
height={480}
src={detailfiles[mainImage]?.file_url}
className="w-[75%] mx-auto"
/>
</div>
@ -518,8 +523,11 @@ export default function EditArticleForm(props: { isDetail: boolean }) {
onClick={() => setMainImage(index)}
className="cursor-pointer"
>
<img
src={`http://38.47.180.165:8802${file.file_url}`}
<Image
width={480}
height={360}
alt={`image-${index}`}
src={file.file_url}
className="h-[100px] object-cover w-[150px]"
/>
</a>
@ -531,63 +539,65 @@ export default function EditArticleForm(props: { isDetail: boolean }) {
)
) : (
<div className="flex flex-col">
{detailfiles?.map(
(file: any, index: number) =>
index > 0 && (
<div
key={file?.file_name + index}
className=" flex justify-between border px-3.5 py-3 rounded-md"
>
<div className="flex gap-3 items-center">
<div className="file-preview">
<img
src={`http://38.47.180.165:8802${file?.file_url}`}
className="h-[50px] object-cover"
/>
</div>
<div>
<div className=" text-sm text-card-foreground">
{file?.file_name}
</div>
<div className=" text-xs font-light text-muted-foreground">
{Math.round(file?.size / 100) / 10 > 1000 ? (
<>
{(Math.round(file?.size / 100) / 10000).toFixed(
1
)}
</>
) : (
<>
{(Math.round(file?.size / 100) / 10).toFixed(1)}
</>
)}
{" kb"}
</div>
</div>
</div>
<Button
className=" border-none rounded-full"
variant="bordered"
color="danger"
onClick={() => handleDeleteFile(file?.id)}
>
<TimesIcon />
</Button>
{detailfiles?.map((file: any, index: number) => (
<div
key={file?.file_name + index}
className=" flex justify-between border px-3.5 py-3 rounded-md"
>
<div className="flex gap-3 items-center">
<div className="file-preview">
<Image
width={480}
height={360}
alt={`image-${index}`}
src={file?.file_url}
className="h-[100px] object-cover w-[150px]"
/>
</div>
)
)}
<div>
<div className=" text-sm text-card-foreground">
{file?.file_name}
</div>
<div className=" text-xs font-light text-muted-foreground">
{Math.round(file?.size / 100) / 10 > 1000 ? (
<>{(Math.round(file?.size / 100) / 10000).toFixed(1)}</>
) : (
<>{(Math.round(file?.size / 100) / 10).toFixed(1)}</>
)}
{" kb"}
</div>
</div>
</div>
<Button
className=" border-none rounded-full"
variant="bordered"
color="danger"
onClick={() => handleDeleteFile(file?.id)}
>
<TimesIcon />
</Button>
</div>
))}
</div>
)}
</div>
<div className="w-[35%] flex flex-col gap-8">
<div className="w-full lg:w-[35%] flex flex-col gap-8">
<div className="h-fit bg-white rounded-lg p-8 flex flex-col gap-1">
<p className="text-sm">Thubmnail</p>
{isDetail ? (
<img src={thumbnail} className="w-[30%]" alt="thumbnail" />
<Image
width={480}
height={360}
src={thumbnail}
className="w-[30%]"
alt="thumbnail"
/>
) : selectedMainImage && files.length >= selectedMainImage ? (
<div className="flex flex-row">
<img
<Image
width={480}
height={360}
src={URL.createObjectURL(files[selectedMainImage - 1])}
className="w-[30%]"
alt="thumbnail"
@ -604,7 +614,13 @@ export default function EditArticleForm(props: { isDetail: boolean }) {
</div>
) : thumbnail !== "" ? (
<div className="flex flex-row">
<img src={thumbnail} className="w-[30%]" alt="thumbnail" />
<Image
width={480}
height={360}
src={thumbnail}
className="w-[30%]"
alt="thumbnail"
/>
<Button
className=" border-none rounded-full"
@ -618,7 +634,9 @@ export default function EditArticleForm(props: { isDetail: boolean }) {
</div>
) : thumbnailImg.length > 0 ? (
<div className="flex flex-row">
<img
<Image
width={480}
height={360}
src={URL.createObjectURL(thumbnailImg[0])}
className="w-[30%]"
alt="thumbnail"
@ -640,6 +658,7 @@ export default function EditArticleForm(props: { isDetail: boolean }) {
type="file"
multiple
className="w-fit h-fit"
accept="image/*"
onChange={handleFileChange}
/>
{thumbnailValidation !== "" && (

280
components/form/article/generate-ai-content-rewrite-form.tsx Normal file
View File

@ -0,0 +1,280 @@
"use client";
import {
Button,
Input,
Select,
SelectItem,
SelectSection,
} from "@nextui-org/react";
import { FormEvent, useEffect, useState } from "react";
import { Controller, useForm } from "react-hook-form";
import * as z from "zod";
import { zodResolver } from "@hookform/resolvers/zod";
import { close, error, loading } from "@/config/swal";
import {
generateDataArticle,
getDetailArticle,
getGenerateKeywords,
getGenerateRewriter,
getGenerateTitle,
} from "@/service/generate-article";
import { delay } from "@/utils/global";
import dynamic from "next/dynamic";
const CustomEditor = dynamic(
() => {
return import("@/components/editor/custom-editor");
},
{ ssr: false }
);
const writingStyle = [
{
id: 1,
name: "Friendly",
},
{
id: 1,
name: "Professional",
},
{
id: 3,
name: "Informational",
},
{
id: 4,
name: "Neutral",
},
{
id: 5,
name: "Witty",
},
];
const articleSize = [
{
id: 1,
name: "News (300 - 900 words)",
value: "News",
},
{
id: 2,
name: "Info (900 - 2000 words)",
value: "Info",
},
{
id: 3,
name: "Detail (2000 - 5000 words)",
value: "Detail",
},
];
interface DiseData {
id: number;
articleBody: string;
title: string;
metaTitle: string;
description: string;
metaDescription: string;
mainKeyword: string;
additionalKeywords: string;
}
export default function GenerateContentRewriteForm(props: {
content: (data: DiseData) => void;
}) {
const [selectedWritingSyle, setSelectedWritingStyle] =
useState("Informational");
const [selectedArticleSize, setSelectedArticleSize] = useState("News");
const [selectedLanguage, setSelectedLanguage] = useState("id");
const [mainKeyword, setMainKeyword] = useState("");
const [articleIds, setArticleIds] = useState<number[]>([]);
const [selectedId, setSelectedId] = useState<number>();
const [isLoading, setIsLoading] = useState(true);
const onSubmit = async () => {
loading();
const request = {
advConfig: "",
context: mainKeyword,
style: selectedWritingSyle,
sentiment: "Informational",
urlContext: null,
contextType: "article",
lang: selectedLanguage,
createdBy: "123123",
clientId: "humasClientIdtest",
};
const res = await getGenerateRewriter(request);
close();
if (res?.error) {
error("Error");
}
setArticleIds([...articleIds, res?.data?.data?.id]);
};
useEffect(() => {
getArticleDetail();
}, [selectedId]);
const checkArticleStatus = async (data: string | null) => {
if (data === null) {
delay(7000).then(() => {
getArticleDetail();
});
}
};
const getArticleDetail = async () => {
if (selectedId) {
const res = await getDetailArticle(selectedId);
const data = res?.data?.data;
checkArticleStatus(data?.articleBody);
if (data?.articleBody !== null) {
setIsLoading(false);
props.content(data);
} else {
setIsLoading(true);
props.content({
id: data?.id,
articleBody: "",
title: "",
metaTitle: "",
description: "",
metaDescription: "",
additionalKeywords: "",
mainKeyword: "",
});
}
}
};
return (
<fieldset>
<form className="flex flex-col w-full mt-3">
<div className="grid grid-cols-1 md:grid-cols-3 gap-5 w-full">
<Select
label="Writing Style"
variant="bordered"
labelPlacement="outside"
placeholder=""
selectedKeys={[selectedWritingSyle]}
onChange={(e) =>
e.target.value !== ""
? setSelectedWritingStyle(e.target.value)
: ""
}
className="w-full"
classNames={{
label: "!text-black",
value: "!text-black",
trigger: [
"border-1 rounded-lg",
"dark:group-data-[focused=false]:bg-transparent !border-1 dark:!border-gray-400",
],
}}
>
<SelectSection>
{writingStyle.map((style) => (
<SelectItem key={style.name}>{style.name}</SelectItem>
))}
</SelectSection>
</Select>
<Select
label="Article Size"
variant="bordered"
labelPlacement="outside"
placeholder=""
selectedKeys={[selectedArticleSize]}
onChange={(e) =>
e.target.value !== ""
? setSelectedArticleSize(e.target.value)
: ""
}
className="w-full"
classNames={{
label: "!text-black",
value: "!text-black",
trigger: [
"border-1 rounded-lg",
"dark:group-data-[focused=false]:bg-transparent !border-1 dark:!border-gray-400",
],
}}
>
<SelectSection>
{articleSize.map((size) => (
<SelectItem key={size.value}>{size.name}</SelectItem>
))}
</SelectSection>
</Select>
<Select
label="Bahasa"
variant="bordered"
labelPlacement="outside"
placeholder=""
selectedKeys={[selectedLanguage]}
onChange={(e) =>
e.target.value !== "" ? setSelectedLanguage(e.target.value) : ""
}
className="w-full"
classNames={{
label: "!text-black",
value: "!text-black",
trigger: [
"border-1 rounded-lg",
"dark:group-data-[focused=false]:bg-transparent !border-1 dark:!border-gray-400",
],
}}
>
<SelectSection>
<SelectItem key="id">Indonesia</SelectItem>
<SelectItem key="en">English</SelectItem>
</SelectSection>
</Select>
</div>
<div className="flex flex-col mt-3">
<div className="flex flex-row gap-2 items-center">
<p className="text-sm">Text</p>
</div>
<div className="w-[78vw] lg:w-full">
<CustomEditor onChange={setMainKeyword} initialData={mainKeyword} />
</div>
{mainKeyword == "" && (
<p className="text-red-400 text-sm">Required</p>
)}
<Button
color="primary"
className="my-5 w-full py-5 text-xs md:text-base"
type="button"
onPress={onSubmit}
isDisabled={mainKeyword == ""}
>
Generate
</Button>
</div>
{articleIds.length > 0 && (
<div className="flex flex-row gap-1">
{articleIds?.map((id) => (
<Button
onPress={() => setSelectedId(id)}
key={id}
isLoading={isLoading && selectedId == id}
color={
selectedId == id && isLoading
? "warning"
: selectedId == id
? "success"
: "default"
}
>
<p className={selectedId == id ? "text-white" : "text-black"}>
{id}
</p>
</Button>
))}
</div>
)}
</form>
</fieldset>
);
}

4
components/form/article/generate-ai-single-form.tsx
View File

@ -388,7 +388,7 @@ export default function GenerateSingleArticleForm(props: {
</div>
{articleIds.length > 0 && (
<div className="flex flex-row gap-1">
{articleIds?.map((id) => (
{articleIds?.map((id, index) => (
<Button
onPress={() => setSelectedId(id)}
key={id}
@ -402,7 +402,7 @@ export default function GenerateSingleArticleForm(props: {
}
>
<p className={selectedId == id ? "text-white" : "text-black"}>
{id}
Article {index}
</p>
</Button>
))}

11
components/form/login.tsx
View File

@ -10,6 +10,7 @@ import { checkUsernames, getProfile, postSignIn } from "@/service/master-user";
import { useRouter } from "next/navigation";
import Swal from "sweetalert2";
import withReactContent from "sweetalert2-react-content";
import { saveActivity } from "@/service/activity-log";
export default function Login() {
const router = useRouter();
@ -53,6 +54,14 @@ export default function Login() {
sameSite: "strict",
});
const profile = await getProfile(access_token);
const resActivity = await saveActivity(
{
activityTypeId: 1,
url: "https://kontenhumas.com/auth",
userId: profile?.data?.data?.id,
},
response?.data?.data?.id_token
);
console.log("PROFILE : ", profile?.data);
Cookies.set("profile_picture", profile?.data?.data?.profilePictureUrl, {
expires: 1,
@ -85,8 +94,8 @@ export default function Login() {
expires: 1,
});
close();
router.push("/admin/dashboard");
close();
Cookies.set("status", "login", {
expires: 1,
});

12
components/form/magazine/create-magazine-form.tsx
View File

@ -254,7 +254,7 @@ export default function NewCreateMagazineForm() {
<div className="flex gap-3 grow">
<div className="file-preview">{renderPreview(file)}</div>
<div className="flex flex-col gap-1 grow">
<div className="flex flex-col gap-1 grow w-[45vw] md:w-auto">
<p className="text-sm font-semibold">Nama File</p>
<div className="flex flex-row gap-2 items-center">
<p className=" text-sm text-card-foreground">{file.name}</p>
@ -389,7 +389,9 @@ export default function NewCreateMagazineForm() {
{thumbnailImg.length > 0 ? (
<div className="flex flex-row">
<img
<Image
width={720}
height={480}
src={URL.createObjectURL(thumbnailImg[0])}
className="w-[30%]"
alt="thumbnail"
@ -409,7 +411,7 @@ export default function NewCreateMagazineForm() {
<input
id="file-upload"
type="file"
multiple
accept="image/*"
className="w-fit h-fit"
onChange={handleFileChange}
/>
@ -446,7 +448,9 @@ export default function NewCreateMagazineForm() {
</div>
{files.length ? (
<Fragment>
<div className="grid grid-cols-2 gap-2">{fileList}</div>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-2">
{fileList}
</div>
{files.length > 1 && (
<div className=" flex justify-between gap-2">
<Button onPress={() => setFiles([])} size="sm">

32
components/form/magazine/edit-magazine-form.tsx
View File

@ -156,12 +156,8 @@ export default function EditMagazineForm(props: { isDetail: boolean }) {
const data = res?.data?.data;
setValue("title", data?.title);
setValue("description", data?.description);
if (res?.data?.data?.thumbnailPath) {
setPrevThumbnail(
res?.data?.data?.thumbnailPath?.split("/")[
res?.data?.data?.thumbnailPath?.split("/").length - 1
]
);
if (res?.data?.data?.thumbnailUrl) {
setPrevThumbnail(res?.data?.data?.thumbnailUrl);
}
setDetailFiles(data?.files);
@ -303,7 +299,7 @@ export default function EditMagazineForm(props: { isDetail: boolean }) {
<div className="flex gap-3 grow">
<div className="file-preview">{renderPreview(file)}</div>
<div className="flex flex-col gap-1 grow">
<div className="flex flex-col gap-1 grow w-[45vw] md:w-auto">
<p className="text-sm font-semibold">Nama File</p>
<div className="flex flex-row gap-2 items-center">
<p className=" text-sm text-card-foreground">{file.name}</p>
@ -477,8 +473,10 @@ export default function EditMagazineForm(props: { isDetail: boolean }) {
{prevThumbnail !== "" ? (
<div className="flex flex-row">
<img
src={`http://38.47.180.165:8802/magazines/thumbnail/viewer/${prevThumbnail}`}
<Image
width={720}
height={480}
src={prevThumbnail}
className="w-[30%]"
alt="thumbnail"
/>
@ -496,7 +494,9 @@ export default function EditMagazineForm(props: { isDetail: boolean }) {
</div>
) : thumbnailImg.length > 0 ? (
<div className="flex flex-row">
<img
<Image
width={720}
height={480}
src={URL.createObjectURL(thumbnailImg[0])}
className="w-[30%]"
alt="thumbnail"
@ -516,7 +516,7 @@ export default function EditMagazineForm(props: { isDetail: boolean }) {
<input
id="file-upload"
type="file"
multiple
accept="image/*"
className="w-fit h-fit"
onChange={handleFileChange}
/>
@ -557,7 +557,7 @@ export default function EditMagazineForm(props: { isDetail: boolean }) {
</div>
</div>
</div>
<div className="grid grid-cols-2 gap-2">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-2">
{files.length ? (
<Fragment>
{fileList}
@ -574,14 +574,14 @@ export default function EditMagazineForm(props: { isDetail: boolean }) {
{detailfiles?.map((file: any, index: number) => (
<div
key={file.fileName + index}
className=" flex justify-between border p-3 rounded-md"
className=" flex flex-row lg:justify-between border p-3 rounded-md grow"
>
<div className="flex gap-3 grow">
<div className="file-preview">
{renderPreview(file, file.fileName)}
</div>
<div className="flex flex-col gap-1 grow">
<div className="flex flex-col grow gap-1 w-[45vw] md:w-auto">
<p className="text-sm font-semibold">Nama File</p>
<div className="flex flex-row gap-2 items-center">
<p className=" text-sm text-card-foreground">
@ -644,7 +644,7 @@ export default function EditMagazineForm(props: { isDetail: boolean }) {
</div>
<Button
className=" border-none rounded-full"
className=" border-none rounded-full m-0 p-0"
variant="bordered"
color="danger"
onClick={() => handleDeleteFile(file?.id)}
@ -657,7 +657,7 @@ export default function EditMagazineForm(props: { isDetail: boolean }) {
</Fragment>
)}
{isDetail && (
<div className="grid grid-cols-2 gap-2">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-2">
{detailfiles?.map((file: any, index: number) => (
<div
key={file.fileName + index}

16
components/form/qudo-login.tsx
View File

@ -7,7 +7,7 @@ import { error, loading, close } from "@/config/swal";
import { Button, Input } from "@nextui-org/react";
import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import { getProfile, postSignIn } from "@/service/master-user";
import { postSignIn } from "@/service/master-user";
const images = ["bg1.jpg", "bg2.jpg"];
@ -66,20 +66,6 @@ export default function QudoLogin() {
secure: true,
sameSite: "strict",
});
const profile = await getProfile();
console.log("PROFILE : ", profile?.data);
Cookies.set("profile_picture", profile?.data?.data?.profilePictureUrl, {
expires: 1,
});
Cookies.set("uie", profile?.data?.data?.id, {
expires: 1,
});
Cookies.set("ufne", profile?.data?.data?.fullname, {
expires: 1,
});
Cookies.set("username", profile?.data?.data?.username, {
expires: 1,
});
close();
router.push("/");

63
components/form/settings/profile.tsx
View File

@ -100,6 +100,38 @@ export default function ProfileForm(props: {
return (
<form className="flex flex-col gap-3 " onSubmit={handleSubmit(onSubmit)}>
<div className="flex flex-col gap-1">
<p className="text-sm">Username</p>
<Controller
control={control}
name="username"
render={({ field: { onChange, value } }) => (
<Input
type="text"
id="username"
placeholder=""
label=""
isReadOnly
value={value}
onChange={onChange}
labelPlacement="outside"
className="w-full "
classNames={{
inputWrapper: [
"border-1 rounded-lg",
"dark:group-data-[focused=false]:bg-transparent !border-1 dark:!border-gray-400",
],
}}
variant="bordered"
/>
)}
/>
{errors?.username && (
<p className="text-red-400 text-sm mb-3">
{errors.username?.message}
</p>
)}
</div>
<div className="flex flex-col gap-1">
<p className="text-sm">Nama Lengkap</p>
<Controller
@ -131,37 +163,6 @@ export default function ProfileForm(props: {
</p>
)}
</div>
<div className="flex flex-col gap-1">
<p className="text-sm">Username</p>
<Controller
control={control}
name="username"
render={({ field: { onChange, value } }) => (
<Input
type="text"
id="username"
placeholder=""
label=""
value={value}
onChange={onChange}
labelPlacement="outside"
className="w-full "
classNames={{
inputWrapper: [
"border-1 rounded-lg",
"dark:group-data-[focused=false]:bg-transparent !border-1 dark:!border-gray-400",
],
}}
variant="bordered"
/>
)}
/>
{errors?.username && (
<p className="text-red-400 text-sm mb-3">
{errors.username?.message}
</p>
)}
</div>
<div className="flex flex-col gap-1">
<p className="text-sm">Email</p>

166
components/icons.tsx
View File

File diff suppressed because one or more lines are too long

69
components/landing/BannerHumas.tsx
View File

@ -1,21 +1,76 @@
"use client";
import { useTranslations } from "next-intl";
import React from "react";
import Image from "next/image";
import React, { useEffect, useState } from "react";
import { ChevronLeftIcon, ChevronRightIcon } from "../icons";
const images = [
"/landing-1.jpg",
"/landing-2.jpg",
"/landing-3.jpg",
"/landing-4.jpg",
];
export default function BannerHumas() {
const t = useTranslations("Banner");
const [currentIndex, setCurrentIndex] = useState(0);
const [resetTimer, setResetTimer] = useState(0);
useEffect(() => {
const interval = setInterval(() => {
setCurrentIndex((prevIndex) => (prevIndex + 1) % images.length);
}, 25000);
return () => clearInterval(interval);
}, [resetTimer]);
const nextImage = () => {
setCurrentIndex((prevIndex) => (prevIndex + 1) % images.length);
setResetTimer((prev) => prev + 1);
};
const prevImage = () => {
setCurrentIndex(
(prevIndex) => (prevIndex - 1 + images.length) % images.length
);
setResetTimer((prev) => prev + 1);
};
return (
<div className="h-fit relative text-white lg:mt-[-130px]">
<img
src="headerbanner1.png"
alt="humasbanner"
className="w-full relative h-[78vh] lg:h-[95vh] object-cover"
/>
<div className="h-fit relative text-gray-300 dark:text-white lg:mt-[-130px] overflow-hidden">
<div
className="flex w-full h-[78vh] lg:h-[95vh] transition-transform duration-700 ease-in-out"
style={{ transform: `translateX(-${currentIndex * 100}%)` }}
>
{images.map((img, index) => (
<div key={index} className="w-full shrink-0">
<Image
src={img}
width={1440}
height={1080}
alt={`humasbanner-${index}`}
className="w-full h-full object-cover opacity-[100] dark:opacity-70"
/>
</div>
))}
</div>
<div className="absolute lg:mt-[50px] top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-center w-full lg:w-[75%]">
<p className="text-[30px] lg:text-[42px] lg:leading-10 font-bold pb-1 md:pb-5">
{t("jumbotron")}
</p>
<p className="text-xs md:text-medium">{`"${t("phrase")}"`}</p>
</div>
<button
onClick={prevImage}
className="absolute left-4 top-1/2 transform -translate-y-1/2 bg-black/50 text-white px-2 py-2 rounded-full hover:bg-black/70 transition"
>
<ChevronLeftIcon />
</button>
<button
onClick={nextImage}
className="absolute right-4 top-1/2 transform -translate-y-1/2 bg-black/50 text-white px-2 py-2 rounded-full hover:bg-black/70 transition"
>
<ChevronRightIcon />
</button>
</div>
);
}

4
components/landing/BodyLayout.tsx
View File

@ -11,9 +11,9 @@ export default function BodyLayout() {
<>
<div className="lg:flex bg-white text-black p-2 lg:p-8 gap-9">
<div className="lg:w-[75%] space-y-7">
{/* <MedolUpdate /> */}
{/* <CategorySatker /> */}
<CategorySatker />
<RegionalNews />
<MedolUpdate />
<MediaSocial />
<ENewsPolri />
</div>

58
components/landing/CategorySatker.tsx
View File

@ -53,6 +53,12 @@ export default function CategorySatker() {
title: "Itwasum",
path: "/news/itwasum",
},
{
id: 6,
img: "/assets/satker2/stik-ptik.svg",
title: "STIK-PTIK",
path: "/news/stik-ptik",
},
];
const SatkerAll = [
@ -298,18 +304,26 @@ export default function CategorySatker() {
// };
// }, [list]);
const changeNameToSlug = (name: string) => {
const cleaned = name.trim().toLowerCase();
return cleaned.replace(/\s+/g, "-");
};
return (
<div className="text-center bg-[#DD8306] rounded-none md:rounded-lg h-auto lg:h-[338px] space-y-0 py-4 md:space-y-7 flex flex-col justify-center">
<div className="text-white font-bold text-2xl underline underline-offset-4 decoration-red-600">
{t("kategoriSatker")}
<div className="text-xl text-white w-full justify-center flex">
<p className="border-b-3 border-[#C3170F] py-2 w-fit">
{" "}
{t("kategoriSatker")}
</p>
</div>
<div className="flex items-center justify-around">
<div>
<ChevronLeftWhite />
</div>
<div className="gap-2 md:gap-4 lg:gap-6 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5">
<div className="gap-2 md:gap-4 lg:gap-6 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6">
{list.map((item: any, index: any) => (
<Link href={item.path} key={item.path}>
<Link
href={`/news/all?satker=${changeNameToSlug(item.title)}`}
key={item.path}
>
<div
key={index}
className="w-[157px] h-[140px] flex flex-col items-center justify-evenly "
@ -320,15 +334,13 @@ export default function CategorySatker() {
</Link>
))}
</div>
<div>
<ChevronRightWhite />
</div>
</div>
<div>
<Button
onPress={onOpen}
className="bg-white text-[#DD8306] font-bold"
className="border-red-700 text-white w-fit"
size="sm"
variant="bordered"
>
{t("lebihBanyak")}
</Button>
@ -346,8 +358,12 @@ export default function CategorySatker() {
<ModalContent>
{(onClose) => (
<>
<ModalHeader className="flex flex-col text-[#DD8306] items-center min-h text-3xl font-semibold">
{t("kategoriSatker")}
<ModalHeader className="flex flex-col text-black items-center min-h text-3xl font-semibold">
<div className="text-xl text-black w-full justify-center flex">
<p className="border-b-3 border-[#C3170F] py-2 w-fit">
{t("kategoriSatker")}
</p>
</div>
</ModalHeader>
<ModalBody className="flex flex-row flex-wrap justify-center text-center">
{SatkerAll.map((item: any, index: any) => (
@ -355,21 +371,31 @@ export default function CategorySatker() {
key={index.id}
className="w-[140px] h-[115px] flex flex-col items-center justify-center rounded-lg shadow-sm"
>
<Link href={item.path}>
<Link
href={`/news/all?satker=${changeNameToSlug(
item.title
)}`}
>
{" "}
<Image
radius="lg"
className="h-[59px] "
src={item.img}
/>
</Link>
<p className="text-xs font-bold text-[#DD8306] pt-2">
<p className="text-xs font-bold text-black pt-2">
{item.title}
</p>
</div>
))}
</ModalBody>
<ModalFooter>
<Button color="danger" variant="light" onPress={onClose}>
<Button
variant="light"
onPress={onClose}
className="text-danger"
>
{" "}
{t("tutup")}
</Button>
</ModalFooter>

9
components/landing/ENewsPolri.tsx
View File

@ -69,8 +69,14 @@ export default function ENewsPolri() {
<SwiperSlide key={newsItem.id}>
<Card isFooterBlurred radius="lg" className="border-none">
<img
// width={720}
// height={480}
alt="thumbnail"
src={newsItem?.thumbnailUrl ? "" : "/no-image.jpg"}
src={
newsItem?.thumbnailUrl
? newsItem?.thumbnailUrl
: "no-image.jpg"
}
className="!h-[25vh] object-cover rounded-none"
/>
<CardFooter className="before:bg-white/10 border-white/20 border-1 overflow-hidden py-1 md:absolute bottom-1 shadow-small z-10">
@ -81,7 +87,6 @@ export default function ENewsPolri() {
</p>
</Link>
<div className="flex flex-row gap-1">
{" "}
<p className="py-[2px] text-left text-xs">
{convertDateFormat(newsItem.createdAt)} WIB
</p>

38
components/landing/HeaderNews.tsx
View File

@ -69,9 +69,15 @@ export default function HeaderNews() {
{article?.map((newsItem: any) => (
<SwiperSlide key={newsItem.id}>
<Card isFooterBlurred radius="lg" className="border-none">
<img
<Image
width={1920}
height={1080}
alt="headernews"
src={newsItem.thumbnailUrl}
src={
newsItem?.thumbnailUrl == ""
? "/no-image.jpg"
: newsItem?.thumbnailUrl
}
className="h-[25vh] object-cover"
/>
@ -111,10 +117,16 @@ export default function HeaderNews() {
className="text-xs text-left m-2 p-2 dark:bg-[#1E1616] bg-white rounded-md flex flex-row gap-2"
key={data.id}
>
<img
<Image
height={480}
width={480}
alt="headernews"
src={data.thumbnailUrl}
className="object-cover w-[18%] rounded-md"
src={
data?.thumbnailUrl == ""
? "/no-image.jpg"
: data?.thumbnailUrl
}
className="object-cover w-[60px] h-[60px] rounded-md"
/>
<div>
<Link
@ -129,7 +141,7 @@ export default function HeaderNews() {
key={data?.id}
className="hidden lg:block"
>
{data.title}{" "}
{textEllipsis(data.title, 66)}
</Link>
<div className="flex flex-row gap-2 text-[10px]">
<p className="py-[2px]">
@ -191,10 +203,16 @@ export default function HeaderNews() {
radius="lg"
className="border-none h-[67vh] shadow-none"
>
<img
<Image
alt="headernews"
src={newsItem.thumbnailUrl}
className="w-full h-[67vh] object-cover rounded-lg"
width={1440}
height={1080}
src={
newsItem?.thumbnailUrl == ""
? "/no-image.jpg"
: newsItem?.thumbnailUrl
}
className="w-full !h-[67vh] object-cover rounded-lg"
/>
<CardFooter className="mb-1 max-h-[20vh] before:bg-white/10 border-white/20 border-1 overflow-hidden py-1 md:absolute before:rounded-xl rounded-large bottom-1 w-[calc(100%_-_8px)] shadow-small ml-1 z-10">
@ -202,7 +220,7 @@ export default function HeaderNews() {
<Link
href={`news/detail/${newsItem.id}-${newsItem?.slug}`}
>
<p className="text-left font-semibold text-2xl">
<p className="text-left font-semibold text-lg lg:text-2xl">
{newsItem.title}
</p>
</Link>

185
components/landing/MediaSocial.tsx
View File

@ -1,111 +1,140 @@
import Link from "next/link";
import {
ChevronRightIcon,
FacebookLandingIcon,
FbIcon,
IgIcon,
InstagramLandingIcon,
TiktokLandingIcon,
TtIcon,
TwitterIcon,
XLandingIcon,
YoutubeLandingIcon,
YtIcon,
} from "../icons";
import TwitterWidget from "../ui/social-media/twitter";
import InstagramWidget from "../ui/social-media/instagram";
import FacebookWidget from "../ui/social-media/facebook";
import YoutubeWidget from "../ui/social-media/youtube";
import { useState } from "react";
import { Button } from "@nextui-org/button";
export default function MediaSocial() {
// const [limitedData, setLimitedData] = useState<any>([]);
const dummyData = [
{
id: 1,
logo: "/logohumas.png",
division: "Divisi Humas Polri",
type: "/temp/offical.svg",
username: "@DivHumas_Polri",
followIcon: "/temp/iconX.svg",
description:
"Pada pembukaan KTT ke-43 ASEAN, Presiden RI, H. Joko Widodo menegaskan bahwa kesatuan ASEAN sampai saat ini masih terjaga dan terpelihara dengan baik.",
imageUrl: "/headernews.png",
},
{
id: 2,
logo: "/logohumas.png",
division: "Divisi Humas Polri",
username: "@DivHumas_Polri",
type: "/temp/offical.svg",
followIcon: "/temp/iconX.svg",
description:
"Pada pembukaan KTT ke-43 ASEAN, Presiden RI, H. Joko Widodo menegaskan bahwa kesatuan ASEAN sampai saat ini masih terjaga dan terpelihara dengan baik.",
imageUrl: "/headernews.png",
},
{
id: 3,
logo: "/logohumas.png",
division: "Divisi Humas Polri",
type: "/temp/offical.svg",
username: "@DivHumas_Polri",
followIcon: "/temp/iconX.svg",
description:
"Pada pembukaan KTT ke-43 ASEAN, Presiden RI, H. Joko Widodo menegaskan bahwa kesatuan ASEAN sampai saat ini masih terjaga dan terpelihara dengan baik.",
imageUrl: "/headernews.png",
},
];
const [selectedPlatform, setSelectedPlatform] = useState("x");
return (
<div className="space-y-5 md:space-y-7 bg-white text-black rounded-lg ">
<p className="text-xl border-b-3 border-red-500 py-2 w-fit font-semibold">
MediaSocial
</p>
<div>
<div className="flex items-center justify-between pb-3">
<div className="flex flex-row gap-3">
<Button
className="min-w-[60px]"
variant={selectedPlatform === "x" ? "solid" : "flat"}
onClick={() => setSelectedPlatform("x")}
>
<div className="flex items-center">
<TwitterIcon color="#1DA1F2" />
<p className="pl-2 text-xl">Twitter</p>
<XLandingIcon size={16} />
<p
className={`pl-2 text-sm ${
selectedPlatform === "x"
? "font-semibold"
: "text-slate-600 dark:text-slate-50"
}`}
>
X
</p>
</div>
</div>
<div>
<TwitterWidget />
</div>
</Button>
<Button
className="min-w-[60px]"
variant={selectedPlatform === "instagram" ? "solid" : "flat"}
onClick={() => setSelectedPlatform("instagram")}
>
<div className="flex items-center">
<InstagramLandingIcon />
<p
className={`pl-2 text-sm ${
selectedPlatform === "instagram"
? "font-semibold"
: "text-slate-600 dark:text-slate-50"
}`}
>
Instagram
</p>
</div>
</Button>
<Button
className="min-w-[60px]"
variant={selectedPlatform === "facebook" ? "solid" : "flat"}
onClick={() => setSelectedPlatform("facebook")}
>
<div className="flex items-center">
<FacebookLandingIcon />
<p
className={`pl-2 text-sm ${
selectedPlatform === "facebook"
? "font-semibold"
: "text-slate-600 dark:text-slate-50"
}`}
>
Facebook
</p>
</div>
</Button>
<Button
className="min-w-[60px]"
variant={selectedPlatform === "tiktok" ? "solid" : "flat"}
onClick={() => setSelectedPlatform("tiktok")}
>
<div className="flex items-center">
<TiktokLandingIcon />
<p
className={`pl-2 text-sm ${
selectedPlatform === "tiktok"
? "font-semibold"
: "text-slate-600 dark:text-slate-50"
}`}
>
Tiktok
</p>
</div>
</Button>
<Button
className="min-w-[60px]"
variant={selectedPlatform === "youtube" ? "solid" : "flat"}
onClick={() => setSelectedPlatform("youtube")}
>
<div className="flex items-center">
<YoutubeLandingIcon />
<p
className={`pl-2 text-sm ${
selectedPlatform === "youtube"
? "font-semibold"
: "text-slate-600 dark:text-slate-50"
}`}
>
Youtube
</p>
</div>
</Button>
</div>
<div>
<div className="flex items-center justify-between pb-3">
<div className="flex items-center">
<IgIcon size={40} color="#1DA1F2" />
<p className="pl-2 text-xl">Instagram</p>
</div>
</div>
<div className="">
<InstagramWidget />
</div>
<div className={selectedPlatform === "x" ? "" : "hidden"}>
<TwitterWidget />
</div>
<div>
<div className="flex items-center justify-between pb-3">
<div className="flex items-center">
<FbIcon color="#1DA1F2" />
<p className="pl-2 text-xl">Facebook</p>
</div>
</div>
<div className={selectedPlatform === "instagram" ? "" : "hidden"}>
<InstagramWidget />
</div>
<div className={selectedPlatform === "facebook" ? "" : "hidden"}>
<FacebookWidget />
</div>
<div>
<div className="flex items-center justify-between pb-3">
<div className="flex items-center">
<TtIcon color="#1DA1F2" size={40} />
<p className="pl-2 text-xl">Tiktok</p>
</div>
</div>
<div className={selectedPlatform === "tiktok" ? "" : "hidden"}>
<FacebookWidget />
</div>
<div>
<div className="flex items-center justify-between pb-3">
<div className="font-semibold flex items-center">
<YtIcon color="#1DA1F2" size={40} />
<p className="text-xl pl-2">Youtube</p>
</div>
</div>
<div className=" rounded-md ">
<YoutubeWidget />
</div>
<div className={selectedPlatform === "youtube" ? "" : "hidden"}>
<YoutubeWidget />
</div>
</div>
);

82
components/landing/MedolUpdate.tsx
View File

@ -91,9 +91,31 @@ export default function MedolUpdate() {
navigation={true}
modules={[Navigation, Pagination]}
spaceBetween={40}
slidesPerView={2}
slidesPerView={1}
breakpoints={{
// When the window width is less than 640px
720: {
slidesPerView: 2, // Set slidesPerView to 1 on mobile
},
}}
pagination={true}
className="mySwiper"
onSwiper={(swiper) => {
swiper.navigation.nextEl?.classList.add(
"bg-white/70",
"!text-black",
"rounded-full",
"!w-[40px]",
"!h-[40px]"
);
swiper.navigation.prevEl?.classList.add(
"bg-white/70",
"!text-black",
"rounded-full",
"!w-[40px]",
"!h-[40px]"
);
}}
>
{mediahubUpdate?.map((newsItem: any) => (
<SwiperSlide key={newsItem.title}>
@ -108,7 +130,7 @@ export default function MedolUpdate() {
radius="lg"
width="300%"
alt="tes"
className="object-cover h-[270px]"
className="object-cover !h-[30vh]"
src={newsItem.thumbnailLink}
/>
</CardBody>
@ -141,9 +163,31 @@ export default function MedolUpdate() {
navigation={true}
modules={[Navigation, Pagination]}
spaceBetween={40}
slidesPerView={2}
slidesPerView={1}
breakpoints={{
// When the window width is less than 640px
720: {
slidesPerView: 2, // Set slidesPerView to 1 on mobile
},
}}
pagination={true}
className="mySwiper"
onSwiper={(swiper) => {
swiper.navigation.nextEl?.classList.add(
"bg-white/70",
"!text-black",
"rounded-full",
"!w-[40px]",
"!h-[40px]"
);
swiper.navigation.prevEl?.classList.add(
"bg-white/70",
"!text-black",
"rounded-full",
"!w-[40px]",
"!h-[40px]"
);
}}
>
{tbnUpdate?.map((newsItem: any) => (
<SwiperSlide key={newsItem.title}>
@ -158,7 +202,7 @@ export default function MedolUpdate() {
radius="lg"
width="300%"
alt="tes"
className="object-cover h-[270px]"
className="object-cover !h-[30vh]"
src={newsItem?.image}
/>
</CardBody>
@ -184,14 +228,36 @@ export default function MedolUpdate() {
</Link>
</div>
</Tab>
{/* <Tab key="inp" title="Indonesia Nasional Police Update">
<Tab key="inp" title="Indonesia Nasional Police Update">
<Swiper
navigation={true}
modules={[Navigation, Pagination]}
spaceBetween={40}
slidesPerView={2}
slidesPerView={1}
breakpoints={{
// When the window width is less than 640px
720: {
slidesPerView: 2, // Set slidesPerView to 1 on mobile
},
}}
pagination={true}
className="mySwiper"
onSwiper={(swiper) => {
swiper.navigation.nextEl?.classList.add(
"bg-white/70",
"!text-black",
"rounded-full",
"!w-[40px]",
"!h-[40px]"
);
swiper.navigation.prevEl?.classList.add(
"bg-white/70",
"!text-black",
"rounded-full",
"!w-[40px]",
"!h-[40px]"
);
}}
>
{inpUpdate?.map((newsItem: any) => (
<SwiperSlide key={newsItem?.id}>
@ -206,7 +272,7 @@ export default function MedolUpdate() {
radius="lg"
width="300%"
alt="tes"
className="object-cover h-[270px]"
className="object-cover !h-[30vh]"
src={newsItem.image}
/>
</CardBody>
@ -231,7 +297,7 @@ export default function MedolUpdate() {
</Button>
</a>
</div>
</Tab> */}
</Tab>
<Tab key="polritv" title="Polri TV Update">
<div className="w-full">
<div className="w-[40%] mx-auto">

2
components/landing/NewsTicker.tsx
View File

@ -49,7 +49,7 @@ export default function NewsTicker() {
<div className="fixed bottom-0 z-50 flex flex-row h-[60px] gap-3 w-full justify-between dark:bg-stone-800 bg-gray-50">
<div className="relative px-4 py-2 font-semibold text-xs lg:text-sm flex items-center bg-amber-500 text-white w-[30%] lg:w-[10%]">
<span className="mr-2"></span> BREAKING NEWS
<div className="absolute right-0 top-0 h-full w-4 bg-amber-500 transform translate-x-full clip-path-triangle"></div>
<div className="absolute right-0 top-0 h-full w-4 bg-amber-500 transform translate-x-full clipPath-triangle"></div>
</div>
<div
className={`w-full px-5 py-1 flex flex-col gap-1 transition-transform duration-300 ${

31
components/landing/RegionalNews.tsx
View File

@ -298,6 +298,12 @@ export default function RegionalNews() {
// };
// }, [list]);
const changeNameToSlug = (name: string) => {
const cleaned = name.replace("Polda ", "").trim().toLowerCase();
const slug = cleaned.replace(/\s+/g, "-");
return slug;
};
return (
<div className="text-center rounded-md lg:rounded-lg h-auto lg:h-[338px] flex flex-col p-6 bg-[#DD8306]">
<div className="text-xl text-white w-full justify-center flex">
@ -312,7 +318,10 @@ export default function RegionalNews() {
</div> */}
<div className="gap-2 md:gap-4 lg:gap-6 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6">
{listPolda.map((item: any, index: any) => (
<Link href={item.path} key={item.path}>
<Link
href={`/news/all?polda=${changeNameToSlug(item.title)}`}
key={item.path}
>
<div
key={item.id}
className="w-[157px] h-[141px] flex flex-col items-center justify-evenly"
@ -344,8 +353,8 @@ export default function RegionalNews() {
scrollBehavior={scrollBehavior}
placement={modalPlacement}
classNames={{
wrapper: "bg-[#DD8306]",
base: "bg-[#DD8306] min-h-full",
wrapper: "bg-white",
base: "bg-white min-h-full",
// body: "w-full bg-white",
// footer: "bg-white"
}}
@ -353,8 +362,8 @@ export default function RegionalNews() {
<ModalContent>
{(onClose) => (
<>
<ModalHeader className="flex flex-col text-white items-center min-h mb- text-3xl font-semibold">
<div className="text-xl text-white w-full justify-center flex">
<ModalHeader className="flex flex-col text-black items-center min-h mb- text-3xl font-semibold">
<div className="text-xl text-black w-full justify-center flex">
<p className="border-b-3 border-[#C3170F] py-2 w-fit">
{" "}
{t("beritaWilayah")}
@ -367,14 +376,16 @@ export default function RegionalNews() {
key={index.id}
className="w-[140px] h-[115px] flex flex-col items-center justify-center rounded-lg shadow-sm"
>
<Link href={item.path}>
<Link
href={`/news/all?polda=${changeNameToSlug(item.title)}`}
>
<div className="flex flex-col items-center ">
<Image
radius="lg"
className="h-[59px]"
src={item.img}
/>
<p className="text-xs font-bold text-white">
<p className="text-xs font-bold text-black">
{item.title}
</p>
</div>
@ -383,7 +394,11 @@ export default function RegionalNews() {
))}
</ModalBody>
<ModalFooter>
<Button variant="light" onPress={onClose}>
<Button
variant="light"
onPress={onClose}
className="text-danger"
>
{t("tutup")}
</Button>
</ModalFooter>

16
components/landing/SidebarNav.tsx
View File

@ -30,7 +30,7 @@ export default function SidebarNav() {
onClick={() => setSelectedTab("media")}
className={
selectedTab === "media"
? "text-black dark:text-white border-b-3 border-red-400 cursor-pointer py-2"
? "text-black border-b-3 border-red-400 cursor-pointer py-2"
: "text-slate-300 cursor-pointer py-2"
}
>
@ -40,7 +40,7 @@ export default function SidebarNav() {
onClick={() => setSelectedTab("video")}
className={
selectedTab === "video"
? "text-black dark:text-white border-b-3 border-red-400 cursor-pointer py-2"
? "text-black border-b-3 border-red-400 cursor-pointer py-2"
: "text-slate-300 cursor-pointer py-2"
}
>
@ -91,10 +91,10 @@ export default function SidebarNav() {
></iframe>
</div>
)}
<p className="text-[15px] border-b-3 border-red-500 w-fit py-2">
{/* <p className="text-[15px] border-b-3 border-red-500 w-fit py-2">
Pelayanan Informasi Publik
</p>
<img src="pelayanan-informasi-publik.png" className="w-full" />
<img src="pelayanan-informasi-publik.png" className="w-full" /> */}
{/* <div className="text-xl font-semibold underline underline-offset-4 decoration-red-600 ">
SERTIFIKAT ISO 9001:2015
</div>
@ -163,7 +163,7 @@ export default function SidebarNav() {
</Link>
</div>
</div> */}
{/* <div className="text-xl font-semibold underline underline-offset-4 decoration-red-600">
<div className="text-xl font-semibold underline underline-offset-4 decoration-red-600">
Channel Humas Polri
<div className="flex flex-col gap-3 m-10">
<Link
@ -226,9 +226,9 @@ export default function SidebarNav() {
/>
</Link>
</div>
</div> */}
</div>
</div>
<p className="text-[15px] border-b-3 border-red-500 py-2 w-fit mx-1 lg:mx-5">
{/* <p className="text-[15px] border-b-3 border-red-500 py-2 w-fit mx-1 lg:mx-5">
{" "}
Info Eksternal
</p>
@ -321,7 +321,7 @@ export default function SidebarNav() {
Info dan Berita terbaru dari Komnas Perempuan Indonesia
</p>
</div>
</div>
</div> */}
</>
);
}

7
components/layout/admin-layout.tsx
View File

@ -4,13 +4,14 @@ import { useEffect, useState } from "react";
import Sidebar from "./sidebar/sidebar";
import { SidebarProvider } from "./sidebar/sidebar-context";
import { Breadcrumb } from "../ui/breadcrumb";
import SidebarMobile from "./sidebar/sidebar-mobile";
interface Props {
children: React.ReactNode;
}
export const AdminLayout = ({ children }: Props) => {
const [isOpen, setIsOpen] = useState(true);
const [isOpen, setIsOpen] = useState(false);
const updateSidebarData = (newData: boolean) => {
setIsOpen(newData);
};
@ -29,6 +30,10 @@ export const AdminLayout = ({ children }: Props) => {
<SidebarProvider>
<div className="!h-screen flex items-center flex-row !overflow-y-hidden">
<Sidebar sidebarData={isOpen} updateSidebarData={updateSidebarData} />
<SidebarMobile
sidebarData={isOpen}
updateSidebarData={updateSidebarData}
/>
<div className={`w-full h-full flex flex-col overflow-hidden`}>
<Breadcrumb />
{children}

22
components/layout/navbar/NavbarHumas.tsx
View File

@ -68,15 +68,15 @@ export default function NavbarHumas(props: { size: string }) {
const language = storedLanguage((state) => state.locale);
const setLanguage = storedLanguage((state) => state.setLocale);
useEffect(() => {
if (!isAuthenticated) {
onLogout();
}
}, [token]);
// useEffect(() => {
// if (!isAuthenticated) {
// onLogout();
// }
// }, [token]);
const onLogout = () => {
Object.keys(Cookies.get()).forEach((cookieName) => {
Cookies.remove(cookieName);
Cookies.remove(cookieName, { path: "/" });
});
router.push("/auth");
};
@ -154,7 +154,6 @@ export default function NavbarHumas(props: { size: string }) {
<Link href={"/"}>
<img src="/logohumas.png" alt="logo" className="w-[95px]" />
</Link>
<Dropdown
className="bg-white dark:bg-[#1F1A17] "
radius="none"
@ -394,7 +393,14 @@ export default function NavbarHumas(props: { size: string }) {
</div>
</DropdownItem>
</DropdownMenu>
</Dropdown>
</Dropdown>{" "}
<Link
href="https://eppid.polri.go.id/"
target="_blank"
className="font-semibold"
>
E-PPID
</Link>
<Dropdown
className=" dark:bg-[#1F1A17]"
onOpenChange={(state) => setIsOpen(state)}

481
components/layout/sidebar/sidebar-mobile.tsx Normal file
View File

@ -0,0 +1,481 @@
import { SidebarMenuTask } from "@/types/globals";
import { Tooltip } from "@nextui-org/react";
import Link from "next/link";
import { usePathname, useRouter } from "next/navigation";
import React, { useEffect, useState } from "react";
import {
ChevronLeftIcon,
ChevronRightIcon,
FormCustomIcon,
FormHorizontalIcon,
FormLayoutIcon,
FormValidationIcon,
FormVerticalIcon,
} from "../../icons";
import {
ArticleIcon,
DashboardIcon,
HomeIcon,
InfoCircleIcon,
MagazineIcon,
MasterCategoryIcon,
MasterRoleIcon,
MasterUsersIcon,
MinusCircleIcon,
StaticPageIcon,
TableIcon,
} from "../../icons/sidebar-icon";
import { ThemeSwitch } from "../../theme-switch";
import { SidebarCollapseItems } from "./sidebar-collapse-items";
import { SidebarCollapseSubItems } from "./sidebar-collapse-sub-items";
import { useSidebar } from "./sidebar-context";
import { SidebarMenu } from "./sidebar-menu";
import Image from "next/image";
import Cookies from "js-cookie";
import { SettingsIcon, UserProfileIcon } from "@/components/icons/globals";
interface SubMenuItems {
id: number;
name: string;
modulePathUrl: string;
isSubActive: boolean;
}
interface MenuItems {
id: number;
name: string;
modulePathUrl: string;
isSubActive: boolean;
childMenu?: SubMenuItems[];
icon?: string;
}
interface SidebarProps {
sidebarData: boolean;
updateSidebarData: (newData: boolean) => void;
}
const sideBarDummyData = [
{
id: 1,
name: "Dashboard",
moduleId: 652,
moduleName: "Dashboard",
modulePathUrl: "/admin/dashboard",
isGroup: true,
parentId: -1,
icon: "dashboard",
position: 1,
statusId: 1,
childMenu: [],
statusName: "Active",
childModule: null,
},
{
id: 2,
name: "Dashboard",
moduleId: 652,
moduleName: "Dashboard",
modulePathUrl: "/admin/dashboard",
parentId: -1,
icon: <DashboardIcon />,
position: 1,
statusId: 1,
childMenu: [],
statusName: "Active",
childModule: null,
},
{
id: 3,
name: "Apps",
moduleId: 652,
moduleName: "Dashboard",
modulePathUrl: "/admin/basic",
isGroup: true,
parentId: -1,
icon: "table",
position: 1,
statusId: 1,
childMenu: [],
statusName: "Active",
childModule: null,
},
{
id: 4,
name: "Artikel",
moduleId: 652,
moduleName: "Dashboard",
modulePathUrl: "/admin/article",
parentId: -1,
icon: <ArticleIcon size={24} />,
position: 1,
statusId: 1,
childMenu: [],
statusName: "Active",
childModule: null,
},
{
id: 30,
name: "Kategori",
moduleId: 654,
moduleName: "Master",
modulePathUrl: "/admin/master-category",
parentId: -1,
icon: <MasterCategoryIcon size={22} />,
position: 1,
statusId: 1,
childMenu: [],
statusName: "Active",
childModule: null,
},
{
id: 4,
name: "Majalah",
moduleId: 652,
moduleName: "Apps",
modulePathUrl: "/admin/magazine",
parentId: -1,
icon: <MagazineIcon size={23} />,
position: 1,
statusId: 1,
childMenu: [],
statusName: "Active",
childModule: null,
},
// {
// id: 4,
// name: "E-Magazine",
// moduleId: 652,
// moduleName: "Dashboard",
// modulePathUrl: "/admin/e-magazine",
// parentId: -1,
// icon: <TableIcon />,
// position: 1,
// statusId: 1,
// childMenu: [],
// statusName: "Active",
// childModule: null,
// },
{
id: 5,
name: "Master",
moduleId: 652,
moduleName: "Dashboard",
isGroup: true,
modulePathUrl: "/admin/basic",
parentId: -1,
icon: "table",
position: 1,
statusId: 1,
childMenu: [],
statusName: "Active",
childModule: null,
},
// {
// id: 6,
// name: "Master Menu",
// moduleId: 652,
// moduleName: "Form Custom",
// modulePathUrl: "/admin/master-menu",
// parentId: -1,
// icon: <FormCustomIcon />,
// position: 1,
// statusId: 1,
// childMenu: [],
// statusName: "Active",
// childModule: null,
// },
// {
// id: 7,
// name: "Master Module",
// moduleId: 653,
// moduleName: "Form Horizontal",
// modulePathUrl: "/admin/master-module",
// parentId: -1,
// icon: <FormHorizontalIcon />,
// position: 1,
// statusId: 1,
// childMenu: [],
// statusName: "Active",
// childModule: null,
// },
{
id: 11,
name: "Master Static Page",
moduleId: 652,
moduleName: "Dashboard",
modulePathUrl: "/admin/static-page",
parentId: -1,
icon: <StaticPageIcon size={24} />,
position: 1,
statusId: 1,
childMenu: [],
statusName: "Active",
childModule: null,
},
{
id: 8,
name: "Master User",
moduleId: 654,
moduleName: "Form Vertical",
modulePathUrl: "/admin/master-user",
parentId: -1,
icon: <MasterUsersIcon />,
position: 1,
statusId: 1,
childMenu: [],
statusName: "Active",
childModule: null,
},
{
id: 10,
name: "Master User Role",
moduleId: 656,
moduleName: "Form Validation",
modulePathUrl: "/admin/master-role",
parentId: -1,
icon: <MasterRoleIcon />,
position: 1,
statusId: 1,
childMenu: [],
statusName: "Active",
childModule: null,
},
];
const SidebarMobile: React.FC<SidebarProps> = ({ updateSidebarData }) => {
const pathname = usePathname();
const router = useRouter();
const [sidebarMenu, setSidebarMenu] = useState<SidebarMenuTask[]>();
const { isOpen, toggleSidebar } = useSidebar();
const token = Cookies.get("access_token");
const username = Cookies.get("username");
const isAuthenticated = Cookies.get("is_authenticated");
useEffect(() => {
if (!token) {
onLogout();
}
}, [token]);
const onLogout = () => {
Object.keys(Cookies.get()).forEach((cookieName) => {
Cookies.remove(cookieName);
});
router.push("/auth");
};
useEffect(() => {
updateSidebarData(isOpen);
}, [isOpen]);
return (
<div
className={`flex lg:hidden absolute h-screen flex-grow ${
isOpen ? "min-w-[240px]" : "hidden"
}`}
>
<div
className={` flex h-full flex-col p-4 mb-0 bg-gray-950 z-40 transition-width !ease-in-out justify-between ${
isOpen ? "w-[238px]" : "w-[80px]"
}`}
>
<div>
{!isOpen && (
<div className="w-full flex justify-center items-center">
<button
className="w-5 h-5 mb-3 text-zinc-400 dark:text-zinc-400 z-50 border-1 border-zinc-400 rounded-full flex justify-center items-center"
onClick={toggleSidebar}
>
<ChevronRightIcon />
</button>
</div>
)}
<div
className={`flex ${
isOpen ? "justify-between" : "justify-center"
} w-full items-center px-2`}
>
<Link
href="/"
className="flex flex-row items-center gap-3 font-bold"
>
<img src="/logohumas.png" className="w-20" />
{/* {isOpen && <span>ACME</span>} */}
</Link>
{isOpen && (
<button
className="w-5 h-5 text-zinc-400 z-50 border-1 border-zinc-400 rounded-full flex justify-center items-center"
onClick={toggleSidebar}
>
<ChevronLeftIcon />
</button>
)}
</div>
<SidebarMenu>
{sideBarDummyData
? sideBarDummyData?.map((list: any, index: number) =>
list.isGroup ? (
<p
key={list}
className={`font-bold mr-4 text-white ${
!isOpen ? "text-center" : ""
}`}
>
{isOpen ? list.name : "..."}
</p>
) : list.childMenu?.length < 1 ? (
<>
{isOpen ? (
<Link key={list.id} href={list.modulePathUrl}>
{/* <div
className={`px-3.5 py-2 mr-4 rounded-lg hover:bg-zinc-400 dark:hover:text-zinc-600 flex flex-row gap-2 ${
pathname.includes(list.modulePathUrl)
? "bg-zinc-600 dark:bg-zinc-300 text-zinc-300 dark:text-zinc-500 font-bold"
: "text-zinc-600 dark:text-zinc-400"
}`}
> */}
<div
className={`px-3.5 py-2 mr-4 rounded-lg flex flex-row gap-2 ${
pathname.includes(list.modulePathUrl)
? "bg-white text-black font-bold"
: "text-white hover:bg-gray-200 hover:text-black"
}`}
>
{list.icon} {isOpen && list.name}
</div>
</Link>
) : (
<Tooltip
content={list.name}
placement="right"
delay={0}
closeDelay={0}
>
<Link key={list.id} href={list.modulePathUrl}>
<div
className={`py-2 mr-4 rounded-lg hover:bg-zinc-400 dark:hover:text-zinc-600 flex flex-row justify-center gap-1 ${
pathname.includes(list.modulePathUrl)
? "bg-zinc-300 text-zinc-500 font-bold hover:text-black"
: "text-zinc-400 hover:text-black"
}`}
>
{list.icon} {isOpen && list.name}
</div>
</Link>
</Tooltip>
)}
</>
) : (
<SidebarCollapseItems
key={list.id}
title={list.name}
isActive={pathname.includes(list.modulePathUrl)}
icon={list.icon}
items={[
list?.childMenu?.map((item: any) => (
<SidebarCollapseSubItems
key={item.id}
title={item?.name}
isActive={pathname.includes(item.modulePathUrl)}
isParentActive={pathname.includes(
list.modulePathUrl
)}
path={item.modulePathUrl}
icon={item.icon}
/>
)),
]}
/>
)
)
: ""}
</SidebarMenu>
</div>
<div
className={`mt-12 p-2 flex ${
isOpen ? "justify-start ml-2" : "justify-center"
} mt-auto flex flex-col items-between`}
>
<div className="flex flex-col gap-4">
<div
className={`flex flex-row ${
isOpen ? "justify-start" : "justify-center"
} gap-2 items-center text-white `}
>
<ThemeSwitch />
{isOpen && "Theme"}
</div>
{isOpen ? (
<Link href="/settings">
<div
className={`py-2 mr-4 rounded-lg flex flex-row gap-2 ${
pathname.includes("/settings")
? "bg-white text-black font-bold px-2"
: "text-white "
}`}
>
<SettingsIcon /> {isOpen && "Settings"}
</div>
</Link>
) : (
<Tooltip
content="Setting"
placement="right"
delay={0}
closeDelay={0}
>
<Link href="/settings">
<div
className={`py-2 rounded-lg hover:text-zinc-600 flex flex-row justify-center gap-1 ${
pathname.includes("/settings")
? "bg-zinc-300 text-zinc-500 font-bold "
: "text-zinc-400 "
}`}
>
<SettingsIcon /> {isOpen && "Settings"}
</div>
</Link>
</Tooltip>
)}
{isOpen ? (
<div className="flex flex-row gap-3 items-center text-white">
<UserProfileIcon size={36} />
<div className="flex flex-col ">
<a className="cursor-pointer ">{username}</a>
<a
className="hover:text-red-600 underline text-sm cursor-pointer"
onClick={() => onLogout()}
>
Logout
</a>
</div>
</div>
) : (
<Tooltip
content="Profile"
delay={0}
closeDelay={0}
placement="right"
>
<a
className={`cursor-pointer flex flex-row ${
isOpen ? "justify-start" : "justify-center"
} gap-2 items-center text-zinc-600 dark:text-zinc-400 hover:font-semibold hover:text-zinc-700 dark:hover:text-zinc-300`}
onClick={toggleSidebar}
>
<UserProfileIcon size={28} />
</a>
</Tooltip>
)}
</div>
</div>
</div>
</div>
);
};
export default SidebarMobile;

2
components/layout/sidebar/sidebar.tsx
View File

@ -262,7 +262,7 @@ const Sidebar: React.FC<SidebarProps> = ({ updateSidebarData }) => {
const onLogout = () => {
Object.keys(Cookies.get()).forEach((cookieName) => {
Cookies.remove(cookieName);
Cookies.remove(cookieName, { path: "/" });
});
router.push("/auth");
};

1
components/main/dashboard/chart/column-chart.tsx
View File

@ -86,7 +86,6 @@ const ApexChartColumn = (props: {
})
);
} else {
console.log("sadadad", getDatas.visit, getDatas.view, getDatas.share);
setSeriesVisit(getDatas.visit);
setSeriesView(getDatas.view);
setSeriesShare(getDatas.share);

337
components/main/dashboard/dashboard-container.tsx
View File

@ -33,11 +33,86 @@ type ArticleData = Article & {
createdAt: string;
};
interface TopPages {
id: number;
no: number;
title: string;
visits: number;
}
interface PostCount {
id: number;
no: number;
name: string;
count: number;
}
const dummyTopPages = [
{ id: 1, title: "Home Page", visits: 830 },
{ id: 2, title: "Media Update", visits: 762 },
{ id: 3, title: "Polda Metro Jaya", visits: 532 },
{ id: 4, title: "Kapolri: Transformasi Menuju Polri Presisi", visits: 500 },
{ id: 5, title: "Polda Jawa Barat Ungkap Kasus Narkoba", visits: 480 },
{ id: 6, title: "Polri Perketat Pengamanan Jelang Pemilu", visits: 460 },
{ id: 7, title: "Polda Jawa Tengah Berhasil Tangkap Buronan", visits: 440 },
{
id: 8,
title: "Divisi Humas Polri Rilis Data Kejahatan Terbaru",
visits: 420,
},
{ id: 9, title: "Polda Sumatera Utara Gerebek Pabrik Narkoba", visits: 400 },
{
id: 10,
title: "Kapolda Bali Imbau Wisatawan Waspada Kejahatan",
visits: 380,
},
];
const dummyPostCount = [
{ id: 1, name: "Polda Sumatera Utara", count: 132 },
{ id: 2, name: "Polda Metro Jaya", count: 128 },
{ id: 3, name: "Polda Jawa Barat", count: 120 },
{ id: 4, name: "Polda Jawa Timur", count: 115 },
{ id: 5, name: "Polda Bali", count: 110 },
{ id: 6, name: "Polda Daerah Istimewa Yogyakarta", count: 105 },
{ id: 7, name: "Polda Riau", count: 98 },
{ id: 8, name: "Polda Sulawesi Selatan", count: 92 },
{ id: 9, name: "Polda Kalimantan Timur", count: 85 },
{ id: 10, name: "Polda Jawa Tengah", count: 78 },
{ id: 11, name: "Polda Kalimantan Selatan", count: 72 },
{ id: 12, name: "Polda Sumatera Barat", count: 65 },
{ id: 13, name: "Polda Papua", count: 60 },
{ id: 14, name: "Polda Nusa Tenggara Barat", count: 54 },
{ id: 15, name: "Polda Maluku", count: 49 },
{ id: 16, name: "Polda Bengkulu", count: 43 },
{ id: 17, name: "Polda Lampung", count: 37 },
{ id: 18, name: "Polda Sulawesi Tenggara", count: 30 },
{ id: 19, name: "Polda Gorontalo", count: 24 },
{ id: 20, name: "Polda Kalimantan Barat", count: 18 },
{ id: 21, name: "Polda Kepulauan Riau", count: 10 },
{ id: 22, name: "Polda Sulawesi Barat", count: 8 },
{ id: 23, name: "Polda Papua Barat", count: 5 },
{ id: 24, name: "Polda Maluku Utara", count: 3 },
{ id: 25, name: "Polda Nusa Tenggara Timur", count: 2 },
{ id: 26, name: "Polda Kalimantan Tengah", count: 1 },
{ id: 27, name: "Polda Sulawesi Tengah", count: 1 },
{ id: 28, name: "Polda Bangka Belitung", count: 1 },
{ id: 29, name: "Polda Jambi", count: 0 },
{ id: 30, name: "Polda Banten", count: 0 },
{ id: 31, name: "Polda Aceh", count: 0 },
{ id: 32, name: "Polda Kalimantan Utara", count: 0 },
{ id: 33, name: "Polda Sulawesi Utara", count: 0 },
{ id: 34, name: "Polda Kepulauan Bangka Belitung", count: 0 },
{ id: 35, name: "Polda Sumatera Selatan", count: 0 },
];
export default function DashboardContainer() {
const username = Cookies.get("username");
const fullname = Cookies.get("ufne");
const [page, setPage] = useState(1);
const [totalPage, setTotalPage] = useState(1);
const [topPagespage, setTopPagesPage] = useState(1);
const [topPagesTotalPage, setTopPagesTotalPage] = useState(1);
const [article, setArticle] = useState<ArticleData[]>([]);
const [analyticsView, setAnalyticView] = useState<string[]>([
"visit",
@ -49,10 +124,20 @@ export default function DashboardContainer() {
endDate: new Date(),
});
const [postContentDate, setPostContentDate] = useState({
startDate: new Date(new Date().setDate(new Date().getDate() - 7)),
endDate: new Date(),
});
const [typeDate, setTypeDate] = useState("monthly");
const [topPages, setTopPages] = useState<TopPages[]>([]);
const [postCount, setPostCount] = useState<PostCount[]>([]);
useEffect(() => {
initState();
fetchTopPages();
fetchPostCount();
}, [page]);
async function initState() {
@ -66,6 +151,28 @@ export default function DashboardContainer() {
setTotalPage(res?.data?.meta?.totalPage);
}
async function fetchTopPages() {
setTopPages(getTableNumber(10, dummyTopPages));
setTopPagesTotalPage(1);
}
async function fetchPostCount() {
setPostCount(getTableNumber(10, dummyPostCount));
setTopPagesTotalPage(1);
}
const getTableNumber = (limit: number, data: any) => {
if (data) {
const startIndex = limit * (page - 1);
let iterate = 0;
const newData = data.map((value: any) => {
iterate++;
value.no = startIndex + iterate;
return value;
});
return newData;
}
};
const getMonthYear = (date: Date | string) => {
const newDate = new Date(date);
@ -90,10 +197,10 @@ export default function DashboardContainer() {
};
return (
<div className="p-8 flex justify-center">
<div className="px-2 lg:p-8 flex justify-center">
<div className="w-full flex flex-col gap-6">
<div className="w-full flex flex-col md:flex-row gap-6 justify-center">
<div className="px-8 py-4 justify-between w-full md:w-[37%] h-[160px] shadow-md bg-white dark:bg-[#18181b] flex flex-col rounded-lg">
<div className="w-full flex flex-col lg:flex-row gap-6 justify-center">
<div className="px-4 lg:px-8 py-4 justify-between w-full lg:w-[37%] h-[160px] shadow-md bg-white dark:bg-[#18181b] flex flex-col rounded-lg">
<div className="flex justify-between w-full items-center">
<div className="flex flex-col gap-2">
<p className="font-bold text-xl ">{fullname}</p>
@ -111,28 +218,28 @@ export default function DashboardContainer() {
</div>
</div>
<div className="w-full md:w-[20%] h-[160px] shadow-md bg-white dark:bg-[#18181b] flex flex-col justify-center items-center rounded-lg">
<div className="lg:w-[20%] h-[160px] shadow-md bg-white dark:bg-[#18181b] flex flex-col justify-center items-center rounded-lg">
<div className="h-1/2 flex items-center justify-center">
<DashboardSpeecIcon />
</div>
<div className="">Total post</div>
<div className="font-semibold text-lg">121</div>
</div>
<div className="w-full md:w-[15%] h-[160px] shadow-md bg-white dark:bg-[#18181b] flex flex-col justify-center items-center rounded-lg">
<div className="w-full lg:w-[15%] h-[160px] shadow-md bg-white dark:bg-[#18181b] flex flex-col justify-center items-center rounded-lg">
<div className="h-1/2 flex items-center justify-center">
<DashboardConnectIcon />
</div>
<div className="">Total views</div>
<div className="font-semibold text-lg">154</div>
</div>
<div className="w-full md:w-[15%] h-[160px] shadow-md bg-white dark:bg-[#18181b] flex flex-col justify-center items-center rounded-lg">
<div className="w-full lg:w-[15%] h-[160px] shadow-md bg-white dark:bg-[#18181b] flex flex-col justify-center items-center rounded-lg">
<div className="h-1/2 flex items-center justify-center">
<DashboardShareIcon />
</div>
<div className="">Total share</div>
<div className="font-semibold text-lg">154</div>
</div>
<div className="w-full md:w-[15%] h-[160px] shadow-md bg-white dark:bg-[#18181b] flex flex-col justify-center items-center rounded-lg">
<div className="w-full lg:w-[15%] h-[160px] shadow-md bg-white dark:bg-[#18181b] flex flex-col justify-center items-center rounded-lg">
<div className="h-1/2 flex items-center justify-center">
<DashboardCommentIcon size={50} />
</div>
@ -140,69 +247,51 @@ export default function DashboardContainer() {
<div className="font-semibold text-lg">530</div>
</div>
</div>
<div className="w-full flex flex-row gap-6 justify-center ">
<div className="border-1 shadow-sm w-full rounded-lg md:w-[55%] p-6 flex flex-col">
<div className="flex justify-between mb-3">
<div className="font-semibold flex flex-col">
Analytics
<div className="font-normal text-xs text-gray-600 flex flex-row gap-2">
<CheckboxGroup
label=""
value={analyticsView}
orientation="horizontal"
onValueChange={setAnalyticView}
>
<Checkbox size="sm" value="visit">
Visit
</Checkbox>
<Checkbox size="sm" value="view" color="success">
View
</Checkbox>
<Checkbox size="sm" value="share" color="warning">
Share
</Checkbox>
</CheckboxGroup>
</div>
</div>
<div className="flex flex-row gap-2">
<Button
color="primary"
variant={typeDate === "monthly" ? "solid" : "bordered"}
onClick={() => setTypeDate("monthly")}
>
Bulanan
</Button>
<Button
color="primary"
onClick={() => setTypeDate("weekly")}
variant={typeDate === "weekly" ? "solid" : "bordered"}
>
Mingguan
</Button>
<div className="w-auto md:w-[140px]">
<Datepicker
value={startDateValue}
displayFormat="DD/MM/YYYY"
asSingle={true}
useRange={false}
onChange={(e: any) => setStartDateValue(e)}
inputClassName="z-50 w-full text-sm bg-transparent border-1 border-gray-200 px-2 py-[6px] rounded-xl h-[40px] text-gray-600 dark:text-gray-300"
/>
</div>
</div>
</div>
<div className="flex flex-row w-full h-full">
<div className="w-full h-full">
<ApexChartColumn
type={typeDate}
date={getMonthYear(startDateValue.startDate)}
view={analyticsView}
<div className="w-full flex flex-col lg:flex-row gap-6 justify-center ">
<div className="border-1 shadow-sm w-screen rounded-lg lg:w-[55%] p-6 flex flex-col text-xs lg:text-sm">
<div className="flex justify-between mb-4 items-center">
<p className="font-semibold">
Rekapitulasi Post Berita Polda Pada Website
</p>
<div className="w-[220px]">
<Datepicker
value={postContentDate}
displayFormat="DD/MM/YYYY"
asSingle={false}
useRange={true}
onChange={(e: any) => setPostContentDate(e)}
inputClassName="z-50 w-full text-xs lg:text-sm bg-transparent border-1 border-gray-200 px-2 py-[6px] rounded-sm lg:rounded-lg h-[30px] lg:h-[40px] text-gray-600 dark:text-gray-300"
/>
</div>
</div>
<div className="flex flex-row border-b-1 gap-1 py-1">
<div className="w-[5%]">NO</div>
<div className="w-[50%] lg:w-[70%]">POLDA</div>
<div className="w-[45%] lg:w-[25%] text-right">
JUMLAH POST BERITA
</div>
</div>
<div className="flex flex-col gap-1 lg:h-[500px] overflow-y-auto">
{postCount?.map((list) => (
<div
key={list.id}
className="flex flex-row border-b-1 gap-1 py-1"
>
<div className="w-[5%]">{list?.no}</div>
<div className="w-[85%]">{list?.name}</div>
<div
className={`w-[10%] text-center ${
list?.count === 0 && "bg-red-600 text-white"
}`}
>
{list?.count}
</div>
</div>
))}
</div>
</div>
<div className="flex flex-col w-[45%] gap-6 shadow-md bg-white dark:bg-[#18181b] rounded-lg p-8">
<div className="flex justify-between">
<div className="flex flex-col w-full lg:w-[45%] gap-6 shadow-md bg-white dark:bg-[#18181b] rounded-lg p-8 text-sm">
<div className="flex justify-between font-semibold">
<p>Recent Article</p>
<Link href="/admin/article/create">
<Button color="primary" variant="bordered">
@ -220,7 +309,7 @@ export default function DashboardContainer() {
className="h-[70px] w-[70px] object-cover rounded-lg"
/>
<div className="flex flex-col gap-2">
<p>{textEllipsis(list?.title, 40)}</p>
<p>{textEllipsis(list?.title, 78)}</p>
<p className="text-xs">
{convertDateFormat(list?.createdAt)}
</p>
@ -244,6 +333,120 @@ export default function DashboardContainer() {
</div>
</div>
</div>
<div className="w-full flex flex-col lg:flex-row gap-6 justify-center ">
<div className="border-1 shadow-sm w-screen rounded-lg lg:w-[55%] p-6 flex flex-col">
<div className="flex justify-between mb-3">
<div className="font-semibold flex flex-col">
Analytics
<div className="font-normal text-xs text-gray-600 flex flex-row gap-2">
<CheckboxGroup
label=""
value={analyticsView}
orientation="vertical"
onValueChange={setAnalyticView}
className="lg:hidden"
>
<Checkbox size="sm" value="visit">
Visit
</Checkbox>
<Checkbox size="sm" value="view" color="success">
View
</Checkbox>
<Checkbox size="sm" value="share" color="warning">
Share
</Checkbox>
</CheckboxGroup>
<CheckboxGroup
label=""
value={analyticsView}
orientation="horizontal"
onValueChange={setAnalyticView}
className="hidden lg:block"
>
<Checkbox size="sm" value="visit">
Visit
</Checkbox>
<Checkbox size="sm" value="view" color="success">
View
</Checkbox>
<Checkbox size="sm" value="share" color="warning">
Share
</Checkbox>
</CheckboxGroup>
</div>
</div>
<div className="flex flex-col lg:flex-row gap-2">
<Button
color="primary"
variant={typeDate === "monthly" ? "solid" : "bordered"}
onClick={() => setTypeDate("monthly")}
className="w-[140px] text-xs lg:text-sm h-[30px] lg:h-[40px] rounded-sm lg:rounded-lg"
>
Bulanan
</Button>
<Button
color="primary"
onClick={() => setTypeDate("weekly")}
variant={typeDate === "weekly" ? "solid" : "bordered"}
className="w-[140px] text-xs lg:text-sm h-[30px] lg:h-[40px] rounded-sm lg:rounded-lg"
>
Mingguan
</Button>
<div className="w-[140px]">
<Datepicker
value={startDateValue}
displayFormat="DD/MM/YYYY"
asSingle={true}
useRange={false}
onChange={(e: any) => setStartDateValue(e)}
inputClassName="z-50 w-full text-xs lg:text-sm bg-transparent border-1 border-gray-200 px-2 py-[6px] rounded-sm lg:rounded-lg h-[30px] lg:h-[40px] text-gray-600 dark:text-gray-300"
/>
</div>
</div>
</div>
<div className="flex flex-row w-full h-full">
<div className="w-full h-[30vh] lg:h-full text-black">
<ApexChartColumn
type={typeDate}
date={getMonthYear(startDateValue.startDate)}
view={analyticsView}
/>
</div>
</div>
</div>
<div className="flex flex-col w-full lg:w-[45%] gap-6 shadow-md bg-white dark:bg-[#18181b] rounded-lg p-8 text-xs lg:text-sm">
<div className="flex justify-between font-semibold">
<p>Top Pages</p>
</div>
<div className="flex flex-row border-b-1">
<div className="w-[5%]">No</div>
<div className="w-[85%]">Title</div>
<div className="w-[10%]">Visits</div>
</div>
{topPages?.map((list) => (
<div key={list.id} className="flex flex-row border-b-1">
<div className="w-[5%]">{list?.no}</div>
<div className="w-[85%]">{list?.title}</div>
<div className="w-[10%]">{list?.visits}</div>
</div>
))}
<div className="my-2 w-full flex justify-center">
<Pagination
isCompact
showControls
showShadow
color="primary"
classNames={{
base: "bg-transparent",
wrapper: "bg-transparent",
}}
page={topPagespage}
total={topPagesTotalPage}
onChange={(page) => setTopPagesPage(page)}
/>
</div>
</div>
</div>
</div>
</div>
);

582
components/main/detail/comment.tsx
View File

@ -1,11 +1,30 @@
import { Button } from "@nextui-org/button";
import { Input, Textarea } from "@nextui-org/input";
import React, { useState } from "react";
import React, { useEffect, useState } from "react";
import { Controller, useForm } from "react-hook-form";
import * as z from "zod";
import { zodResolver } from "@hookform/resolvers/zod";
import { otpRequest, otpValidation } from "@/service/master-user";
import {
deleteArticleComment,
editArticleComment,
getArticleComment,
otpRequest,
otpValidation,
postArticleComment,
} from "@/service/master-user";
import { error } from "@/config/swal";
import { UserProfileIcon } from "@/components/icons/globals";
import { convertDateFormat } from "@/utils/global";
import Cookies from "js-cookie";
import OTPInput from "react-otp-input";
import Swal from "sweetalert2";
import withReactContent from "sweetalert2-react-content";
import { SendIcon, TimesIcon } from "@/components/icons";
import { saveActivity } from "@/service/activity-log";
import { usePathname } from "next/navigation";
const userId = Cookies.get("uie");
const token = Cookies.get("access_token");
const commentSchema = z.object({
name: z.string().min(1, {
@ -24,9 +43,17 @@ const commentSchema = z.object({
}),
});
export default function Comment() {
export default function Comment(props: { id: string | null }) {
const { id } = props;
const MySwal = withReactContent(Swal);
const pathname = usePathname();
const [needOtp, setNeedOtp] = useState(false);
const [otpValue, setOtpValue] = useState("");
const [commentList, setCommentList] = useState<any>([]);
const [openCommentId, setOpenCommentId] = useState(0);
const [editCommentId, setEditCommentId] = useState(0);
const [replyValue, setReplyValue] = useState("");
const [editValue, setEditValue] = useState("");
const formOptions = {
resolver: zodResolver(commentSchema),
};
@ -36,11 +63,21 @@ export default function Comment() {
handleSubmit,
formState: { errors },
setValue,
reset,
} = useForm<UserSettingSchema>(formOptions);
useEffect(() => {
fetchData();
}, [id]);
const fetchData = async () => {
const res = await getArticleComment(String(id));
setCommentList(res?.data?.data);
};
const onSubmit = async (values: z.infer<typeof commentSchema>) => {
if (!needOtp) {
const res = await otpRequest(values.email);
const res = await otpRequest(values.email, values?.name);
if (res?.error) {
error(res.message);
return false;
@ -52,139 +89,420 @@ export default function Comment() {
error("OTP Tidak Sesuai");
return false;
}
const req = {
email: values.email,
name: values.name,
comment: values.comment,
const data = {
articleId: Number(id),
isPublic: true,
message: values.comment,
parentId: 0,
};
console.log("req", req);
const res = await postArticleComment(data);
if (res?.error) {
error(res?.message);
return false;
}
const req: any = {
activityTypeId: 5,
url: "https://kontenhumas.com/" + pathname,
articleId: Number(id),
};
const resActivity = await saveActivity(req);
reset();
fetchData();
setNeedOtp(false);
}
};
const handleDelete = async (id: number) => {
MySwal.fire({
title: "Delete Comment",
text: "",
icon: "warning",
showCancelButton: true,
cancelButtonColor: "#d33",
confirmButtonColor: "#3085d6",
confirmButtonText: "Simpan",
}).then((result) => {
if (result.isConfirmed) {
doDelete(id);
}
});
};
const doDelete = async (id: number) => {
const res = await deleteArticleComment(id);
if (res?.error) {
error(res?.message);
return false;
}
MySwal.fire({
title: "Sukses",
icon: "success",
confirmButtonColor: "#3085d6",
confirmButtonText: "OK",
}).then((result) => {
if (result.isConfirmed) {
}
});
fetchData();
};
const sendComment = async (idComment: number) => {
const data = {
articleId: Number(id),
isPublic: true,
message: replyValue,
parentId: idComment,
};
const res = await postArticleComment(data);
if (res?.error) {
error(res?.message);
return false;
}
const req: any = {
activityTypeId: 5,
url: "https://kontenhumas.com/" + pathname,
articleId: Number(id),
userId: Number(userId),
};
const resActivity = await saveActivity(req, token);
fetchData();
};
// const sendActivity = async () => {};
const editComment = async (idComment: number, parentId: number) => {
const data = {
articleId: Number(id),
isPublic: true,
id: idComment,
message: editValue,
parentId: parentId,
};
const res = await editArticleComment(data, idComment);
if (res?.error) {
error(res?.message);
return false;
}
setEditCommentId(0);
fetchData();
};
const childComment = (parentId: number) => {
const filteredComment = commentList.filter(
(a: any) => a.parentId === parentId
);
return filteredComment.length > 0 ? (
<div className="flex flex-col gap-2 ml-4 w-full">
{filteredComment.map((list: any) => (
<div className="flex flex-row gap-2 " key={list?.id}>
<UserProfileIcon size={44} />
<div className="flex flex-col w-full pr-4">
<div className="flex justify-between gap-1 w-full">
<p className="text-sm font-semibold">{list?.commentFromName}</p>
<p className="text-xs">{convertDateFormat(list?.updatedAt)}</p>
</div>
{editCommentId === list?.id ? (
<div className="flex flex-row gap-2 items-center">
<Input
type="text"
id="editComment"
placeholder=""
label=""
value={editValue}
onValueChange={setEditValue}
endContent={
<div className="flex flex-row gap-2">
<a
className="cursor-pointer"
onClick={() => editComment(list?.id, list?.parentId)}
>
<SendIcon />
</a>
</div>
}
labelPlacement="outside"
className="w-full "
classNames={{
inputWrapper: [
"border-1 rounded-lg",
"dark:group-data-[focused=false]:bg-transparent !border-1 dark:!border-gray-400",
],
}}
variant="bordered"
/>
<a
className="cursor-pointer text-warning"
onClick={() => setEditCommentId(0)}
>
<TimesIcon />
</a>
</div>
) : (
<div className="flex justify-between gap-1 text-right">
<p className="text-sm">{list?.message}</p>
<div className="flex flex-row gap-2 justify-end">
{userId === "16" && (
<a
className="text-primary cursor-pointer text-xs"
onClick={() => {
setEditValue(list?.message);
setEditCommentId(list?.id);
}}
>
Edit
</a>
)}
{(userId === String(list?.commentFromId) ||
userId === "16") && (
<a
className="text-danger cursor-pointer text-xs"
onClick={() => handleDelete(list?.id)}
>
Hapus
</a>
)}
</div>
</div>
)}
</div>
</div>
))}
</div>
) : (
""
);
};
return (
<form className="p-3 flex flex-col gap-3" onSubmit={handleSubmit(onSubmit)}>
<b>Tinggalkan balasan</b>
<p className="text-xs">
Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai{" "}
<span className="text-red-600">*</span>
</p>
<div className="flex flex-col gap-1">
<p className="text-sm">Komentar</p>
<Controller
control={control}
name="comment"
render={({ field: { onChange, value } }) => (
<Textarea
type="text"
id="comment"
placeholder=""
label=""
value={value}
onChange={onChange}
labelPlacement="outside"
className="w-full "
classNames={{
inputWrapper: [
"border-1 rounded-lg",
"dark:group-data-[focused=false]:bg-transparent !border-1 dark:!border-gray-400",
],
}}
variant="bordered"
/>
)}
/>
{errors?.comment && (
<p className="text-red-400 text-sm mb-3">{errors.comment?.message}</p>
)}
</div>
<div className="flex flex-col gap-1">
<p className="text-sm">
Nama <span className="text-red-600">*</span>
</p>
<div className="px-0 lg:px-3 flex flex-col gap-3">
<form
className="py-3 px-4 flex flex-col gap-3 bg-gray-50 text-black dark:bg-stone-900 dark:text-white rounded-lg shadow-md"
onSubmit={handleSubmit(onSubmit)}
>
{!needOtp ? (
<>
<b>Tinggalkan balasan</b>
<p className="text-xs">
Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib
ditandai <span className="text-red-600">*</span>
</p>
<div className="flex flex-col gap-1">
<p className="text-sm">Komentar</p>
<Controller
control={control}
name="comment"
render={({ field: { onChange, value } }) => (
<Textarea
type="text"
id="comment"
placeholder=""
label=""
value={value}
onChange={onChange}
labelPlacement="outside"
className="w-full "
classNames={{
inputWrapper: [
"border-1 rounded-lg",
"dark:group-data-[focused=false]:bg-transparent !border-1 dark:!border-gray-400",
],
}}
variant="bordered"
/>
)}
/>
{errors?.comment && (
<p className="text-red-400 text-sm mb-3">
{errors.comment?.message}
</p>
)}
</div>
<div className="flex flex-col gap-1">
<p className="text-sm">
Nama <span className="text-red-600">*</span>
</p>
<Controller
control={control}
name="name"
render={({ field: { onChange, value } }) => (
<Input
type="text"
id="name"
placeholder=""
label=""
value={value}
onChange={onChange}
labelPlacement="outside"
className="w-full "
classNames={{
inputWrapper: [
"border-1 rounded-lg",
"dark:group-data-[focused=false]:bg-transparent !border-1 dark:!border-gray-400",
],
}}
variant="bordered"
/>
)}
/>
{errors?.name && (
<p className="text-red-400 text-sm mb-3">{errors.name?.message}</p>
)}
</div>
<div className="flex flex-col gap-1">
<p className="text-sm">
Email <span className="text-red-600">*</span>
</p>
<Controller
control={control}
name="email"
render={({ field: { onChange, value } }) => (
<Input
type="email"
id="email"
placeholder=""
label=""
value={value}
onChange={onChange}
labelPlacement="outside"
className="w-full "
classNames={{
inputWrapper: [
"border-1 rounded-lg",
"dark:group-data-[focused=false]:bg-transparent !border-1 dark:!border-gray-400",
],
}}
variant="bordered"
/>
)}
/>
{errors?.email && (
<p className="text-red-400 text-sm mb-3">{errors.email?.message}</p>
)}
</div>
{needOtp && (
<div className="flex flex-col gap-1">
<p>OTP</p>
<Input
type="number"
id="otp"
placeholder=""
label=""
value={otpValue}
onValueChange={setOtpValue}
labelPlacement="outside"
className="w-[100px] "
classNames={{
inputWrapper: [
"border-1 rounded-lg",
"dark:group-data-[focused=false]:bg-transparent !border-1 dark:!border-gray-400",
],
}}
variant="bordered"
/>
</div>
)}
<Controller
control={control}
name="name"
render={({ field: { onChange, value } }) => (
<Input
type="text"
id="name"
placeholder=""
label=""
value={value}
onChange={onChange}
labelPlacement="outside"
className="w-full "
classNames={{
inputWrapper: [
"border-1 rounded-lg",
"dark:group-data-[focused=false]:bg-transparent !border-1 dark:!border-gray-400",
],
}}
variant="bordered"
/>
)}
/>
{errors?.name && (
<p className="text-red-400 text-sm mb-3">
{errors.name?.message}
</p>
)}
</div>
<div className="flex flex-col gap-1">
<p className="text-sm">
Email <span className="text-red-600">*</span>
</p>
<Controller
control={control}
name="email"
render={({ field: { onChange, value } }) => (
<Input
type="email"
id="email"
placeholder=""
label=""
value={value}
onChange={onChange}
labelPlacement="outside"
className="w-full "
classNames={{
inputWrapper: [
"border-1 rounded-lg",
"dark:group-data-[focused=false]:bg-transparent !border-1 dark:!border-gray-400",
],
}}
variant="bordered"
/>
)}
/>
{errors?.email && (
<p className="text-red-400 text-sm mb-3">
{errors.email?.message}
</p>
)}
</div>
</>
) : (
<div className="flex flex-col gap-1">
<p className="text-xs">
Kode verifikasi sudah dikirmkan. Silahkan cek Email Anda!
</p>
<p>OTP</p>
<Button className="bg-[#DD8306] text-white" radius="md" type="submit">
Kirim
</Button>
</form>
<OTPInput
value={otpValue}
onChange={setOtpValue}
numInputs={6}
renderSeparator={<span>-</span>}
renderInput={(props) => (
<input
{...props}
className="!w-[30px] h-[30px] bg-stone-900 dark:bg-white text-white dark:text-black rounded-sm"
/>
)}
/>
</div>
)}
<Button className="bg-[#DD8306] text-white" radius="sm" type="submit">
Kirim
</Button>
</form>
<div className="flex flex-col gap-2 text-black">
{commentList?.map(
(list: any) =>
list?.parentId === 0 && (
<div
key={list?.id}
className="flex flex-col gap-3 w-full bg-white text-black dark:bg-stone-900 dark:text-white shadow-md rounded-md border-b-2 py-3 px-4 "
>
<div className="flex justify-between items-center">
<div className="flex flex-row gap-2">
<UserProfileIcon size={44} />
<div className="flex flex-col gap-1">
<p className="text-sm font-semibold">
{list?.commentFromName}
</p>
<p className="text-sm">{list?.message}</p>
</div>
</div>
<div className="flex flex-col gap-1 text-right">
<p className="text-xs">
{convertDateFormat(list?.updatedAt)}
</p>
<div className="flex flex-row gap-2 justify-end">
{userId === "16" && (
<a
className="text-primary cursor-pointer text-xs"
onClick={() => setOpenCommentId(list?.id)}
>
Balas
</a>
)}
{(userId === String(list?.commentFromId) ||
userId === "16") && (
<a
className="text-danger cursor-pointer text-xs"
onClick={() => handleDelete(list?.id)}
>
Hapus
</a>
)}
</div>
</div>
</div>
{childComment(list?.id)}
{openCommentId === list?.id && (
<div className="flex flex-row gap-2 items-center">
<Input
type="text"
id="comment"
placeholder=""
label=""
value={replyValue}
onValueChange={setReplyValue}
endContent={
<div className="flex flex-row gap-2">
<a
className="cursor-pointer"
onClick={() => sendComment(list?.id)}
>
<SendIcon />
</a>
</div>
}
labelPlacement="outside"
className="w-full "
classNames={{
inputWrapper: [
"border-1 rounded-lg",
"dark:group-data-[focused=false]:bg-transparent !border-1 dark:!border-gray-400",
],
}}
variant="bordered"
/>
<a
className="cursor-pointer text-warning"
onClick={() => setOpenCommentId(0)}
>
<TimesIcon />
</a>
</div>
)}
</div>
)
)}
</div>
</div>
);
}

12
components/main/detail/e-magazine-detail.tsx
View File

@ -1,5 +1,6 @@
"use client";
import { ChevronRightIcon } from "@/components/icons";
import { close, loading } from "@/config/swal";
import { getMagazineById } from "@/service/magazine";
import {
convertDateFormat,
@ -24,16 +25,18 @@ export default function EMagazineDetail() {
}, [id]);
const initFetch = async () => {
loading();
const res = await getMagazineById(String(id));
const data = res?.data?.data;
setDetailData(data);
setDetailFiles(data?.files);
close();
};
const doDownload = async (fileName: string, title: string): Promise<void> => {
try {
const response = await fetch(
`http://38.47.180.165:8802/magazine-files/viewer/${fileName}`
`https://kontenhumas.com/magazine-files/viewer/${fileName}`
);
if (!response.ok) {
@ -74,10 +77,15 @@ export default function EMagazineDetail() {
{detailData?.title}
</div>
<div className="rounded-lg h-[380px] flex items-center justify-center">
<img
{/* <img
src="/emagazine.jpeg"
alt="emagazine"
className="h-[380px] rounded-md py-1"
/> */}
<img
src={detailData?.thumbnailUrl}
alt="emagazine"
className="h-[380px] rounded-md py-1"
/>
</div>
<div

11
components/main/detail/list-news.tsx
View File

@ -19,6 +19,7 @@ import Link from "next/link";
import { useEffect, useRef, useState } from "react";
import { getListArticle } from "@/service/article";
import { formatMonthString, htmlToString, textEllipsis } from "@/utils/global";
import Image from "next/image";
export default function ListNews() {
const [article, setArticle] = useState<any>([]);
@ -87,12 +88,16 @@ export default function ListNews() {
>
<div className="">
<img
src={news.thumbnailUrl}
src={
news.thumbnailUrl == ""
? "/no-image.jpg"
: news.thumbnailUrl
}
alt="thumbnail"
className="rounded-md"
className="rounded-t-md h-[27vh] w-full object-cover"
/>
</div>
<div className="p-2 lg:p-5 bg-[#f0f0f0] rounded-md">
<div className="p-2 lg:p-5 bg-[#f0f0f0] rounded-b-md">
<div className="font-semibold text-lg">{news?.title}</div>
<div className="flex flex-row items-center py-1 text-xs gap-2">
<div className="flex flex-row items-center gap-1">

34
components/main/detail/new-detail.tsx
View File

@ -5,20 +5,27 @@ import SidebarDetail from "../../page/sidebar-detail";
import RelatedNews from "../../page/related-news";
import Comment from "./comment";
import { getArticleById, getListArticle } from "@/service/article";
import { useParams } from "next/navigation";
import { useParams, usePathname } from "next/navigation";
import Link from "next/link";
import { ChevronRightIcon } from "@/components/icons";
import { ChevronRightIcon, UserIcon } from "@/components/icons";
import { close, loading } from "@/config/swal";
import { saveActivity } from "@/service/activity-log";
import Cookies from "js-cookie";
const token = Cookies.get("access_token");
const uid = Cookies.get("uie");
export default function NewsDetailPage() {
const params = useParams();
const id: any = params?.id;
const pathname = usePathname();
const [detailArticle, setDetailArticle] = useState();
const [articles, setArticles] = useState<any>([]);
useEffect(() => {
initFetch();
getArticles();
sendActivity();
}, []);
async function getArticles() {
@ -34,9 +41,22 @@ export default function NewsDetailPage() {
setDetailArticle(data);
close();
};
const sendActivity = async () => {
let req: any = {
activityTypeId: 2,
url: "https://kontenhumas.com/" + pathname,
articleId: Number(id?.split("-")[0]),
};
if (uid) {
req.userId = Number(uid);
}
const resActivity = await saveActivity(req, token);
};
return (
<div className="bg-white">
<div className="px-5 lg:px-0 lg:w-[70vw] mx-auto py-8">
<div className="px-5 lg:px-0 lg:w-[75vw] lg:mx-auto py-8">
<div className="flex flex-row gap-4 items-end text-black">
<Link href="/" className=" font-semibold text-lg">
Beranda
@ -44,18 +64,18 @@ export default function NewsDetailPage() {
<ChevronRightIcon />
<p className=" text-lg">Berita</p>
</div>
<div className="text-black lg:flex bg-white gap-4">
<div className="text-black lg:flex lg:justify-around bg-white gap-4 lg:gap-16 w-full">
<DetailNews data={detailArticle} listArticle={articles} />
<div className="w-auto lg:w-[25%] hidden lg:block">
<SidebarDetail />
</div>
</div>
<div className="bg-gray-50 text-black dark:bg-stone-900 dark:text-white h-auto my-2 md:my-5 lg:my-10 px-3 lg:px-36 rounded-lg shadow-md">
<Comment />
<div className="w-full lg:w-[70%] h-auto my-2 md:my-5 lg:my-10 px-0 lg:px-3">
<Comment id={id?.split("-")[0]} />
</div>
<div className="bg-gray-50 text-black dark:bg-stone-900 dark:text-white lg:px-24 my-4 lg:my-8 pt-3 lg:pb-4 rounded-lg shadow-md h-fit">
<div className="bg-gray-50 text-black dark:bg-stone-900 dark:text-white lg:px-24 my-4 lg:my-8 pt-3 lg:pb-4 rounded-lg shadow-md h-fit ">
<RelatedNews />
</div>
<div className="md:hidden text-black">

69
components/page/detail-news.tsx
View File

@ -20,21 +20,41 @@ import {
UserIcon,
} from "../icons";
import { Button } from "@nextui-org/button";
import { usePathname } from "next/navigation";
import { useParams, usePathname } from "next/navigation";
import Link from "next/link";
import { useEffect, useState } from "react";
import { image } from "@nextui-org/theme";
import Cookies from "js-cookie";
import { saveActivity } from "@/service/activity-log";
const token = Cookies.get("access_token");
const uid = Cookies.get("uie");
export default function DetailNews(props: { data: any; listArticle: any }) {
const { data, listArticle } = props;
const [prevArticle, setPrevArticle] = useState("");
const [nextArticle, setNextArticle] = useState("");
const [imageNow, setImageNow] = useState(0);
const pathname = usePathname();
const params = useParams();
const id: any = params?.id;
const shareText = "Humas Polri";
const handleShare = (platform: string) => {
const handleShare = async (platform: string) => {
let shareLink = "";
const urls = "https://kontenhumas.com/" + pathname;
let req: any = {
activityTypeId: 3,
url: "https://kontenhumas.com/" + pathname,
articleId: Number(id?.split("-")[0]),
};
if (uid) {
req.userId = Number(uid);
}
const resActivity = await saveActivity(req, token);
switch (platform) {
case "facebook":
shareLink = `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(
@ -102,7 +122,7 @@ export default function DetailNews(props: { data: any; listArticle: any }) {
return { __html: doc.body.innerHTML };
}
return (
<div className="flex flex-col gap-2 py-4">
<div className="flex flex-col gap-2 py-4 lg:w-[65%] lg:mx-auto">
<p className="font-semibold text-xl lg:text-3xl">{data?.title}</p>
<div className="flex flex-row items-center py-1 text-xs lg:text-lg gap-2 lg:gap-4">
<div className="flex flex-row items-center gap-1">
@ -133,36 +153,57 @@ export default function DetailNews(props: { data: any; listArticle: any }) {
</p>
</div>
<div className="flex justify-center my-2 lg:my-5">
<img
alt="NextUI hero Image"
src={data?.thumbnailUrl}
className="object-cover w-[100%]"
<Image
width={1440}
height={1080}
alt="Main Image"
src={data?.files[imageNow]?.file_url}
className="object-cover w-[100%] rounded-md"
/>
</div>
{data?.files?.length > 1 && (
<div className="flex flex-row gap-3 flex-nowrap overflow-x-auto">
{data?.files?.map((file: any, index: number) => (
<a
key={file.id}
onClick={() => setImageNow(index)}
className="cursor-pointer"
>
<Image
width={480}
height={480}
alt="NextUI hero Image"
src={file?.file_url}
className="object-cover w-[75px] lg:w-[150px] h-[50px] lg:h-[100px] rounded-md"
/>
</a>
))}
</div>
)}
<div
dangerouslySetInnerHTML={removeImgTags(
formatTextToHtmlTag(data?.htmlDescription)
)}
className="text-sm lg:text-xl lg:leading-8"
className="text-sm lg:text-xl lg:leading-8 text-justify"
/>
<div className="grid grid-cols-2 md:grid-cols-4 gap-5 my-8">
<div className="grid grid-cols-2 md:grid-cols-4 gap-2 lg:gap-5 my-8">
<Button
variant="solid"
radius="none"
onPress={() => handleShare("facebook")}
className="w-[80%] bg-[#3b5998] text-white px-4 py-2 flex flex-row"
className="lg:w-[80%] bg-[#3b5998] text-white px-4 py-2 flex flex-row"
>
<div className="w-1/4 ">
<SquareFacebookIcon />
</div>
<div className="w-3/4 text-xl ">Facebook</div>
<div className=" text-xl ">Facebook</div>
</Button>
<Button
variant="solid"
radius="none"
onPress={() => handleShare("x")}
className="w-[80%] bg-black text-white px-4 py-2 flex flex-row"
className="lg:w-[80%] bg-black text-white px-4 py-2 flex flex-row"
>
<div className="w-1/4 ">
<SquareXIcon />
@ -173,7 +214,7 @@ export default function DetailNews(props: { data: any; listArticle: any }) {
variant="solid"
radius="none"
onPress={() => handleShare("linkedin")}
className="w-[80%] bg-[#0E76A8] text-white px-4 py-2 flex flex-row"
className="lg:w-[80%] bg-[#0E76A8] text-white px-4 py-2 flex flex-row"
>
<div className="w-1/4 ">
<SquareLinkedInIcon />
@ -184,7 +225,7 @@ export default function DetailNews(props: { data: any; listArticle: any }) {
variant="solid"
radius="none"
onPress={() => handleShare("whatsapp")}
className="w-[80%] bg-[#25D366] text-white px-4 py-2 flex flex-row"
className="lg:w-[80%] bg-[#25D366] text-white px-4 py-2 flex flex-row"
>
<div className="w-1/4 ">
<SquareWhatsappIcon />

8
components/page/related-news.tsx
View File

@ -69,8 +69,12 @@ export default function RelatedNews() {
<Card isFooterBlurred radius="lg" className="border-none">
<img
alt="headernews"
src={newsItem.thumbnailUrl}
className="h-[25vh] object-cover rounded-none"
src={
newsItem?.thumbnailUrl == ""
? "/no-image.jpg"
: newsItem?.thumbnailUrl
}
className="!h-[25vh] object-cover rounded-none"
/>
<CardFooter className="before:bg-white/10 border-white/20 border-1 overflow-hidden py-1 md:absolute bottom-1 shadow-small z-10">
<div className="text-black dark:text-white lg:text-white">

12
components/page/sidebar-detail.tsx
View File

@ -56,7 +56,11 @@ export default function SidebarDetail() {
<div className="h-[230px] lg:h-[180px] flex flex-col gap-2 bg-gray-50 dark:bg-stone-900 p-5 rounded-lg">
<img
alt="headernews"
src={newsItem.thumbnailUrl}
src={
newsItem?.thumbnailUrl == ""
? "/no-image.jpg"
: newsItem?.thumbnailUrl
}
className="object-cover !h-[70%] rounded-lg"
/>
<div className="text-black dark:text-white flex flex-col">
@ -106,7 +110,11 @@ export default function SidebarDetail() {
<div className="h-[230px] lg:h-[180px] flex flex-col gap-2 bg-gray-50 dark:bg-stone-900 p-5 rounded-lg">
<img
alt="headernews"
src={newsItem.thumbnailUrl}
src={
newsItem?.thumbnailUrl == ""
? "/no-image.jpg"
: newsItem?.thumbnailUrl
}
className="object-cover !h-[70%] rounded-lg"
/>
<div className="text-black dark:text-white flex flex-col">

33
components/table/article-table.tsx
View File

@ -71,7 +71,7 @@ export default function ArticleTable() {
useEffect(() => {
initState();
}, [page, showData, startDateValue]);
}, [page, showData, startDateValue, selectedCategories]);
useEffect(() => {
getCategories();
@ -80,7 +80,6 @@ export default function ArticleTable() {
async function getCategories() {
const res = await getArticleByCategory();
const data = res?.data?.data;
console.log("datass", res?.data?.data);
setCategoies(data);
}
@ -225,10 +224,10 @@ export default function ArticleTable() {
return (
<>
<div className="p-3">
<div className="py-3">
<div className="flex flex-col items-start rounded-2xl gap-3">
<div className="flex flex-col md:flex-row gap-3 w-full">
<div className="flex flex-col gap-1 w-1/3">
<div className="flex flex-col gap-1 w-full lg:w-1/3">
<p className="font-semibold text-sm">Pencarian</p>
<Input
aria-label="Search"
@ -246,7 +245,7 @@ export default function ArticleTable() {
onKeyDown={handleKeyDown}
/>
</div>
<div className="flex flex-col gap-1 w-[72px]">
<div className="flex flex-col gap-1 w-full lg:w-[72px]">
<p className="font-semibold text-sm">Data</p>
<Select
label=""
@ -268,22 +267,28 @@ export default function ArticleTable() {
</SelectItem>
</Select>
</div>
<div className="flex flex-col gap-1 w-[230px]">
<div className="flex flex-col gap-1 w-full lg:w-[230px]">
<p className="font-semibold text-sm">Kategori</p>
<Select
label=""
variant="bordered"
labelPlacement="outside"
placeholder="Select"
placeholder="Kategori"
selectionMode="multiple"
selectedKeys={[selectedCategories]}
selectedKeys={selectedCategories}
className="w-full"
items={categories}
classNames={{ trigger: "border-1" }}
onChange={(e) => {
e.target.value === ""
? ""
: setSelectedCategories(e.target.value);
console.log("eeess", e.target.value);
onSelectionChange={setSelectedCategories}
renderValue={(items) => {
return items.map((item) => (
<span
key={item.props?.value}
className="text-black text-xs"
>
{item.textValue},
</span>
));
}}
>
{categories?.map((category: any) => (
@ -293,7 +298,7 @@ export default function ArticleTable() {
))}
</Select>
</div>
<div className="flex flex-col gap-1 w-full md:w-[240px]">
<div className="flex flex-col gap-1 w-full lg:w-[240px]">
<p className="font-semibold text-sm">Tanggal</p>
<Datepicker
value={startDateValue}

8
components/table/magazine/magazine-table.tsx
View File

@ -226,10 +226,10 @@ export default function MagazineTable() {
return (
<>
<div className="p-3">
<div className="py-3">
<div className="flex flex-col items-start rounded-2xl gap-3">
<div className="flex flex-col md:flex-row gap-3 w-full">
<div className="flex flex-col gap-1 w-1/3">
<div className="flex flex-col gap-1 w-full lg:w-1/3">
<p className="font-semibold text-sm">Pencarian</p>
<Input
aria-label="Search"
@ -247,7 +247,7 @@ export default function MagazineTable() {
onKeyDown={handleKeyDown}
/>
</div>
<div className="flex flex-col gap-1 w-[72px]">
<div className="flex flex-col gap-1 w-full lg:w-[72px]">
<p className="font-semibold text-sm">Data</p>
<Select
label=""
@ -294,7 +294,7 @@ export default function MagazineTable() {
))}
</Select>
</div> */}
<div className="flex flex-col gap-1 w-full md:w-[240px]">
<div className="flex flex-col gap-1 w-full lg:w-[240px]">
<p className="font-semibold text-sm">Tanggal</p>
<Datepicker
value={startDateValue}

8
components/table/master-categories/categories-table.tsx
View File

@ -341,10 +341,10 @@ export default function CategoriesTable(props: { triggerRefresh: boolean }) {
return (
<>
<div className="p-3">
<div className="py-3">
<div className="flex flex-col items-start rounded-2xl gap-3">
<div className="flex flex-col md:flex-row gap-3 w-full">
<div className="flex flex-col gap-1 w-1/3">
<div className="flex flex-col gap-1 w-full lg:w-1/3">
<p className="font-semibold text-sm">Pencarian</p>
<Input
aria-label="Search"
@ -362,7 +362,7 @@ export default function CategoriesTable(props: { triggerRefresh: boolean }) {
onKeyDown={handleKeyDown}
/>
</div>
<div className="flex flex-col gap-1 w-[72px]">
<div className="flex flex-col gap-1 w-full lg:w-[72px]">
<p className="font-semibold text-sm">Data</p>
<Select
label=""
@ -523,7 +523,7 @@ export default function CategoriesTable(props: { triggerRefresh: boolean }) {
onValueChange={setTag}
startContent={
<div className="flex flex-row gap-1">
{value.map((item, index) => (
{value?.map((item, index) => (
<Chip
color="primary"
key={index}

176
components/table/master/master-user-level/mapping-user-level.tsx Normal file
View File

@ -0,0 +1,176 @@
"use client";
import {
createUserLevel,
editUserLevel,
getUserLevel,
} from "@/service/master-user-level";
import { Button } from "@nextui-org/button";
import { RootRaws } from "postcss/lib/root";
import React, { useEffect, useState } from "react";
// Define the shape of the parsed data
interface CSVRow {
id: string;
parent: string;
name: string;
slug: string;
level_number: string;
group: string;
}
export default function MappingUserLevel() {
const [parsedData, setParsedData] = useState<CSVRow[] | null>(null);
// Function to parse the CSV data
function parseCSV(csvText: string): CSVRow[] {
const rows = csvText.split("\n");
const headers = rows[0].split("\t"); // Assuming tab-delimited CSV
const data: CSVRow[] = [];
for (let i = 1; i < rows.length; i++) {
const row = rows[i].split("\t");
// Skip empty rows or rows that don't have the correct number of columns
if (
row.length === headers.length &&
row.some((cell) => cell.trim() !== "")
) {
const temp = row[0].split(";");
if (temp[0] !== "") {
temp[4].replace("/r", "");
console.log("tempppp", temp);
const rowData: CSVRow = {
id: temp[0],
parent: temp[1],
name: temp[2],
slug: temp[3],
level_number: temp[4],
group: temp[5].replace("\r", ""),
};
if (i <= 3) {
console.log("i", rowData);
}
data.push(rowData);
}
}
}
return data;
}
// Handle the file input change event
const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
const file = event.target.files?.[0];
if (file) {
const reader = new FileReader();
reader.onload = function (e) {
const csvText = e.target?.result as string;
const data = parseCSV(csvText);
console.log("data", data);
setParsedData(data);
};
reader.readAsText(file);
}
};
const doPostData = async () => {
if (parsedData) {
let level1 = undefined;
let level2 = undefined;
for (let i = 0; i < parsedData.length; i++) {
if (i < 4) {
const temp = parsedData[i];
if (temp.level_number === "2") {
const request = {
aliasName: temp.slug,
group: temp.group,
isActive: true,
levelNumber: 2,
name: temp.name,
parentLevelId: level1,
provinceId: 0,
};
const res = await createUserLevel(request);
if (res?.error) {
break;
}
level2 = res?.data?.data?.id;
} else if (temp.level_number === "3") {
const request = {
aliasName: temp.slug,
group: temp.group,
isActive: true,
levelNumber: 3,
name: temp.name,
parentLevelId: level2,
provinceId: 0,
};
const res = await createUserLevel(request);
if (res?.error) {
break;
}
} else {
const request = {
aliasName: temp.slug,
group: temp.group,
isActive: true,
levelNumber: 1,
name: temp.name,
parentLevelId: 0,
provinceId: 0,
};
const res = await createUserLevel(request);
if (res?.error) {
break;
}
level1 = res?.data?.data?.id;
}
}
}
}
};
useEffect(() => {
initFecth();
}, []);
const initFecth = async () => {
const res = await getUserLevel();
const data = res?.data?.data;
console.log("dataa", data);
// for (const element of data) {
// if (element.aliasName === "satker") {
// console.log("namanya", element.id);
// const request = {
// aliasName: element.aliasName,
// levelNumber: 2,
// name: element.name,
// parentLevelId: 692,
// provinceId: 0,
// };
// console.log("reqq", request);
// const response = await editUserLevel(request, element.id);
// if (response?.error) {
// break;
// }
// }
// }
};
return (
<div>
<h1>Mapping User Level</h1>
<Button onPress={doPostData}>Run</Button>
{/* File input */}
<input type="file" accept=".csv" onChange={handleFileChange} />
{/* Display parsed data */}
{parsedData && (
<div>
<h2>Parsed Data:</h2>
<pre>{JSON.stringify(parsedData, null, 2)}</pre>
</div>
)}
</div>
);
}

8
components/table/static-page-table.tsx
View File

@ -200,10 +200,10 @@ export default function StaticPageTable() {
return (
<>
<div className="p-3">
<div className="py-3">
<div className="flex flex-col items-start rounded-2xl gap-3">
<div className="flex flex-col md:flex-row gap-3 w-full">
<div className="flex flex-col gap-1 w-1/3">
<div className="flex flex-col gap-1 w-full lg:w-1/3">
<p className="font-semibold text-sm">Pencarian</p>
<Input
aria-label="Pencarian..."
@ -221,7 +221,7 @@ export default function StaticPageTable() {
onKeyDown={handleKeyDown}
/>
</div>
<div className="flex flex-col gap-1 w-[72px]">
<div className="flex flex-col gap-1 w-full lg:w-[72px]">
<p className="font-semibold text-sm">Data</p>
<Select
label=""
@ -243,7 +243,7 @@ export default function StaticPageTable() {
</Select>
</div>
<div className="flex flex-col gap-1 w-full md:w-[340px]">
<div className="flex flex-col gap-1 w-full lg:w-[340px]">
<p className="font-semibold text-sm">Tanggal</p>
<Datepicker
value={startDateValue}

38
components/ui/breadcrumb.tsx
View File

@ -5,7 +5,7 @@ import { Button } from "@nextui-org/button";
import { BreadcrumbItem, Breadcrumbs } from "@nextui-org/react";
import { usePathname, useRouter } from "next/navigation";
import { Image } from "@nextui-org/react";
import { FormLayoutIcon } from "../icons";
import { BurgerButtonIcon, FormLayoutIcon } from "../icons";
import {
ArticleIcon,
DashboardIcon,
@ -13,14 +13,18 @@ import {
MasterCategoryIcon,
MasterRoleIcon,
MasterUsersIcon,
MenuBurgerIcon,
StaticPageIcon,
} from "../icons/sidebar-icon";
import { useSidebar } from "../layout/sidebar/sidebar-context";
export const Breadcrumb = () => {
const [currentPage, setCurrentPage] = useState<React.Key>("");
const router = useRouter();
const pathname = usePathname();
const pathnameSplit = pathname.split("/");
const { isOpen, toggleSidebar } = useSidebar();
pathnameSplit.shift();
let pathnameTransformed = pathnameSplit.map((item) => {
let words = item.split("-");
@ -67,16 +71,28 @@ export const Breadcrumb = () => {
)}
</Breadcrumbs>
</div>
{pathname.includes("dashboard") && <DashboardIcon size={50} />}
{pathname.includes("article") && <ArticleIcon size={50} />}
{pathname.includes("master-category") && (
<MasterCategoryIcon size={50} />
)}
{pathname.includes("magazine") && <MagazineIcon size={50} />}
{pathname.includes("static-page") && <StaticPageIcon size={50} />}
{pathname.includes("master-user") && <MasterUsersIcon size={50} />}
{pathname.includes("master-role") && <MasterRoleIcon size={50} />}
{/* <FormLayoutIcon width={50} height={50} /> */}
<div className="lg:hidden">
{!isOpen && (
<button
className="w-5 h-5 mb-3 text-zinc-400 dark:text-zinc-400 z-50 flex justify-center items-center"
onClick={toggleSidebar}
>
<BurgerButtonIcon />
</button>
)}
</div>
<div className="hidden lg:block">
{pathname.includes("dashboard") && <DashboardIcon size={50} />}
{pathname.includes("article") && <ArticleIcon size={50} />}
{pathname.includes("master-category") && (
<MasterCategoryIcon size={50} />
)}
{pathname.includes("magazine") && <MagazineIcon size={50} />}
{pathname.includes("static-page") && <StaticPageIcon size={50} />}
{pathname.includes("master-user") && <MasterUsersIcon size={50} />}
{pathname.includes("master-role") && <MasterRoleIcon size={50} />}
{/* <FormLayoutIcon width={50} height={50} /> */}
</div>
</div>
</div>
</div>

34
components/ui/social-media/gpr-kominfo.tsx
View File

@ -1,6 +1,10 @@
"use client";
import { useTranslations } from "next-intl";
import { useEffect } from "react";
const GPRKominfo = () => {
const t = useTranslations("Landing");
useEffect(() => {
if (typeof window !== "undefined") {
const script = document.createElement("script");
@ -14,12 +18,34 @@ const GPRKominfo = () => {
}
}, []);
// useEffect(() => {
// const handleResize = () => {
// const bodyElement = document.getElementById("gpr-kominfo-widget-body");
// if (bodyElement) {
// bodyElement.style.height = "67vh";
// }
// };
// window.addEventListener("resize", handleResize);
// handleResize();
// return () => {
// window.removeEventListener("resize", handleResize);
// };
// }, []);
return (
<>
<div id="gpr-kominfo-widget-header"></div>
<div className="flex flex-col justify-between">
<div
id="gpr-kominfo-widget-header"
className="text-center flex justify-center items-center text-lg font-bold text-white rounded-t-xl"
>
{t("topik")}
</div>
<div id="gpr-kominfo-widget-body"></div>
<div id="gpr-kominfo-widget-footer"></div>
</>
{/* <div id="gpr-kominfo-widget-footer"></div> */}
</div>
);
};

3
config/site.ts
View File

@ -105,6 +105,8 @@ export const siteConfig = {
},
],
},
{ key: "e-ppid", label: "E-PPID", href: "https://eppid.polri.go.id/" },
{
key: "public-information",
label: "informasi_publik",
@ -195,7 +197,6 @@ export const siteConfig = {
},
],
},
{
key: "related-app",
label: "aplikasi_terkait",

3
messages/en.json
View File

@ -38,6 +38,7 @@
"lebihBanyak": "See More",
"kategoriSatker": "Satker Cateogry",
"beritaWilayah": "Regional News",
"tutup": "Close"
"tutup": "Close",
"topik": "Main Topic"
}
}

3
messages/id.json
View File

@ -37,6 +37,7 @@
"lebihBanyak": "Lihat Lebih Banyak",
"kategoriSatker": "Kategori Satker",
"beritaWilayah": "Berita Wilayah",
"tutup": "Tutup"
"tutup": "Tutup",
"topik": "Topik Utama"
}
}

20
next.config.js
View File

@ -1,11 +1,15 @@
/** @type {import('next').NextConfig} */
const nextConfig = {
eslint: {
ignoreDuringBuilds: true,
},
images: {
domains: ['38.47.180.165'],
},
}
eslint: {
ignoreDuringBuilds: true,
},
images: {
remotePatterns: [
{
hostname: "*",
},
],
},
};
module.exports = nextConfig
module.exports = nextConfig;

10
package-lock.json generated
View File

@ -54,6 +54,7 @@
"react-dropzone": "^14.3.5",
"react-hook-form": "^7.50.1",
"react-icons": "^5.0.1",
"react-otp-input": "^3.1.1",
"react-password-checklist": "^1.8.1",
"react-select": "^5.8.3",
"react-sweetalert2": "^0.6.0",
@ -9091,6 +9092,15 @@
"react-dom": "^15.5.x || ^16.x || ^17.x || ^18.x"
}
},
"node_modules/react-otp-input": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/react-otp-input/-/react-otp-input-3.1.1.tgz",
"integrity": "sha512-bjPavgJ0/Zmf/AYi4onj8FbH93IjeD+e8pWwxIJreDEWsU1ILR5fs8jEJmMGWSBe/yyvPP6X/W6Mk9UkOCkTPw==",
"peerDependencies": {
"react": ">=16.8.6 || ^17.0.0 || ^18.0.0",
"react-dom": ">=16.8.6 || ^17.0.0 || ^18.0.0"
}
},
"node_modules/react-password-checklist": {
"version": "1.8.1",
"resolved": "https://registry.npmjs.org/react-password-checklist/-/react-password-checklist-1.8.1.tgz",

1
package.json
View File

@ -55,6 +55,7 @@
"react-dropzone": "^14.3.5",
"react-hook-form": "^7.50.1",
"react-icons": "^5.0.1",
"react-otp-input": "^3.1.1",
"react-password-checklist": "^1.8.1",
"react-select": "^5.8.3",
"react-sweetalert2": "^0.6.0",

BIN
public/landing-1.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.5 MiB

BIN
public/landing-2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.4 MiB

BIN
public/landing-3.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 MiB

BIN
public/landing-4.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 MiB

20
service/activity-log.ts Normal file
View File

@ -0,0 +1,20 @@
import { PaginationRequest } from "@/types/globals";
import {
httpDeleteInterceptor,
httpGet,
httpPost,
httpPut,
} from "./http-config/axios-base-service";
export async function saveActivity(data: any, token?: string) {
const headers = token
? {
"content-type": "application/json",
Authorization: `Bearer ${token}`,
}
: {
"content-type": "application/json",
};
const pathUrl = `/activity-logs`;
return await httpPost(pathUrl, headers, data);
}

29
service/master-user-level.ts Normal file
View File

@ -0,0 +1,29 @@
import {
httpDeleteInterceptor,
httpGet,
httpPost,
httpPut,
} from "./http-config/axios-base-service";
export async function createUserLevel(data: any) {
const headers = {
"content-type": "application/json",
};
const pathUrl = `/user-levels`;
return await httpPost(pathUrl, headers, data);
}
export async function getUserLevel() {
const headers = {
"content-type": "application/json",
};
return await httpGet(`/user-levels?levelNumber=2&parentLevelId=79`, headers);
}
export async function editUserLevel(data: any, id: number) {
const headers = {
"content-type": "application/json",
};
const pathUrl = `/user-levels/${id}`;
return await httpPut(pathUrl, headers, data);
}

35
service/master-user.ts
View File

@ -73,11 +73,11 @@ export async function checkUsernames(username: string) {
return await httpPost(`/users/forgot-password`, headers, { username });
}
export async function otpRequest(email: string) {
export async function otpRequest(email: string, name: string) {
const headers = {
"content-type": "application/json",
};
return await httpPost(`/users/otp-request`, headers, { email });
return await httpPost(`/users/otp-request`, headers, { email, name });
}
export async function otpValidation(email: string, otpCode: string) {
@ -86,3 +86,34 @@ export async function otpValidation(email: string, otpCode: string) {
};
return await httpPost(`/users/otp-validation`, headers, { email, otpCode });
}
export async function postArticleComment(data: any) {
const headers = token
? {
"content-type": "application/json",
Authorization: `Bearer ${token}`,
}
: {
"content-type": "application/json",
};
return await httpPost(`/article-comments`, headers, data);
}
export async function editArticleComment(data: any, id: number) {
const headers = {
"content-type": "application/json",
Authorization: `Bearer ${token}`,
};
return await httpPut(`/article-comments/${id}`, headers, data);
}
export async function getArticleComment(id: string) {
const headers = {
"content-type": "application/json",
};
return await httpGet(`/article-comments?articleId=${id}`, headers);
}
export async function deleteArticleComment(id: number) {
return await httpDeleteInterceptor(`/article-comments/${id}`);
}

4
styles/globals.css
View File

@ -92,3 +92,7 @@ main {
height: 100vh;
overflow-y: auto;
}
.komdigi-styling #gpr-kominfo-widget-body {
height: 67vh !important;
}