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

fix: fixing update section image, feat: ticketing in supervisor

This commit is contained in:
Sabda Yagra 2025-09-10 20:39:49 +07:00
parent 2c7b46bcc3
commit bffe869f32
9 changed files with 194 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
app/[locale]/(protected)/supervisor/ticketing/[media_id]/layout.tsx Normal file
View File

@ -0,0 +1,9 @@
export const metadata = {
title: "Ticketing",
};
const Layout = ({ children }: { children: React.ReactNode }) => {
return <>{children}</>;
};
export default Layout;

26
app/[locale]/(protected)/supervisor/ticketing/[media_id]/page.tsx Normal file
View File

@ -0,0 +1,26 @@
import SiteBreadcrumb from "@/components/site-breadcrumb";
import TicketingTable from "../components/table";
import { useParams } from "next/navigation";
const TicketingPage = async () => {
return (
<div>
<SiteBreadcrumb />
<section
id="table"
className="flex flex-col gap-2 bg-white dark:bg-black rounded-lg p-3 mt-5"
>
{/* <div className="flex justify-between py-3">
<p className="text-lg">Semua Ticket : 0</p>
</div> */}
<TicketingTable />
</section>
</div>
);
};
export default TicketingPage;

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

@ -16,6 +16,7 @@ import {
} from "@/components/ui/dropdown-menu";
import { cn } from "@/lib/utils";
import FormDetailTicketing from "@/components/form/ticketing/ticketing-detail-form";
import { useParams } from "next/navigation";
/**
* TicketingLayout
@ -35,14 +36,15 @@ import FormDetailTicketing from "@/components/form/ticketing/ticketing-detail-fo
type Issue = {
id: string | number;
title?: string;
source?: string; // e.g., "instagram", "facebook", "tiktok", "youtube", "comment"
source?: string;
createdAt?: string;
status?: string;
timeAgo?: string;
// any other fields from API
};
export default function TicketingLayout() {
export default function TicketingTable() {
const params = useParams();
const mediaId = params?.media_id;
const [issues, setIssues] = React.useState<Issue[]>([]);
const [totalElements, setTotalElements] = React.useState<number>(0);
const [totalPages, setTotalPages] = React.useState<number>(1);
@ -78,7 +80,7 @@ export default function TicketingLayout() {
async function fetchData() {
try {
const res = await ticketingPagination(search, pageSize, page - 1);
const res = await ticketingPagination(search, pageSize, page - 1, mediaId == 'all' ? "" : mediaId as string);
const data = res?.data?.data;
const content = data?.content || [];
const mapped: Issue[] = content.map((it: any, idx: number) => ({

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

@ -1742,6 +1742,117 @@ export default function FormImageUpdate() {
</Fragment>
) : null}
{files.length > 0 && (
<div className="mt-4 space-y-2">
<Label className="text-lg font-semibold">
{" "}
{t("file-media", { defaultValue: "File Media" })}
</Label>
<div className="grid gap-4">
{files.map((file: any) => (
<div
key={file.id}
className="flex items-center border p-2 rounded-md"
>
<img
src={file.thumbnailFileUrl}
alt={file.fileName}
className="w-16 h-16 object-cover rounded-md mr-4"
/>
<div className="flex flex-wrap gap-3 items-center ">
<div className="flex-grow">
<p className="font-medium">{file.fileName}</p>
<a
href={file.url}
target="_blank"
rel="noopener noreferrer"
className="text-blue-500 text-sm"
>
{t("view-file", {
defaultValue: "View File",
})}
</a>
</div>
<div>
<Label className="flex items-center space-x-2">
<input
type="checkbox"
checked={selectedOptions[
file.id
]?.includes("all")}
onChange={() =>
handleCheckboxChangeImage(
file.id,
"all"
)
}
className="form-checkbox"
/>
<span>
{t("all", { defaultValue: "All" })}
</span>
</Label>
</div>
<div>
<Label className="flex items-center space-x-2">
<input
type="checkbox"
checked={selectedOptions[
file.id
]?.includes("nasional")}
onChange={() =>
handleCheckboxChangeImage(
file.id,
"nasional"
)
}
className="form-checkbox"
/>
<span>Nasional</span>
</Label>
</div>
<div>
<Label className="flex items-center space-x-2">
<input
type="checkbox"
checked={selectedOptions[
file.id
]?.includes("wilayah")}
onChange={() =>
handleCheckboxChangeImage(
file.id,
"wilayah"
)
}
className="form-checkbox"
/>
<span>Wilayah</span>
</Label>
</div>
<div>
<Label className="flex items-center space-x-2">
<input
type="checkbox"
checked={selectedOptions[
file.id
]?.includes("internasional")}
onChange={() =>
handleCheckboxChangeImage(
file.id,
"internasional"
)
}
className="form-checkbox"
/>
<span>Internasional</span>
</Label>
</div>
</div>
</div>
))}
</div>
</div>
)}
{/* {files.length > 0 && (
<div className="mt-4">
<Label className="text-lg font-semibold">
{" "}
@ -1782,7 +1893,6 @@ export default function FormImageUpdate() {
Pengaturan Distribusi
</h5>
{/* Checkbox Tingkat Utama */}
<div className="space-y-4">
<div>
<p className="text-sm font-medium text-gray-700 mb-3">
@ -1836,14 +1946,12 @@ export default function FormImageUpdate() {
</div>
</div>
{/* Detail Wilayah */}
{fileUnitSelections[index]?.wilayah && (
<div className="border-t border-gray-200 pt-2">
<p className="text-sm font-medium text-gray-700 mb-2">
Detail Wilayah:
</p>
{/* Checkbox Sub-kategori dengan tombol Kustom sejajar */}
<div className="grid grid-cols-1 md:grid-cols-4 gap-3">
{[
{ key: "polda", label: "POLDA" },
@ -1883,7 +1991,6 @@ export default function FormImageUpdate() {
</div>
))}
{/* Tombol Kustom sejajar dengan checkbox */}
<div className="flex items-center justify-center p-3">
<Dialog>
<DialogTrigger asChild>
@ -1916,7 +2023,6 @@ export default function FormImageUpdate() {
key={polda.id}
className="border border-gray-200 rounded-lg p-2 bg-white hover:shadow-sm transition-shadow"
>
{/* Header POLDA */}
<div className="flex items-center justify-between">
<Label className="flex items-center gap-3 flex-1 cursor-pointer">
<Checkbox
@ -1968,13 +2074,11 @@ export default function FormImageUpdate() {
)}
</div>
{/* Sub-items */}
{polda.subDestination &&
expandedPolda[
polda.id
] && (
<div className="max-h-[200px] overflow-y-auto border-t border-gray-100 pt-2">
{/* Tombol Pilih Semua untuk sub-items */}
<div className="mb-2 flex justify-start">
{(() => {
const allSubItemsChecked =
@ -2108,7 +2212,7 @@ export default function FormImageUpdate() {
))}
</div>
</div>
)}
)} */}
</Fragment>
</div>
</div>

2
components/form/content/video-update-form.tsx
View File

@ -971,7 +971,7 @@ export default function FormVideoUpdate() {
</div>
</Card>
<div className="w-full lg:w-4/12">
<Card className=" h-[800px]">
<Card className="h-fit">
<div className="px-3 py-3">
<div className="space-y-2">
<Label>{t("creator", { defaultValue: "Creator" })}</Label>

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

@ -709,9 +709,9 @@ export default function FormDetailTicketing({ id }: Props) {
};
return (
<section className="flex flex-col h-full bg-white">
{/* Header - tetap di atas */}
<div className="border-b px-4 py-3 shrink-0 bg-white sticky top-0 z-10">
<section className="flex-1 flex flex-col bg-white">
{/* Header */}
<div className="border-b px-4 py-3">
<div className="flex items-center gap-3">
<div className="text-sm font-medium">
{(detail?.title ?? "").split(" ").slice(0, 25).join(" ") +
@ -723,8 +723,8 @@ export default function FormDetailTicketing({ id }: Props) {
</div>
</div>
{/* Chat Messages - scrollable */}
<div className="flex-1 overflow-y-auto p-4 space-y-3 bg-gray-50">
{/* Chat Messages */}
<div className="flex-1 overflow-auto p-4 space-y-3 bg-gray-50">
{!detail ? (
<div className="h-full flex items-center justify-center text-muted-foreground">
<div className="text-center">
@ -782,50 +782,27 @@ export default function FormDetailTicketing({ id }: Props) {
<div ref={chatEndRef} />
</div>
{/* Input Box - tetap di bawah */}
<div className="border-t px-4 py-3 bg-white shrink-0 sticky bottom-0 z-10">
<div className="flex items-end gap-2">
{/* Translate button */}
<Button
variant="outline"
size="icon"
className="shrink-0"
onClick={handleTranslate}
>
<span>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 16 16"
>
<g fill="currentColor">
<path d="M4.545 6.714L4.11 8H3l1.862-5h1.284L8 8H6.833l-.435-1.286zm1.634-.736L5.5 3.956h-.049l-.679 2.022z" />
<path d="M0 2a2 2 0 0 1 2-2h7a2 2 0 0 1 2 2v3h3a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-3H2a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zm7.138 9.995q.289.451.63.846c-.748.575-1.673 1.001-2.768 1.292c.178.217.451.635.555.867c1.125-.359 2.08-.844 2.886-1.494c.777.665 1.739 1.165 2.93 1.472c.133-.254.414-.673.629-.89c-1.125-.253-2.057-.694-2.82-1.284c.681-.747 1.222-1.651 1.621-2.757H14V8h-3v1.047h.765c-.318.844-.74 1.546-1.272 2.13a6 6 0 0 1-.415-.492a2 2 0 0 1-.94.31" />
</g>
</svg>
</span>
Translate
</Button>
{/* Textarea */}
{/* Input Box */}
<div className="border-t px-4 py-3 bg-white">
<div className="flex flex-col gap-2 max-w-full mx-auto">
<textarea
placeholder="Tulis balasan..."
placeholder='Enter your reply or type "/" to insert a quick reply'
value={replyText}
onChange={(e) => setReplyText(e.target.value)}
className="flex-1 border rounded-xl p-3 resize-none min-h-[44px] max-h-[120px] focus:outline-none focus:ring"
rows={1}
className="w-full border rounded-xl p-3 min-h-[64px] resize-none focus:outline-none focus:ring"
/>
{/* Action buttons */}
<div className="flex items-center gap-2 shrink-0">
<div className="flex items-center justify-between gap-3">
<Button variant="outline" size="sm" onClick={handleTranslate}>
Translate
</Button>
<div className="flex items-center gap-2">
<Button
variant="outline"
size="sm"
onClick={() => sendReply(true)}
disabled={!replyText.trim()}
>
Resolve
Kirim & Resolve
</Button>
<Button
size="sm"
@ -837,6 +814,7 @@ export default function FormDetailTicketing({ id }: Props) {
</div>
</div>
</div>
</div>
</section>
);
}

2
lib/auth-utils.ts
View File

@ -13,7 +13,7 @@ export const NAVIGATION_CONFIG: NavigationConfig[] = [
{ roleId: 2, path: "/in/dashboard/executive", label: "Executive Dashboard" },
{ roleId: 3, path: "/in/dashboard", label: "Dashboard" },
{ roleId: 4, path: "/in/dashboard", label: "Dashboard" },
{ roleId: 9, path: "/in/supervisor/ticketing", label: "Ticketing" },
{ roleId: 9, path: "/in/supervisor/ticketing/all", label: "Ticketing" },
{ roleId: 10, path: "/in/dashboard", label: "Dashboard" },
{ roleId: 11, path: "/in/dashboard", label: "Dashboard" },
{ roleId: 12, path: "/in/dashboard", label: "Dashboard" },

14
lib/menus.ts
View File

@ -3207,28 +3207,28 @@ export function getMenuList(pathname: string, t: any): Group[] {
icon: "mdi:ticket-outline",
submenus: [
{
href: "/supervisor/ticketing",
href: "/supervisor/ticketing/all",
label: "All",
active: pathname.includes("/supervisor/ticketing"),
active: pathname.includes("/ticketing/all"),
icon: "solar:inbox-line-outline",
children: [],
},
{
href: "/",
href: "/supervisor/ticketing/4",
label: "Instagram",
active: pathname.includes("/ticketing/instagram"),
active: pathname.includes("/ticketing/4"),
icon: "ri:chat-private-line",
children: [],
},
{
href: "/",
href: "/supervisor/ticketing/2",
label: "Facebook",
active: pathname.includes("/ticketing/facebook"),
active: pathname.includes("/ticketing/2"),
icon: "ri:share-forward-2-fill",
children: [],
},
{
href: "/",
href: "/supervisor/ticketing/5",
label: "Youtube",
active: pathname.includes("/ticketing/youtube"),
icon: "ri:share-forward-2-fill",

4
service/ticketing/ticketing.ts
View File

@ -1,8 +1,8 @@
import { title } from "process";
import { httpGetInterceptor } from "../http-config/http-interceptor-service";
export async function ticketingPagination(title: string = '', size: number, page: number) {
export async function ticketingPagination(title: string = '', size: number, page: number, mediaId: string) {
return await httpGetInterceptor(
`/ticketing/pagination?enablePage=1&page=${page}&size=${size}&title=${title}`
`/ticketing/pagination?enablePage=1&page=${page}&size=${size}&title=${title}&typeId=${mediaId}`
);
}