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

feat:ui communication spv

This commit is contained in:
Anang Yusman 2025-03-23 15:57:45 +08:00
parent 5838724a58
commit d3c2c8e767
16 changed files with 1600 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,15 +1,7 @@
import * as React from "react";
import {
ColumnDef,
} from "@tanstack/react-table";
import { ColumnDef } from "@tanstack/react-table";
import {
Eye,
MoreVertical,
SquarePen,
Trash2,
} from "lucide-react";
import { Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react";
import { cn } from "@/lib/utils";
import {
DropdownMenu,
@ -27,50 +19,60 @@ const columns: ColumnDef<any>[] = [
cell: ({ row }) => <span>{row.getValue("no")}</span>,
},
{
accessorKey: "question",
header: "Question",
cell: ({ row }) => <span>{row.getValue("question")}</span>,
accessorKey: "report",
header: "Pelapor",
cell: ({ row }) => <span>{row.getValue("report")}</span>,
},
{
accessorKey: "answer",
header: "Answer",
cell: ({ row }) => <span>{row.getValue("answer")}</span>,
accessorKey: "reportDetail",
header: "Detail Laporan",
cell: ({ row }) => <span>{row.getValue("reportDetail")}</span>,
},
{
id: "actions",
accessorKey: "action",
header: "Actions",
enableHiding: false,
cell: ({ row }) => {
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button
size="icon"
className="bg-transparent ring-offset-transparent hover:bg-transparent hover:ring-0 hover:ring-transparent"
>
<span className="sr-only">Open menu</span>
<MoreVertical className="h-4 w-4 text-default-800" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="p-0" align="end">
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
<Eye className="w-4 h-4 me-1.5" />
View
</DropdownMenuItem>
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
<SquarePen className="w-4 h-4 me-1.5" />
Edit
</DropdownMenuItem>
<DropdownMenuItem className="p-2 border-b text-destructive bg-destructive/30 focus:bg-destructive focus:text-destructive-foreground rounded-none">
<Trash2 className="w-4 h-4 me-1.5" />
Delete
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
);
},
accessorKey: "reportAccount",
header: "Terlapor",
cell: ({ row }) => <span>{row.getValue("reportAccount")}</span>,
},
{
accessorKey: "status",
header: "Status",
cell: ({ row }) => <span>{row.getValue("status")}</span>,
},
// {
// id: "actions",
// accessorKey: "action",
// header: "Actions",
// enableHiding: false,
// cell: ({ row }) => {
// return (
// <DropdownMenu>
// <DropdownMenuTrigger asChild>
// <Button
// size="icon"
// className="bg-transparent ring-offset-transparent hover:bg-transparent hover:ring-0 hover:ring-transparent"
// >
// <span className="sr-only">Open menu</span>
// <MoreVertical className="h-4 w-4 text-default-800" />
// </Button>
// </DropdownMenuTrigger>
// <DropdownMenuContent className="p-0" align="end">
// <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
// <Eye className="w-4 h-4 me-1.5" />
// View
// </DropdownMenuItem>
// <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
// <SquarePen className="w-4 h-4 me-1.5" />
// Edit
// </DropdownMenuItem>
// <DropdownMenuItem className="p-2 border-b text-destructive bg-destructive/30 focus:bg-destructive focus:text-destructive-foreground rounded-none">
// <Trash2 className="w-4 h-4 me-1.5" />
// Delete
// </DropdownMenuItem>
// </DropdownMenuContent>
// </DropdownMenu>
// );
// },
// },
];
export default columns;
export default columns;

15
app/[locale]/(protected)/supervisor/communications/account-report/components/table.tsx
View File

@ -51,7 +51,7 @@ import TablePagination from "@/components/table/table-pagination";
import { getFaqList } from "@/service/master/faq";
import columns from "./column";
const FaqTable = () => {
const ReportTable = () => {
const router = useRouter();
const searchParams = useSearchParams();
@ -94,11 +94,11 @@ const FaqTable = () => {
});
React.useEffect(() => {
const pageFromUrl = searchParams?.get('page');
const pageFromUrl = searchParams?.get("page");
if (pageFromUrl) {
setPage(Number(pageFromUrl));
}
}, [searchParams]);
}, [searchParams]);
React.useEffect(() => {
fetchData();
@ -191,9 +191,14 @@ const FaqTable = () => {
)}
</TableBody>
</Table>
<TablePagination table={table} totalData={totalData} totalPage={totalPage} visiblePageCount={5} />
<TablePagination
table={table}
totalData={totalData}
totalPage={totalPage}
visiblePageCount={5}
/>
</div>
);
};
export default FaqTable;
export default ReportTable;

49
app/[locale]/(protected)/supervisor/communications/account-report/page.tsx
View File

@ -3,35 +3,44 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import FaqTable from "./components/table";
import { Button } from "@/components/ui/button";
import { Plus } from "lucide-react";
import { StatisticsBlock } from "@/components/blocks/statistics-block";
import ReportTable from "./components/table";
const FaqPage = async () => {
return (
<div>
<SiteBreadcrumb />
<div className="space-y-4">
<div className="flex items-center">
<div className="flex-1 text-xl font-medium text-default-900">
Pelaporan Akun
</div>
<div className="flex-none"></div>
</div>
<Card>
<CardHeader className="border-b border-solid border-default-200 mb-6">
<CardTitle>
<div className="flex items-center">
<div className="flex-1 text-xl font-medium text-default-900">
FAQ Data
</div>
<div className="flex-none">
<Button
fullWidth
size="md"
>
<Plus className="w-6 h-6 me-1.5"/>
New FAQ
</Button>
</div>
</div>
</CardTitle>
</CardHeader>
<CardContent className="p-0">
<FaqTable />
<CardContent className="p-4">
<div className="grid md:grid-cols-3 gap-4">
<StatisticsBlock
total="64"
title="Total Pelaporan"
className=" border shadow-none"
/>
<StatisticsBlock
title="Total Disetujui"
total="564"
className=" border shadow-none"
chartColor="#FB8F65"
/>
<StatisticsBlock
title="Pelaporan Pending"
total="+5.0%"
className=" border shadow-none"
chartColor="#2563eb"
/>
</div>
</CardContent>
</Card>
<ReportTable />
</div>
</div>
);

109
app/[locale]/(protected)/supervisor/communications/contact/components/columns.tsx Normal file
View File

@ -0,0 +1,109 @@
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 } from "@/components/navigation";
const columns: ColumnDef<any>[] = [
{
accessorKey: "no",
header: "No",
cell: ({ row }) => <span> {row.getValue("no")}</span>,
},
{
accessorKey: "title",
header: "Nama",
cell: ({ row }) => (
<span className="normal-case"> {row.getValue("title")}</span>
),
},
{
accessorKey: "phoneNumber",
header: "No.Telp",
cell: ({ row }) => {
const createdBy = row.original.createdBy; // Akses properti category
return (
<span className="normal-case">{createdBy?.fullname || "N/A"}</span>
);
},
},
{
accessorKey: "email",
header: "Email",
cell: ({ row }) => {
const sendTo = row.original.sendTo; // Akses properti category
return <span className="normal-case">{sendTo?.fullname || "N/A"}</span>;
},
},
{
accessorKey: "createdName",
header: "Admin",
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 <span className="whitespace-nowrap">{formattedDate}</span>;
},
},
// {
// id: "actions",
// accessorKey: "action",
// header: "Actions",
// enableHiding: false,
// cell: ({ row }) => {
// return (
// <DropdownMenu>
// <DropdownMenuTrigger asChild>
// <Button
// size="icon"
// className="bg-transparent ring-offset-transparent hover:bg-transparent hover:ring-0 hover:ring-transparent"
// >
// <span className="sr-only">Open menu</span>
// <MoreVertical className="h-4 w-4 text-default-800" />
// </Button>
// </DropdownMenuTrigger>
// <DropdownMenuContent className="p-0" align="end">
// <Link
// href={`/supervisor/communications/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>
// <Link
// href={`/supervisor/communications/internal/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 className="p-2 border-b text-destructive bg-destructive/30 focus:bg-destructive focus:text-destructive-foreground rounded-none">
// <Trash2 className="w-4 h-4 me-1.5" />
// Delete
// </DropdownMenuItem>
// </DropdownMenuContent>
// </DropdownMenu>
// );
// },
// },
];
export default columns;

299
app/[locale]/(protected)/supervisor/communications/contact/components/contact-table.tsx Normal file
View File

@ -0,0 +1,299 @@
"use client";
import * as React from "react";
import {
ColumnDef,
ColumnFiltersState,
PaginationState,
SortingState,
VisibilityState,
flexRender,
getCoreRowModel,
getFilteredRowModel,
getPaginationRowModel,
getSortedRowModel,
useReactTable,
} from "@tanstack/react-table";
import { Button } from "@/components/ui/button";
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "@/components/ui/table";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import {
ChevronLeft,
ChevronRight,
Eye,
MoreVertical,
Search,
SquarePen,
Trash2,
TrendingDown,
TrendingUp,
UploadIcon,
} from "lucide-react";
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 columns from "./columns";
import {
listDataAudio,
listDataImage,
listDataVideo,
} from "@/service/content/content";
import { listTicketingInternal } from "@/service/communication/communication";
import { Link } from "@/components/navigation";
import { Card } from "nextra-theme-docs";
import { CardContent } from "@/components/ui/card";
const ContactTable = () => {
const router = useRouter();
const searchParams = useSearchParams();
const [dataTable, setDataTable] = React.useState<any[]>([]);
const [totalData, setTotalData] = React.useState<number>(1);
const [sorting, setSorting] = React.useState<SortingState>([]);
const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
[]
);
const [columnVisibility, setColumnVisibility] =
React.useState<VisibilityState>({});
const [rowSelection, setRowSelection] = React.useState({});
const [showData, setShowData] = React.useState("10");
const [pagination, setPagination] = React.useState<PaginationState>({
pageIndex: 0,
pageSize: Number(showData),
});
const [page, setPage] = React.useState(1);
const [totalPage, setTotalPage] = React.useState(1);
const [search, setSearch] = React.useState<string>("");
const userId = getCookiesDecrypt("uie");
const userLevelId = getCookiesDecrypt("ulie");
const [activeCategory, setActiveCategory] = React.useState<string | null>(
null
);
const roleId = getCookiesDecrypt("urie");
const table = useReactTable({
data: dataTable,
columns,
onSortingChange: setSorting,
onColumnFiltersChange: setColumnFilters,
getCoreRowModel: getCoreRowModel(),
getPaginationRowModel: getPaginationRowModel(),
getSortedRowModel: getSortedRowModel(),
getFilteredRowModel: getFilteredRowModel(),
onColumnVisibilityChange: setColumnVisibility,
onRowSelectionChange: setRowSelection,
onPaginationChange: setPagination,
state: {
sorting,
columnFilters,
columnVisibility,
rowSelection,
pagination,
},
});
React.useEffect(() => {
const pageFromUrl = searchParams?.get("page");
if (pageFromUrl) {
setPage(Number(pageFromUrl));
}
}, [searchParams]);
// React.useEffect(() => {
// fetchData();
// setPagination({
// pageIndex: 0,
// pageSize: Number(showData),
// });
// }, [page, showData]);
React.useEffect(() => {
if (activeCategory) {
fetchData();
setPagination({
pageIndex: 0,
pageSize: Number(showData),
});
}
}, [page, showData, activeCategory]);
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 listTicketingInternal(
// page - 1,
// Number(showData),
// search
// );
// const data = res?.data?.data;
// const contentData = data?.content;
// contentData.forEach((item: any, index: number) => {
// item.no = (page - 1) * Number(showData) + index + 1;
// });
// console.log("contentData : ", contentData);
// setDataTable(contentData);
// setTotalData(data?.totalElements);
// setTotalPage(data?.totalPages);
// } catch (error) {
// console.error("Error fetching tasks:", error);
// }
// }
async function fetchData() {
try {
const res = await listTicketingInternal(
page - 1,
Number(showData),
search,
activeCategory
);
const data = res?.data?.data;
const contentData = data?.content || [];
contentData.forEach((item: any, index: number) => {
item.no = (page - 1) * Number(showData) + index + 1;
});
setDataTable(contentData);
setTotalData(data?.totalElements);
setTotalPage(data?.totalPages);
} catch (error) {
console.error("Error fetching tasks:", error);
}
}
return (
<div className="w-full overflow-x-auto ">
<div className="flex justify-between items-center">
<div className="mt-3 flex flex-row items-center gap-2">
<InputGroup merged>
<InputGroupText className="bg-transparent dark:border-secondary dark:group-focus-within:border-secondary">
<Search className=" h-4 w-4 dark:text-white" />
</InputGroupText>
<Input
type="text"
placeholder="Search Judul..."
className="bg-transparent dark:border-secondary dark:placeholder-white/80 dark:focus:border-secondary dark:text-white"
value={search}
onChange={(e) => setSearch(e.target.value)}
onKeyDown={handleKeyDown}
onKeyUp={handleKeyUp}
/>
</InputGroup>
</div>
</div>
<div className="flex flex-row items-center justify-around my-3">
{["Polda", "Satker Humas", "Satker Mabes"].map((category, index) => (
<CardContent
key={index}
className="shadow-lg border p-2 cursor-pointer"
onClick={() => setActiveCategory(category)}
>
<div className="flex flex-col gap-3 text-center py-5 w-[250px]">
<p className="text-3xl font-bold">
{index === 0 ? 34 : index === 1 ? 1 : 43}
</p>
<p>{category}</p>
<p className="text-blue-700">Lihat Kontak</p>
</div>
</CardContent>
))}
</div>
{activeCategory && (
<div>
<Table className="overflow-hidden mt-3">
<TableHeader>
{table.getHeaderGroups().map((headerGroup) => (
<TableRow key={headerGroup.id} className="bg-default-200">
{headerGroup.headers.map((header) => (
<TableHead key={header.id}>
{header.isPlaceholder
? null
: flexRender(
header.column.columnDef.header,
header.getContext()
)}
</TableHead>
))}
</TableRow>
))}
</TableHeader>
<TableBody>
{table.getRowModel().rows?.length ? (
table.getRowModel().rows.map((row) => (
<TableRow
key={row.id}
data-state={row.getIsSelected() && "selected"}
className="h-[75px]"
>
{row.getVisibleCells().map((cell) => (
<TableCell key={cell.id}>
{flexRender(
cell.column.columnDef.cell,
cell.getContext()
)}
</TableCell>
))}
</TableRow>
))
) : (
<TableRow>
<TableCell
colSpan={columns.length}
className="h-24 text-center"
>
No results.
</TableCell>
</TableRow>
)}
</TableBody>
</Table>
<TablePagination
table={table}
totalData={totalData}
totalPage={totalPage}
/>
</div>
)}
</div>
);
};
export default ContactTable;

359
app/[locale]/(protected)/supervisor/communications/contact/create/page.tsx Normal file
View File

@ -0,0 +1,359 @@
"use client";
import SiteBreadcrumb from "@/components/site-breadcrumb";
import { Button } from "@/components/ui/button";
import {
Form,
FormControl,
FormField,
FormItem,
FormLabel,
FormMessage,
} from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { z } from "zod";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import withReactContent from "sweetalert2-react-content";
import Swal from "sweetalert2";
import { Link, useRouter } from "@/i18n/routing";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import { useEffect, useState } from "react";
import {
AdministrationLevelList,
getListCompetencies,
getListExperiences,
saveUserInternal,
saveUserRolePlacements,
} from "@/service/management-user/management-user";
import { loading } from "@/config/swal";
import { Label } from "@/components/ui/label";
const FormSchema = z.object({
name: z.string({
required_error: "Required",
}),
username: z.string({
required_error: "Required",
}),
password: z.string({
required_error: "Required",
}),
phoneNumber: z.string({
required_error: "Required",
}),
email: z.string({
required_error: "Required",
}),
skills: z.string({
required_error: "Required",
}),
experiences: z.string({
required_error: "Required",
}),
company: z.string({
required_error: "Required",
}),
});
export type Placements = {
index: number;
roleId?: string;
userLevelId?: number;
};
export default function AddContactForm() {
const MySwal = withReactContent(Swal);
const router = useRouter();
const form = useForm<z.infer<typeof FormSchema>>({
resolver: zodResolver(FormSchema),
});
const [incrementId, setIncrementId] = useState(1);
const [placementRows, setPlacementRows] = useState<Placements[]>([
{ index: 0, roleId: "", userLevelId: 0 },
]);
const [userCompetencies, setUserCompetencies] = useState<any>();
const [userExperiences, setUserExperiences] = useState<any>();
const [userLevels, setUserLevels] = useState<any>();
const roleSelection = [
{
id: "11",
name: "Polda",
},
{
id: "12",
name: "Satker Humas",
},
{
id: "13",
name: "Satker Mabes",
},
];
const onSubmit = async (data: z.infer<typeof FormSchema>) => {
MySwal.fire({
title: "Simpan Data",
text: "Apakah Anda yakin ingin menyimpan data ini?",
icon: "warning",
showCancelButton: true,
cancelButtonColor: "#d33",
confirmButtonColor: "#3085d6",
confirmButtonText: "Simpan",
}).then((result) => {
if (result.isConfirmed) {
save(data);
}
});
};
const save = async (data: z.infer<typeof FormSchema>) => {
console.log("data", data);
const dataReq = {
firstName: data.name,
username: data.username,
email: data.email,
password: data.password,
adress: "",
roleId: "EXP-ID",
phoneNumber: data.phoneNumber,
userCompetencyId: data.skills,
userExperienceId: data.experiences,
companyName: data.company,
};
loading();
const res = await saveUserInternal(dataReq);
const resData = res?.data?.data;
const userProfileId = resData?.id;
var placementArr: any[] = [];
placementRows.forEach((row: any) => {
placementArr.push({
roleId: Number(row.roleId),
userLevelId: Number(row.userLevelId),
userProfileId: userProfileId,
});
});
const dataReq2 = {
userId: userProfileId,
placements: placementArr,
};
const res2 = await saveUserRolePlacements(dataReq2);
const resData2 = res2?.data?.data;
success("/admin/add-experts");
};
function success(redirect: string): void {
MySwal.fire({
title: '<p class="text-green-600 font-bold">Sukses</p>',
icon: "success",
confirmButtonColor: "#3085d6",
confirmButtonText: '<span class="text-white">OK</span>',
allowOutsideClick: false,
}).then((result) => {
if (result.isConfirmed) {
router.push(redirect);
}
});
}
function successSubmit() {
MySwal.fire({
title: "Sukses",
icon: "success",
confirmButtonColor: "#3085d6",
confirmButtonText: "OK",
}).then((result) => {
if (result.isConfirmed) {
router.push("/admin/add-experts");
}
});
}
const handleSelectionChange = (
index: number,
type: "roleId" | "userLevelId",
value: string
) => {
setPlacementRows((prevRows) =>
prevRows.map((row) =>
row.index === index ? { ...row, [type]: value } : row
)
);
};
const handleRemoveRow = (index: number) => {
console.log(index);
console.log(placementRows);
const newPlacements = placementRows.filter((row) => row.index != index);
console.log(newPlacements);
setPlacementRows(newPlacements);
};
const handleAddRow = () => {
setPlacementRows((prevRows: any) => [
...prevRows,
{ index: incrementId, roleId: "", userLevelId: 0 },
]);
setIncrementId((prevId) => prevId + 1);
};
return (
<div>
<SiteBreadcrumb />
<Form {...form}>
<form
onSubmit={form.handleSubmit(onSubmit)}
className="space-y-3 bg-white rounded-sm p-4"
>
<FormField
control={form.control}
name="email"
render={({ field }) => (
<FormItem>
<FormLabel>Email</FormLabel>
<Input
type="email"
value={field.value}
placeholder="Masukkan Nama Lengkap"
onChange={field.onChange}
/>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="name"
render={({ field }) => (
<FormItem>
<FormLabel>Nama Lengkap</FormLabel>
<Input
value={field.value}
placeholder="Masukkan Nama Lengkap"
onChange={field.onChange}
/>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="phoneNumber"
render={({ field }) => (
<FormItem>
<FormLabel>No. HP</FormLabel>
<Input
type="number"
value={field.value}
placeholder="Masukkan Nama Lengkap"
onChange={field.onChange}
/>
<FormMessage />
</FormItem>
)}
/>
<div className="mt-2 mb-0 pb-0">
<FormLabel>
Kategori Akun <span className="text-red-500">*</span>
</FormLabel>
<Select
// onValueChange={(e) =>
// handleSelectionChange(row.index, "roleId", e)
// }
>
<FormControl>
<SelectTrigger>
<SelectValue placeholder="Pilih Role" />
</SelectTrigger>
</FormControl>
<SelectContent>
{roleSelection?.map((item: any) => (
<SelectItem key={item.id} value={String(item.id)}>
{item.name}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
<FormField
control={form.control}
name="name"
render={({ field }) => (
<FormItem>
<FormLabel>Username Admin</FormLabel>
<Input
value={field.value}
placeholder="Masukkan Nama Lengkap"
onChange={field.onChange}
/>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="name"
render={({ field }) => (
<FormItem>
<FormLabel>Username Approver</FormLabel>
<Input
value={field.value}
placeholder="Masukkan Nama Lengkap"
onChange={field.onChange}
/>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="name"
render={({ field }) => (
<FormItem>
<FormLabel>Username Kontributor</FormLabel>
<Input
value={field.value}
placeholder="Masukkan Nama Lengkap"
onChange={field.onChange}
/>
<FormMessage />
</FormItem>
)}
/>
<div className="flex flex-row justify-end gap-2 mt-4 pt-4">
<Link href="/supervisor/communications/contact">
<Button
size="md"
type="button"
variant="outline"
color="destructive"
className="text-xs"
>
Cancel
</Button>
</Link>
<Button size="md" type="submit" color="primary" className="text-xs">
Submit
</Button>
</div>
</form>
</Form>
</div>
);
}

142
app/[locale]/(protected)/supervisor/communications/contact/import-contact/components/columns.tsx Normal file
View File

@ -0,0 +1,142 @@
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 } from "@/components/navigation";
const columns: ColumnDef<any>[] = [
{
accessorKey: "no",
header: "No",
cell: ({ row }) => <span> {row.getValue("no")}</span>,
},
{
accessorKey: "title",
header: "Nama",
cell: ({ row }) => (
<span className="normal-case"> {row.getValue("title")}</span>
),
},
{
accessorKey: "phoneNumber",
header: "No.Telp",
cell: ({ row }) => {
const createdBy = row.original.createdBy; // Akses properti category
return (
<span className="normal-case">{createdBy?.fullname || "N/A"}</span>
);
},
},
{
accessorKey: "email",
header: "Email",
cell: ({ row }) => {
const sendTo = row.original.sendTo; // Akses properti category
return <span className="normal-case">{sendTo?.fullname || "N/A"}</span>;
},
},
{
accessorKey: "createdName",
header: "Admin",
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 <span className="whitespace-nowrap">{formattedDate}</span>;
},
},
{
accessorKey: "approver",
header: "Approver",
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 <span className="whitespace-nowrap">{formattedDate}</span>;
},
},
{
accessorKey: "contributor",
header: "Contributor",
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 <span className="whitespace-nowrap">{formattedDate}</span>;
},
},
// {
// id: "actions",
// accessorKey: "action",
// header: "Actions",
// enableHiding: false,
// cell: ({ row }) => {
// return (
// <DropdownMenu>
// <DropdownMenuTrigger asChild>
// <Button
// size="icon"
// className="bg-transparent ring-offset-transparent hover:bg-transparent hover:ring-0 hover:ring-transparent"
// >
// <span className="sr-only">Open menu</span>
// <MoreVertical className="h-4 w-4 text-default-800" />
// </Button>
// </DropdownMenuTrigger>
// <DropdownMenuContent className="p-0" align="end">
// <Link
// href={`/supervisor/communications/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>
// <Link
// href={`/supervisor/communications/internal/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 className="p-2 border-b text-destructive bg-destructive/30 focus:bg-destructive focus:text-destructive-foreground rounded-none">
// <Trash2 className="w-4 h-4 me-1.5" />
// Delete
// </DropdownMenuItem>
// </DropdownMenuContent>
// </DropdownMenu>
// );
// },
// },
];
export default columns;

293
app/[locale]/(protected)/supervisor/communications/contact/import-contact/components/contact-table.tsx Normal file
View File

@ -0,0 +1,293 @@
"use client";
import * as React from "react";
import {
ColumnDef,
ColumnFiltersState,
PaginationState,
SortingState,
VisibilityState,
flexRender,
getCoreRowModel,
getFilteredRowModel,
getPaginationRowModel,
getSortedRowModel,
useReactTable,
} from "@tanstack/react-table";
import { Button } from "@/components/ui/button";
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "@/components/ui/table";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import {
ChevronLeft,
ChevronRight,
Eye,
MoreVertical,
Search,
SquarePen,
Trash2,
TrendingDown,
TrendingUp,
UploadIcon,
} from "lucide-react";
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 columns from "./columns";
import {
listDataAudio,
listDataImage,
listDataVideo,
} from "@/service/content/content";
import { listTicketingInternal } from "@/service/communication/communication";
import { Link } from "@/components/navigation";
import { Card } from "nextra-theme-docs";
import { CardContent } from "@/components/ui/card";
const ImportTable = () => {
const router = useRouter();
const searchParams = useSearchParams();
const [dataTable, setDataTable] = React.useState<any[]>([]);
const [totalData, setTotalData] = React.useState<number>(1);
const [sorting, setSorting] = React.useState<SortingState>([]);
const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
[]
);
const [columnVisibility, setColumnVisibility] =
React.useState<VisibilityState>({});
const [rowSelection, setRowSelection] = React.useState({});
const [showData, setShowData] = React.useState("10");
const [pagination, setPagination] = React.useState<PaginationState>({
pageIndex: 0,
pageSize: Number(showData),
});
const [page, setPage] = React.useState(1);
const [totalPage, setTotalPage] = React.useState(1);
const [search, setSearch] = React.useState<string>("");
const userId = getCookiesDecrypt("uie");
const userLevelId = getCookiesDecrypt("ulie");
const [activeCategory, setActiveCategory] = React.useState<string | null>(
null
);
const [selectedFile, setSelectedFile] = React.useState(null);
const handleFileChange = (event: any) => {
const file = event.target.files[0];
setSelectedFile(file);
};
const roleId = getCookiesDecrypt("urie");
const table = useReactTable({
data: dataTable,
columns,
onSortingChange: setSorting,
onColumnFiltersChange: setColumnFilters,
getCoreRowModel: getCoreRowModel(),
getPaginationRowModel: getPaginationRowModel(),
getSortedRowModel: getSortedRowModel(),
getFilteredRowModel: getFilteredRowModel(),
onColumnVisibilityChange: setColumnVisibility,
onRowSelectionChange: setRowSelection,
onPaginationChange: setPagination,
state: {
sorting,
columnFilters,
columnVisibility,
rowSelection,
pagination,
},
});
React.useEffect(() => {
const pageFromUrl = searchParams?.get("page");
if (pageFromUrl) {
setPage(Number(pageFromUrl));
}
}, [searchParams]);
// React.useEffect(() => {
// fetchData();
// setPagination({
// pageIndex: 0,
// pageSize: Number(showData),
// });
// }, [page, showData]);
React.useEffect(() => {
if (activeCategory) {
fetchData();
setPagination({
pageIndex: 0,
pageSize: Number(showData),
});
}
}, [page, showData, activeCategory]);
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 listTicketingInternal(
// page - 1,
// Number(showData),
// search
// );
// const data = res?.data?.data;
// const contentData = data?.content;
// contentData.forEach((item: any, index: number) => {
// item.no = (page - 1) * Number(showData) + index + 1;
// });
// console.log("contentData : ", contentData);
// setDataTable(contentData);
// setTotalData(data?.totalElements);
// setTotalPage(data?.totalPages);
// } catch (error) {
// console.error("Error fetching tasks:", error);
// }
// }
async function fetchData() {
try {
const res = await listTicketingInternal(
page - 1,
Number(showData),
search,
activeCategory
);
const data = res?.data?.data;
const contentData = data?.content || [];
contentData.forEach((item: any, index: number) => {
item.no = (page - 1) * Number(showData) + index + 1;
});
setDataTable(contentData);
setTotalData(data?.totalElements);
setTotalPage(data?.totalPages);
} catch (error) {
console.error("Error fetching tasks:", error);
}
}
return (
<div className="w-full overflow-x-auto ">
<div className="flex">
<input
type="file"
id="fileInput"
onChange={handleFileChange}
className="p-2 border rounded-md"
/>
{/* {selectedFile && (
<p className="text-sm text-gray-600">File: {selectedFile.name}</p>
)} */}
</div>
<div className="my-3">
<Button type="button" variant={"outline"} color="success">
Import Data
</Button>
</div>
<div>
<Table className="overflow-hidden mt-3">
<TableHeader>
{table.getHeaderGroups().map((headerGroup) => (
<TableRow key={headerGroup.id} className="bg-default-200">
{headerGroup.headers.map((header) => (
<TableHead key={header.id}>
{header.isPlaceholder
? null
: flexRender(
header.column.columnDef.header,
header.getContext()
)}
</TableHead>
))}
</TableRow>
))}
</TableHeader>
<TableBody>
{table.getRowModel().rows?.length ? (
table.getRowModel().rows.map((row) => (
<TableRow
key={row.id}
data-state={row.getIsSelected() && "selected"}
className="h-[75px]"
>
{row.getVisibleCells().map((cell) => (
<TableCell key={cell.id}>
{flexRender(
cell.column.columnDef.cell,
cell.getContext()
)}
</TableCell>
))}
</TableRow>
))
) : (
<TableRow>
<TableCell
colSpan={columns.length}
className="h-24 text-center"
>
No results.
</TableCell>
</TableRow>
)}
</TableBody>
</Table>
<TablePagination
table={table}
totalData={totalData}
totalPage={totalPage}
/>
</div>
<div className="my-3">
<Link href="/supervisor/communications/contact">
<Button variant={"outline"} color="primary">
Kembali
</Button>
</Link>
</div>
</div>
);
};
export default ImportTable;

24
app/[locale]/(protected)/supervisor/communications/contact/import-contact/page.tsx Normal file
View File

@ -0,0 +1,24 @@
import SiteBreadcrumb from "@/components/site-breadcrumb";
import { Button } from "@/components/ui/button";
import { Link } from "@/i18n/routing";
import { PlusIcon, User } from "lucide-react";
import ContactTable from "../components/contact-table";
import ImportTable from "./components/contact-table";
const ImportPage = async () => {
return (
<div>
<SiteBreadcrumb />
<div className="space-y-4">
<div className="w-full overflow-x-auto p-4 rounded-sm space-y-3">
<div className="flex justify-between py-3 border rounded-md px-3">
<p className="text-lg font-semibold">Kontak</p>
</div>
<ImportTable />
</div>
</div>
</div>
);
};
export default ImportPage;

11
app/[locale]/(protected)/supervisor/communications/contact/layout.tsx Normal file
View File

@ -0,0 +1,11 @@
import { Metadata } from "next";
export const metadata: Metadata = {
title: "Dashboard Media Hub",
description: "Dashboard Media Hub.",
};
const Layout = ({ children }: { children: React.ReactNode }) => {
return <>{children}</>;
};
export default Layout;

42
app/[locale]/(protected)/supervisor/communications/contact/page.tsx Normal file
View File

@ -0,0 +1,42 @@
import SiteBreadcrumb from "@/components/site-breadcrumb";
import { Button } from "@/components/ui/button";
import { Link } from "@/i18n/routing";
import { PlusIcon, User } from "lucide-react";
import InternalSpvTable from "../internal/components/internal-table";
import ContactTable from "./components/contact-table";
const ContactPage = async () => {
return (
<div>
<SiteBreadcrumb />
<div className="space-y-4">
<div className="w-full overflow-x-auto p-4 rounded-sm space-y-3">
<div className="flex justify-between py-3 border rounded-md px-3">
<p className="text-lg font-semibold">Kontak</p>
</div>
<div className="flex justify-between py-3">
<p className="text-lg pl-3 font-semibold">Semua Kontak</p>
<div>
<Link href="/supervisor/communications/contact/import-contact">
<Button color="success" size="md">
<PlusIcon />
Import
</Button>
</Link>{" "}
<Link href="/supervisor/communications/contact/create">
<Button color="primary" size="md">
<User />
Tambah Kontak
</Button>
</Link>
</div>
</div>
<ContactTable />
</div>
</div>
</div>
);
};
export default ContactPage;

197
app/[locale]/(protected)/supervisor/communications/web-chat/page.tsx Normal file
View File

@ -0,0 +1,197 @@
"use client";
import SiteBreadcrumb from "@/components/site-breadcrumb";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { useState } from "react";
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog";
import { Label } from "@/components/ui/label";
import { Search } from "lucide-react";
const messages = [
{ name: "Miles Esther", initials: "ME", time: "06.00" },
{ name: "Flores Juanita", initials: "FJ", time: "06.00" },
{ name: "Henry Arthur", initials: "HA", time: "06.00" },
{ name: "Polres Jakarta Selatan", initials: "PJ", time: "06.00" },
];
const WebChatPage = () => {
const [selectedChat, setSelectedChat] = useState<any>(null);
return (
<div>
<SiteBreadcrumb />
<div className="space-y-4">
{!selectedChat ? (
// Tampilan daftar pesan
<>
<div className="flex justify-between py-3 border rounded-md px-3">
<p className="text-lg font-semibold">Web Chat</p>
</div>
<div className="flex flex-row justify-start rounded-lg ">
<div className="flex flex-row items-center">
<Input placeholder="Cari..." className=" w-[200px] mr-3" />
<Dialog>
<DialogTrigger asChild>
<Button variant="default" size="md" color="primary">
Add
</Button>
</DialogTrigger>
<DialogContent className="max-w-[350px] bg-black text-white rounded-lg p-4">
<DialogHeader>
<DialogTitle className="text-lg font-bold text-white">
New Chat
</DialogTitle>
</DialogHeader>
<div className="relative">
<Search
className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"
size={16}
/>
<Input
placeholder="Search here..."
className="w-full pl-10 text-white placeholder-gray-400 border-none rounded-md focus:ring-0"
/>
</div>
<div className="mt-4">
<p className="text-sm font-semibold">+ Group Chat</p>
</div>
<div className="mt-4">
<p className="text-sm text-gray-400">
Frequently contacted
</p>
<div className="mt-2 space-y-2">
<div className="flex items-center gap-3">
<div className="w-10 h-10 flex items-center justify-center bg-white text-black font-bold rounded-full">
ME
</div>
<span className="text-sm font-medium">
Miles Esther
</span>
</div>
<div className="flex items-center gap-3">
<div className="w-10 h-10 flex items-center justify-center bg-white text-black font-bold rounded-full">
HA
</div>
<span className="text-sm font-medium">
Henry Arthur
</span>
</div>
</div>
</div>
</DialogContent>
</Dialog>
</div>
</div>
<Card>
<CardContent className="p-4 bg-gray-100 rounded-lg">
<div className="space-y-4">
{messages.map((msg: any, index) => (
<div
key={index}
className="flex items-center justify-between p-4 bg-white rounded-lg shadow cursor-pointer hover:bg-gray-200"
onClick={() => setSelectedChat(msg)}
>
<div className="flex items-center gap-4">
<div className="w-12 h-12 flex items-center justify-center bg-black text-white rounded-full text-lg font-bold">
{msg.initials}
</div>
<div>
<p className="font-bold text-lg">{msg.name}</p>
<p className="text-gray-600 text-sm">
✅ Hallo, untuk patroli hari ini sudah bisa di akses
di daily tasks, silahkan anda periksa
</p>
</div>
</div>
<p className="text-gray-500 text-sm">{msg.time}</p>
</div>
))}
</div>
</CardContent>
</Card>
</>
) : (
// Tampilan chat
<div>
<div className="flex justify-between py-3 border rounded-md px-3 my-3">
<p className="text-lg font-semibold">Web Chat</p>
</div>
<Card className="h-[100vh]">
<CardContent className="p-0 flex flex-col h-full">
{/* Header Chat */}
<div className="flex items-center bg-black text-white p-4">
<button
className="mr-4 text-white text-xl"
onClick={() => setSelectedChat(null)}
>
←
</button>
<div className="flex items-center gap-4">
<div className="w-10 h-10 flex items-center justify-center bg-white text-black rounded-full text-lg font-bold">
{selectedChat.initials}
</div>
<p className="font-bold text-lg">{selectedChat.name}</p>
</div>
</div>
{/* Body Chat */}
<div className="flex-1 bg-gray-300 p-4 flex flex-col justify-end">
<p className="text-center text-gray-500 mb-4">Today</p>
{/* Pesan masuk */}
<div className="flex items-start mb-4">
<div className="bg-white p-3 rounded-lg shadow max-w-xs">
Hallo, untuk patroli hari ini sudah bisa di akses di daily
tasks, silahkan anda periksa
</div>
<p className="text-gray-500 text-xs ml-2">06.00</p>
</div>
{/* Pesan keluar */}
<div className="flex items-end justify-end mb-4">
<p className="text-gray-500 text-xs mr-2">06.00</p>
<div className="bg-blue-500 text-white p-3 rounded-lg shadow max-w-xs">
Hallo, bisakah mengirimkan rute patroli untuk hari ini?
</div>
</div>
{/* Pesan keluar lainnya */}
<div className="flex items-end justify-end mb-4">
<p className="text-gray-500 text-xs mr-2">06.00</p>
<div className="bg-blue-500 text-white p-3 rounded-lg shadow max-w-xs">
Terima kasih banyak
</div>
</div>
</div>
{/* Input Chat */}
<div className="flex items-center p-4 bg-black">
<Button className="bg-white text-black p-2 rounded-full mr-2">
+
</Button>
<Input
placeholder="Tulis pesan..."
className="flex-1 rounded-lg"
/>
<Button className="ml-2 bg-white text-black p-2 rounded-full">
🎤
</Button>
</div>
</CardContent>
</Card>
</div>
)}
</div>
</div>
);
};
export default WebChatPage;

22
lib/menus.ts
View File

@ -2734,6 +2734,13 @@ export function getMenuList(pathname: string, t: any): Group[] {
icon: "ri:chat-private-line",
children: [],
},
{
href: "/supervisor/communications/contact",
label: t("contact"),
active: pathname.includes("/communications/contact"),
icon: "ri:share-forward-2-fill",
children: [],
},
{
href: "/supervisor/communications/forward",
label: t("forward"),
@ -2748,6 +2755,7 @@ export function getMenuList(pathname: string, t: any): Group[] {
icon: "clarity:employee-group-line",
children: [],
},
{
href: "/supervisor/communications/account-report",
label: t("account-report"),
@ -2755,6 +2763,20 @@ export function getMenuList(pathname: string, t: any): Group[] {
icon: "uiw:user-delete",
children: [],
},
{
href: "/supervisor/communications/ptt",
label: t("ptt"),
active: pathname.includes("/communications/ptt"),
icon: "clarity:employee-group-line",
children: [],
},
{
href: "/supervisor/communications/web-chat",
label: t("web-chat"),
active: pathname.includes("/communications/web-chat"),
icon: "clarity:employee-group-line",
children: [],
},
],
},
],

5
messages/en.json
View File

@ -334,7 +334,10 @@
"tags": "Tags",
"add-tags": "Add Tags",
"add": "Add",
"privacy": "Privacy Policy"
"privacy": "Privacy Policy",
"contact": "Contact",
"ptt": "PTT",
"web-chat": "Web-Chat"
},
"Changelog": {
"version": "Version's",

5
messages/in.json
View File

@ -335,7 +335,10 @@
"tags": "Tag",
"add-tags": "Tambah Tag",
"add": "Tambah",
"privacy": "Kebijakan Privacy"
"privacy": "Kebijakan Privacy",
"contact": "kontak",
"ptt": "PTT",
"web-chat": "Web-Chat"
},
"Changelog": {
"version": "Version's",

5
service/communication/communication.ts
View File

@ -8,10 +8,11 @@ import { title } from "process";
export async function listTicketingInternal(
page: number,
size: any,
title: string = ""
title: string = "",
category: any
) {
return await httpGetInterceptor(
`ticketing/internal/pagination?enablePage=1&size=${size}&page=${page}&title=${title}`
`ticketing/internal/pagination?enablePage=1&size=${size}&page=${page}&title=${title}&category=${category}`
);
}