fix:supervisor, feedback create edit delete, knowledge base creat edit delete

app/[locale]/(protected)/supervisor/knowledge-base/page.tsx

@@ -13,21 +13,81 @@ import {
   deleteKnowledgeBase,
   getKnowledgeBaseCategoryList,
   getKnowledgeBaseList,
+  saveKnowledgeBase,
+  saveKnowledgeBaseCategory,
 } from "@/service/master/knowledge-base";
-import React from "react";
+import React, { useEffect, useState } from "react";
-import { Plus, Trash, Trash2 } from "lucide-react";
+import { Edit2Icon, Plus, Trash, Trash2 } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import CreateCategory from "./create-category";
 import withReactContent from "sweetalert2-react-content";
 import Swal from "sweetalert2";
 import { deleteMedia } from "@/service/content/content";
 import { error } from "@/lib/swal";
+import { close, loading } from "@/config/swal";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import { toast } from "@/components/ui/use-toast";
+import { Textarea } from "@/components/ui/textarea";
+
+const FormSchema = z.object({
+  name: z.string().min(2, {
+    message: "Name must be at least 2 characters.",
+  }),
+});
+
+const FormSchemaCreate = z.object({
+  title: z.string().min(2, {
+    message: "Judul minimal 2 karakter.",
+  }),
+  question: z.string().min(2, {
+    message: "Pertanyaan minimal 2 karakter.",
+  }),
+  answer: z.string().min(2, {
+    message: "Jawaban minimal 2 karakter.",
+  }),
+});
 
 const KnowledgeBase = () => {
   const MySwal = withReactContent(Swal);
-  const [categories, setCategories] = React.useState<any>([]);
+  const [categories, setCategories] = useState<any>([]);
-  const [questions, setQuestions] = React.useState<any>([]);
+  const [questions, setQuestions] = useState<any>([]);
+  const [selectedCategoryId, setSelectedCategoryId] = useState(0);
+  const [isDialogOpen, setIsDialogOpen] = useState<boolean>(false);
+  const [viewCreate, setViewCreate] = useState(false);
 
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+    defaultValues: {
+      name: "",
+    },
+  });
+
+  const formCreate = useForm<z.infer<typeof FormSchemaCreate>>({
+    resolver: zodResolver(FormSchemaCreate),
+    defaultValues: {
+      title: "",
+      question: "",
+      answer: "",
+    },
+  });
   React.useEffect(() => {
     fetchCategoryList();
   }, []);
@@ -37,7 +97,9 @@ const KnowledgeBase = () => {
     const data = response?.data?.data;
     if (data) {
       setCategories(data);
-      fetchQuestions(data[0]?.id);
+      fetchQuestions(
+        selectedCategoryId === 0 ? data[0]?.id : selectedCategoryId
+      );
     }
   }
 
@@ -50,7 +112,7 @@ const KnowledgeBase = () => {
   };
 
   async function doDelete(id: any) {
-    // loading();
+    loading();
     const data = {
       id,
     };
@@ -61,6 +123,7 @@ const KnowledgeBase = () => {
       error(response.message);
       return false;
     }
+    close();
     success();
   }
 
@@ -72,7 +135,7 @@ const KnowledgeBase = () => {
       confirmButtonText: "OK",
     }).then((result) => {
       if (result.isConfirmed) {
-        window.location.reload();
+        fetchQuestions(selectedCategoryId);
       }
     });
   }
@@ -93,6 +156,50 @@ const KnowledgeBase = () => {
     });
   };
 
+  function onSubmit(data: z.infer<typeof FormSchema>) {
+    save(data);
+    setIsDialogOpen(false);
+  }
+
+  useEffect(() => {
+    formCreate.reset();
+  }, [viewCreate]);
+
+  async function save(data: any) {
+    loading();
+    const reqData = {
+      id: selectedCategoryId,
+      name: data.name,
+    };
+    const response = await saveKnowledgeBaseCategory(reqData);
+    if (response?.error) {
+      return false;
+    }
+    close();
+    toast({
+      title: "Task created successfully.",
+    });
+    fetchCategoryList();
+  }
+
+  async function onSubmitCreate(data: z.infer<typeof FormSchemaCreate>) {
+    const reqData = {
+      title: data.title,
+      categoryId:
+        selectedCategoryId === 0 ? categories[0]?.id : selectedCategoryId,
+      question: data.question,
+      answer: data.answer,
+    };
+    const response = await saveKnowledgeBase(reqData);
+    if (response?.error) {
+      error(response.message);
+      return false;
+    }
+    fetchQuestions(
+      selectedCategoryId === 0 ? categories[0]?.id : selectedCategoryId
+    );
+  }
+
   return (
     <div>
       <SiteBreadcrumb />
@@ -108,6 +215,7 @@ const KnowledgeBase = () => {
                     value={`category-${index}`}
                     onClick={() => {
                       fetchQuestions(category?.id);
+                      setSelectedCategoryId(category?.id);
                     }}
                     className="group data-[state=active]:bg-secondary data-[state=active]:text-default rounded-md px-6 py-3 w-full justify-between flex items-center"
                   >
@@ -116,7 +224,57 @@ const KnowledgeBase = () => {
                       className="right-2 top-2 hidden group-hover:inline-flex"
                       // onClick={() => deleteCategory(category?.id)}
                     >
-                      <Trash size={20} className="text-red-500" />
+                      <div className="flex flex-row gap-2 items-center">
+                        <Dialog
+                          open={isDialogOpen}
+                          onOpenChange={setIsDialogOpen}
+                        >
+                          <DialogTrigger asChild>
+                            <a
+                              className="dark:bg-background dark:text-foreground"
+                              onClick={() =>
+                                form.setValue("name", category.name)
+                              }
+                            >
+                              <Edit2Icon size={18} />
+                            </a>
+                          </DialogTrigger>
+                          <DialogContent>
+                            <DialogHeader className="mb-4">
+                              <DialogTitle>Edit Category</DialogTitle>
+                            </DialogHeader>
+                            <Form {...form}>
+                              <form
+                                onSubmit={form.handleSubmit(onSubmit)}
+                                className="space-y-4"
+                              >
+                                <FormField
+                                  control={form.control}
+                                  name="name"
+                                  render={({ field }) => (
+                                    <FormItem>
+                                      <FormLabel className="text-default-700">
+                                        Name
+                                      </FormLabel>
+                                      <FormControl>
+                                        <Input
+                                          placeholder="Enter Title"
+                                          {...field}
+                                        />
+                                      </FormControl>
+                                      <FormMessage />
+                                    </FormItem>
+                                  )}
+                                />
+                                <div className="flex justify-end">
+                                  <Button type="submit">Submit</Button>
+                                </div>
+                              </form>
+                            </Form>
+                          </DialogContent>
+                        </Dialog>
+                        <Trash size={20} className="text-red-500" />
+                      </div>
                     </div>
                   </TabsTrigger>
                 ))}
@@ -145,6 +303,7 @@ const KnowledgeBase = () => {
                             }}
                             className="text-left"
                           />
+
                           <Trash
                             size={20}
                             className="text-red-500 hover:cursor-pointer"
@@ -158,16 +317,86 @@ const KnowledgeBase = () => {
                     </AccordionItem>
                   ))}
                 </Accordion>
-                {questions?.length > 0 && (
+                <div className="flex gap-3">
-                  <div className="flex gap-3">
+                  <Button fullWidth size="md" variant="outline">
-                    <Button fullWidth size="md" variant="outline">
+                    <Plus className="w-6 h-6 me-1.5" />
-                      <Plus className="w-6 h-6 me-1.5" />
+                    Import
-                      Import
+                  </Button>
-                    </Button>
+                  <Button
-                    <Button fullWidth size="md">
+                    fullWidth
-                      <Plus className="w-6 h-6 me-1.5" />
+                    size="md"
-                      Add Question
+                    onClick={() => setViewCreate(!viewCreate)}
-                    </Button>
+                  >
+                    <Plus className="w-6 h-6 me-1.5" />
+                    Add Question
+                  </Button>
+                </div>
+                {viewCreate && (
+                  <div className="flex flex-col gap-2 py-6">
+                    <Form {...formCreate}>
+                      <form
+                        onSubmit={formCreate.handleSubmit(onSubmitCreate)}
+                        className="space-y-4"
+                      >
+                        <FormField
+                          control={formCreate.control}
+                          name="title"
+                          render={({ field }) => (
+                            <FormItem>
+                              <FormLabel className="text-default-700">
+                                Judul
+                              </FormLabel>
+                              <FormControl>
+                                <Input
+                                  placeholder="Masukkan Judul"
+                                  {...field}
+                                />
+                              </FormControl>
+                              <FormMessage />
+                            </FormItem>
+                          )}
+                        />
+                        <FormField
+                          control={formCreate.control}
+                          name="question"
+                          render={({ field }) => (
+                            <FormItem>
+                              <FormLabel className="text-default-700">
+                                Pertanyaan
+                              </FormLabel>
+                              <FormControl>
+                                <Textarea
+                                  placeholder="Masukkan Pertanyaan"
+                                  {...field}
+                                />
+                              </FormControl>
+                              <FormMessage />
+                            </FormItem>
+                          )}
+                        />
+                        <FormField
+                          control={formCreate.control}
+                          name="answer"
+                          render={({ field }) => (
+                            <FormItem>
+                              <FormLabel className="text-default-700">
+                                Jawaban
+                              </FormLabel>
+                              <FormControl>
+                                <Textarea
+                                  placeholder="Masukkan Jawaban"
+                                  {...field}
+                                />
+                              </FormControl>
+                              <FormMessage />
+                            </FormItem>
+                          )}
+                        />
+                        <div className="flex justify-end">
+                          <Button type="submit">Submit</Button>
+                        </div>
+                      </form>
+                    </Form>
                   </div>
                 )}
               </TabsContent>

app/[locale]/(protected)/supervisor/setting/feedback/components/feedback.tsx

@@ -1,26 +1,80 @@
 "use client";
-import { useState } from "react";
+import { use, useEffect, useState } from "react";
 import { Button } from "@/components/ui/button";
 import { Textarea } from "@/components/ui/textarea";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-import { MoreVertical } from "lucide-react";
+import { MoreVertical, Trash2 } from "lucide-react";
+import {
+  deleteDataFeedback,
+  getListFeedback,
+  postDataFeedback,
+} from "@/service/settings/settings";
+import { close, loading } from "@/config/swal";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 
 const FeedbackForm = () => {
   const [region, setRegion] = useState("nasional");
-  const [feedbackList, setFeedbackList] = useState<string[]>([
+  const [feedbackList, setFeedbackList] = useState<any>([]);
-    "Silahkan berikan rating Anda terkait dengan kemudahan akses website MediaHUB Polri",
-    "Silahkan berikan rating Anda terkait dengan konten MediaHUB Polri",
-    "Silahkan berikan rating Anda terkait dengan tampilan MediaHUB Polri",
-  ]);
   const [newFeedback, setNewFeedback] = useState("");
+  const [selectedFeedback, setSetSelectedFeedback] = useState(0);
 
-  const handleAddFeedback = () => {
+  useEffect(() => {
+    fetchFeedback();
+  }, []);
+
+  const fetchFeedback = async () => {
+    loading();
+    const res = await getListFeedback();
+    setFeedbackList(res?.data?.data);
+    close();
+  };
+
+  const handleAddFeedback = async () => {
     if (newFeedback.trim()) {
-      setFeedbackList([...feedbackList, newFeedback.trim()]);
+      const req = {
+        question: newFeedback.trim(),
+        isInternational: region === "internasional",
+      };
+      loading();
+      const res = await postDataFeedback(req);
+      close();
+      fetchFeedback();
+    }
+  };
+  const handleEditFeedback = async () => {
+    if (newFeedback.trim()) {
+      const req = {
+        id: selectedFeedback,
+        question: newFeedback.trim(),
+        isInternational: region === "internasional",
+      };
+      loading();
+      const res = await postDataFeedback(req);
+      close();
+      fetchFeedback();
+      setSetSelectedFeedback(0);
       setNewFeedback("");
     }
   };
 
+  const deleteFeedback = async (id: number) => {
+    loading();
+    const res = await deleteDataFeedback(id);
+    console.log(res);
+    close();
+    fetchFeedback();
+  };
+
+  const doEdit = (id: number, question: string) => {
+    setSetSelectedFeedback(id);
+    setNewFeedback(question);
+  };
+
   return (
     <div className="space-y-4">
       <div className="bg-white rounded-md p-6 flex flex-col md:flex-row gap-6">
@@ -52,23 +106,57 @@ const FeedbackForm = () => {
               className="min-h-[100px]"
             />
           </div>
-
+          <div className="flex flex-row gap-1">
-          <Button
+            {selectedFeedback !== 0 && (
-            onClick={handleAddFeedback}
+              <Button
-            className="bg-blue-600 text-white"
+                variant="outline"
-          >
+                onClick={handleEditFeedback}
-            Tambah Feedback
+                className="bg-white text-blue-600 border border-bue-600"
-          </Button>
+              >
+                Ubah Feedback
+              </Button>
+            )}
+            <Button
+              onClick={handleAddFeedback}
+              className="bg-blue-600 text-white"
+            >
+              Tambah Feedback
+            </Button>
+          </div>
         </div>
 
         <div className="md:w-1/2">
           <h3 className="font-semibold mb-2 border-b pb-1">Feedback</h3>
           <p className="font-medium mb-4">Pertanyaan</p>
           <ul className="space-y-3">
-            {feedbackList.map((item, index) => (
+            {feedbackList.map((item: any) => (
-              <li key={index} className="flex justify-between items-start">
+              <li key={item.id} className="flex justify-between items-center">
-                <span>{item}</span>
+                <span>{item.question}</span>
-                <MoreVertical className="w-4 h-4 text-gray-600 cursor-pointer" />
+                <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
+                      onClick={() => doEdit(item.id, item.question)}
+                      className="p-2 border-b rounded-none focus:bg-slate-300"
+                    >
+                      Edit
+                    </DropdownMenuItem>
+                    <DropdownMenuItem
+                      onClick={() => deleteFeedback(item.id)}
+                      className="p-2 border-b text-destructive bg-destructive/30  focus:bg-destructive focus:text-destructive-foreground rounded-none"
+                    >
+                      Delete
+                    </DropdownMenuItem>
+                  </DropdownMenuContent>
+                </DropdownMenu>
               </li>
             ))}
           </ul>

components/partials/auth/login-form.tsx

@@ -281,17 +281,17 @@ const LoginForm = () => {
       return false;
     }
     const msg = response?.data?.message;
-    // onSubmit(data);
+    onSubmit(data);
 
-    if (msg == "Continue to setup email") {
+    // if (msg == "Continue to setup email") {
-      setStep(2);
+    //   setStep(2);
-    } else if (msg == "Email is valid and OTP has been sent") {
+    // } else if (msg == "Email is valid and OTP has been sent") {
-      setStep(3);
+    //   setStep(3);
-    } else if (msg == "Username & password valid") {
+    // } else if (msg == "Username & password valid") {
-      onSubmit(data);
+    //   onSubmit(data);
-    } else {
+    // } else {
-      error("Username / password incorrect");
+    //   error("Username / password incorrect");
-    }
+    // }
     // else {
     //   setStep(1);
     // }

service/master/knowledge-base.ts

@@ -23,3 +23,8 @@ export async function deleteKnowledgeBase(id: any) {
   const url = `knowledge-base?id=${id}`;
   return httpDeleteInterceptor(url);
 }
+
+export async function saveKnowledgeBase(data: any) {
+  const url = "knowledge-base";
+  return httpPostInterceptor(url, data);
+}