[QUDO-64,QUDO-63] feat:update modal tracking berita,Fix UI On Landing (responsive tablet belum sesuai)

app/[locale]/(protected)/admin/media-tracking/component/table.tsx

@@ -26,6 +26,7 @@ import {
 } from "@/components/ui/table";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import {
+  ChevronDown,
   ChevronLeft,
   ChevronRight,
   Eye,
@@ -40,6 +41,7 @@ import {
 import { cn } from "@/lib/utils";
 import {
   DropdownMenu,
+  DropdownMenuCheckboxItem,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuRadioGroup,
@@ -68,12 +70,16 @@ import SearchDocumentComponent from "@/components/form/media-tracking/search-doc
 import SearchAudioComponent from "@/components/form/media-tracking/search-audio-card";
 import TrackingMediaModal from "./modal";
 import { getMediaTracking } from "@/service/media-tracking/media-tracking";
+import { group } from "console";
+import router from "next/router";
+import { title } from "process";
+import { InputGroup, InputGroupText } from "@/components/ui/input-group";
+import { Input } from "@/components/ui/input";
 
 const NewsTable = () => {
   const router = useRouter();
   const asPath = usePathname();
   const searchParams = useSearchParams();
-  const [search, setSearch] = React.useState("");
   const [showData, setShowData] = React.useState("10");
   const [categories, setCategories] = React.useState<any>();
   const [dataTable, setDataTable] = React.useState<any[]>([]);
@@ -96,10 +102,11 @@ const NewsTable = () => {
   const [page, setPage] = React.useState(1);
   const [imageData, setImageData] = React.useState<any>();
   const [totalData, setTotalData] = React.useState<number>(1);
-  const [totalPage, setTotalPage] = React.useState<number>(1);
+  const [totalPage, setTotalPage] = React.useState(1);
   const [contentAll, setContentAll] = React.useState([]);
   const [formatFilter, setFormatFilter] = React.useState<any>([]);
   const [totalContent, setTotalContent] = React.useState();
+  const [search, setSearch] = React.useState<string>("");
   const group = searchParams?.get("group");
   const title = searchParams?.get("title");
   const categorie = searchParams?.get("category");
@@ -144,25 +151,22 @@ const NewsTable = () => {
 
   React.useEffect(() => {
     getDataTable();
-  }, []);
+  }, [page, showData, search]);
 
   const getDataTable = async () => {
-    const res = await getMediaTracking({ page: page - 1, size: 10 });
+    const res = await getMediaTracking(page - 1, search, showData);
+
     const data = res?.data?.data;
-    console.log;
+    const newData = data?.content;
-    if (data) {
+
-      const startIndex = 10 * (page - 1);
+    newData.forEach((item: any, index: number) => {
-      let iterate = 0;
+      item.no = (page - 1) * Number(showData) + index + 1;
-      const newData = data.content.map((value: any) => {
+    });
-        iterate++;
+
-        value.no = startIndex + iterate;
+    setDataTable(newData);
-        return value;
+    setTotalData(data?.totalElements);
-      });
+    setTotalPage(data?.totalPages);
-      setDataTable(newData);
+    setTotalContent(data.totalElements);
-      setTotalData(data.totalElements);
-      setTotalPage(data?.totalPages);
-      setTotalContent(data.totalElements);
-    }
   };
 
   async function getCategories() {
@@ -203,33 +207,38 @@ const NewsTable = () => {
     router.push(`?category=&title=`);
   };
 
-  async function getData() {
+  // async function getData() {
-    if (asPath?.includes("/polda/") == true) {
+  //   if (asPath?.includes("/polda/") == true) {
-      if (asPath?.split("/")[2] !== "[polda_name]") {
+  //     if (asPath?.split("/")[2] !== "[polda_name]") {
-        const filter =
+  //       const filter =
-          categoryFilter?.length > 0
+  //         categoryFilter?.length > 0
-            ? categoryFilter?.sort().join(",")
+  //           ? categoryFilter?.sort().join(",")
-            : categorie || "";
+  //           : categorie || "";
 
-        const name = title == undefined ? "" : title;
+  //       const name = title == undefined ? "" : title;
-        const format = formatFilter == undefined ? "" : formatFilter?.join(",");
+  //       const format = formatFilter == undefined ? "" : formatFilter?.join(",");
-        const filterGroup = group == undefined ? asPath.split("/")[2] : group;
+  //       const filterGroup = group == undefined ? asPath.split("/")[2] : group;
-        loading();
+  //       loading();
-        const response = await listDataAll("", name, filter, "");
+  //       const response = await listDataAll("", name, filter, "");
-        close();
+  //       close();
-        // setGetTotalPage(response?.data?.data?.totalPages);
+  //       // setGetTotalPage(response?.data?.data?.totalPages);
-        // setContentImage(response?.data?.data?.content);
+  //       // setContentImage(response?.data?.data?.content);
-        // setTotalContent(response?.data?.data?.totalElements);
+  //       // setTotalContent(response?.data?.data?.totalElements);
-        const data = response?.data?.data;
+  //       const data = response?.data?.data;
-        const contentData = data?.content;
+  //       const contentData = data?.content;
-        setImageData(contentData);
+  //       setImageData(contentData);
-        setTotalData(data?.totalElements);
+  //       setTotalData(data?.totalElements);
-        setContentAll(response?.data?.data?.content);
+  //       setContentAll(response?.data?.data?.content);
-        setTotalPage(data?.totalPages);
+  //       setTotalPage(data?.totalPages);
-        setTotalContent(response?.data?.data?.totalElements);
+  //       setTotalContent(response?.data?.data?.totalElements);
-      }
+  //     }
-    }
+  //   }
-  }
+  // }
+
+  const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setSearch(e.target.value);
+    table.getColumn("judul")?.setFilterValue(e.target.value);
+  };
 
   const handleKeyUp = () => {
     clearTimeout(typingTimer);
@@ -255,50 +264,72 @@ const NewsTable = () => {
           Tracking Berita hari ini!
         </p>
       </div>
-      <TrackingMediaModal triggerFetch={() => getDataTable()} />
-      {/* <Dialog>
-        <DialogTrigger asChild>
-          <Button className="bg-blue-600" size="md">
-            Tracking Berita
-          </Button>
-        </DialogTrigger>
-        <DialogContent className="overflow-y-auto h-[500px] min-w-max mx-5">
-          <DialogHeader>
-            <DialogTitle>Form Tracking Berita</DialogTitle>
-          </DialogHeader>
 
-          <div className="grid gap-4 py-4 px-5">
+      <div className="flex flex-col sm:flex-row lg:flex-row justify-between sm:items-center md:items-center lg:items-center px-1">
-            <div className="space-y-2 flex flex-col">
+        <TrackingMediaModal triggerFetch={() => getDataTable()} />
-              <Label htmlFor="link" className="text-sm font-medium">
+        <div className=" flex flex-row items-center gap-3">
-                Masukkan Link <span className="text-red-500">*</span>
+          <div className="flex items-center py-2">
-              </Label>
+            <div className="mx-3">
-              <input
+              <DropdownMenu>
-                value={searchTitle}
+                <DropdownMenuTrigger asChild>
-                onChange={(e) => setSearchTitle(e.target.value)}
+                  <Button size="md" variant="outline">
-                onKeyUp={handleKeyUp}
+                    1 - {showData} Data
-                onKeyDown={handleKeyDown}
+                  </Button>
-                type="text"
+                </DropdownMenuTrigger>
-                placeholder="Search..."
+                <DropdownMenuContent className="w-56 text-sm">
-                className="pl-4 pr-4 py-1 w-full h-10 text-[15px] border  focus:outline-none dark:text-white"
+                  <DropdownMenuRadioGroup
-              />
+                    value={showData}
-            </div>
+                    onValueChange={setShowData}
-            <div className="flex flex-col gap-2 w-full">
+                  >
-              <SearchImageComponent categoryFilter={categoryFilter} />
+                    <DropdownMenuRadioItem value="10">
-              <SearchVideoComponent categoryFilter={categoryFilter} />
+                      1 - 10 Data
-              <SearchDocumentComponent categoryFilter={categoryFilter} />
+                    </DropdownMenuRadioItem>
-              <SearchAudioComponent categoryFilter={categoryFilter} />
+                    <DropdownMenuRadioItem value="50">
+                      1 - 50 Data
+                    </DropdownMenuRadioItem>
+                    <DropdownMenuRadioItem value="100">
+                      1 - 100 Data
+                    </DropdownMenuRadioItem>
+                    <DropdownMenuRadioItem value="250">
+                      1 - 250 Data
+                    </DropdownMenuRadioItem>
+                  </DropdownMenuRadioGroup>
+                </DropdownMenuContent>
+              </DropdownMenu>
             </div>
           </div>
 
-          <DialogFooter className="flex justify-end gap-2">
+          <div className="flex items-center py-4">
-            <Button onClick={cleanCheckbox} variant="outline">
+            <DropdownMenu>
-              Riset Filter
+              <DropdownMenuTrigger asChild>
-            </Button>
+                <Button variant="outline" className="ml-auto" size="md">
-            <Button className="bg-blue-600 text-white">Tracking Berita</Button>
+                  Columns <ChevronDown />
-          </DialogFooter>
+                </Button>
-        </DialogContent>
+              </DropdownMenuTrigger>
-      </Dialog> */}
+              <DropdownMenuContent align="end">
-      <Table className="overflow-hidden mt-4">
+                {table
+                  .getAllColumns()
+                  .filter((column) => column.getCanHide())
+                  .map((column) => {
+                    return (
+                      <DropdownMenuCheckboxItem
+                        key={column.id}
+                        className="capitalize"
+                        checked={column.getIsVisible()}
+                        onCheckedChange={(value) =>
+                          column.toggleVisibility(!!value)
+                        }
+                      >
+                        {column.id}
+                      </DropdownMenuCheckboxItem>
+                    );
+                  })}
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
+        </div>
+      </div>
+      <Table className="overflow-hidden">
         <TableHeader>
           {table.getHeaderGroups().map((headerGroup) => (
             <TableRow key={headerGroup.id} className="bg-default-200">

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

@@ -58,6 +58,7 @@ import { error } from "@/lib/swal";
 import dynamic from "next/dynamic";
 import { useRouter } from "@/i18n/routing";
 import { useTranslations } from "next-intl";
+import { UnitMapping } from "@/app/[locale]/(protected)/contributor/agenda-setting/unit-mapping";
 
 const imageSchema = z.object({
   title: z.string().min(1, { message: "Judul diperlukan" }),
@@ -142,6 +143,15 @@ export default function FormImageDetail() {
   const [selectedTarget, setSelectedTarget] = useState("");
   const [files, setFiles] = useState<FileType[]>([]);
   const [rejectedFiles, setRejectedFiles] = useState<number[]>([]);
+  const [wilayahPublish, setWilayahPublish] = React.useState({
+    semua: false,
+    nasional: false,
+    polda: false,
+    polres: false,
+    satker: false,
+    international: false,
+  });
+  const [selectedPolda, setSelectedPolda] = React.useState([]);
 
   let fileTypeId = "1";
 
@@ -776,6 +786,15 @@ export default function FormImageDetail() {
                                   >
                                     Wilayah
                                   </label>
+                                  {wilayahPublish.polda && (
+                                    <UnitMapping
+                                      unit="Polda"
+                                      isDetail={false}
+                                      sendDataToParent={(data: any) =>
+                                        setSelectedPolda(data)
+                                      }
+                                    />
+                                  )}
                                 </div>
 
                                 <div className="flex items-center space-x-2">

components/landing-page/hero.tsx

@@ -438,7 +438,7 @@ const Hero: React.FC = () => {
                         className="w-full h-[73px] object-cover rounded-lg"
                       />
                     </div>
-                    <div className="w-[280px] lg:w-auto">
+                    <div className="w-[280px] lg:w-[200px]">
                       <span className="text-white bg-[#bb3523] px-4 py-1 rounded-lg flex text-[8px] font-bold uppercase w-fit">
                         {item?.categoryName}
                       </span>
@@ -487,7 +487,7 @@ const Hero: React.FC = () => {
                           className="w-full h-[73px] object-cover rounded-lg"
                         />
                       </div>
-                      <div className="w-[280px] lg:w-auto">
+                      <div className="w-[280px] lg:w-[200px]">
                         <span className="text-white bg-[#bb3523] px-4 py-1 rounded-lg flex text-[8px] font-bold uppercase w-fit">
                           {item?.categoryName}
                         </span>
@@ -534,7 +534,7 @@ const Hero: React.FC = () => {
                         className="w-full h-[73px] object-cover rounded-lg"
                       />
                     </div>
-                    <div className="w-[280px] lg:w-auto">
+                    <div className="w-[280px] lg:w-[200px]">
                       <span className="text-white bg-[#bb3523] px-4 py-1 rounded-lg flex text-[8px] font-bold uppercase w-fit">
                         {item?.categoryName}
                       </span>

service/media-tracking/media-tracking.ts

@@ -18,13 +18,24 @@ export async function mediaTrackingSave(data: any) {
   return httpPostInterceptor(url, data);
 }
 
-export async function getMediaTracking(data: any) {
+export async function getMediaTracking(
-  // const url = `/media/tracking/monitoring/pagination`;
+  page: any,
-  const url = `/media/tracking/monitoring/pagination?enablePagination=1&page=${
+  title: string = "",
-    data.page || 0
+  size: any
-  }&size=${data?.size || 10}`;
+) {
-  return httpGetInterceptor(url);
+  return httpGetInterceptor(
+    `/media/tracking/monitoring/pagination?enablePagination=1&size=${size}&page=${page}&title=${title}`
+  );
 }
+
+// export async function getMediaTracking(data: any) {
+//   // const url = `/media/tracking/monitoring/pagination`;
+//   const url = `/media/tracking/monitoring/pagination?enablePagination=1&page=${
+//     data.page || 0
+//   }&size=${data?.size || 10}`;
+//   return httpGetInterceptor(url);
+// }
+
 export async function getMediaTrackingResult(data: any) {
   // const url = `/media/tracking/monitoring/pagination`;
   const url = `/media/tracking/monitoring/results/pagination?trackingId=${

tailwind.config.ts

@@ -21,6 +21,7 @@ const config = {
     extend: {
       screens: {
         "custom-lg": "1090px",
+        "custom-lg-button": "1030px",
       },
       fontFamily: {
         sans: ["DM Sans", "sans-serif"],