add api and fix ui

app/[locale]/(protected)/shared/communication/escalation/components/columns.tsx

@@ -12,6 +12,7 @@ import {
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { format } from "date-fns";
+import { Link } from "@/components/navigation";
 
 const columns: ColumnDef<any>[] = [
   {
@@ -111,10 +112,14 @@ const columns: ColumnDef<any>[] = [
             </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>
+            <Link
+              href={`/shared/communication/escalation/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>
             <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

app/[locale]/(protected)/shared/communication/escalation/detail/[id]/page.tsx

@@ -0,0 +1,19 @@
+import { Card, CardContent } from "@/components/ui/card";
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+import FormTask from "@/components/form/task/task-form";
+import FormTaskDetail from "@/components/form/task/task-detail-form";
+import FormDetailInternal from "@/components/form/communication/internal-detail-form";
+import FormDetailEscalation from "@/components/form/communication/escalation-detail-form";
+
+const EscalationDetailPage = async () => {
+  return (
+    <div>
+      <SiteBreadcrumb />
+      <div className="space-y-4">
+        <FormDetailEscalation />
+      </div>
+    </div>
+  );
+};
+
+export default EscalationDetailPage;

app/[locale]/(protected)/shared/communication/internal/components/columns.tsx

@@ -12,6 +12,7 @@ import {
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { format } from "date-fns";
+import { Link } from "@/components/navigation";
 
 const columns: ColumnDef<any>[] = [
   {
@@ -96,10 +97,14 @@ const columns: ColumnDef<any>[] = [
             </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>
+            <Link
+              href={`/shared/communication/internal/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>
             <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

app/[locale]/(protected)/shared/communication/internal/components/internal-table.tsx

@@ -35,6 +35,7 @@ import {
   Trash2,
   TrendingDown,
   TrendingUp,
+  UploadIcon,
 } from "lucide-react";
 import { cn, getCookiesDecrypt } from "@/lib/utils";
 import {
@@ -57,6 +58,7 @@ import {
   listDataVideo,
 } from "@/service/content/content";
 import { listTicketingInternal } from "@/service/communication/communication";
+import { Link } from "@/components/navigation";
 
 const TableAudio = () => {
   const router = useRouter();
@@ -151,7 +153,13 @@ const TableAudio = () => {
   return (
     <div className="w-full overflow-x-auto mt-3">
       <div className="flex justify-between items-center px-5">
-        <div className="mt-3">
+        <div className="mt-3 flex flex-row items-center gap-2">
+          <Link href={"/shared/communication/internal/create"}>
+            <Button color="primary" className="text-white" size="md">
+              <UploadIcon />
+              Pertanyaan Baru
+            </Button>
+          </Link>
           <InputGroup merged>
             <InputGroupText className="bg-transparent dark:border-secondary dark:group-focus-within:border-secondary">
               <Search className=" h-4 w-4 dark:text-white" />

app/[locale]/(protected)/shared/communication/internal/detail/[id]/page.tsx

@@ -0,0 +1,18 @@
+import { Card, CardContent } from "@/components/ui/card";
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+import FormTask from "@/components/form/task/task-form";
+import FormTaskDetail from "@/components/form/task/task-detail-form";
+import FormDetailInternal from "@/components/form/communication/internal-detail-form";
+
+const InternalDetailPage = async () => {
+  return (
+    <div>
+      <SiteBreadcrumb />
+      <div className="space-y-4">
+        <FormDetailInternal />
+      </div>
+    </div>
+  );
+};
+
+export default InternalDetailPage;

app/[locale]/(protected)/shared/communication/page.tsx

@@ -4,7 +4,7 @@ import InternalTable from "./internal/components/internal-table";
 import SiteBreadcrumb from "@/components/site-breadcrumb";
 
 import CollaborationTable from "./collaboration/components/collabroation-table";
-import EscalationTable from "./escalation/table-escalation/escalation-table";
+import EscalationTable from "./escalation/components/escalation-table";
 
 const CommunicationPage = () => {
   return (

components/form/communication/escalation-detail-form.tsx

@@ -0,0 +1,285 @@
+"use client";
+"use client";
+import React, { useEffect, 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 } from "next/navigation";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Avatar, AvatarImage } from "@/components/ui/avatar";
+import {
+  getTicketingDetail,
+  getTicketingInternalDetail,
+  getTicketingInternalDiscussion,
+  saveTicketInternalReply,
+} from "@/service/communication/communication";
+import { Textarea } from "@/components/ui/textarea";
+
+const taskSchema = z.object({
+  title: z.string().min(1, { message: "Judul diperlukan" }),
+  naration: z.string().min(2, {
+    message: "Narasi Penugasan harus lebih dari 2 karakter.",
+  }),
+});
+
+export type escalationDetail = {
+  id: number;
+  title: string;
+  createdAt: string;
+  commentFromUserName: string;
+  message: string;
+  createdBy: {
+    id: number;
+    fullname: string;
+  };
+  sendTo: {
+    id: number;
+    fullname: string;
+  };
+  status: {
+    id: number;
+    name: string;
+  };
+  priority: {
+    id: number;
+    name: string;
+  };
+  description: string;
+  narration: string;
+  is_active: string;
+};
+
+export type replyDetail = {
+  id: number;
+  message: string;
+  createdAt: string;
+  messageFrom: {
+    id: number;
+    fullname: string;
+  };
+  messageTo: {
+    id: number;
+    fullname: string;
+  };
+};
+
+export default function FormDetailEscalation() {
+  const MySwal = withReactContent(Swal);
+  const { id } = useParams() as { id: string };
+
+  const [detail, setDetail] = useState<escalationDetail>();
+  const [ticketReply, setTicketReply] = useState<replyDetail[]>([]);
+  const [replyVisible, setReplyVisible] = useState(false);
+  const [replyMessage, setReplyMessage] = useState("");
+  const [selectedPriority, setSelectedPriority] = useState("");
+  const [selectedStatus, setSelectedStatus] = useState("");
+
+  const {
+    control,
+    handleSubmit,
+    formState: { errors },
+  } = useForm({
+    resolver: zodResolver(taskSchema),
+  });
+
+  useEffect(() => {
+    async function initState() {
+      if (id) {
+        const response = await getTicketingDetail(id);
+        setDetail(response.data?.data);
+      }
+    }
+    initState();
+    getTicketReply();
+  }, [id]);
+
+  async function getTicketReply() {
+    const res = await getTicketingInternalDiscussion(id);
+    if (res.data !== null) {
+      setTicketReply(res.data?.data);
+    }
+  }
+
+  const handleReply = () => {
+    setReplyVisible((prev) => !prev); // Toggle visibility
+  };
+
+  const handleSendReply = async () => {
+    if (replyMessage.trim() === "") {
+      MySwal.fire({
+        title: "Error",
+        text: "Pesan tidak boleh kosong!",
+        icon: "error",
+      });
+      return;
+    }
+
+    const data = {
+      ticketId: id,
+      message: replyMessage,
+    };
+
+    try {
+      const response = await saveTicketInternalReply(data);
+
+      // Tambahkan balasan baru ke daftar balasan
+      const newReply: replyDetail = {
+        id: response.data.id,
+        message: replyMessage,
+        createdAt: response.data.createdAt,
+        messageFrom: response.data.messageFrom,
+        messageTo: response.data.messageTo,
+      };
+
+      setTicketReply((prevReplies) => [newReply, ...prevReplies]);
+
+      MySwal.fire({
+        title: "Sukses",
+        text: "Pesan berhasil dikirim.",
+        icon: "success",
+      });
+
+      // Reset input dan sembunyikan form balasan
+      setReplyMessage("");
+      setReplyVisible(false);
+    } catch (error) {
+      MySwal.fire({
+        title: "Error",
+        text: "Gagal mengirim balasan.",
+        icon: "error",
+      });
+      console.error("Error sending reply:", error);
+    }
+  };
+
+  return (
+    <Card>
+      <div className="px-6 py-6">
+        <div className="flex">
+          <div className="flex flex-col mt-6 w-full mb-3">
+            {detail !== undefined && (
+              <div key={detail?.id} className="bg-slate-300  rounded-md">
+                <p className="px-3 py-3 bg-slate-300 rounded-md text-lg font-semibold">
+                  Ticket #{detail.id}
+                </p>
+                <div className="flex flex-row gap-3 mt-3 bg-blue-300 py-2 px-2">
+                  <Avatar>
+                    <AvatarImage
+                      src={"/images/avatar/avatar-3.png"}
+                      alt={`mabes`}
+                    />
+                  </Avatar>
+                  <div>
+                    <p>
+                      <span className="font-bold">
+                        {detail?.commentFromUserName}
+                      </span>{" "}
+                      mengirimkan pesan untuk{" "}
+                      <span className="font-bold">{detail?.message}</span>
+                    </p>
+                    <p>{detail?.createdAt}</p>
+                  </div>
+                </div>
+                <p className="pl-3 bg-white">{detail.message}</p>
+              </div>
+            )}
+          </div>
+        </div>
+        {detail !== undefined && (
+          <div className="gap-5 mb-5 w-full border mt-3 rounded-md">
+            <div className="space-y-2 px-3 mt-3">
+              <Label>Judul</Label>
+              <Controller
+                control={control}
+                name="title"
+                render={({ field }) => (
+                  <Input
+                    size="md"
+                    type="text"
+                    value={detail?.title}
+                    onChange={field.onChange}
+                    placeholder="Enter Title"
+                  />
+                )}
+              />
+              {/* {errors.title?.message && (
+                  <p className="text-red-400 text-sm">
+                    {errors.title.message}
+                  </p>
+                )} */}
+            </div>
+            <div className="mt-5 px-3">
+              <Label>Prioritas</Label>
+              <Select
+                onValueChange={setSelectedPriority}
+                value={detail?.priority?.name}
+              >
+                <SelectTrigger size="md" className="w-3/12">
+                  <SelectValue placeholder="Pilih" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="Low">Low</SelectItem>
+                  <SelectItem value="Medium">Medium</SelectItem>
+                  <SelectItem value="High">High</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="space-y-2 px-3 mt-3">
+              <Label>Description</Label>
+              <Controller
+                control={control}
+                name="title"
+                render={({ field }) => (
+                  <Textarea
+                    value={detail?.description}
+                    onChange={field.onChange}
+                    placeholder="Enter Title"
+                  />
+                )}
+              />
+              {/* {errors.title?.message && (
+                  <p className="text-red-400 text-sm">
+                    {errors.title.message}
+                  </p>
+                )} */}
+            </div>
+            <div className="mt-4 px-3 mb-3">
+              <Label htmlFor="replyMessage">Tulis Pesan</Label>
+              <textarea
+                id="replyMessage"
+                className="w-full h-24 border rounded-md p-2"
+                value={replyMessage}
+                onChange={(e) => setReplyMessage(e.target.value)}
+                placeholder="Tulis pesan di sini..."
+              />
+              <div className="flex justify-end gap-3 mt-2">
+                <Button
+                  onClick={() => setReplyVisible(false)}
+                  color="default"
+                  variant="outline"
+                >
+                  Batal
+                </Button>
+                <Button onClick={handleSendReply} color="primary">
+                  Kirim
+                </Button>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    </Card>
+  );
+}

components/form/communication/internal-detail-form.tsx

@@ -0,0 +1,292 @@
+"use client";
+"use client";
+import React, { useEffect, 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 } from "next/navigation";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Avatar, AvatarImage } from "@/components/ui/avatar";
+import {
+  getTicketingInternalDetail,
+  getTicketingInternalDiscussion,
+  saveTicketInternalReply,
+} from "@/service/communication/communication";
+
+const taskSchema = z.object({
+  title: z.string().min(1, { message: "Judul diperlukan" }),
+  naration: z.string().min(2, {
+    message: "Narasi Penugasan harus lebih dari 2 karakter.",
+  }),
+});
+
+export type taskDetail = {
+  id: number;
+  title: string;
+  createdAt: string;
+  createdBy: {
+    id: number;
+    fullname: string;
+  };
+  sendTo: {
+    id: number;
+    fullname: string;
+  };
+  status: {
+    id: number;
+    name: string;
+  };
+  priority: {
+    id: number;
+    name: string;
+  };
+  broadcastType: string;
+  narration: string;
+  is_active: string;
+};
+
+export type replyDetail = {
+  id: number;
+  message: string;
+  createdAt: string;
+  messageFrom: {
+    id: number;
+    fullname: string;
+  };
+  messageTo: {
+    id: number;
+    fullname: string;
+  };
+};
+
+export default function FormDetailInternal() {
+  const MySwal = withReactContent(Swal);
+  const { id } = useParams() as { id: string };
+
+  const [detail, setDetail] = useState<taskDetail>();
+  const [ticketReply, setTicketReply] = useState<replyDetail[]>([]);
+  const [replyVisible, setReplyVisible] = useState(false);
+  const [replyMessage, setReplyMessage] = useState("");
+  const [selectedPriority, setSelectedPriority] = useState("");
+  const [selectedStatus, setSelectedStatus] = useState("");
+
+  const {
+    control,
+    handleSubmit,
+    formState: { errors },
+  } = useForm({
+    resolver: zodResolver(taskSchema),
+  });
+
+  useEffect(() => {
+    async function initState() {
+      if (id) {
+        const response = await getTicketingInternalDetail(id);
+        setDetail(response.data?.data);
+      }
+    }
+    initState();
+    getTicketReply();
+  }, [id]);
+
+  async function getTicketReply() {
+    const res = await getTicketingInternalDiscussion(id);
+    if (res.data !== null) {
+      setTicketReply(res.data?.data);
+    }
+  }
+
+  const handleReply = () => {
+    setReplyVisible((prev) => !prev); // Toggle visibility
+  };
+
+  const handleSendReply = async () => {
+    if (replyMessage.trim() === "") {
+      MySwal.fire({
+        title: "Error",
+        text: "Pesan tidak boleh kosong!",
+        icon: "error",
+      });
+      return;
+    }
+
+    const data = {
+      ticketId: id,
+      message: replyMessage,
+    };
+
+    try {
+      const response = await saveTicketInternalReply(data);
+
+      // Tambahkan balasan baru ke daftar balasan
+      const newReply: replyDetail = {
+        id: response.data.id,
+        message: replyMessage,
+        createdAt: response.data.createdAt,
+        messageFrom: response.data.messageFrom,
+        messageTo: response.data.messageTo,
+      };
+
+      setTicketReply((prevReplies) => [newReply, ...prevReplies]);
+
+      MySwal.fire({
+        title: "Sukses",
+        text: "Pesan berhasil dikirim.",
+        icon: "success",
+      });
+
+      // Reset input dan sembunyikan form balasan
+      setReplyMessage("");
+      setReplyVisible(false);
+    } catch (error) {
+      MySwal.fire({
+        title: "Error",
+        text: "Gagal mengirim balasan.",
+        icon: "error",
+      });
+      console.error("Error sending reply:", error);
+    }
+  };
+
+  return (
+    <Card>
+      <div className="px-6 py-6">
+        <div className="mt-4 flex flex-row items-center gap-3">
+          <Button onClick={handleReply} color="default" variant={"outline"}>
+            Balas
+          </Button>
+
+          <Button color="default" variant={"outline"}>
+            Hapus
+          </Button>
+        </div>
+
+        {replyVisible && (
+          <div className="mt-4">
+            <Label htmlFor="replyMessage">Tulis Pesan</Label>
+            <textarea
+              id="replyMessage"
+              className="w-full h-24 border rounded-md p-2"
+              value={replyMessage}
+              onChange={(e) => setReplyMessage(e.target.value)}
+              placeholder="Tulis pesan di sini..."
+            />
+            <div className="flex justify-end gap-3 mt-2">
+              <Button
+                onClick={() => setReplyVisible(false)}
+                color="default"
+                variant="outline"
+              >
+                Batal
+              </Button>
+              <Button onClick={handleSendReply} color="primary">
+                Kirim
+              </Button>
+            </div>
+          </div>
+        )}
+        <div className="flex flex-row justify-between ">
+          <div className="flex flex-col mt-6 w-7/12">
+            {ticketReply?.map((list) => (
+              <div key={list.id} className="bg-slate-300  rounded-md">
+                <p className="px-3 py-3 bg-slate-300 rounded-md text-lg font-semibold">
+                  Ticket #{list.id}
+                </p>
+                <div className="flex flex-row gap-3 mt-3 bg-blue-300 py-2 px-2">
+                  <Avatar>
+                    <AvatarImage
+                      src={"/images/avatar/avatar-3.png"}
+                      alt={`mabes`}
+                    />
+                  </Avatar>
+                  <div>
+                    <p>
+                      <span className="font-bold">
+                        {list?.messageFrom?.fullname}
+                      </span>{" "}
+                      mengirimkan pesan untuk{" "}
+                      <span className="font-bold">
+                        {list?.messageTo?.fullname}
+                      </span>
+                    </p>
+                    <p>{list?.createdAt}</p>
+                  </div>
+                </div>
+                <p className="pl-3 bg-white">{list.message}</p>
+              </div>
+            ))}
+          </div>
+          {detail !== undefined && (
+            <div className="gap-5 mb-5 w-3/12 border mt-3 rounded-md">
+              <Label className="ml-3 mt-3">Properties</Label>
+              <div className="space-y-2 px-3">
+                <Label>Judul</Label>
+                <Controller
+                  control={control}
+                  name="title"
+                  render={({ field }) => (
+                    <Input
+                      size="md"
+                      type="text"
+                      value={detail?.title}
+                      onChange={field.onChange}
+                      placeholder="Enter Title"
+                    />
+                  )}
+                />
+                {/* {errors.title?.message && (
+                  <p className="text-red-400 text-sm">
+                    {errors.title.message}
+                  </p>
+                )} */}
+              </div>
+              <div className="mt-5 px-3">
+                <Label>Prioritas</Label>
+                <Select
+                  onValueChange={setSelectedPriority}
+                  value={detail?.priority?.name}
+                >
+                  <SelectTrigger size="md">
+                    <SelectValue placeholder="Pilih" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="Low">Low</SelectItem>
+                    <SelectItem value="Medium">Medium</SelectItem>
+                    <SelectItem value="High">High</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+              <div className="mt-5 px-3 mb-3">
+                <Label>Status</Label>
+                <Select
+                  onValueChange={setSelectedStatus}
+                  value={detail?.status?.name}
+                >
+                  <SelectTrigger size="md">
+                    <SelectValue placeholder="Pilih" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="Open">Open</SelectItem>
+                    <SelectItem value="Close">Close</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </Card>
+  );
+}

components/form/communication/internal-form.tsx

@@ -168,7 +168,7 @@ export default function FormInternal() {
       confirmButtonColor: "#3085d6",
       confirmButtonText: "OK",
     }).then(() => {
-      router.push("/contributor/communication");
+      router.push("/en/shared/communication");
     });
   };
 

service/communication/communication.ts

@@ -1,4 +1,4 @@
-import { getAPIInterceptor } from "@/config/api";
+import { getAPIInterceptor, postAPIInterceptor } from "@/config/api";
 import {
   httpGetInterceptor,
   httpPostInterceptor,
@@ -52,3 +52,23 @@ export async function saveTicketing(data: any) {
   const url = "ticketing";
   return httpPostInterceptor(url, data);
 }
+
+export async function getTicketingInternalDetail(id: any) {
+  const url = `ticketing/internal?id=${id}`;
+  return getAPIInterceptor(url);
+}
+
+export async function getTicketingInternalDiscussion(id: any) {
+  const url = `ticketing/internal/discussion?ticketId=${id}`;
+  return getAPIInterceptor(url);
+}
+
+export async function saveTicketInternalReply(data: any) {
+  const url = "ticketing/internal/discussion";
+  return postAPIInterceptor(url, data);
+}
+
+export async function getTicketingDetail(id: any) {
+  const url = `ticketing?id=${id}`;
+  return getAPIInterceptor(url);
+}