diff --git a/app/[locale]/(protected)/shared/communication/collaboration/components/collabroation-table.tsx b/app/[locale]/(protected)/shared/communication/collaboration/components/collabroation-table.tsx index d778a510..719a3ca8 100644 --- a/app/[locale]/(protected)/shared/communication/collaboration/components/collabroation-table.tsx +++ b/app/[locale]/(protected)/shared/communication/collaboration/components/collabroation-table.tsx @@ -64,7 +64,7 @@ import { listTicketingInternal, } from "@/service/communication/communication"; -const EscalationTable = () => { +const CollaborationTable = () => { const router = useRouter(); const searchParams = useSearchParams(); @@ -254,4 +254,4 @@ const EscalationTable = () => { ); }; -export default EscalationTable; +export default CollaborationTable; diff --git a/app/[locale]/(protected)/shared/communication/internal/components/internal-table.tsx b/app/[locale]/(protected)/shared/communication/internal/components/internal-table.tsx index 859559c4..86480b65 100644 --- a/app/[locale]/(protected)/shared/communication/internal/components/internal-table.tsx +++ b/app/[locale]/(protected)/shared/communication/internal/components/internal-table.tsx @@ -62,7 +62,7 @@ import { import { listTicketingInternal } from "@/service/communication/communication"; import { Link } from "@/components/navigation"; -const TableAudio = () => { +const InternalTable = () => { const router = useRouter(); const searchParams = useSearchParams(); @@ -260,4 +260,4 @@ const TableAudio = () => { ); }; -export default TableAudio; +export default InternalTable; diff --git a/app/[locale]/(protected)/shared/communication/page.tsx b/app/[locale]/(protected)/shared/communication/page.tsx index c45afc38..393e33e4 100644 --- a/app/[locale]/(protected)/shared/communication/page.tsx +++ b/app/[locale]/(protected)/shared/communication/page.tsx @@ -1,7 +1,6 @@ "use client"; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; -import InternalTable from "./internal/components/internal-table"; import SiteBreadcrumb from "@/components/site-breadcrumb"; import CollaborationTable from "./collaboration/components/collabroation-table"; @@ -10,6 +9,7 @@ import { useState } from "react"; import { Link, useRouter } from "@/i18n/routing"; import { PlusIcon } from "lucide-react"; import { Button } from "@/components/ui/button"; +import InternalTable from "./internal/components/internal-table"; const CommunicationPage = () => { const [tab, setTab] = useState("Komunikasi"); diff --git a/app/[locale]/(protected)/supervisor/communications/internal/components/table.tsx b/app/[locale]/(protected)/supervisor/communications/collaboration/components/collabroation-table.tsx similarity index 62% rename from app/[locale]/(protected)/supervisor/communications/internal/components/table.tsx rename to app/[locale]/(protected)/supervisor/communications/collaboration/components/collabroation-table.tsx index b8a5f027..3827d234 100644 --- a/app/[locale]/(protected)/supervisor/communications/internal/components/table.tsx +++ b/app/[locale]/(protected)/supervisor/communications/collaboration/components/collabroation-table.tsx @@ -36,22 +36,35 @@ import { TrendingDown, TrendingUp, } from "lucide-react"; -import { cn } from "@/lib/utils"; +import { cn, getCookiesDecrypt } from "@/lib/utils"; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, + DropdownMenuRadioGroup, + DropdownMenuRadioItem, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"; import { Input } from "@/components/ui/input"; import { InputGroup, InputGroupText } from "@/components/ui/input-group"; +import { paginationBlog } from "@/service/blog/blog"; +import { ticketingPagination } from "@/service/ticketing/ticketing"; import { Badge } from "@/components/ui/badge"; import { useRouter, useSearchParams } from "next/navigation"; import TablePagination from "@/components/table/table-pagination"; -import { getFaqList } from "@/service/master/faq"; -import columns from "./column"; +import columns from "./columns"; +import { + listDataAudio, + listDataImage, + listDataVideo, +} from "@/service/content/content"; +import { + getTicketingCollaborationPagination, + getTicketingEscalationPagination, + listTicketingInternal, +} from "@/service/communication/communication"; -const FaqTable = () => { +const CollaborationSpvTable = () => { const router = useRouter(); const searchParams = useSearchParams(); @@ -64,13 +77,17 @@ const FaqTable = () => { const [columnVisibility, setColumnVisibility] = React.useState({}); const [rowSelection, setRowSelection] = React.useState({}); + const [showData, setShowData] = React.useState("10"); + const [pagination, setPagination] = React.useState({ pageIndex: 0, - pageSize: 10, + pageSize: Number(showData), }); const [page, setPage] = React.useState(1); const [totalPage, setTotalPage] = React.useState(1); - const [limit, setLimit] = React.useState(10); + const [search, setSearch] = React.useState(""); + + const roleId = getCookiesDecrypt("urie"); const table = useReactTable({ data: dataTable, @@ -94,62 +111,99 @@ const FaqTable = () => { }); React.useEffect(() => { - const pageFromUrl = searchParams?.get('page'); + const pageFromUrl = searchParams?.get("page"); if (pageFromUrl) { setPage(Number(pageFromUrl)); } - }, [searchParams]); + }, [searchParams]); React.useEffect(() => { fetchData(); - }, [page, limit]); + }, [page, showData]); + + let typingTimer: any; + const doneTypingInterval = 1500; + + const handleKeyUp = () => { + clearTimeout(typingTimer); + typingTimer = setTimeout(doneTyping, doneTypingInterval); + }; + + const handleKeyDown = () => { + clearTimeout(typingTimer); + }; + + async function doneTyping() { + fetchData(); + } async function fetchData() { try { - const res = await getFaqList(); - const contentData = res?.data?.data; + const res = await getTicketingCollaborationPagination( + page - 1, + showData, + search + ); + const data = res?.data?.data; + const contentData = data?.content; contentData.forEach((item: any, index: number) => { - item.no = (page - 1) * limit + index + 1; + item.no = (page - 1) * Number(showData) + index + 1; }); - console.log("contentData : ", contentData); - setDataTable(contentData); - setTotalData(contentData?.totalElements || contentData?.length); - setTotalPage(contentData?.totalPages || 1); + setTotalData(data?.totalElements); + setTotalPage(data?.totalPages); } catch (error) { console.error("Error fetching tasks:", error); } } - return (
-
-
+
+
setSearch(e.target.value)} + onKeyDown={handleKeyDown} + onKeyUp={handleKeyUp} />
-
- ) => - table.getColumn("status")?.setFilterValue(event.target.value) - } - className="max-w-sm " - /> -
+ + + + + + + + 1 - 10 Data + + + 1 - 20 Data + + + 1 - 25 Data + + + 1 - 50 Data + + + +
+ {table.getHeaderGroups().map((headerGroup) => ( @@ -191,9 +245,13 @@ const FaqTable = () => { )}
- +
); }; -export default FaqTable; +export default CollaborationSpvTable; diff --git a/app/[locale]/(protected)/supervisor/communications/collaboration/components/column.tsx b/app/[locale]/(protected)/supervisor/communications/collaboration/components/column.tsx deleted file mode 100644 index ee7f653b..00000000 --- a/app/[locale]/(protected)/supervisor/communications/collaboration/components/column.tsx +++ /dev/null @@ -1,76 +0,0 @@ - -import * as React from "react"; -import { - ColumnDef, -} from "@tanstack/react-table"; - -import { - Eye, - MoreVertical, - SquarePen, - Trash2, -} from "lucide-react"; -import { cn } from "@/lib/utils"; -import { - DropdownMenu, - DropdownMenuContent, - DropdownMenuTrigger, - DropdownMenuItem, -} from "@/components/ui/dropdown-menu"; -import { Button } from "@/components/ui/button"; -import { Badge } from "@/components/ui/badge"; - -const columns: ColumnDef[] = [ - { - accessorKey: "no", - header: "No", - cell: ({ row }) => {row.getValue("no")}, - }, - { - accessorKey: "question", - header: "Question", - cell: ({ row }) => {row.getValue("question")}, - }, - { - accessorKey: "answer", - header: "Answer", - cell: ({ row }) => {row.getValue("answer")}, - }, - { - id: "actions", - accessorKey: "action", - header: "Actions", - enableHiding: false, - cell: ({ row }) => { - return ( - - - - - - - - View - - - - Edit - - - - Delete - - - - ); - }, - }, -]; - -export default columns; \ No newline at end of file diff --git a/app/[locale]/(protected)/supervisor/communications/collaboration/components/columns.tsx b/app/[locale]/(protected)/supervisor/communications/collaboration/components/columns.tsx new file mode 100644 index 00000000..bf46ca80 --- /dev/null +++ b/app/[locale]/(protected)/supervisor/communications/collaboration/components/columns.tsx @@ -0,0 +1,114 @@ +import * as React from "react"; +import { ColumnDef } from "@tanstack/react-table"; + +import { Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react"; +import { cn } from "@/lib/utils"; +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuTrigger, + DropdownMenuItem, +} from "@/components/ui/dropdown-menu"; +import { Button } from "@/components/ui/button"; +import { Badge } from "@/components/ui/badge"; +import { format } from "date-fns"; +import { Link, useRouter } from "@/i18n/routing"; + +const columns: ColumnDef[] = [ + { + accessorKey: "no", + header: "Nos", + cell: ({ row }) => {row.getValue("no")}, + }, + { + accessorKey: "title", + header: "Pertanyaan", + cell: ({ row }) => ( + {row.getValue("title")} + ), + }, + { + accessorKey: "commentFromUserName", + header: "CreateBy", + cell: ({ row }) => ( + {row.getValue("commentFromUserName")} + ), + }, + { + accessorKey: "Type", + header: "Channel", + cell: ({ row }) => { + const type = row.original.type; + return {type?.name || "N/A"}; + }, + }, + { + accessorKey: "createdAt", + header: "Waktu", + cell: ({ row }) => { + const createdAt = row.getValue("createdAt") as + | string + | number + | undefined; + + const formattedDate = + createdAt && !isNaN(new Date(createdAt).getTime()) + ? format(new Date(createdAt), "dd-MM-yyyy HH:mm:ss") + : "-"; + return {formattedDate}; + }, + }, + { + accessorKey: "isActive", + header: "Status", + cell: ({ row }) => { + const isActive = row.getValue("isActive") as boolean; // Ambil nilai isActive + const status = isActive ? "Open" : "Closed"; // Tentukan teks berdasarkan isActive + const statusStyles = isActive + ? "bg-green-100 text-green-600" // Gaya untuk "Open" + : "bg-red-100 text-red-600"; // Gaya untuk "Closed" + + return ( + {status} + ); + }, + }, + + { + id: "actions", + accessorKey: "action", + header: "Actions", + enableHiding: false, + cell: ({ row }) => { + const router = useRouter(); + return ( + + + + + + + router.push( + `/supervisor/communications/forward/detail/${row.original.id}` + ) + } + className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none items-center" + > + + Detail + + + + ); + }, + }, +]; + +export default columns; diff --git a/app/[locale]/(protected)/supervisor/communications/collaboration/create/page.tsx b/app/[locale]/(protected)/supervisor/communications/collaboration/create/page.tsx new file mode 100644 index 00000000..259779ac --- /dev/null +++ b/app/[locale]/(protected)/supervisor/communications/collaboration/create/page.tsx @@ -0,0 +1,15 @@ +import SiteBreadcrumb from "@/components/site-breadcrumb"; +import FormCollaboration from "@/components/form/communication/collaboration-form"; + +const CollaborationCreatePage = () => { + return ( +
+ +
+ +
+
+ ); +}; + +export default CollaborationCreatePage; diff --git a/app/[locale]/(protected)/supervisor/communications/collaboration/detail/[id]/component/users-card.tsx b/app/[locale]/(protected)/supervisor/communications/collaboration/detail/[id]/component/users-card.tsx new file mode 100644 index 00000000..53c2db0c --- /dev/null +++ b/app/[locale]/(protected)/supervisor/communications/collaboration/detail/[id]/component/users-card.tsx @@ -0,0 +1,143 @@ +"use client"; +import { Button } from "@/components/ui/button"; +import Select, { MultiValue } from "react-select"; + +import { Icon } from "@iconify/react/dist/iconify.js"; +import { useEffect, useState } from "react"; +import { Separator } from "@/components/ui/separator"; +import { + getCuratorUser, + saveCollaborationTeams, +} from "@/service/communication/communication"; +import Swal from "sweetalert2"; +import withReactContent from "sweetalert2-react-content"; +import { close, loading } from "@/config/swal"; +import { useParams } from "next/navigation"; +import { useToast } from "@/components/ui/use-toast"; +import { stringify } from "querystring"; + +const assigneeOptions = [ + { value: "mahedi", label: "Mahedi Amin", image: "/images/avatar/av-1.svg" }, + { value: "sovo", label: "Sovo Haldar", image: "/images/avatar/av-2.svg" }, + { + value: "rakibul", + label: "Rakibul Islam", + image: "/images/avatar/av-3.svg", + }, + { value: "pritom", label: "Pritom Miha", image: "/images/avatar/av-4.svg" }, +]; +export default function UsersCard(props: { team: any; fetchData: () => void }) { + const params = useParams(); + const id = params?.id; + const [openSearch, setOpenSearch] = useState(false); + const [selectedUsers, setSelectedUsers] = useState([]); + const [allUser, setAllUser] = useState([]); + const MySwal = withReactContent(Swal); + const { toast } = useToast(); + + useEffect(() => { + async function getUser() { + const res = await getCuratorUser(); + + if (res?.data !== null) { + const rawUser = res?.data?.data?.content; + const optionArr: any = []; + + rawUser.map((option: any) => { + optionArr.push({ + id: option.id, + label: option.username, + value: option.id, + }); + }); + + setAllUser(optionArr); + } + } + getUser(); + }, []); + + const inviteHandle = () => { + MySwal.fire({ + title: "Undang Pengguna Ke Kolom Diskusi?", + text: "", + icon: "warning", + showCancelButton: true, + cancelButtonColor: "#d33", + confirmButtonColor: "#3085d6", + confirmButtonText: "Simpan", + }).then((result) => { + if (result.isConfirmed) { + inviteUser(); + } + }); + }; + + async function inviteUser() { + const userId: any = []; + + selectedUsers?.map((user: any) => { + userId.push(user.id); + }); + loading(); + const res = await saveCollaborationTeams(String(id), userId); + + if (res?.error) { + toast({ title: stringify(res?.message) }); + return false; + } + close(); + + toast({ title: "Berhasil menambahkan user" }); + props.fetchData(); + } + + return ( +
+
+
+

Kolaborator

+

+ {props?.team?.length} +

+
+ setOpenSearch(!openSearch)}> + + +
+ {openSearch && ( +
+