[QUDO-101,QUDO-95] feat:check kategori filter table, report account

app/[locale]/(protected)/admin/settings/category/component/table.tsx

@@ -45,6 +45,11 @@ import {
 } from "@/components/ui/dialog";
 import CreateCategoryModal from "./create";
 import { useTranslations } from "next-intl";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
 
 const AdminCategoryTable = () => {
   const router = useRouter();
@@ -55,6 +60,9 @@ const AdminCategoryTable = () => {
   const [dataTable, setDataTable] = React.useState<any[]>([]);
   const [totalData, setTotalData] = React.useState<number>(1);
   const [sorting, setSorting] = React.useState<SortingState>([]);
+  const [region, setRegion] = React.useState<any>();
+  const [regionFilter, setRegionFilter] = React.useState<string[]>([]);
+  const [statusFilter, setStatusFilter] = React.useState<string[]>([]);
   const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
     []
   );
@@ -89,6 +97,14 @@ const AdminCategoryTable = () => {
     },
   });
 
+  const manualRegions = [
+    { id: "semua", label: "Semua" },
+    { id: "mabes", label: "Mabes" },
+    { id: "polda", label: "Polda" },
+    { id: "satker", label: "Satker" },
+    { id: "internasional", label: "Internasional" },
+  ];
+
   React.useEffect(() => {
     if (dataChange) {
       router.push("/admin/settings/category");
@@ -105,14 +121,28 @@ const AdminCategoryTable = () => {
 
   React.useEffect(() => {
     fetchData();
-  }, [page]);
+  }, [page, regionFilter]);
 
   async function fetchData() {
     try {
       loading();
-      const response = await getCategories(page - 1);
+
+      const regionQuery = regionFilter.length
+        ? `&publishedLocation=${regionFilter.join(",")}`
+        : "";
+
+      const statusQuery = statusFilter.length
+        ? `&isPublish=${statusFilter.join(",")}`
+        : "";
+
+      const response = await getCategories(
+        page - 1,
+        `${regionQuery}${statusQuery}`
+      );
+
       const data = response?.data?.data;
       const contentData = data?.content;
+
       contentData.forEach((item: any, index: number) => {
         item.no = (page - 1) * 10 + index + 1;
       });
@@ -122,17 +152,124 @@ const AdminCategoryTable = () => {
       setTotalPage(data?.totalPages);
       close();
     } catch (error) {
-      console.error("Error fetching tasks:", error);
+      console.error("Error fetching categories:", error);
     }
   }
 
+  const handleChange = (type: string, id: string, checked: boolean) => {
+    if (type === "region") {
+      if (id === "semua") {
+        if (checked) {
+          // Pilih semua (kecuali 'semua' itu sendiri)
+          setRegionFilter(["mabes", "polda", "satker", "internasional"]);
+        } else {
+          setRegionFilter([]);
+        }
+      } else {
+        let updated = checked
+          ? [...regionFilter, id]
+          : regionFilter.filter((val) => val !== id);
+
+        // Jika semua sudah tercentang, maka otomatis centang "semua"
+        const allIds = ["mabes", "polda", "satker", "internasional"];
+        const allSelected = allIds.every((val) => updated.includes(val));
+
+        setRegionFilter(allSelected ? allIds : updated);
+      }
+    } else {
+      if (checked) {
+        setStatusFilter([...statusFilter, id]);
+      } else {
+        setStatusFilter(statusFilter.filter((val: any) => val !== id));
+      }
+    }
+  };
+
   return (
     <div className="w-full overflow-x-auto bg-white p-4 rounded-sm space-y-3">
       <div className="flex justify-between mb-10 items-center">
         <p className="text-xl font-medium text-default-900">{t("category")}</p>
         <CreateCategoryModal />
       </div>
-
+      <div className="flex items-end justify-end">
+        <Popover>
+          <PopoverTrigger asChild>
+            <Button size="md" variant="outline">
+              Filter
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent className="w-80 ">
+            <div className="flex flex-col gap-2 px-2">
+              <div className="flex justify-between text-sm">
+                <p>Filter</p>
+                <a
+                  onClick={() => fetchData()}
+                  className="cursor-pointer text-primary"
+                >
+                  Simpan
+                </a>
+              </div>
+              <div className="flex flex-col gap-1 overflow-auto max-h-[300px] text-xs custom-scrollbar-table">
+                <p>Wilayah</p>
+                {manualRegions.map((region) => (
+                  <div key={region.id} className="flex items-center space-x-2">
+                    <Checkbox
+                      id={region.id}
+                      checked={
+                        region.id === "semua"
+                          ? ["mabes", "polda", "satker", "internasional"].every(
+                              (val) => regionFilter.includes(val)
+                            )
+                          : regionFilter.includes(region.id)
+                      }
+                      onCheckedChange={(e) =>
+                        handleChange("region", region.id, Boolean(e))
+                      }
+                    />
+                    <label
+                      htmlFor={region.id}
+                      className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                    >
+                      {region.label}
+                    </label>
+                  </div>
+                ))}
+                <p className="mt-3">Status</p>
+                <div className="flex items-center space-x-2">
+                  <Checkbox
+                    id="aktif"
+                    checked={statusFilter.includes("true")}
+                    onCheckedChange={(e) =>
+                      handleChange("status", "true", Boolean(e))
+                    }
+                  />
+                  <label
+                    htmlFor="aktif"
+                    className="text-xs font-medium leading-none"
+                  >
+                    Aktif
+                  </label>
+                </div>
+                <div className="flex items-center space-x-2">
+                  <Checkbox
+                    id="nonaktif"
+                    checked={statusFilter.includes("false")}
+                    onCheckedChange={(e) =>
+                      handleChange("status", "false", Boolean(e))
+                    }
+                  />
+                  <label
+                    htmlFor="nonaktif"
+                    className="text-xs font-medium leading-none"
+                  >
+                    Non Aktif
+                  </label>
+                </div>
+              </div>
+            </div>
+          </PopoverContent>
+        </Popover>
+      </div>
       <Table className="overflow-hidden">
         <TableHeader>
           {table.getHeaderGroups().map((headerGroup) => (

app/[locale]/(protected)/supervisor/communications/account-report/components/column.tsx

@@ -11,6 +11,7 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
+import { Link } from "@/i18n/routing";
 
 const columns: ColumnDef<any>[] = [
   {
@@ -19,14 +20,14 @@ const columns: ColumnDef<any>[] = [
     cell: ({ row }) => <span>{row.getValue("no")}</span>,
   },
   {
-    accessorKey: "report",
+    accessorKey: "reportedBy",
     header: "Pelapor",
-    cell: ({ row }) => <span>{row.getValue("report")}</span>,
+    cell: ({ row }) => <span>{row?.original?.reportedBy?.fullname}</span>,
   },
   {
     accessorKey: "reportAccount",
     header: "Terlapor",
-    cell: ({ row }) => <span>{row.getValue("reportAccount")}</span>,
+    cell: ({ row }) => <span>{row?.original?.user?.fullname}</span>,
   },
   {
     accessorKey: "message",
@@ -38,41 +39,37 @@ const columns: ColumnDef<any>[] = [
     header: "Status",
     cell: ({ row }) => <span>{row.getValue("reportAction")}</span>,
   },
-  // {
-  //   id: "actions",
-  //   accessorKey: "action",
-  //   header: "Actions",
-  //   enableHiding: false,
-  //   cell: ({ row }) => {
-  //     return (
-  //       <DropdownMenu>
-  //         <DropdownMenuTrigger asChild>
-  //           <Button
-  //             size="icon"
-  //             className="bg-transparent ring-offset-transparent hover:bg-transparent hover:ring-0 hover:ring-transparent"
-  //           >
-  //             <span className="sr-only">Open menu</span>
-  //             <MoreVertical className="h-4 w-4 text-default-800" />
-  //           </Button>
-  //         </DropdownMenuTrigger>
-  //         <DropdownMenuContent className="p-0" align="end">
-  //           <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
-  //             <Eye className="w-4 h-4 me-1.5" />
-  //             View
-  //           </DropdownMenuItem>
-  //           <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
-  //             <SquarePen className="w-4 h-4 me-1.5" />
-  //             Edit
-  //           </DropdownMenuItem>
-  //           <DropdownMenuItem className="p-2 border-b text-destructive bg-destructive/30  focus:bg-destructive focus:text-destructive-foreground rounded-none">
-  //             <Trash2 className="w-4 h-4 me-1.5" />
-  //             Delete
-  //           </DropdownMenuItem>
-  //         </DropdownMenuContent>
-  //       </DropdownMenu>
-  //     );
-  //   },
-  // },
+  {
+    id: "actions",
+    accessorKey: "action",
+    header: "Actions",
+    enableHiding: false,
+    cell: ({ row }) => {
+      return (
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button
+              size="icon"
+              className="bg-transparent ring-offset-transparent hover:bg-transparent hover:ring-0 hover:ring-transparent"
+            >
+              <span className="sr-only">Open menu</span>
+              <MoreVertical className="h-4 w-4 text-default-800" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent className="p-0" align="end">
+            <Link
+              href={`/supervisor/communications/account-report/detail/${row?.original?.id}`}
+            >
+              <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
+                <Eye className="w-4 h-4 me-1.5" />
+                View
+              </DropdownMenuItem>
+            </Link>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      );
+    },
+  },
 ];
 
 export default columns;

app/[locale]/(protected)/supervisor/communications/account-report/detail/[id]/page.tsx

@@ -0,0 +1,17 @@
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+import FormBlogDetail from "@/components/form/blog/blog--detail-form";
+import FormSurveyDetailPage from "@/components/form/survey/survey-detail";
+import FormAccountReport from "@/components/form/account-report/account-report-form";
+
+const AccountReportDetailPage = async () => {
+  return (
+    <div>
+      <SiteBreadcrumb />
+      <div className="space-y-4">
+        <FormAccountReport />
+      </div>
+    </div>
+  );
+};
+
+export default AccountReportDetailPage;

components/form/account-report/account-report-form.tsx

@@ -0,0 +1,394 @@
+"use client";
+import React, { useEffect, useRef, useState } from "react";
+import { useForm, Controller } from "react-hook-form";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+import { Card } from "@/components/ui/card";
+import { zodResolver } from "@hookform/resolvers/zod";
+import * as z from "zod";
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
+import { useParams, useRouter } from "next/navigation";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Checkbox } from "@/components/ui/checkbox";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import JoditEditor from "jodit-react";
+import {
+  createTask,
+  createTaskTa,
+  getTask,
+  getUserLevelForAssignments,
+} from "@/service/task";
+import { Upload } from "tus-js-client";
+import { error } from "@/config/swal";
+import { getCsrfToken } from "@/service/auth";
+import { loading } from "@/lib/swal";
+import { useTranslations } from "next-intl";
+import dynamic from "next/dynamic";
+import { DateRange } from "react-day-picker";
+import TimePicker from "react-time-picker";
+import "react-time-picker/dist/TimePicker.css";
+import "react-clock/dist/Clock.css";
+import { detailMedia } from "@/service/curated-content/curated-content";
+import { Textarea } from "@/components/ui/textarea";
+import { FormLabel } from "@/components/ui/form";
+import { getUserReports, saveUserReportsAction } from "@/service/report/report";
+import { postBlog } from "@/service/blog/blog";
+import { Link } from "@/i18n/routing";
+
+const reportSchema = z.object({
+  reportedBy: z.string().min(1, { message: "Judul diperlukan" }),
+  user: z.string().min(1, { message: "Judul diperlukan" }),
+  message: z.string().min(2, {
+    message: "Narasi Penugasan harus lebih dari 2 karakter.",
+  }),
+  // url: z.string().min(1, { message: "Judul diperlukan" }),
+});
+
+interface FileWithPreview extends File {
+  preview: string;
+}
+
+export type reportDetail = {
+  id: number;
+  message: string;
+  reportedBy: {
+    id: number;
+    fullname: string;
+  };
+  user: {
+    id: number;
+    fullname: string;
+  };
+};
+
+const CustomEditor = dynamic(
+  () => {
+    return import("@/components/editor/custom-editor");
+  },
+  { ssr: false }
+);
+
+export default function FormAccountReport() {
+  const MySwal = withReactContent(Swal);
+  const router = useRouter();
+  const editor = useRef(null);
+  type ReportSchema = z.infer<typeof reportSchema>;
+  const { id } = useParams() as { id: string };
+  console.log(id);
+
+  // State for various form fields
+  const [expertise, setExpertiseOutput] = useState({
+    semua: false,
+    komunikasi: false,
+    hukum: false,
+    bahasa: false,
+    ekonomi: false,
+    politik: false,
+    sosiologi: false,
+    ilmuadministrasipemerintah: false,
+    ti: false,
+  });
+  const [expert, setExpertOutput] = useState({
+    semua: false,
+  });
+
+  // const [assignmentType, setAssignmentType] = useState("mediahub");
+  // const [assignmentCategory, setAssignmentCategory] = useState("publication");
+  const [mainType, setMainType] = useState<string>("1");
+  const [taskType, setTaskType] = useState<string>("atensi-khusus");
+  const [broadcastType, setBroadcastType] = useState<string>("");
+  const [type, setType] = useState<string>("1");
+  const [selectedTarget, setSelectedTarget] = useState("3,4");
+  const [detail, setDetail] = useState<reportDetail>();
+  const [refresh] = useState(false);
+  const [listDest, setListDest] = useState([]);
+  const [checkedLevels, setCheckedLevels] = useState(new Set());
+  const [expandedPolda, setExpandedPolda] = useState([{}]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [audioFile, setAudioFile] = useState<File | null>(null);
+  const [isRecording, setIsRecording] = useState(false);
+  const [timer, setTimer] = useState<number>(120);
+
+  const t = useTranslations("Form");
+  const [imageFiles, setImageFiles] = useState<FileWithPreview[]>([]);
+  const [videoFiles, setVideoFiles] = useState<FileWithPreview[]>([]);
+  const [textFiles, setTextFiles] = useState<FileWithPreview[]>([]);
+  const [audioFiles, setAudioFiles] = useState<FileWithPreview[]>([]);
+  const [isImageUploadFinish, setIsImageUploadFinish] = useState(false);
+  const [isVideoUploadFinish, setIsVideoUploadFinish] = useState(false);
+  const [isTextUploadFinish, setIsTextUploadFinish] = useState(false);
+  const [isAudioUploadFinish, setIsAudioUploadFinish] = useState(false);
+  const [voiceNoteLink, setVoiceNoteLink] = useState("");
+  const [date, setDate] = React.useState<DateRange | undefined>({
+    from: new Date(2024, 0, 1),
+  });
+
+  const [platformTypeVisible, setPlatformTypeVisible] = useState(false);
+  const [unitSelection, setUnitSelection] = useState({
+    semua: false,
+    mabes: false,
+    polda: false,
+    polres: false,
+    satker: false,
+  });
+
+  const [taskOutput, setTaskOutput] = useState({
+    all: false,
+    video: false,
+    audio: false,
+    image: false,
+    text: false,
+  });
+
+  const [links, setLinks] = useState<string[]>([""]);
+
+  const {
+    register,
+    control,
+    setValue,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<ReportSchema>({
+    resolver: zodResolver(reportSchema),
+    mode: "all",
+  });
+
+  // const handleRadioChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+  //   const selectedValue = Number(event.target.value);
+  //   setMainType(selectedValue);
+
+  //   setPlatformTypeVisible(selectedValue === 2);
+
+  useEffect(() => {
+    async function fetchPoldaPolres() {
+      setIsLoading(true);
+      try {
+        const response = await getUserLevelForAssignments();
+        setListDest(response?.data?.data.list);
+        console.log("polda", response?.data?.data?.list);
+        const initialExpandedState = response?.data?.data.list.reduce(
+          (acc: any, polda: any) => {
+            acc[polda.id] = false;
+            return acc;
+          },
+          {}
+        );
+        setExpandedPolda(initialExpandedState);
+        console.log("polres", initialExpandedState);
+      } catch (error) {
+        console.error("Error fetching Polda/Polres data:", error);
+      } finally {
+        setIsLoading(false);
+      }
+    }
+    fetchPoldaPolres();
+  }, []);
+
+  const handleUnitChange = (
+    key: keyof typeof unitSelection,
+    value: boolean
+  ) => {
+    if (key === "semua") {
+      const newState = {
+        semua: value,
+        mabes: value,
+        polda: value,
+        polres: value,
+        satker: value,
+      };
+      setUnitSelection(newState);
+    } else {
+      const updatedSelection = {
+        ...unitSelection,
+        [key]: value,
+      };
+
+      const allChecked = ["mabes", "polda", "polres", "satker"].every(
+        (k) => updatedSelection[k as keyof typeof unitSelection]
+      );
+
+      updatedSelection.semua = allChecked;
+
+      setUnitSelection(updatedSelection);
+    }
+  };
+
+  useEffect(() => {
+    async function getReportData() {
+      if (id != undefined) {
+        const res = await getUserReports(id);
+        close();
+        if (res?.data?.data != undefined) {
+          const data = res?.data?.data;
+          console.log("Data :", data);
+          setDetail(data);
+        }
+      }
+    }
+
+    getReportData();
+  }, [id]);
+
+  const save = async (data: ReportSchema) => {
+    loading();
+    const requestData = {
+      ...data,
+      id: detail?.id,
+      action: selectedTarget,
+    };
+
+    const response = await saveUserReportsAction(id, requestData);
+    console.log("Form Data Submitted:", requestData);
+    console.log("response", response);
+
+    if (response?.error) {
+      MySwal.fire("Error", response?.message, "error");
+      return;
+    }
+    close();
+
+    MySwal.fire({
+      title: "Sukses",
+      text: "Data berhasil disimpan.",
+      icon: "success",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: "OK",
+    }).then(() => {
+      router.push("/in/contributor/blog");
+    });
+  };
+
+  const onSubmit = (data: ReportSchema) => {
+    MySwal.fire({
+      title: "Simpan Data",
+      text: "Apakah Anda yakin ingin menyimpan data ini?",
+      icon: "warning",
+      showCancelButton: true,
+      cancelButtonColor: "#d33",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: "Simpan",
+    }).then((result) => {
+      if (result.isConfirmed) {
+        save(data);
+      }
+    });
+  };
+
+  return (
+    <Card>
+      <div className="px-6 py-6">
+        <p className="text-lg  font-semibold mb-3">{t("form-task")}</p>
+        {detail !== undefined ? (
+          <form onSubmit={handleSubmit(onSubmit)}>
+            <div className="flex flex-col justify-center items-center gap-5 mb-5">
+              {/* Input Title */}
+              <div className="space-y-2 w-6/12">
+                <Label>Pelapor</Label>
+                <Controller
+                  control={control}
+                  name="reportedBy"
+                  render={({ field }) => (
+                    <Input
+                      size="md"
+                      type="text"
+                      defaultValue={detail?.reportedBy?.fullname}
+                      onChange={field.onChange}
+                      placeholder="Enter Title"
+                    />
+                  )}
+                />
+                {errors.reportedBy?.message && (
+                  <p className="text-red-400 text-sm">
+                    {errors.reportedBy.message}
+                  </p>
+                )}
+              </div>
+              <div className="space-y-2 mt-3 w-6/12">
+                <Label>Terlapor</Label>
+                <Controller
+                  control={control}
+                  name="user"
+                  render={({ field }) => (
+                    <Input
+                      size="md"
+                      type="text"
+                      defaultValue={detail?.user?.fullname}
+                      onChange={field.onChange}
+                      placeholder="Enter Title"
+                    />
+                  )}
+                />
+                {errors.user?.message && (
+                  <p className="text-red-400 text-sm">{errors.user.message}</p>
+                )}
+              </div>
+
+              <div className="mt-3 space-y-2 w-6/12">
+                <Label>Alasan Report</Label>
+                <Controller
+                  control={control}
+                  name="message"
+                  render={({ field: { onChange, value } }) => (
+                    <Textarea
+                      defaultValue={detail?.message}
+                      placeholder="Enter Title"
+                    />
+                  )}
+                />
+                {errors.message?.message && (
+                  <p className="text-red-400 text-sm">
+                    {errors.message.message}
+                  </p>
+                )}
+              </div>
+              <div className="mt-3 space-y-2 w-6/12">
+                <Select>
+                  <Label>
+                    Status<span className="text-red-600">*</span>
+                  </Label>
+                  <SelectTrigger size="md">
+                    <SelectValue placeholder="Select" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectGroup>
+                      <SelectLabel>Pilih Tindakan</SelectLabel>
+                      <SelectItem value="pending">Pending</SelectItem>
+                      <SelectItem value="suspended">Suspended</SelectItem>
+                      <SelectItem value="rejected">Rejected</SelectItem>
+                    </SelectGroup>
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
+            <div className="flex flex-row gap-3 justify-end">
+              <div className="mt-4">
+                <Link href={"/supervisor/communications/account-report"}>
+                  <Button variant={"outline"} color="primary">
+                    {t("cancel")}
+                  </Button>
+                </Link>
+              </div>
+              <div className="mt-4">
+                <Button type="submit" color="primary">
+                  {t("submit")}
+                </Button>
+              </div>
+            </div>
+          </form>
+        ) : (
+          ""
+        )}
+      </div>
+    </Card>
+  );
+}

service/report/report.ts

@@ -23,3 +23,13 @@ export async function saveReport(data: any) {
   const url = "/media/report";
   return httpPostInterceptor(url, data);
 }
+
+export async function getUserReports(id: any) {
+  const url = `users/reports?id=${id}`;
+  return httpGetInterceptor(url);
+}
+
+export async function saveUserReportsAction(id: any, action: any) {
+  const url = `users/reports/action?id=${id}&action=${action}`;
+  return httpPostInterceptor(url);
+}

service/settings/settings.ts

@@ -4,8 +4,8 @@ import {
   httpPostInterceptor,
 } from "../http-config/http-interceptor-service";
 
-export async function getCategories(page: number) {
-  const url = `media/categories/list?enablePage=1&page=${page}&size=10&sort=desc&sortBy=id`;
+export async function getCategories(page: number, region: any) {
+  const url = `media/categories/list?enablePage=1&page=${page}&size=10&sort=desc&sortBy=id&publishedLocation=${region}`;
   return httpGetInterceptor(url);
 }