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

fix: input search all content and menu sidebar in polda and satker approver

This commit is contained in:
Sabda Yagra 2025-11-10 22:52:59 +07:00
parent 8e2fa0425d 5b6ffd0863
commit 4605ef3aeb
10 changed files with 5362 additions and 1962 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
app/[locale]/(protected)/admin/management-user/internal/create/page.tsx
View File

@ -289,7 +289,17 @@ export default function CreateUserForm() {
};
if (data.role == "OPT-ID") {
req.handledSocialMedia = data?.sns ? data.sns.join(",") : "";
// req.handledSocialMedia = data?.sns ? data.sns.join(",") : "";
if (data.role == "OPT-ID") {
let snsValue = data?.sns ? data.sns.join(",") : "";
// ✅ Jika hanya 1 value → tambahkan koma agar backend tidak error
if (data?.sns && data.sns.length === 1) {
snsValue = snsValue + ",";
}
req.handledSocialMedia = snsValue;
}
}
if (data.role == "KUR-ID") {

34
app/[locale]/(protected)/contributor/content/audio/components/table-audio.tsx
View File

@ -60,7 +60,7 @@ const TableAudio = () => {
const [showData, setShowData] = React.useState("10");
const [page, setPage] = React.useState(1);
const [search, setSearch] = React.useState("");
const searchTimeout = React.useRef<NodeJS.Timeout | null>(null);
const [searchTimeout, setSearchTimeout] = React.useState<any>(null);
const [categories, setCategories] = React.useState<any[]>([]);
const [selectedCategories, setSelectedCategories] = React.useState<number[]>(
[]
@ -121,7 +121,7 @@ const TableAudio = () => {
filterByCreator,
filterBySource,
filterByCreatorGroup,
search,
// search,
showData,
page,
]);
@ -183,14 +183,30 @@ const TableAudio = () => {
}
}
// ✅ Debounced search
// const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
// const value = e.target.value;
// setSearch(value);
// if (searchTimeout.current) clearTimeout(searchTimeout.current);
// searchTimeout.current = setTimeout(() => {
// fetchData(true, value);
// }, 500);
// };
const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
const value = e.target.value;
setSearch(value);
if (searchTimeout.current) clearTimeout(searchTimeout.current);
searchTimeout.current = setTimeout(() => {
// Hapus timer lama
if (searchTimeout) {
clearTimeout(searchTimeout);
}
// Set timer baru untuk 3 detik
const timeout = setTimeout(() => {
fetchData(true, value);
}, 500);
}, 2000);
setSearchTimeout(timeout);
};
const handleSearchFilterBySource = (
@ -249,15 +265,15 @@ const TableAudio = () => {
<div className="w-full overflow-x-auto">
<div className="flex flex-col md:flex-row md:justify-between items-center md:px-5">
{/* 🔍 Search bar */}
<div className="w-full md:w-[250px] px-2">
<div className="w-full md:w-[200px] lg:w-[300px] px-2">
<InputGroup merged>
<InputGroupText className="bg-transparent dark:border-secondary dark:group-focus-within:border-secondary">
<Search className="h-4 w-4 dark:text-white" />
<Search className="h-6 w-6 dark:text-white" />
</InputGroupText>
<Input
type="text"
placeholder="Cari Judul..."
className="bg-transparent dark:border-secondary dark:placeholder-white/80 dark:focus:border-secondary dark:text-white"
className="bg-transparent dark:border-secondary dark:placeholder-white/80 dark:focus:border-secondary dark:text-white text-[16px]"
value={search}
onChange={handleSearch}
/>

26
app/[locale]/(protected)/contributor/content/image/components/table-image.tsx
View File

@ -62,6 +62,7 @@ const TableImage = () => {
const [showData, setShowData] = React.useState("10");
const [page, setPage] = React.useState(1);
const [search, setSearch] = React.useState("");
const [searchTimeout, setSearchTimeout] = React.useState<any>(null);
// === FILTER STATES ===
const [categories, setCategories] = React.useState<any[]>([]);
@ -120,7 +121,7 @@ const TableImage = () => {
filterByCreator,
filterBySource,
filterByCreatorGroup,
search,
// search,
showData,
page,
]);
@ -209,10 +210,27 @@ const TableImage = () => {
);
};
// const handleSearch: any = (e: React.ChangeEvent<HTMLInputElement>) => {
// const value = e.target.value;
// setSearch(value);
// fetchData(true, value);
// };
const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
const value = e.target.value;
setSearch(value);
// Hapus timer lama
if (searchTimeout) {
clearTimeout(searchTimeout);
}
// Set timer baru untuk 3 detik
const timeout = setTimeout(() => {
fetchData(true, value);
}, 2000);
setSearchTimeout(timeout);
};
const handleSearchFilterByCreator = (
@ -247,15 +265,15 @@ const TableImage = () => {
<div className="w-full overflow-x-auto">
{/* 🔍 FILTER & SEARCH BAR */}
<div className="flex flex-col md:flex-row lg:flex-row md:justify-between lg:justify-between items-center md:px-5 lg:px-5">
<div className="w-full md:w-[200px] lg:w-[200px] px-2">
<div className="w-full md:w-[200px] lg:w-[300px] px-2">
<InputGroup merged>
<InputGroupText className="bg-transparent dark:border-secondary dark:group-focus-within:border-secondary">
<Search className="h-4 w-4 dark:text-white" />
<Search className="h-6 w-6 dark:text-white" />
</InputGroupText>
<Input
type="text"
placeholder="Cari Judul..."
className="bg-transparent dark:border-secondary dark:placeholder-white/80 dark:focus:border-secondary dark:text-white"
className="bg-transparent dark:border-secondary dark:placeholder-white/80 dark:focus:border-secondary dark:text-white text-[16px]"
value={search}
onChange={handleSearch}
/>

6
app/[locale]/(protected)/contributor/content/spit/table-spit/table-spit.tsx
View File

@ -247,15 +247,15 @@ const TableSPIT = () => {
return (
<div className="w-full">
<div className="flex justify-between items-center px-5">
<div className="w-[150px] md:w-[250px] lg:w-[250px]">
<div className="w-[150px] md:w-[250px] lg:w-[300px]">
<InputGroup merged>
<InputGroupText className="bg-transparent dark:border-secondary dark:group-focus-within:border-secondary">
<Search className=" h-4 w-4 dark:text-white" />
<Search className=" h-6 w-6 dark:text-white" />
</InputGroupText>
<Input
type="text"
placeholder="Search Judul..."
className="bg-transparent dark:border-secondary dark:placeholder-white/80 dark:focus:border-secondary dark:text-white"
className="bg-transparent dark:border-secondary dark:placeholder-white/80 dark:focus:border-secondary dark:text-white text-[16px]"
value={search}
onChange={handleSearch}
/>

34
app/[locale]/(protected)/contributor/content/teks/components/table-teks.tsx
View File

@ -61,7 +61,7 @@ const TableTeks = () => {
const [showData, setShowData] = React.useState("10");
const [page, setPage] = React.useState(1);
const [search, setSearch] = React.useState("");
const searchTimeout = React.useRef<NodeJS.Timeout | null>(null);
const [searchTimeout, setSearchTimeout] = React.useState<any>(null);
// === FILTER STATES ===
const [categories, setCategories] = React.useState<any[]>([]);
@ -125,7 +125,7 @@ const TableTeks = () => {
filterByCreator,
filterBySource,
filterByCreatorGroup,
search,
// search,
showData,
page,
]);
@ -187,14 +187,30 @@ const TableTeks = () => {
}
}
// ✅ Debounced search
// const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
// const value = e.target.value;
// setSearch(value);
// if (searchTimeout.current) clearTimeout(searchTimeout.current);
// searchTimeout.current = setTimeout(() => {
// fetchData(true, value);
// }, 500);
// };
const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
const value = e.target.value;
setSearch(value);
if (searchTimeout.current) clearTimeout(searchTimeout.current);
searchTimeout.current = setTimeout(() => {
// Hapus timer lama
if (searchTimeout) {
clearTimeout(searchTimeout);
}
// Set timer baru untuk 3 detik
const timeout = setTimeout(() => {
fetchData(true, value);
}, 500);
}, 2000);
setSearchTimeout(timeout);
};
const handleSearchFilterBySource = (
@ -253,15 +269,15 @@ const TableTeks = () => {
<div className="w-full overflow-x-auto">
<div className="flex flex-col md:flex-row md:justify-between items-center md:px-5">
{/* 🔍 Search bar */}
<div className="w-full md:w-[250px] px-2">
<div className="w-full md:w-[200px] lg:w-[300px] px-2">
<InputGroup merged>
<InputGroupText className="bg-transparent dark:border-secondary dark:group-focus-within:border-secondary">
<Search className="h-4 w-4 dark:text-white" />
<Search className="h-6 w-6 dark:text-white" />
</InputGroupText>
<Input
type="text"
placeholder="Cari Judul..."
className="bg-transparent dark:border-secondary dark:placeholder-white/80 dark:focus:border-secondary dark:text-white"
className="bg-transparent dark:border-secondary dark:placeholder-white/80 dark:focus:border-secondary dark:text-white text-[16px]"
value={search}
onChange={handleSearch}
/>

34
app/[locale]/(protected)/contributor/content/video/components/table-video.tsx
View File

@ -62,7 +62,7 @@ const TableVideo = () => {
const [showData, setShowData] = React.useState("10");
const [page, setPage] = React.useState(1);
const [search, setSearch] = React.useState("");
const searchTimeout = React.useRef<NodeJS.Timeout | null>(null);
const [searchTimeout, setSearchTimeout] = React.useState<any>(null);
// === FILTER STATES ===
const [categories, setCategories] = React.useState<any[]>([]);
@ -126,7 +126,7 @@ const TableVideo = () => {
filterByCreator,
filterBySource,
filterByCreatorGroup,
search,
// search,
showData,
page,
]);
@ -214,15 +214,33 @@ const TableVideo = () => {
);
}
// const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
// const value = e.target.value;
// setSearch(value);
// if (searchTimeout.current) clearTimeout(searchTimeout.current);
// searchTimeout.current = setTimeout(() => {
// fetchData(true, value);
// }, 500);
// };
const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
const value = e.target.value;
setSearch(value);
if (searchTimeout.current) clearTimeout(searchTimeout.current);
searchTimeout.current = setTimeout(() => {
// Hapus timer lama
if (searchTimeout) {
clearTimeout(searchTimeout);
}
// Set timer baru untuk 3 detik
const timeout = setTimeout(() => {
fetchData(true, value);
}, 500);
}, 2000);
setSearchTimeout(timeout);
};
const handleSearchFilterByCreator = (
e: React.ChangeEvent<HTMLInputElement>
) => {
@ -257,15 +275,15 @@ const TableVideo = () => {
<div className="w-full overflow-x-auto">
<div className="flex flex-col md:flex-row md:justify-between items-center md:px-5">
{/* 🔍 Search bar */}
<div className="w-full md:w-[250px] px-2">
<div className="w-full md:w-[200px] lg:w-[300px] px-2">
<InputGroup merged>
<InputGroupText className="bg-transparent dark:border-secondary dark:group-focus-within:border-secondary">
<Search className="h-4 w-4 dark:text-white" />
<Search className="h-6 w-6 dark:text-white" />
</InputGroupText>
<Input
type="text"
placeholder="Cari Judul..."
className="bg-transparent dark:border-secondary dark:placeholder-white/80 dark:focus:border-secondary dark:text-white"
className="bg-transparent dark:border-secondary dark:placeholder-white/80 dark:focus:border-secondary dark:text-white text-[16px]"
value={search}
onChange={handleSearch}
/>

4781
components/form/content/image-update-form.tsx
View File

File diff suppressed because it is too large Load Diff

1301
components/form/content/spit-convert-form.tsx
View File

File diff suppressed because it is too large Load Diff

72
components/landing-page/new-content.tsx
View File

@ -19,6 +19,8 @@ import { Skeleton } from "../ui/skeleton";
import Image from "next/image";
import { motion } from "framer-motion";
import ImageBlurry from "../ui/image-blurry";
import { formatDateToIndonesian } from "@/utils/globals";
import { Icon } from "../ui/icon";
const NewContent = (props: { group: string; type: string }) => {
const [newContent, setNewContent] = useState<any>();
@ -276,10 +278,24 @@ const NewContent = (props: { group: string; type: string }) => {
{/* Caption section */}
<div className="p-4 h-full flex flex-col justify-between">
<div className="flex flex-col gap-1 flex-grow">
<div className="flex flex-row justify-between mb-2">
<p className="text-[10px] font-bold text-[#bb3523] uppercase">
{image?.categoryName?.toUpperCase() ??
"Giat Pimpinan"}
</p>
<p className="flex flex-row items-center text-[10px] gap-1 text-gray-600">
{formatDateToIndonesian(
new Date(image?.createdAt)
)}{" "}
{image?.timezone ?? "WIB"} |
<Icon
icon="formkit:eye"
width="15"
height="15"
/>{" "}
{image.clickCount}
</p>
</div>
<Link
href={
prefixPath + `/image/detail/${image?.slug}`
@ -366,12 +382,26 @@ const NewContent = (props: { group: string; type: string }) => {
{/* Caption */}
<div className="p-4">
<p className="text-[12px] font-bold text-[#bb3523] uppercase mb-1">
<div className="flex flex-row justify-between mb-2">
<p className="text-[10px] font-bold text-[#bb3523] uppercase">
{audio?.categoryName?.toUpperCase() ??
"GIAT PIMPINAN"}
"Giat Pimpinan"}
</p>
<p className="flex flex-row items-center text-[10px] gap-1 text-gray-600">
{formatDateToIndonesian(
new Date(audio?.createdAt)
)}{" "}
{audio?.timezone ?? "WIB"} |
<Icon
icon="formkit:eye"
width="15"
height="15"
/>{" "}
{audio.clickCount}
</p>
</div>
<p className="text-xl font-semibold text-black dark:text-white line-clamp-4">
<p className="text-sm lg:text-base font-semibold text-black dark:text-white line-clamp-4">
{audio?.title}
</p>
@ -488,10 +518,25 @@ const NewContent = (props: { group: string; type: string }) => {
{/* Caption section */}
<div className="p-4 h-full flex flex-col justify-between">
<div className="flex flex-col gap-1 flex-grow">
<div className="flex flex-row justify-between mb-2">
<p className="text-[10px] font-bold text-[#bb3523] uppercase">
{video?.categoryName?.toUpperCase() ??
"Giat Pimpinan"}
</p>
<p className="flex flex-row items-center text-[10px] gap-1 text-gray-600">
{formatDateToIndonesian(
new Date(video?.createdAt)
)}{" "}
{video?.timezone ?? "WIB"} |
<Icon
icon="formkit:eye"
width="15"
height="15"
/>{" "}
{video.clickCount}
</p>
</div>
<Link
href={
prefixPath + `/video/detail/${video?.slug}`
@ -581,8 +626,23 @@ const NewContent = (props: { group: string; type: string }) => {
{/* Konten bawah */}
<div className="p-4 flex flex-col gap-2">
{/* Kategori merah */}
<div className="text-[12px] font-bold text-red-600 uppercase">
{text?.categoryName?.toUpperCase() ?? "Text"}
<div className="flex flex-row justify-between mb-2">
<p className="text-[10px] font-bold text-[#bb3523] uppercase">
{text?.categoryName?.toUpperCase() ??
"Giat Pimpinan"}
</p>
<p className="flex flex-row items-center text-[10px] gap-1 text-gray-600">
{formatDateToIndonesian(
new Date(text?.createdAt)
)}{" "}
{text?.timezone ?? "WIB"} |
<Icon
icon="formkit:eye"
width="15"
height="15"
/>{" "}
{text.clickCount}
</p>
</div>
{/* Judul */}
@ -591,7 +651,7 @@ const NewContent = (props: { group: string; type: string }) => {
prefixPath + `/document/detail/${text?.slug}`
}
>
<p className="font-semibold text-gray-900 dark:text-white text-xl leading-snug line-clamp-4">
<p className="font-semibold text-gray-900 dark:text-white text-sm lg:text-base leading-snug line-clamp-4">
{text?.title}
</p>
</Link>

270
lib/menus.ts
View File

@ -2642,9 +2642,8 @@ export function getMenuList(pathname: string, t: any): Group[] {
(Number(roleId) == 3 || Number(roleId) == 14 || Number(roleId) == 15) &&
Number(levelNumber) == 3
) {
const hideForRole3 = Number(roleId) === 3;
if (Number(userParentLevelId) != 771) {
if (Number(userParentLevelId) != 761)
{
menusSelected = [
{
groupLabel: t("apps"),
@ -2699,17 +2698,15 @@ export function getMenuList(pathname: string, t: any): Group[] {
icon: "heroicons:share",
children: [],
},
...(!hideForRole3
? [
{
href: "/contributor/content/spit",
label: "spit",
active: pathname.includes("/content/spit"),
icon: "heroicons:credit-card",
children: [],
},
]
: []),
// {
// href: "/contributor/content/spit",
// label: "spit",
// active: pathname.includes("/content/spit"),
// icon: "heroicons:credit-card",
// children: [],
// },
// {
// href: "/contributor/content/nulis-ai",
// label: "nulis ai",
@ -2735,39 +2732,36 @@ export function getMenuList(pathname: string, t: any): Group[] {
},
],
},
...(!hideForRole3
? [
{
groupLabel: "",
id: "planning",
menus: [
{
id: "planning",
href: "/contributor/planning",
label: t("planning"),
active: pathname.includes("/planning"),
icon: "pajamas:planning",
submenus: [
{
href: "/contributor/planning/mediahub",
label: "mediaHub",
active: pathname.includes("/planning/mediahub"),
icon: "heroicons:arrow-trending-up",
children: [],
},
{
href: "/contributor/planning/medsos-mediahub",
label: "medsos mediahub",
active: pathname.includes("/planning/medsos-mediahub"),
icon: "heroicons:shopping-cart",
children: [],
},
],
},
],
},
]
: []),
// {
// groupLabel: "",
// id: "planning",
// menus: [
// {
// id: "planning",
// href: "/contributor/planning",
// label: t("planning"),
// active: pathname.includes("/planning"),
// icon: "pajamas:planning",
// submenus: [
// {
// href: "/contributor/planning/mediahub",
// label: "mediaHub",
// active: pathname.includes("/planning/mediahub"),
// icon: "heroicons:arrow-trending-up",
// children: [],
// },
// {
// href: "/contributor/planning/medsos-mediahub",
// label: "medsos mediahub",
// active: pathname.includes("/planning/medsos-mediahub"),
// icon: "heroicons:shopping-cart",
// children: [],
// },
// ],
// },
// ],
// },
{
groupLabel: "",
id: "task",
@ -2818,24 +2812,21 @@ export function getMenuList(pathname: string, t: any): Group[] {
},
],
},
...(!hideForRole3
? [
{
groupLabel: "",
id: "blog",
menus: [
{
id: "blog",
href: "/contributor/blog",
label: t("blog"),
active: pathname.includes("/blog"),
icon: "fluent:clipboard-text-32-regular",
submenus: [],
},
],
},
]
: []),
// {
// groupLabel: "",
// id: "blog",
// menus: [
// {
// id: "blog",
// href: "/contributor/blog",
// label: t("blog"),
// active: pathname.includes("/blog"),
// icon: "fluent:clipboard-text-32-regular",
// submenus: [],
// },
// ],
// },
{
groupLabel: "",
id: "curatedcontent",
@ -2878,46 +2869,43 @@ export function getMenuList(pathname: string, t: any): Group[] {
},
],
},
...(!hideForRole3
? [
{
groupLabel: "",
id: "settings",
menus: [
{
id: "settings",
href: "/admin/settings",
label: t("settings"),
active: pathname.includes("/settinng"),
icon: "material-symbols:settings",
submenus: [
{
href: "/admin/settings/banner",
label: "Banner",
active: pathname === "/admin/settings/banner",
icon: "heroicons:arrow-trending-up",
children: [],
},
{
href: "/admin/settings/popup",
label: "Pop Up",
active: pathname === "/admin/settings/popup",
icon: "heroicons:arrow-trending-up",
children: [],
},
{
href: "/admin/settings/iklan",
label: "Iklan",
active: pathname === "/admin/settings/iklan",
icon: "heroicons:arrow-trending-up",
children: [],
},
],
},
],
},
]
: []),
// {
// groupLabel: "",
// id: "settings",
// menus: [
// {
// id: "settings",
// href: "/admin/settings",
// label: t("settings"),
// active: pathname.includes("/settinng"),
// icon: "material-symbols:settings",
// submenus: [
// {
// href: "/admin/settings/banner",
// label: "Banner",
// active: pathname === "/admin/settings/banner",
// icon: "heroicons:arrow-trending-up",
// children: [],
// },
// {
// href: "/admin/settings/popup",
// label: "Pop Up",
// active: pathname === "/admin/settings/popup",
// icon: "heroicons:arrow-trending-up",
// children: [],
// },
// {
// href: "/admin/settings/iklan",
// label: "Iklan",
// active: pathname === "/admin/settings/iklan",
// icon: "heroicons:arrow-trending-up",
// children: [],
// },
// ],
// },
// ],
// },
];
} else if (Number(userParentLevelId) == 771) {
menusSelected = [
@ -3141,42 +3129,42 @@ export function getMenuList(pathname: string, t: any): Group[] {
},
],
},
// {
// groupLabel: "",
// id: "settings",
// menus: [
// {
// id: "settings",
// href: "/admin/settings",
// label: t("settings"),
// active: pathname.includes("/settinng"),
// icon: "material-symbols:settings",
// submenus: [
// {
// href: "/admin/settings/banner",
// label: "Banner",
// active: pathname === "/admin/settings/banner",
// icon: "heroicons:arrow-trending-up",
// children: [],
// },
// {
// href: "/admin/settings/popup",
// label: "Pop Up",
// active: pathname === "/admin/settings/popup",
// icon: "heroicons:arrow-trending-up",
// children: [],
// },
// {
// href: "/admin/settings/iklan",
// label: "Iklan",
// active: pathname === "/admin/settings/iklan",
// icon: "heroicons:arrow-trending-up",
// children: [],
// },
// ],
// },
// ],
// },
{
groupLabel: "",
id: "settings",
menus: [
{
id: "settings",
href: "/admin/settings",
label: t("settings"),
active: pathname.includes("/settinng"),
icon: "material-symbols:settings",
submenus: [
{
href: "/admin/settings/banner",
label: "Banner",
active: pathname === "/admin/settings/banner",
icon: "heroicons:arrow-trending-up",
children: [],
},
{
href: "/admin/settings/popup",
label: "Pop Up",
active: pathname === "/admin/settings/popup",
icon: "heroicons:arrow-trending-up",
children: [],
},
{
href: "/admin/settings/iklan",
label: "Iklan",
active: pathname === "/admin/settings/iklan",
icon: "heroicons:arrow-trending-up",
children: [],
},
],
},
],
},
];
}
} else if (Number(roleId) == 9) {