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

fix: adjust layout in spv menus

This commit is contained in:
Sabda Yagra 2025-09-12 17:51:33 +07:00
parent 6688345b64
commit 6230460148
5 changed files with 174 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
app/[locale]/(protected)/supervisor/communications/questions/[title]/components/questions-table.tsx
View File

@ -98,6 +98,12 @@ const QuestionsTable = (props: {
const [page, setPage] = React.useState(1); const [page, setPage] = React.useState(1);
const [totalPage, setTotalPage] = React.useState(1); const [totalPage, setTotalPage] = React.useState(1);
const [search, setSearch] = React.useState<string>(""); const [search, setSearch] = React.useState<string>("");
const [activeTab, setActiveTab] = React.useState<"publik" | "rutin">(
"publik"
);
const [reportType, setReportType] = React.useState<"general" | "routine">(
"general"
);
const roleId = getCookiesDecrypt("urie"); const roleId = getCookiesDecrypt("urie");
@ -136,13 +142,21 @@ const QuestionsTable = (props: {
} }
}, [searchParams]); }, [searchParams]);
// React.useEffect(() => {
// fetchData();
// setPagination({
// pageIndex: 0,
// pageSize: Number(showData),
// });
// }, [page, showData]);
// ✅ update useEffect, tambahin reportType supaya reload saat tab diganti
React.useEffect(() => { React.useEffect(() => {
fetchData(); fetchData();
setPagination({ setPagination({
pageIndex: 0, pageIndex: 0,
pageSize: Number(showData), pageSize: Number(showData),
}); });
}, [page, showData]); }, [page, showData, reportType]);
let typingTimer: any; let typingTimer: any;
const doneTypingInterval = 1500; const doneTypingInterval = 1500;
@ -160,6 +174,52 @@ const QuestionsTable = (props: {
fetchData(); fetchData();
} }
// async function fetchData() {
// const typeNow =
// title === "comment"
// ? "1"
// : title === "facebook"
// ? "2"
// : title === "instagram"
// ? "3"
// : title === "x"
// ? "4"
// : title === "youtube"
// ? "5"
// : title === "emergency"
// ? "6"
// : title === "email"
// ? "7"
// : title === "inbox"
// ? "8"
// : title === "whatsapp"
// ? "9"
// : title === "tiktok"
// ? "10"
// : "";
// try {
// const res = await getQuestionPagination(
// search,
// page - 1,
// typeNow,
// showData
// );
// const data = res?.data?.data;
// const contentData = data?.page?.content;
// console.log("contentDatassss : ", data);
// contentData.forEach((item: any, index: number) => {
// item.no = (page - 1) * Number(showData) + index + 1;
// });
// setDataTable(contentData);
// props.statisticData(data?.statistic);
// setTotalData(data?.page?.totalElements);
// setTotalPage(data?.page?.totalPages);
// } catch (error) {
// console.error("Error fetching tasks:", error);
// }
// }
async function fetchData() { async function fetchData() {
const typeNow = const typeNow =
title === "comment" title === "comment"
@ -185,12 +245,15 @@ const QuestionsTable = (props: {
: ""; : "";
try { try {
// ⬇️ tambahan param khusus untuk emergency
const res = await getQuestionPagination( const res = await getQuestionPagination(
search, search,
page - 1, page - 1,
typeNow, typeNow,
showData showData,
title === "emergency" ? reportType : undefined
); );
const data = res?.data?.data; const data = res?.data?.data;
const contentData = data?.page?.content; const contentData = data?.page?.content;
console.log("contentDatassss : ", data); console.log("contentDatassss : ", data);
@ -198,6 +261,7 @@ const QuestionsTable = (props: {
contentData.forEach((item: any, index: number) => { contentData.forEach((item: any, index: number) => {
item.no = (page - 1) * Number(showData) + index + 1; item.no = (page - 1) * Number(showData) + index + 1;
}); });
setDataTable(contentData); setDataTable(contentData);
props.statisticData(data?.statistic); props.statisticData(data?.statistic);
setTotalData(data?.page?.totalElements); setTotalData(data?.page?.totalElements);
@ -267,6 +331,23 @@ const QuestionsTable = (props: {
</DropdownMenuContent> </DropdownMenuContent>
</DropdownMenu> </DropdownMenu>
</div> </div>
{title === "emergency" && (
<div className="flex gap-2 mt-4">
<Button
variant={reportType === "general" ? "default" : "outline"}
onClick={() => setReportType("general")}
>
Laporan Publik
</Button>
<Button
variant={reportType === "routine" ? "default" : "outline"}
onClick={() => setReportType("routine")}
>
Laporan Rutin
</Button>
</div>
)}
<Table className="overflow-hidden mt-3"> <Table className="overflow-hidden mt-3">
<TableHeader> <TableHeader>
{table.getHeaderGroups().map((headerGroup) => ( {table.getHeaderGroups().map((headerGroup) => (

14
app/[locale]/(protected)/supervisor/ticketing/components/table.tsx
View File

@ -80,7 +80,12 @@ export default function TicketingTable() {
async function fetchData() { async function fetchData() {
try { try {
const res = await ticketingPagination(search, pageSize, page - 1, mediaId == 'all' ? "" : mediaId as string); const res = await ticketingPagination(
search,
pageSize,
page - 1,
mediaId == "all" ? "" : (mediaId as string)
);
const data = res?.data?.data; const data = res?.data?.data;
const content = data?.content || []; const content = data?.content || [];
const mapped: Issue[] = content.map((it: any, idx: number) => ({ const mapped: Issue[] = content.map((it: any, idx: number) => ({
@ -413,7 +418,7 @@ export default function TicketingTable() {
<AvatarFallback>{src.short}</AvatarFallback> <AvatarFallback>{src.short}</AvatarFallback>
</Avatar> </Avatar>
<div> <div>
<div className="text-sm font-medium"> {/* <div className="text-sm font-medium">
{(it.title ?? "") {(it.title ?? "")
.split(" ") .split(" ")
.slice(0, 25) .slice(0, 25)
@ -421,6 +426,11 @@ export default function TicketingTable() {
((it.title ?? "").split(" ").length > 25 ((it.title ?? "").split(" ").length > 25
? "..." ? "..."
: "")} : "")}
</div> */}
<div className="text-sm font-medium">
{(it.title ?? "").length > 60
? (it.title ?? "").substring(0, 60) + "..."
: it.title}
</div> </div>
<div className="text-xs text-muted-foreground flex items-center gap-2"> <div className="text-xs text-muted-foreground flex items-center gap-2">

11
components/form/ticketing/ticketing-detail-form.tsx
View File

@ -709,9 +709,9 @@ export default function FormDetailTicketing({ id }: Props) {
}; };
return ( return (
<section className="flex-1 flex flex-col bg-white"> <section className="flex flex-col h-full bg-white">
{/* Header */} {/* Header */}
<div className="border-b px-4 py-3"> <div className="border-b px-4 py-3 shrink-0">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="text-sm font-medium"> <div className="text-sm font-medium">
{(detail?.title ?? "").split(" ").slice(0, 25).join(" ") + {(detail?.title ?? "").split(" ").slice(0, 25).join(" ") +
@ -723,12 +723,13 @@ export default function FormDetailTicketing({ id }: Props) {
</div> </div>
</div> </div>
{/* Chat Messages */} {/* Chat Messages (scrollable only this part) */}
<div className="flex-1 overflow-auto p-4 space-y-3 bg-gray-50"> <div className="flex-1 overflow-y-auto p-4 space-y-3 bg-gray-50">
{!detail ? ( {!detail ? (
<div className="h-full flex items-center justify-center text-muted-foreground"> <div className="h-full flex items-center justify-center text-muted-foreground">
<div className="text-center"> <div className="text-center">
<div className="mb-4"> <div className="mb-4">
{/* Icon kosong */}
<svg <svg
width="72" width="72"
height="72" height="72"
@ -783,7 +784,7 @@ export default function FormDetailTicketing({ id }: Props) {
</div> </div>
{/* Input Box */} {/* Input Box */}
<div className="border-t px-4 py-3 bg-white"> <div className="border-t px-4 py-3 bg-white shrink-0">
<div className="flex flex-col gap-2 max-w-full mx-auto"> <div className="flex flex-col gap-2 max-w-full mx-auto">
<textarea <textarea
placeholder='Enter your reply or type "/" to insert a quick reply' placeholder='Enter your reply or type "/" to insert a quick reply'

110
lib/menus.ts
View File

@ -3181,20 +3181,20 @@ export function getMenuList(pathname: string, t: any): Group[] {
} }
} else if (Number(roleId) == 9) { } else if (Number(roleId) == 9) {
menusSelected = [ menusSelected = [
{ // {
groupLabel: t("apps"), // groupLabel: t("apps"),
id: "dashboard", // id: "dashboard",
menus: [ // menus: [
{ // {
id: "dashboard", // id: "dashboard",
href: "/dashboard", // href: "/dashboard",
label: t("dashboard"), // label: t("dashboard"),
active: pathname.includes("/dashboard"), // active: pathname.includes("/dashboard"),
icon: "material-symbols:dashboard", // icon: "material-symbols:dashboard",
submenus: [], // submenus: [],
}, // },
], // ],
}, // },
{ {
groupLabel: "", groupLabel: "",
id: "ticketing", id: "ticketing",
@ -3214,54 +3214,62 @@ export function getMenuList(pathname: string, t: any): Group[] {
children: [], children: [],
}, },
{ {
href: "/supervisor/ticketing/3", href: "/supervisor/ticketing/6",
label: "Instagram", label: "Emergency Issues",
active: pathname.includes("/ticketing/3"), active: pathname.includes("/ticketing/6"),
icon: "ri:chat-private-line",
children: [],
},
{
href: "/supervisor/ticketing/2",
label: "Facebook",
active: pathname.includes("/ticketing/2"),
icon: "ri:share-forward-2-fill", icon: "ri:share-forward-2-fill",
children: [], children: [],
}, },
{ {
href: "/supervisor/ticketing/5", href: "/supervisor/ticketing/9",
label: "Youtube", label: "Whatsapp",
active: pathname.includes("/ticketing/5"), active: pathname.includes("/ticketing/9"),
icon: "ri:share-forward-2-fill",
children: [],
},
{
href: "/supervisor/ticketing/1",
label: "Komentar Konten",
active: pathname.includes("/ticketing/1"),
icon: "ri:share-forward-2-fill",
children: [],
},
{
href: "/supervisor/ticketing/7",
label: "Email",
active: pathname.includes("/ticketing/7"),
icon: "ri:share-forward-2-fill",
children: [],
},
{
href: "/supervisor/ticketing/8",
label: "Pesan Masuk",
active: pathname.includes("/ticketing/8"),
icon: "ri:share-forward-2-fill", icon: "ri:share-forward-2-fill",
children: [], children: [],
}, },
// { // {
// href: "/", // href: "/supervisor/ticketing/3",
// label: "Tiktok", // label: "Instagram",
// active: pathname.includes("/ticketing/tiktok"), // active: pathname.includes("/ticketing/3"),
// icon: "ri:chat-private-line",
// children: [],
// },
// {
// href: "/supervisor/ticketing/2",
// label: "Facebook",
// active: pathname.includes("/ticketing/2"),
// icon: "ri:share-forward-2-fill", // icon: "ri:share-forward-2-fill",
// children: [], // children: [],
// }, // },
// { // {
// href: "/", // href: "/supervisor/ticketing/5",
// label: "Kolom Komentar", // label: "Youtube",
// active: pathname.includes("/ticketing/comment"), // active: pathname.includes("/ticketing/5"),
// icon: "ri:share-forward-2-fill",
// children: [],
// },
// {
// href: "/",
// label: "Hubungi Kami",
// active: pathname.includes("/ticketing/contact-us"),
// icon: "ri:share-forward-2-fill",
// children: [],
// },
// {
// href: "/",
// label: "Play Store",
// active: pathname.includes("/ticketing/play-store"),
// icon: "ri:share-forward-2-fill", // icon: "ri:share-forward-2-fill",
// children: [], // children: [],
// }, // },
// { // {
// href: "/", // href: "/",
// label: "App Store", // label: "App Store",
@ -3283,13 +3291,7 @@ export function getMenuList(pathname: string, t: any): Group[] {
// icon: "ri:share-forward-2-fill", // icon: "ri:share-forward-2-fill",
// children: [], // children: [],
// }, // },
{
href: "/supervisor/ticketing/6",
label: "Emergency Issues",
active: pathname.includes("/ticketing/6"),
icon: "ri:share-forward-2-fill",
children: [],
},
// { // {
// href: "/", // href: "/",
// label: "Campaignpool", // label: "Campaignpool",

19
service/communication/communication.ts
View File

@ -122,13 +122,28 @@ export async function deleteCollabDiscussion(id: string | number) {
return httpDeleteInterceptor(url); return httpDeleteInterceptor(url);
} }
// export async function getQuestionPagination(
// title = "",
// page: number,
// typeId: string,
// size: string
// ) {
// const url = `question/pagination?enablePage=1&size=${size}&title=${title}&page=${page}&typeId=${typeId}`;
// return httpGetInterceptor(url);
// }
export async function getQuestionPagination( export async function getQuestionPagination(
title = "", title = "",
page: number, page: number,
typeId: string, typeId: string,
size: string size: string,
reportType?: string
) { ) {
const url = `question/pagination?enablePage=1&size=${size}&title=${title}&page=${page}&typeId=${typeId}`; let url = `question/pagination?enablePage=1&size=${size}&title=${title}&page=${page}&typeId=${typeId}`;
if (reportType) {
url += `&reportType=${reportType}`;
}
return httpGetInterceptor(url); return httpGetInterceptor(url);
} }