mediahub
/
mediahub-fe
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[QUDO-80,QUDO-81,QUDO-82] feat:fix sidebar SPV,handle delete knowladgebase,Crud Ticketing

This commit is contained in:
Anang Yusman 2025-05-19 09:24:48 +08:00
parent 63a88c0b94
commit 06fd71122e
12 changed files with 1361 additions and 224 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,4 +1,4 @@
'use client'
"use client";
import {
Accordion,
@ -6,16 +6,25 @@ import {
AccordionItem,
AccordionTrigger,
} from "@/components/ui/accordion";
import {Card, CardContent} from "@/components/ui/card";
import {Tabs, TabsContent, TabsList, TabsTrigger} from "@/components/ui/tabs";
import { Card, CardContent } from "@/components/ui/card";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import SiteBreadcrumb from "@/components/site-breadcrumb";
import {getKnowledgeBaseCategoryList, getKnowledgeBaseList} from "@/service/master/knowledge-base";
import {
deleteKnowledgeBase,
getKnowledgeBaseCategoryList,
getKnowledgeBaseList,
} from "@/service/master/knowledge-base";
import React from "react";
import {Plus, Trash2} from "lucide-react";
import {Button} from "@/components/ui/button";
import { 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";
const KnowledgeBase = () => {
const MySwal = withReactContent(Swal);
const [categories, setCategories] = React.useState<any>([]);
const [questions, setQuestions] = React.useState<any>([]);
@ -28,7 +37,7 @@ const KnowledgeBase = () => {
const data = response?.data?.data;
if (data) {
setCategories(data);
fetchQuestions(data[0]?.id)
fetchQuestions(data[0]?.id);
}
}
@ -38,84 +47,135 @@ const KnowledgeBase = () => {
if (data) {
setQuestions(data);
}
};
async function doDelete(id: any) {
// loading();
const data = {
id,
};
const response = await deleteKnowledgeBase(id);
if (response?.error) {
error(response.message);
return false;
}
success();
}
function success() {
MySwal.fire({
title: "Sukses",
icon: "success",
confirmButtonColor: "#3085d6",
confirmButtonText: "OK",
}).then((result) => {
if (result.isConfirmed) {
window.location.reload();
}
});
}
const handleDeleteKnowlagde = (id: any) => {
MySwal.fire({
title: "Hapus Data",
text: "",
icon: "warning",
showCancelButton: true,
cancelButtonColor: "#3085d6",
confirmButtonColor: "#d33",
confirmButtonText: "Hapus",
}).then((result) => {
if (result.isConfirmed) {
doDelete(id);
}
});
};
return (
<div>
<SiteBreadcrumb/>
<Tabs defaultValue={`category-0`}>
<div className="grid grid-cols-12 gap-6">
<Card className="lg:col-span-3 md:col-span-5 col-span-12 h-max">
<CardContent className=" p-6">
<TabsList className="md:flex-col gap-2 flex-wrap md:items-start justify-start">
<CreateCategory onSuccess={fetchCategoryList} />
{categories?.map((category: any, index: number) => (
<TabsTrigger
key={index}
value={`category-${index}`}
onClick={() => {
fetchQuestions(category?.id);
}}
className="data-[state=active]:bg-secondary data-[state=active]:text-default rounded-md px-6 py-3 w-full justify-start"
>
{category?.name}
<div
className="absolute right-2 top-2 hidden group-hover:inline-flex"
// onClick={() => deleteCategory(category?.id)}
>
<Trash2 className="w-3.5 h-3.5 me-1" />
<div>
<SiteBreadcrumb />
<Tabs defaultValue={`category-0`}>
<div className="grid grid-cols-12 gap-6">
<Card className="lg:col-span-3 md:col-span-5 col-span-12 h-max">
<CardContent className=" p-6">
<TabsList className="md:flex-col gap-2 flex-wrap md:items-start justify-start">
<CreateCategory onSuccess={fetchCategoryList} />
{categories?.map((category: any, index: number) => (
<TabsTrigger
key={index}
value={`category-${index}`}
onClick={() => {
fetchQuestions(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"
>
{category?.name}
<div
className="right-2 top-2 hidden group-hover:inline-flex"
// onClick={() => deleteCategory(category?.id)}
>
<Trash size={20} className="text-red-500" />
</div>
</TabsTrigger>
))}
</TabsList>
</CardContent>
</Card>
<div className="lg:col-span-9 md:col-span-7 col-span-12 mt-4 lg:mt-0">
{categories?.map((cateogry: any, index: number) => (
<TabsContent
key={index}
value={`category-${index}`}
className="mt-0"
>
<Accordion type="single" collapsible className="w-full">
{questions?.map((question: any) => (
<AccordionItem
key={question.id}
className="dark:bg-secondary bg-white"
value={question.id}
>
<AccordionTrigger className="flex items-center justify-between gap-4 dark:bg-secondary bg-white data-[state=open]:bg-default-200 data-[state=active]:text-default">
<div className="flex items-center justify-between w-full gap-4">
<span
dangerouslySetInnerHTML={{
__html: question.question,
}}
className="text-left"
/>
<Trash
size={20}
className="text-red-500 hover:cursor-pointer"
onClick={() => handleDeleteKnowlagde(question.id)}
/>
</div>
</TabsTrigger>
</AccordionTrigger>
<AccordionContent className="dark:bg-secondary bg-white">
{question.answer}
</AccordionContent>
</AccordionItem>
))}
</TabsList>
</CardContent>
</Card>
<div className="lg:col-span-9 md:col-span-7 col-span-12 mt-4 lg:mt-0">
{categories?.map((cateogry: any, index: number) => (
<TabsContent key={index} value={`category-${index}`} className="mt-0">
<Accordion type="single" collapsible className="w-full">
{questions?.map((question: any) => (
<AccordionItem
key={question.id}
className="dark:bg-secondary bg-white"
value={question.id}
>
<AccordionTrigger
className="dark:bg-secondary bg-white data-[state=open]:bg-default-200 data-[state=active]:text-default">
{question.question}
</AccordionTrigger>
<AccordionContent className="dark:bg-secondary bg-white">
{question.answer}
</AccordionContent>
</AccordionItem>
))
}
</Accordion>
{questions?.length > 0 &&
<div className="flex gap-3">
<Button
fullWidth
size="md"
variant="outline"
>
<Plus className="w-6 h-6 me-1.5"/>
Import
</Button>
<Button
fullWidth
size="md"
>
<Plus className="w-6 h-6 me-1.5"/>
Add Question
</Button>
</div>
}
</TabsContent>
))}
</div>
</Accordion>
{questions?.length > 0 && (
<div className="flex gap-3">
<Button fullWidth size="md" variant="outline">
<Plus className="w-6 h-6 me-1.5" />
Import
</Button>
<Button fullWidth size="md">
<Plus className="w-6 h-6 me-1.5" />
Add Question
</Button>
</div>
)}
</TabsContent>
))}
</div>
</Tabs>
</div>
</div>
</Tabs>
</div>
);
};

70
app/[locale]/(protected)/supervisor/ticketing/components/columns.tsx
View File

@ -12,6 +12,11 @@ import {
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { formatDateToIndonesian } from "@/utils/globals";
import { Link } from "@/i18n/routing";
import { deleteTicket } from "@/service/communication/communication";
import withReactContent from "sweetalert2-react-content";
import { error } from "@/lib/swal";
import Swal from "sweetalert2";
const columns: ColumnDef<any>[] = [
{
@ -90,6 +95,46 @@ const columns: ColumnDef<any>[] = [
header: "Actions",
enableHiding: false,
cell: ({ row }) => {
const MySwal = withReactContent(Swal);
async function doDelete(id: any) {
const response = await deleteTicket(id);
if (response?.error) {
error(response.message);
return false;
}
success();
}
function success() {
MySwal.fire({
title: "Sukses",
icon: "success",
confirmButtonColor: "#3085d6",
confirmButtonText: "OK",
}).then((result) => {
if (result.isConfirmed) {
window.location.reload();
}
});
}
const handleDelete = (id: any) => {
MySwal.fire({
title: "Hapus Data",
text: "",
icon: "warning",
showCancelButton: true,
cancelButtonColor: "#3085d6",
confirmButtonColor: "#d33",
confirmButtonText: "Hapus",
}).then((result) => {
if (result.isConfirmed) {
doDelete(id);
}
});
};
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
@ -102,15 +147,22 @@ 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>
<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">
<Link href={`/supervisor/ticketing/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>
<Link href={`/supervisor/ticketing/update/${row.original.id}`}>
<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>
</Link>
<DropdownMenuItem
onClick={() => handleDelete(row.original.id)}
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>

19
app/[locale]/(protected)/supervisor/ticketing/detail/[id]/page.tsx Normal file
View File

@ -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 FormDetailTicketing from "@/components/form/ticketing/ticketing-detail-form";
const TicketingDetailPage = async () => {
return (
<div>
<SiteBreadcrumb />
<div className="space-y-4">
<FormDetailTicketing />
</div>
</div>
);
};
export default TicketingDetailPage;

20
app/[locale]/(protected)/supervisor/ticketing/update/[id]/page.tsx Normal file
View File

@ -0,0 +1,20 @@
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 FormDetailTicketing from "@/components/form/ticketing/ticketing-detail-form";
import FormUpdateTicketing from "@/components/form/ticketing/ticketing-update-form";
const TicketingUpdatePage = async () => {
return (
<div>
<SiteBreadcrumb />
<div className="space-y-4">
<FormUpdateTicketing />
</div>
</div>
);
};
export default TicketingUpdatePage;

411
components/form/ticketing/ticketing-detail-form.tsx Normal file
View File

@ -0,0 +1,411 @@
"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 {
deleteTicket,
getTicketingDetail,
getTicketingInternalDetail,
getTicketingInternalDiscussion,
getTicketingReply,
saveTicketing,
saveTicketInternalReply,
saveTicketReply,
} from "@/service/communication/communication";
import { Icon } from "@iconify/react/dist/iconify.js";
import { list } from "postcss";
import { htmlToString } from "@/utils/globals";
import { Textarea } from "@/components/ui/textarea";
import { error } from "@/lib/swal";
import { useRouter } from "next/navigation";
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;
referenceNumber: string | number;
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;
comments: string;
createdAt: string;
user: {
id: number;
fullname: string;
};
messageTo: {
id: number;
fullname: string;
};
};
export type internalDetail = {
id: number;
message: string;
createdAt: string;
createdBy: {
id: number;
fullname: string;
};
sendTo: {
id: number;
fullname: string;
};
};
export default function FormDetailTicketing() {
const MySwal = withReactContent(Swal);
const { id } = useParams() as { id: string };
const router = useRouter();
const [detail, setDetail] = useState<taskDetail>();
const [ticketReply, setTicketReply] = useState<replyDetail[]>([]);
const [ticketInternal, setTicketInternal] = useState<internalDetail | null>(
null
);
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);
setTicketInternal(response?.data?.data || null);
setDetail(response?.data?.data);
}
}
initState();
getTicketReply();
}, [id]);
async function getTicketReply() {
const res = await getTicketingReply(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 saveTicketReply(data);
// Tambahkan balasan baru ke daftar balasan
const newReply: replyDetail = {
id: response?.data?.id,
comments: replyMessage,
createdAt: response?.data?.createdAt,
user: 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);
}
};
async function doDelete(id: any) {
const response = await deleteTicket(id);
if (response?.error) {
error(response.message);
return false;
}
success("/in/supervisor/ticketing");
}
function success(redirect: string) {
MySwal.fire({
title: "Sukses",
icon: "success",
confirmButtonColor: "#3085d6",
confirmButtonText: "OK",
}).then(() => {
router.push(redirect);
});
}
const handleDelete = (id: any) => {
MySwal.fire({
title: "Hapus Data",
text: "",
icon: "warning",
showCancelButton: true,
cancelButtonColor: "#3085d6",
confirmButtonColor: "#d33",
confirmButtonText: "Hapus",
}).then((result) => {
if (result.isConfirmed) {
doDelete(id);
}
});
};
return (
<div className="py-5">
<div className="mt-4 flex flex-row items-center gap-3">
<Button onClick={handleReply} color="default" variant={"outline"}>
Balas
</Button>
{/* <Button onClick={handleDelete} color="default" variant={"outline"}>
Hapus
</Button> */}
</div>
<div className="flex flex-col md:flex-row lg:flex-row gap-5 mt-5">
<div className="flex flex-col w-[100%] lg:w-[70%]">
{replyVisible && (
<div className="">
<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 my-2">
<Button
onClick={() => setReplyVisible(false)}
color="default"
variant="outline"
>
Batal
</Button>
<Button onClick={handleSendReply} color="primary">
Kirim
</Button>
</div>
</div>
)}
<div className="border rounded-t-xl">
<p className="p-4 bg-slate-300 rounded-t-xl text-lg font-semibold">
Ticket #{detail?.referenceNumber}
</p>
{ticketReply?.map((list) => (
<div key={list.id} className="flex flex-col">
<div className="flex flex-row gap-3 bg-sky-100 p-4 items-center">
<Icon icon="qlementine-icons:user-16" width={36} />
<div>
<p>
<span className="font-bold text-sm">
{list?.user?.fullname}
</span>{" "}
mengirimkan pesan untuk{" "}
<span className="font-bold text-sm">
{list?.messageTo?.fullname}
</span>
</p>
<p className="text-xs">
{`${new Date(list?.createdAt).getDate()}-${
new Date(list?.createdAt).getMonth() + 1
}-${new Date(list?.createdAt).getFullYear()} ${new Date(
list?.createdAt
).getHours()}:${new Date(list?.createdAt).getMinutes()}`}
</p>
</div>
</div>
<p className="p-4 bg-white text-sm">{list.comments}</p>
</div>
))}
{ticketInternal && (
<div key={ticketInternal.id} className="flex flex-col">
<div className="flex flex-row gap-3 bg-sky-100 p-4 items-center">
<Icon icon="qlementine-icons:user-16" width={36} />
<div>
<p>
<span className="font-bold text-sm">
{ticketInternal?.createdBy?.fullname}
</span>{" "}
mengirimkan pesan untuk{" "}
<span className="font-bold text-sm">
{ticketInternal?.sendTo?.fullname}
</span>
</p>
<p className="text-xs">
{`${new Date(ticketInternal?.createdAt).getDate()}-${
new Date(ticketInternal?.createdAt).getMonth() + 1
}-${new Date(
ticketInternal?.createdAt
).getFullYear()} ${new Date(
ticketInternal?.createdAt
).getHours()}:${new Date(
ticketInternal?.createdAt
).getMinutes()}`}
</p>
</div>
</div>
<p className="p-4 bg-white text-sm">
{htmlToString(ticketInternal.message)}
</p>
</div>
)}
</div>
</div>
{detail !== undefined && (
<div className="gap-5 mb-5 w-[100%] lg:w-[30%] border bg-white rounded-md">
<p className="mx-3 mt-3">Properties</p>
<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 className="space-y-2 px-3 py-3">
<Label>Description</Label>
<Controller
control={control}
name="title"
render={({ field }) => (
<Textarea
value={detail?.narration}
onChange={field.onChange}
placeholder="Enter Title"
/>
)}
/>
{/* {errors.title?.message && (
<p className="text-red-400 text-sm">
{errors.title.message}
</p>
)} */}
</div>
</div>
)}
</div>
</div>
);
}

416
components/form/ticketing/ticketing-update-form.tsx Normal file
View File

@ -0,0 +1,416 @@
"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 {
deleteTicket,
getTicketingDetail,
getTicketingInternalDetail,
getTicketingInternalDiscussion,
getTicketingReply,
saveTicketing,
saveTicketInternalReply,
saveTicketReply,
} from "@/service/communication/communication";
import { Icon } from "@iconify/react/dist/iconify.js";
import { list } from "postcss";
import { htmlToString } from "@/utils/globals";
import { Textarea } from "@/components/ui/textarea";
import { error } from "@/lib/swal";
import { useRouter } from "next/navigation";
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;
referenceNumber: string | number;
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;
comments: string;
createdAt: string;
user: {
id: number;
fullname: string;
};
messageTo: {
id: number;
fullname: string;
};
};
export type internalDetail = {
id: number;
message: string;
createdAt: string;
createdBy: {
id: number;
fullname: string;
};
sendTo: {
id: number;
fullname: string;
};
};
export default function FormUpdateTicketing() {
const MySwal = withReactContent(Swal);
const { id } = useParams() as { id: string };
const router = useRouter();
const [detail, setDetail] = useState<taskDetail>();
const [ticketReply, setTicketReply] = useState<replyDetail[]>([]);
const [ticketInternal, setTicketInternal] = useState<internalDetail | null>(
null
);
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);
setTicketInternal(response?.data?.data || null);
setDetail(response?.data?.data);
}
}
initState();
getTicketReply();
}, [id]);
async function getTicketReply() {
const res = await getTicketingReply(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 saveTicketReply(data);
// Tambahkan balasan baru ke daftar balasan
const newReply: replyDetail = {
id: response?.data?.id,
comments: replyMessage,
createdAt: response?.data?.createdAt,
user: 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);
}
};
async function doDelete(id: any) {
const response = await deleteTicket(id);
if (response?.error) {
error(response.message);
return false;
}
success("/in/supervisor/ticketing");
}
function success(redirect: string) {
MySwal.fire({
title: "Sukses",
icon: "success",
confirmButtonColor: "#3085d6",
confirmButtonText: "OK",
}).then(() => {
router.push(redirect);
});
}
const handleDelete = (id: any) => {
MySwal.fire({
title: "Hapus Data",
text: "",
icon: "warning",
showCancelButton: true,
cancelButtonColor: "#3085d6",
confirmButtonColor: "#d33",
confirmButtonText: "Hapus",
}).then((result) => {
if (result.isConfirmed) {
doDelete(id);
}
});
};
return (
<div className="py-5">
<div className="mt-4 flex flex-row items-center gap-3">
<Button onClick={handleReply} color="default" variant={"outline"}>
Balas
</Button>
{/* <Button onClick={handleDelete} color="default" variant={"outline"}>
Hapus
</Button> */}
</div>
<div className="flex flex-col md:flex-row lg:flex-row gap-5 mt-5">
<div className="flex flex-col w-[100%] lg:w-[70%]">
{replyVisible && (
<div className="">
<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 my-2">
<Button
onClick={() => setReplyVisible(false)}
color="default"
variant="outline"
>
Batal
</Button>
<Button onClick={handleSendReply} color="primary">
Kirim
</Button>
</div>
</div>
)}
<div className="border rounded-t-xl">
<p className="p-4 bg-slate-300 rounded-t-xl text-lg font-semibold">
Ticket #{detail?.referenceNumber}
</p>
{ticketReply?.map((list) => (
<div key={list.id} className="flex flex-col">
<div className="flex flex-row gap-3 bg-sky-100 p-4 items-center">
<Icon icon="qlementine-icons:user-16" width={36} />
<div>
<p>
<span className="font-bold text-sm">
{list?.user?.fullname}
</span>{" "}
mengirimkan pesan untuk{" "}
<span className="font-bold text-sm">
{list?.messageTo?.fullname}
</span>
</p>
<p className="text-xs">
{`${new Date(list?.createdAt).getDate()}-${
new Date(list?.createdAt).getMonth() + 1
}-${new Date(list?.createdAt).getFullYear()} ${new Date(
list?.createdAt
).getHours()}:${new Date(list?.createdAt).getMinutes()}`}
</p>
</div>
</div>
<p className="p-4 bg-white text-sm">{list.comments}</p>
</div>
))}
{ticketInternal && (
<div key={ticketInternal.id} className="flex flex-col">
<div className="flex flex-row gap-3 bg-sky-100 p-4 items-center">
<Icon icon="qlementine-icons:user-16" width={36} />
<div>
<p>
<span className="font-bold text-sm">
{ticketInternal?.createdBy?.fullname}
</span>{" "}
mengirimkan pesan untuk{" "}
<span className="font-bold text-sm">
{ticketInternal?.sendTo?.fullname}
</span>
</p>
<p className="text-xs">
{`${new Date(ticketInternal?.createdAt).getDate()}-${
new Date(ticketInternal?.createdAt).getMonth() + 1
}-${new Date(
ticketInternal?.createdAt
).getFullYear()} ${new Date(
ticketInternal?.createdAt
).getHours()}:${new Date(
ticketInternal?.createdAt
).getMinutes()}`}
</p>
</div>
</div>
<p className="p-4 bg-white text-sm">
{htmlToString(ticketInternal.message)}
</p>
</div>
)}
</div>
</div>
{detail !== undefined && (
<div className="gap-5 mb-5 w-[100%] lg:w-[30%] border bg-white rounded-md">
<p className="mx-3 mt-3">Properties</p>
<div className="space-y-2 px-3">
<Label>Judul</Label>
<Controller
control={control}
name="title"
render={({ field }) => (
<Input
size="md"
type="text"
defaultValue={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 className="space-y-2 px-3 py-3">
<Label>Description</Label>
<Controller
control={control}
name="title"
render={({ field }) => (
<Textarea
value={detail?.narration}
onChange={field.onChange}
placeholder="Enter Title"
/>
)}
/>
{/* {errors.title?.message && (
<p className="text-red-400 text-sm">
{errors.title.message}
</p>
)} */}
</div>
<div className="flex justify-end mt-3 mr-3 py-3">
<Button type="submit" color="primary">
Update
</Button>
</div>
</div>
)}
</div>
</div>
);
}

38
components/landing-page/area-coverage-and-work-units.tsx
View File

@ -20,13 +20,13 @@ const AreaCoverageWorkUnits = () => {
useEffect(() => {
if (openPolda || openSatker) {
document.body.style.overflow = "hidden";
document.body.classList.add("overflow-hidden");
} else {
document.body.style.overflow = "";
document.body.classList.remove("overflow-hidden");
}
return () => {
document.body.style.overflow = "";
document.body.classList.remove("overflow-hidden");
};
}, [openPolda, openSatker]);
return (
@ -39,17 +39,25 @@ const AreaCoverageWorkUnits = () => {
<div className="flex flex-col justify-center lg:flex-row gap-8 ">
{/* POLDA */}
<Dialog open={openPolda} onOpenChange={setOpenPolda}>
<DialogTrigger className="flex flex-col gap-2 justify-center items-center shadow-lg group rounded-xl py-5 px-24 border-2 border-transparent hover:border-[#bb3523] transition-all duration-300">
<Image
width={1920}
height={1080}
alt="indo"
src="/assets/indo.png"
className="h-32 w-32 group-hover:scale-110 group-hover:border-[#bb3523] "
/>
<p className="text-base font-bold">Polda Jajaran</p>
<DialogTrigger asChild>
<button
onClick={() => setOpenPolda(true)}
className="flex flex-col gap-2 justify-center items-center shadow-lg group rounded-xl py-5 px-24 border-2 border-transparent hover:border-[#bb3523] transition-all duration-300"
>
<Image
width={1920}
height={1080}
alt="indo"
src="/assets/indo.png"
className="h-32 w-32 group-hover:scale-110 group-hover:border-[#bb3523] "
/>
<p className="text-base font-bold">Polda Jajaran</p>
</button>
</DialogTrigger>
<DialogContent size="md" className="h-[90vh] overflow-y-auto ">
<DialogContent
size="md"
className="max-h-[90vh] overflow-hidden flex flex-col "
>
<DialogHeader className="flex flex-col justify-center">
<DialogTitle>
<p className="text-center">Polda Jajaran</p>
@ -58,11 +66,9 @@ const AreaCoverageWorkUnits = () => {
<div className="h-1 w-[150px] bg-[#bb3523] mx-auto mb-6 rounded"></div>
</DialogTitle>
</DialogHeader>
<div className="max-h-[70vh] overflow-y-auto">
<div className="overflow-y-auto px-1 flex-1">
<Coverage />
</div>
<div className="text-right mt-4">
<DialogClose asChild>
<button className="text-[#bb3523] font-bold">Tutup</button>

270
components/landing-page/coverage.tsx
View File

@ -8,55 +8,183 @@ import { usePathname } from "next/navigation";
import Image from "next/image";
const regions = [
{ name: "Polda Metro Jaya", slug: "metro-jaya", logo: "/logo/polda/polda-metro.png" },
{ name: "Polda Jawa Barat", slug: "jawa-barat", logo: "/logo/polda/polda-jawabarat.png" },
{ name: "Polda Banten", slug: "banten", logo: "/logo/polda/polda-banten.png" },
{ name: "Polda Jawa Tengah", slug: "jawa-tengah", logo: "/logo/polda/polda-jawatengah.png" },
{ name: "Polda D.I Yogyakarta", slug: "di-yogyakarta", logo: "/logo/polda/polda-jogja.png" },
{ name: "Polda Jawa Timur", slug: "jawa-timur", logo: "/logo/polda/polda-jawatimur.png" },
{
name: "Polda Metro Jaya",
slug: "metro-jaya",
logo: "/logo/polda/polda-metro.png",
},
{
name: "Polda Jawa Barat",
slug: "jawa-barat",
logo: "/logo/polda/polda-jawabarat.png",
},
{
name: "Polda Banten",
slug: "banten",
logo: "/logo/polda/polda-banten.png",
},
{
name: "Polda Jawa Tengah",
slug: "jawa-tengah",
logo: "/logo/polda/polda-jawatengah.png",
},
{
name: "Polda D.I Yogyakarta",
slug: "di-yogyakarta",
logo: "/logo/polda/polda-jogja.png",
},
{
name: "Polda Jawa Timur",
slug: "jawa-timur",
logo: "/logo/polda/polda-jawatimur.png",
},
{ name: "Polda Aceh", slug: "aceh", logo: "/logo/polda/polda-aceh.png" },
{ name: "Polda Sumatera Utara", slug: "sumatera-utara", logo: "/logo/polda/polda-sumut.png" },
{ name: "Polda Sumatera Barat", slug: "sumatera-barat", logo: "/logo/polda/polda-sumatera-barat.png" },
{
name: "Polda Sumatera Utara",
slug: "sumatera-utara",
logo: "/logo/polda/polda-sumut.png",
},
{
name: "Polda Sumatera Barat",
slug: "sumatera-barat",
logo: "/logo/polda/polda-sumatera-barat.png",
},
{ name: "Polda Riau", slug: "riau", logo: "/logo/polda/polda-riau.png" },
{ name: "Polda Kep. Riau", slug: "kepulauan-riau", logo: "/logo/polda/polda-kepri.png" },
{
name: "Polda Kep. Riau",
slug: "kepulauan-riau",
logo: "/logo/polda/polda-kepri.png",
},
{ name: "Polda Jambi", slug: "jambi", logo: "/logo/polda/polda-jambi.png" },
{ name: "Polda Sumatera Selatan", slug: "sumatera-selatan", logo: "/logo/polda/polda-sumsel.png" },
{ name: "Polda Kep. Bangka Belitung", slug: "bangka-belitung", logo: "/logo/polda/polda-bangkabelitung.png" },
{ name: "Polda Bengkulu", slug: "bengkulu", logo: "/logo/polda/polda-bengkulu.png" },
{ name: "Polda Lampung", slug: "lampung", logo: "/logo/polda/polda-lampung.png" },
{ name: "Polda Nusa Tenggara Barat", slug: "ntb", logo: "/logo/polda/polda-ntb.png" },
{ name: "Polda Nusa Tenggara Timur", slug: "ntt", logo: "/logo/polda/polda-ntt.png" },
{
name: "Polda Sumatera Selatan",
slug: "sumatera-selatan",
logo: "/logo/polda/polda-sumsel.png",
},
{
name: "Polda Kep. Bangka Belitung",
slug: "bangka-belitung",
logo: "/logo/polda/polda-bangkabelitung.png",
},
{
name: "Polda Bengkulu",
slug: "bengkulu",
logo: "/logo/polda/polda-bengkulu.png",
},
{
name: "Polda Lampung",
slug: "lampung",
logo: "/logo/polda/polda-lampung.png",
},
{
name: "Polda Nusa Tenggara Barat",
slug: "ntb",
logo: "/logo/polda/polda-ntb.png",
},
{
name: "Polda Nusa Tenggara Timur",
slug: "ntt",
logo: "/logo/polda/polda-ntt.png",
},
{ name: "Polda Bali", slug: "bali", logo: "/logo/polda/polda-bali.png" },
{ name: "Polda Kalimantan Barat", slug: "kalimantan-barat", logo: "/logo/polda/polda-kalbar.png" },
{ name: "Polda Kalimantan Tengah", slug: "kalimantan-tengah", logo: "/logo/polda/polda-kalteng.png" },
{ name: "Polda Kalimantan Selatan", slug: "kalimantan-selatan", logo: "/logo/polda/polda-kalsel.png" },
{ name: "Polda Kalimantan Timur", slug: "kalimantan-timur", logo: "/logo/polda/polda-kaltim.png" },
{ name: "Polda Kalimantan Utara", slug: "kaltara", logo: "/logo/polda/polda-kaltara.png" },
{ name: "Polda Sulawesi Tengah", slug: "sulawesi-tengah", logo: "/logo/polda/polda-sulawesi-tengah.png" },
{ name: "Polda Sulawesi Utara", slug: "sulawesi-utara", logo: "/logo/polda/polda-sulawesi-utara.png" },
{ name: "Polda Gorontalo", slug: "gorontalo", logo: "/logo/polda/polda-gorontalo.png" },
{ name: "Polda Sulawesi Barat", slug: "sulawesi-barat", logo: "/logo/polda/polda-sulbar.png" },
{ name: "Polda Sulawesi Selatan", slug: "sulawesi-selatan", logo: "/logo/polda/polda-sulsel.png" },
{ name: "Polda Sulawesi Tenggara", slug: "sulawesi-tenggara", logo: "/logo/polda/polda-sulawesi-tenggara.png" },
{ name: "Polda Maluku Utara", slug: "maluku-utara", logo: "/logo/polda/polda-maluku-utara.png" },
{ name: "Polda Maluku", slug: "maluku", logo: "/logo/polda/polda-maluku.png" },
{ name: "Polda Papua Barat", slug: "papua-barat", logo: "/logo/polda/polda-papua-barat.png" },
{
name: "Polda Kalimantan Barat",
slug: "kalimantan-barat",
logo: "/logo/polda/polda-kalbar.png",
},
{
name: "Polda Kalimantan Tengah",
slug: "kalimantan-tengah",
logo: "/logo/polda/polda-kalteng.png",
},
{
name: "Polda Kalimantan Selatan",
slug: "kalimantan-selatan",
logo: "/logo/polda/polda-kalsel.png",
},
{
name: "Polda Kalimantan Timur",
slug: "kalimantan-timur",
logo: "/logo/polda/polda-kaltim.png",
},
{
name: "Polda Kalimantan Utara",
slug: "kaltara",
logo: "/logo/polda/polda-kaltara.png",
},
{
name: "Polda Sulawesi Tengah",
slug: "sulawesi-tengah",
logo: "/logo/polda/polda-sulawesi-tengah.png",
},
{
name: "Polda Sulawesi Utara",
slug: "sulawesi-utara",
logo: "/logo/polda/polda-sulawesi-utara.png",
},
{
name: "Polda Gorontalo",
slug: "gorontalo",
logo: "/logo/polda/polda-gorontalo.png",
},
{
name: "Polda Sulawesi Barat",
slug: "sulawesi-barat",
logo: "/logo/polda/polda-sulbar.png",
},
{
name: "Polda Sulawesi Selatan",
slug: "sulawesi-selatan",
logo: "/logo/polda/polda-sulsel.png",
},
{
name: "Polda Sulawesi Tenggara",
slug: "sulawesi-tenggara",
logo: "/logo/polda/polda-sulawesi-tenggara.png",
},
{
name: "Polda Maluku Utara",
slug: "maluku-utara",
logo: "/logo/polda/polda-maluku-utara.png",
},
{
name: "Polda Maluku",
slug: "maluku",
logo: "/logo/polda/polda-maluku.png",
},
{
name: "Polda Papua Barat",
slug: "papua-barat",
logo: "/logo/polda/polda-papua-barat.png",
},
{ name: "Polda Papua", slug: "papua", logo: "/logo/polda/polda-papua.png" },
{ name: "Satuan Kerja POLRI", slug: "satker-polri", logo: "/logo/satker/SATUAN-KERJA-POLRI.png" },
{ name: "Internasional", slug: "internasional", logo: "/assets/polda/internasional.png" },
{
name: "Satuan Kerja POLRI",
slug: "satker-polri",
logo: "/logo/satker/SATUAN-KERJA-POLRI.png",
},
{
name: "Internasional",
slug: "internasional",
logo: "/assets/polda/internasional.png",
},
];
const Coverage: React.FC = () => {
const [seeAllValue, setSeeAllValue] = useState(false);
const [searchTerm, setSearchTerm] = useState("");
const [filteredList, setFilteredList] = useState<typeof regions | undefined>(regions);
const [filteredList, setFilteredList] = useState<typeof regions | undefined>(
regions
);
const pathname = usePathname();
const t = useTranslations("LandingPage");
const handleSearch = () => {
const value = searchTerm.toLowerCase();
const filtered = regions.filter((polda) => polda.name.toLowerCase().includes(value));
const filtered = regions.filter((polda) =>
polda.name.toLowerCase().includes(value)
);
setFilteredList(filtered);
};
@ -74,58 +202,38 @@ const Coverage: React.FC = () => {
<animate xlink:href="#r" attributeName="x" from="-${w}" to="${w}" dur="1s" repeatCount="indefinite" />
</svg>`;
const toBase64 = (str: string) => (typeof window === "undefined" ? Buffer.from(str).toString("base64") : window.btoa(str));
const toBase64 = (str: string) =>
typeof window === "undefined"
? Buffer.from(str).toString("base64")
: window.btoa(str);
return (
<div className="w-full">
{/* Header */}
{/* <h2 className="text-center text-2xl font-bold text-gray-800 dark:text-white mb-4">
{pathname?.split("/")[1] == "in" ? (
<>
{t("coverageOnly")}&nbsp;<span className="text-[#bb3523]">{t("area")}</span>{" "}
</>
) : (
<>
{t("area")}&nbsp;
<span className="text-[#bb3523]">{t("coverageOnly")}</span>
</>
)}
</h2> */}
{/* <h2 className="text-center text-2xl font-bold text-gray-800 dark:text-white mb-4">
Liputan <span className="text-[#bb3523]">Wilayah</span>
</h2> */}
{/* <div className="h-1 w-48 bg-[#bb3523] mx-auto mb-6 rounded"></div> */}
{/* Pencarian */}
{/* <div className="flex items-center justify-center gap-4 mb-6">
<input onChange={(e) => setSearchTerm(e.target.value)} type="text" placeholder={t("search")} className="w-4/5 px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-[#bb3523] focus:outline-none" />
<button onClick={handleSearch} className="px-2 w-1/5 lg:px-4 py-2 bg-[#bb3523] text-xs lg:text-base text-white flex justify-center items-center gap-2 rounded-md hover:bg-red-700">
{t("searchRegional")}
<Icon icon="ri:arrow-right-s-line" fontSize={20} />
</button>
</div> */}
{/* Grid Wilayah */}
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-6 overflow-y-auto px-4 max-h-[60vh]">
{filteredList?.map((region: any) => (
<Link key={region.slug} href={`/polda/${region.slug}`} className="flex flex-col items-center text-center p-3 border rounded-lg shadow-md hover:shadow-lg transition-all">
<div className="mb-1 flex items-center justify-center">
<Image placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`} width={1920} height={1080} src={region.logo} alt={region.name} className="w-14 h-14 object-contain" />
</div>
<p className="text-xs font-semibold">{region.name}</p>
</Link>
))}
</div>
{/* {filteredList && filteredList.length > 9 && (
<div className="flex justify-center py-5">
<Button onClick={() => setSeeAllValue(!seeAllValue)} className="bg-white hover:bg-[#bb3523] text-[#bb3523] hover:text-white border-2 border-[#bb3523]">
{seeAllValue ? t("seeLess") : t("seeMore")}
</Button>
<div className="max-h-[60vh] overflow-y-auto px-4">
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-6 px-4 max-h-[60vh]">
{filteredList?.map((region: any) => (
<Link
key={region.slug}
href={`/polda/${region.slug}`}
className="flex flex-col items-center text-center p-3 border rounded-lg shadow-md hover:shadow-lg transition-all"
>
<div className="mb-1 flex items-center justify-center">
<Image
placeholder={`data:image/svg+xml;base64,${toBase64(
shimmer(700, 475)
)}`}
width={1920}
height={1080}
src={region.logo}
alt={region.name}
className="w-14 h-14 object-contain"
/>
</div>
<p className="text-xs font-semibold">{region.name}</p>
</Link>
))}
</div>
)} */}
</div>
</div>
);
};

94
components/page-title.tsx
View File

@ -15,7 +15,10 @@ import { Button } from "./ui/button";
import { Label } from "./ui/label";
import { Input } from "./ui/input";
import pdfGenerator from "@/utils/pdf-generator";
import { tableauSignin, tableauViewImage } from "@/service/tableau/tableau-service";
import {
tableauSignin,
tableauViewImage,
} from "@/service/tableau/tableau-service";
const PageTitle = ({
title,
@ -24,7 +27,6 @@ const PageTitle = ({
title?: string;
className?: string;
}) => {
const [reportDate, setReportDate] = useState<any>();
const pathname = usePathname();
const name = pathname?.split("/").slice(1).join(" ");
@ -113,19 +115,45 @@ const PageTitle = ({
"516c8790-ccd5-44dc-bb66-b0e146d7168b",
reportDate
);
const blobFrontCover = new Blob([resFrontCover.data], { type: "image/png" });
const blobAssignmentDetail = new Blob([resAssignmentDetail.data], { type: "image/png" });
const blobFrontCover = new Blob([resFrontCover.data], {
type: "image/png",
});
const blobAssignmentDetail = new Blob([resAssignmentDetail.data], {
type: "image/png",
});
// const blobMonitoringContent = new Blob([resMonitoringContent.data], { type: "image/png" });
// const blobMonitoringArticle = new Blob([resMonitoringArticle.data], { type: "image/png" });
const blobInteractionContent = new Blob([resInteractionContent.data], { type: "image/png" });
const blobTotalInteractionContent = new Blob([resTotalInteractionContent.data], { type: "image/png" });
const blobInteractionContentCategory1 = new Blob([resInteractionContentCategory1.data], { type: "image/png" });
const blobInteractionContentCategory2 = new Blob([resInteractionContentCategory2.data], { type: "image/png" });
const blobInteractionContentCategory3 = new Blob([resInteractionContentCategory3.data], { type: "image/png" });
const blobInteractionDistribution = new Blob([resInteractionDistribution.data], { type: "image/png" });
const blobAssignments = new Blob([resAssignments.data], { type: "image/png" });
const blobInteractionContent = new Blob([resInteractionContent.data], {
type: "image/png",
});
const blobTotalInteractionContent = new Blob(
[resTotalInteractionContent.data],
{ type: "image/png" }
);
const blobInteractionContentCategory1 = new Blob(
[resInteractionContentCategory1.data],
{ type: "image/png" }
);
const blobInteractionContentCategory2 = new Blob(
[resInteractionContentCategory2.data],
{ type: "image/png" }
);
const blobInteractionContentCategory3 = new Blob(
[resInteractionContentCategory3.data],
{ type: "image/png" }
);
const blobInteractionDistribution = new Blob(
[resInteractionDistribution.data],
{ type: "image/png" }
);
const blobAssignments = new Blob([resAssignments.data], {
type: "image/png",
});
const blobUserCount = new Blob([resUserCount.data], { type: "image/png" });
const blobUserCountDistribution = new Blob([resUserCountDistribution.data], { type: "image/png" });
const blobUserCountDistribution = new Blob(
[resUserCountDistribution.data],
{ type: "image/png" }
);
const blobBackCover = new Blob([resBackCover.data], { type: "image/png" });
console.log(blobFrontCover);
@ -144,14 +172,14 @@ const PageTitle = ({
blobAssignments,
blobUserCount,
blobUserCountDistribution,
blobBackCover
blobBackCover,
]);
};
async function mergeImagesToCanvas(blobs: Blob[]) {
try {
const images = await Promise.all(
blobs.map(blob => {
blobs.map((blob) => {
return new Promise<HTMLImageElement>((resolve) => {
const url = URL.createObjectURL(blob);
const img = new Image();
@ -163,38 +191,37 @@ const PageTitle = ({
});
})
);
// Hitung total tinggi dari semua gambar (stacked vertically)
const width = Math.max(...images.map(img => img.width));
const width = Math.max(...images.map((img) => img.width));
const height = images.reduce((sum, img) => sum + img.height, 0);
const canvas = document.getElementById('pdf-canvas') as HTMLCanvasElement;
const ctx = canvas.getContext('2d')!;
const canvas = document.getElementById("pdf-canvas") as HTMLCanvasElement;
const ctx = canvas.getContext("2d")!;
canvas.width = width;
canvas.height = height;
let y = 0;
for (const img of images) {
ctx.drawImage(img, 0, y, img.width, img.height);
y += img.height;
}
// Simpan hasil sebagai gambar (PNG) atau bisa print
const dataURL = canvas.toDataURL('image/png');
const dataURL = canvas.toDataURL("image/png");
// Simpan atau cetak (print sebagai PDF)
const link = document.createElement('a');
const link = document.createElement("a");
link.href = dataURL;
link.download = 'merged-image.png';
link.download = "merged-image.png";
link.click();
// Atau tampilkan dan user bisa "Print to PDF"
window.open(dataURL, '_blank');
window.open(dataURL, "_blank");
} catch (error) {
console.log("Error :::", error)
console.log("Error :::", error);
}
}
return Number(roleId) == 2 || Number(roleId) == 11 || Number(roleId) == 12 ? (
""
@ -208,7 +235,7 @@ const PageTitle = ({
<div className="text-2xl font-medium text-default-800 capitalize">
Dashboard
</div>
<Dialog>
{/* <Dialog>
<DialogTrigger asChild>
<Button variant="outline">Download Report</Button>
</DialogTrigger>
@ -229,15 +256,12 @@ const PageTitle = ({
</div>
</div>
<DialogFooter>
<Button
type="submit"
onClick={downloadReport}
>
<Button type="submit" onClick={downloadReport}>
Download
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
</Dialog> */}
</div>
);
};

2
lib/menus.ts
View File

@ -2703,7 +2703,7 @@ export function getMenuList(pathname: string, t: any): Group[] {
id: "faq",
href: "/supervisor/faq",
label: t("faq"),
active: pathname.includes("/frequently-asked-question"),
active: pathname.includes("/faq"),
icon: "wpf:faq",
submenus: [],
},

17
service/communication/communication.ts
View File

@ -9,7 +9,7 @@ export async function listTicketingInternal(
page: number,
size: any,
title: string = "",
category: any = "",
category: any = ""
) {
return await httpGetInterceptor(
`ticketing/internal/pagination?enablePage=1&size=${size}&page=${page}&title=${title}&category=${category}`
@ -54,6 +54,16 @@ export async function saveTicketing(data: any) {
return httpPostInterceptor(url, data);
}
export async function saveTicketReply(data: any) {
const url = "ticketing/reply";
return httpPostInterceptor(url, data);
}
export async function deleteTicket(id: any) {
const url = `ticketing?id=${id}`;
return httpDeleteInterceptor(url, id);
}
export async function getTicketingInternalDetail(id: any) {
const url = `ticketing/internal?id=${id}`;
return httpGetInterceptor(url);
@ -74,6 +84,11 @@ export async function getTicketingDetail(id: any) {
return httpGetInterceptor(url);
}
export async function getTicketingReply(id: any) {
const url = `ticketing/reply?ticketId=${id}`;
return httpGetInterceptor(url);
}
export async function getTicketCollaborationTeams(id: string | number) {
const url = `ticketing/collaboration/teams?ticketId=${id}`;
return httpGetInterceptor(url);

10
service/master/knowledge-base.ts
View File

@ -1,4 +1,5 @@
import {
httpDeleteInterceptor,
httpGetInterceptor,
httpPostInterceptor,
} from "../http-config/http-interceptor-service";
@ -14,6 +15,11 @@ export async function getKnowledgeBaseList(id: number) {
}
export async function saveKnowledgeBaseCategory(data: any) {
const url = 'knowledge-base/category';
const url = "knowledge-base/category";
return httpPostInterceptor(url, data);
}
}
export async function deleteKnowledgeBase(id: any) {
const url = `knowledge-base?id=${id}`;
return httpDeleteInterceptor(url);
}