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

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

This commit is contained in:
Sabda Yagra 2025-11-10 22:06:43 +07:00
parent eaa1628fde
commit 5b6ffd0863
6 changed files with 236 additions and 180 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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 [showData, setShowData] = React.useState("10");
const [page, setPage] = React.useState(1); const [page, setPage] = React.useState(1);
const [search, setSearch] = React.useState(""); 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 [categories, setCategories] = React.useState<any[]>([]);
const [selectedCategories, setSelectedCategories] = React.useState<number[]>( const [selectedCategories, setSelectedCategories] = React.useState<number[]>(
[] []
@ -121,7 +121,7 @@ const TableAudio = () => {
filterByCreator, filterByCreator,
filterBySource, filterBySource,
filterByCreatorGroup, filterByCreatorGroup,
search, // search,
showData, showData,
page, 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 handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
const value = e.target.value; const value = e.target.value;
setSearch(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); fetchData(true, value);
}, 500); }, 2000);
setSearchTimeout(timeout);
}; };
const handleSearchFilterBySource = ( const handleSearchFilterBySource = (
@ -249,15 +265,15 @@ const TableAudio = () => {
<div className="w-full overflow-x-auto"> <div className="w-full overflow-x-auto">
<div className="flex flex-col md:flex-row md:justify-between items-center md:px-5"> <div className="flex flex-col md:flex-row md:justify-between items-center md:px-5">
{/* 🔍 Search bar */} {/* 🔍 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> <InputGroup merged>
<InputGroupText className="bg-transparent dark:border-secondary dark:group-focus-within:border-secondary"> <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> </InputGroupText>
<Input <Input
type="text" type="text"
placeholder="Cari Judul..." 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} value={search}
onChange={handleSearch} onChange={handleSearch}
/> />

28
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 [showData, setShowData] = React.useState("10");
const [page, setPage] = React.useState(1); const [page, setPage] = React.useState(1);
const [search, setSearch] = React.useState(""); const [search, setSearch] = React.useState("");
const [searchTimeout, setSearchTimeout] = React.useState<any>(null);
// === FILTER STATES === // === FILTER STATES ===
const [categories, setCategories] = React.useState<any[]>([]); const [categories, setCategories] = React.useState<any[]>([]);
@ -120,7 +121,7 @@ const TableImage = () => {
filterByCreator, filterByCreator,
filterBySource, filterBySource,
filterByCreatorGroup, filterByCreatorGroup,
search, // search,
showData, showData,
page, 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 handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
const value = e.target.value; const value = e.target.value;
setSearch(value); setSearch(value);
fetchData(true, 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 = ( const handleSearchFilterByCreator = (
@ -247,15 +265,15 @@ const TableImage = () => {
<div className="w-full overflow-x-auto"> <div className="w-full overflow-x-auto">
{/* 🔍 FILTER & SEARCH BAR */} {/* 🔍 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="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> <InputGroup merged>
<InputGroupText className="bg-transparent dark:border-secondary dark:group-focus-within:border-secondary"> <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> </InputGroupText>
<Input <Input
type="text" type="text"
placeholder="Cari Judul..." 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} value={search}
onChange={handleSearch} onChange={handleSearch}
/> />

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

@ -247,15 +247,15 @@ const TableSPIT = () => {
return ( return (
<div className="w-full"> <div className="w-full">
<div className="flex justify-between items-center px-5"> <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> <InputGroup merged>
<InputGroupText className="bg-transparent dark:border-secondary dark:group-focus-within:border-secondary"> <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> </InputGroupText>
<Input <Input
type="text" type="text"
placeholder="Search Judul..." 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} value={search}
onChange={handleSearch} 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 [showData, setShowData] = React.useState("10");
const [page, setPage] = React.useState(1); const [page, setPage] = React.useState(1);
const [search, setSearch] = React.useState(""); const [search, setSearch] = React.useState("");
const searchTimeout = React.useRef<NodeJS.Timeout | null>(null); const [searchTimeout, setSearchTimeout] = React.useState<any>(null);
// === FILTER STATES === // === FILTER STATES ===
const [categories, setCategories] = React.useState<any[]>([]); const [categories, setCategories] = React.useState<any[]>([]);
@ -125,7 +125,7 @@ const TableTeks = () => {
filterByCreator, filterByCreator,
filterBySource, filterBySource,
filterByCreatorGroup, filterByCreatorGroup,
search, // search,
showData, showData,
page, 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 handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
const value = e.target.value; const value = e.target.value;
setSearch(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); fetchData(true, value);
}, 500); }, 2000);
setSearchTimeout(timeout);
}; };
const handleSearchFilterBySource = ( const handleSearchFilterBySource = (
@ -253,15 +269,15 @@ const TableTeks = () => {
<div className="w-full overflow-x-auto"> <div className="w-full overflow-x-auto">
<div className="flex flex-col md:flex-row md:justify-between items-center md:px-5"> <div className="flex flex-col md:flex-row md:justify-between items-center md:px-5">
{/* 🔍 Search bar */} {/* 🔍 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> <InputGroup merged>
<InputGroupText className="bg-transparent dark:border-secondary dark:group-focus-within:border-secondary"> <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> </InputGroupText>
<Input <Input
type="text" type="text"
placeholder="Cari Judul..." 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} value={search}
onChange={handleSearch} onChange={handleSearch}
/> />

44
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 [showData, setShowData] = React.useState("10");
const [page, setPage] = React.useState(1); const [page, setPage] = React.useState(1);
const [search, setSearch] = React.useState(""); const [search, setSearch] = React.useState("");
const searchTimeout = React.useRef<NodeJS.Timeout | null>(null); const [searchTimeout, setSearchTimeout] = React.useState<any>(null);
// === FILTER STATES === // === FILTER STATES ===
const [categories, setCategories] = React.useState<any[]>([]); const [categories, setCategories] = React.useState<any[]>([]);
@ -126,7 +126,7 @@ const TableVideo = () => {
filterByCreator, filterByCreator,
filterBySource, filterBySource,
filterByCreatorGroup, filterByCreatorGroup,
search, // search,
showData, showData,
page, page,
]); ]);
@ -214,14 +214,32 @@ const TableVideo = () => {
); );
} }
const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => { // const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
const value = e.target.value; // const value = e.target.value;
setSearch(value); // setSearch(value);
if (searchTimeout.current) clearTimeout(searchTimeout.current); // if (searchTimeout.current) clearTimeout(searchTimeout.current);
searchTimeout.current = setTimeout(() => { // searchTimeout.current = setTimeout(() => {
fetchData(true, value); // fetchData(true, value);
}, 500); // }, 500);
}; // };
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 = ( const handleSearchFilterByCreator = (
e: React.ChangeEvent<HTMLInputElement> e: React.ChangeEvent<HTMLInputElement>
@ -257,15 +275,15 @@ const TableVideo = () => {
<div className="w-full overflow-x-auto"> <div className="w-full overflow-x-auto">
<div className="flex flex-col md:flex-row md:justify-between items-center md:px-5"> <div className="flex flex-col md:flex-row md:justify-between items-center md:px-5">
{/* 🔍 Search bar */} {/* 🔍 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> <InputGroup merged>
<InputGroupText className="bg-transparent dark:border-secondary dark:group-focus-within:border-secondary"> <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> </InputGroupText>
<Input <Input
type="text" type="text"
placeholder="Cari Judul..." 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} value={search}
onChange={handleSearch} onChange={handleSearch}
/> />

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