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

app/[locale]/(protected)/supervisor/ticketing/[media_id]/layout.tsx

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

app/[locale]/(protected)/supervisor/ticketing/[media_id]/page.tsx

@@ -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;

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

@@ -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) => ({

components/form/content/image-update-form.tsx

@@ -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>

components/form/content/video-update-form.tsx

@@ -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>

components/form/ticketing/ticketing-detail-form.tsx

@@ -709,9 +709,9 @@ export default function FormDetailTicketing({ id }: Props) {
   };
 
   return (
-    <section className="flex flex-col h-full bg-white">
+    <section className="flex-1 flex flex-col bg-white">
-      {/* Header - tetap di atas */}
+      {/* Header */}
-      <div className="border-b px-4 py-3 shrink-0 bg-white sticky top-0 z-10">
+      <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 */}
+      {/* Chat Messages */}
-      <div className="flex-1 overflow-y-auto p-4 space-y-3 bg-gray-50">
+      <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,58 +782,36 @@ export default function FormDetailTicketing({ id }: Props) {
         <div ref={chatEndRef} />
       </div>
 
-      {/* Input Box - tetap di bawah */}
+      {/* Input Box */}
-      <div className="border-t px-4 py-3 bg-white shrink-0 sticky bottom-0 z-10">
+      <div className="border-t px-4 py-3 bg-white">
-        <div className="flex items-end gap-2">
+        <div className="flex flex-col gap-2 max-w-full mx-auto">
-          {/* 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 */}
           <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"
+            className="w-full border rounded-xl p-3 min-h-[64px] resize-none focus:outline-none focus:ring"
-            rows={1}
           />
-
+          <div className="flex items-center justify-between gap-3">
-          {/* Action buttons */}
+            <Button variant="outline" size="sm" onClick={handleTranslate}>
-          <div className="flex items-center gap-2 shrink-0">
+              Translate
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={() => sendReply(true)}
-              disabled={!replyText.trim()}
-            >
-              Resolve
-            </Button>
-            <Button
-              size="sm"
-              onClick={() => sendReply(false)}
-              disabled={!replyText.trim()}
-            >
-              Kirim
             </Button>
+            <div className="flex items-center gap-2">
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => sendReply(true)}
+                disabled={!replyText.trim()}
+              >
+                Kirim & Resolve
+              </Button>
+              <Button
+                size="sm"
+                onClick={() => sendReply(false)}
+                disabled={!replyText.trim()}
+              >
+                Kirim
+              </Button>
+            </div>
           </div>
         </div>
       </div>

lib/auth-utils.ts

@@ -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" },

lib/menus.ts

@@ -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",

service/ticketing/ticketing.ts

@@ -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}`
   );
 }