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

Merge branch 'dev-anang' of https://gitlab.com/hanifsalafi/mediahub_redesign

This commit is contained in:
hanif salafi 2025-03-24 11:20:03 +07:00
parent 71d755863e cd80247170
commit a3cc816399
23 changed files with 2086 additions and 223 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/[locale]/(protected)/admin/add-experts/component/column.tsx
View File

@ -61,6 +61,12 @@ const columns: ColumnDef<any>[] = [
cell: ({ row }) => <span>{row.getValue("experience")}</span>,
},
{
accessorKey: "experience",
header: "Posisi",
cell: ({ row }) => <span>{row.getValue("experience")}</span>,
},
{
id: "actions",
accessorKey: "action",

56
app/[locale]/(protected)/admin/add-experts/create/page.tsx
View File

@ -24,7 +24,13 @@ import {
SelectValue,
} from "@/components/ui/select";
import { useEffect, useState } from "react";
import { AdministrationLevelList, getListCompetencies, getListExperiences, saveUserInternal, saveUserRolePlacements } from "@/service/management-user/management-user";
import {
AdministrationLevelList,
getListCompetencies,
getListExperiences,
saveUserInternal,
saveUserRolePlacements,
} from "@/service/management-user/management-user";
import { loading } from "@/config/swal";
const FormSchema = z.object({
@ -58,7 +64,7 @@ export type Placements = {
index: number;
roleId?: string;
userLevelId?: number;
}
};
export default function AddExpertForm() {
const MySwal = withReactContent(Swal);
@ -67,7 +73,9 @@ export default function AddExpertForm() {
resolver: zodResolver(FormSchema),
});
const [incrementId, setIncrementId] = useState(1);
const [placementRows, setPlacementRows] = useState<Placements[]>([{ index: 0, roleId: "", userLevelId: 0 }]);
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>();
@ -80,7 +88,7 @@ export default function AddExpertForm() {
{
id: "12",
name: "Kurator",
}
},
];
const onSubmit = async (data: z.infer<typeof FormSchema>) => {
@ -113,12 +121,12 @@ export default function AddExpertForm() {
userCompetencyId: data.skills,
userExperienceId: data.experiences,
companyName: data.company,
}
};
loading();
const res = await saveUserInternal(dataReq);
const resData = res?.data?.data;
const userProfileId = resData.id;
const userProfileId = resData?.id;
var placementArr: any[] = [];
placementRows.forEach((row: any) => {
@ -131,15 +139,14 @@ export default function AddExpertForm() {
const dataReq2 = {
userId: userProfileId,
placements: placementArr
}
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>',
@ -180,7 +187,6 @@ export default function AddExpertForm() {
setUserLevels(levelsArr);
}
function successSubmit() {
MySwal.fire({
title: "Sukses",
@ -194,7 +200,11 @@ export default function AddExpertForm() {
});
}
const handleSelectionChange = (index: number, type: "roleId" | "userLevelId", value: string) => {
const handleSelectionChange = (
index: number,
type: "roleId" | "userLevelId",
value: string
) => {
setPlacementRows((prevRows) =>
prevRows.map((row) =>
row.index === index ? { ...row, [type]: value } : row
@ -202,7 +212,6 @@ export default function AddExpertForm() {
);
};
const handleRemoveRow = (index: number) => {
console.log(index);
console.log(placementRows);
@ -212,7 +221,10 @@ export default function AddExpertForm() {
};
const handleAddRow = () => {
setPlacementRows((prevRows: any) => [...prevRows, { index: incrementId, roleId: "", userLevelId: 0 }]);
setPlacementRows((prevRows: any) => [
...prevRows,
{ index: incrementId, roleId: "", userLevelId: 0 },
]);
setIncrementId((prevId) => prevId + 1);
};
@ -375,7 +387,11 @@ export default function AddExpertForm() {
<FormLabel>Penempatan</FormLabel>
{placementRows?.map((row: any) => (
<div key={row.index} className="flex items-center gap-2 my-2">
<Select onValueChange={(e) => handleSelectionChange(row.index, "roleId", e)} >
<Select
onValueChange={(e) =>
handleSelectionChange(row.index, "roleId", e)
}
>
<FormControl>
<SelectTrigger>
<SelectValue placeholder="Pilih Role" />
@ -389,7 +405,11 @@ export default function AddExpertForm() {
))}
</SelectContent>
</Select>
<Select onValueChange={(e) => handleSelectionChange(row.index, "userLevelId", e)}>
<Select
onValueChange={(e) =>
handleSelectionChange(row.index, "userLevelId", e)
}
>
<FormControl>
<SelectTrigger>
<SelectValue placeholder="Pilih User Level" />
@ -415,11 +435,7 @@ export default function AddExpertForm() {
)}
</div>
))}
<Button
type="button"
size="md"
onClick={() => handleAddRow()}
>
<Button type="button" size="md" onClick={() => handleAddRow()}>
Tambah
</Button>
</div>

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;

20
app/[locale]/auth/page.tsx
View File

@ -25,11 +25,23 @@ const Login = ({ params: { locale } }: { params: { locale: string } }) => {
<div className="lg:block hidden flex-1 overflow-hidden text-[40px] leading-[48px] text-default-600 relative z-[1] bg-default-50">
<div className="max-w-[520px] pt-16 ps-20 ">
<Link href="/" className="mb-6 inline-block">
<Image src="/assets/mediahub-logo.png" alt="" width={250} height={250} className="mb-10 w-full h-full" />
<Image
src="/assets/mediahub-logo.png"
alt=""
width={250}
height={250}
className="mb-10 w-full h-full"
/>
</Link>
</div>
<div className="absolute left-0 2xl:bottom-[-160px] bottom-[-130px] h-full w-full z-[-1]">
<Image src="/assets/vector-login.svg" alt="" width={300} height={300} className="mb-10 w-full h-full" />
<Image
src="/assets/vector-login.svg"
alt=""
width={300}
height={300}
className="mb-10 w-full h-full"
/>
</div>
</div>
<div className="flex-1 relative">
@ -40,12 +52,12 @@ const Login = ({ params: { locale } }: { params: { locale: string } }) => {
<Logo />
</Link>
</div> */}
<div className="text-left 2xl:mb-10 mb-4 mt-10">
{/* <div className="text-left 2xl:mb-10 mb-4 mt-10">
<h4 className="font-semibold text-3xl text-left">{t("logInPlease")}</h4>
<div className="text-default-500 text-base">
{t("acc")} <span className="text-red-500">{t("reg")}</span>
</div>
</div>
</div> */}
<LoginForm />
{/* <div className="relative border-b-[#9AA2AF] border-opacity-[16%] border-b pt-6">
<div className="absolute inline-block bg-default-50 dark:bg-default-100 left-1/2 top-1/2 transform -translate-x-1/2 px-4 min-w-max text-sm text-default-500 font-normal">

14
components/form/content/spit-convert-form.tsx
View File

@ -813,7 +813,7 @@ export default function FormConvertSPIT() {
<Label className="text-xl">Penempatan file</Label>
</div>
{files?.length > 1 && (
<div className="flex flex-wrap gap-2 mt-2">
<div className="flex flex-wrap gap-2 mt-2 justify-center">
<div className="flex items-center space-x-2">
<Checkbox
id="all-content"
@ -879,20 +879,12 @@ export default function FormConvertSPIT() {
>
<img
src={file.contentFile}
className="w-[150px] rounded-md"
className="w-[180px] rounded-md"
/>
<div className="flex flex-col gap-2 w-full">
<div className="flex flex-col gap-2 w-full pl-4">
<div className="flex justify-between text-sm">
{file.fileName}
{/* <a
onClick={() =>
handleDeleteFileApproval(file.id)
}
>
<Icon icon="humbleicons:times" color="red" />
</a> */}
</div>
<div className="flex flex-wrap gap-2">
<div className="flex items-center space-x-2">
<Checkbox

76
components/landing-page/hero.tsx
View File

@ -5,9 +5,27 @@ import "swiper/css/navigation";
import { getHeroData } from "@/service/landing/landing";
import Link from "next/link";
import { useParams, usePathname, useRouter } from "next/navigation";
import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel";
import {
Carousel,
CarouselContent,
CarouselItem,
CarouselNext,
CarouselPrevious,
} from "@/components/ui/carousel";
import { Skeleton } from "../ui/skeleton";
import Image from "next/image";
import { TabsList, TabsTrigger, TabsContent } from "@radix-ui/react-tabs";
import { Input } from "postcss";
import { Button } from "react-day-picker";
import { Label } from "recharts";
import {
CardHeader,
CardTitle,
CardDescription,
CardContent,
CardFooter,
} from "../ui/card";
import { Tabs } from "../ui/tabs";
const Hero: React.FC = () => {
const router = useRouter();
@ -67,7 +85,10 @@ const Hero: 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="flex flex-col lg:flex-row items-start justify-center gap-8 px-4 lg:px-20 py-4 mx-auto w-auto mt-6">
@ -91,18 +112,30 @@ const Hero: React.FC = () => {
alt="gambar-utama"
width={1920}
height={1080}
placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
placeholder={`data:image/svg+xml;base64,${toBase64(
shimmer(700, 475)
)}`}
className="w-full h-[310px] lg:h-[420px] rounded-lg object-cover"
/>
<div className="absolute bottom-0 left-0 right-0 bg-transparent backdrop-blur-sm text-black dark:text-white p-4 rounded-b-lg">
<span className="text-white bg-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-xs px-2 py-1">{list?.categoryName}</span>
<span className="text-white bg-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-xs px-2 py-1">
{list?.categoryName}
</span>
<Link href={`${locale}/image/detail/${list?.slug}`}>
<h2 className="text-lg text-slate-500 dark:text-white font-bold mt-2">{list?.title}</h2>
<h2 className="text-lg text-slate-500 dark:text-white font-bold mt-2">
{list?.title}
</h2>
</Link>
<p className="text-xs flex flex-row items-center text-slate-500 dark:text-white gap-1 mt-1">
{formatDateToIndonesian(new Date(list?.createdAt))} {list?.timezone ? list?.timezone : "WIB"}|{" "}
<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 24 24">
{formatDateToIndonesian(new Date(list?.createdAt))}{" "}
{list?.timezone ? list?.timezone : "WIB"}|{" "}
<svg
xmlns="http://www.w3.org/2000/svg"
width="1.2em"
height="1.2em"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="M11.5 18c4 0 7.46-2.22 9.24-5.5C18.96 9.22 15.5 7 11.5 7s-7.46 2.22-9.24 5.5C4.04 15.78 7.5 18 11.5 18m0-12c4.56 0 8.5 2.65 10.36 6.5C20 16.35 16.06 19 11.5 19S3 16.35 1.14 12.5C3 8.65 6.94 6 11.5 6m0 2C14 8 16 10 16 12.5S14 17 11.5 17S7 15 7 12.5S9 8 11.5 8m0 1A3.5 3.5 0 0 0 8 12.5a3.5 3.5 0 0 0 3.5 3.5a3.5 3.5 0 0 0 3.5-3.5A3.5 3.5 0 0 0 11.5 9"
@ -165,16 +198,35 @@ const Hero: React.FC = () => {
{heroData?.map((item: any) => (
<li key={item?.id} className="flex gap-4 flex-row lg:w-full ">
<div className="flex-shrink-0 w-24 rounded-lg">
<Image placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`} width={720} height={480} src={item?.thumbnailLink} alt={item?.title} className="w-full h-[73px] object-cover rounded-lg" />
<Image
placeholder={`data:image/svg+xml;base64,${toBase64(
shimmer(700, 475)
)}`}
width={720}
height={480}
src={item?.thumbnailLink}
alt={item?.title}
className="w-full h-[73px] object-cover rounded-lg"
/>
</div>
<div className="w-[280px] lg:w-auto">
<span className="text-white bg-[#bb3523] px-4 py-1 rounded-lg flex text-[8px] font-bold uppercase w-fit">{item?.categoryName}</span>
<span className="text-white bg-[#bb3523] px-4 py-1 rounded-lg flex text-[8px] font-bold uppercase w-fit">
{item?.categoryName}
</span>
<Link href={`${locale}/image/detail/${item?.slug}`}>
<h3 className="text-base font-bold mt-2 h-6 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible">{item?.title}</h3>
<h3 className="text-base font-bold mt-2 h-6 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible">
{item?.title}
</h3>
</Link>
<p className="text-[10px] flex flex-row items-center gap-1 text-gray-500 mt-1">
{formatDateToIndonesian(new Date(item?.createdAt))} {item?.timezone ? item?.timezone : "WIB"} |{" "}
<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 24 24">
{formatDateToIndonesian(new Date(item?.createdAt))}{" "}
{item?.timezone ? item?.timezone : "WIB"} |{" "}
<svg
xmlns="http://www.w3.org/2000/svg"
width="1.2em"
height="1.2em"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="M11.5 18c4 0 7.46-2.22 9.24-5.5C18.96 9.22 15.5 7 11.5 7s-7.46 2.22-9.24 5.5C4.04 15.78 7.5 18 11.5 18m0-12c4.56 0 8.5 2.65 10.36 6.5C20 16.35 16.06 19 11.5 19S3 16.35 1.14 12.5C3 8.65 6.94 6 11.5 6m0 2C14 8 16 10 16 12.5S14 17 11.5 17S7 15 7 12.5S9 8 11.5 8m0 1A3.5 3.5 0 0 0 8 12.5a3.5 3.5 0 0 0 3.5 3.5a3.5 3.5 0 0 0 3.5-3.5A3.5 3.5 0 0 0 11.5 9"

79
components/landing-page/news-tickers.tsx
View File

@ -5,13 +5,11 @@ import { formatDateToIndonesian, textEllipsis } from "@/utils/globals";
import { useEffect, useState } from "react";
import { Icon } from "../ui/icon";
import { useTranslations } from "next-intl";
export default function NewsTicker() {
const [article, setArticle] = useState<any>([]);
const [currentNewsIndex, setCurrentNewsIndex] = useState<any>(0);
const [animate, setAnimate] = useState(false);
const t = useTranslations("LandingPage");
useEffect(() => {
async function getArticle() {
const response = await getHeroData();
@ -19,7 +17,6 @@ export default function NewsTicker() {
}
getArticle();
}, []);
const triggerAnimation = (newIndex: number) => {
setAnimate(true);
setTimeout(() => {
@ -27,52 +24,78 @@ export default function NewsTicker() {
setAnimate(false);
}, 300);
};
const handlePrev = () => {
const newIndex = (currentNewsIndex - 1 + article?.length) % article?.length;
triggerAnimation(newIndex);
};
const handleNext = () => {
const newIndex = (currentNewsIndex + 1) % article?.length;
triggerAnimation(newIndex);
};
useEffect(() => {
const interval = setInterval(() => {
triggerAnimation((currentNewsIndex + 1) % article?.length);
}, 7000);
return () => clearInterval(interval);
}, [article?.length]);
return (
<div className="fixed bottom-0 z-50 flex flex-row h-[60px] gap-3 w-full justify-between dark:bg-stone-800 bg-gray-50 border-[#bb3523] border-t-2">
{" "}
<div className="relative px-4 py-2 font-semibold text-xs lg:text-sm flex items-center bg-[#bb3523] text-white w-[30%] lg:w-[10%]">
<span className="mr-2"></span> {t("breakingNews")}
<div className="absolute right-0 top-0 h-full w-4 bg-[#bb3523] transform translate-x-full clip-path-triangle"></div>
</div>
<div className={`w-full px-5 py-1 flex flex-col gap-1 transition-transform duration-300 ${animate ? "opacity-0 translate-y-5" : "opacity-100 translate-y-0"}`}>
{" "}
<span className="mr-2"></span> {t("breakingNews")}{" "}
<div className="absolute right-0 top-0 h-full w-4 bg-[#bb3523] transform translate-x-full clip-path-triangle"></div>{" "}
</div>{" "}
<div
className={`w-full px-5 py-1 flex flex-col gap-1 transition-transform duration-300 ${
animate ? "opacity-0 translate-y-5" : "opacity-100 translate-y-0"
}`}
>
{" "}
{article?.length > 0 && (
<>
<Link href={`news/detail/${article[currentNewsIndex]?.id}`} className="hidden lg:block">
<p className="text-sm lg:text-base">{article[currentNewsIndex]?.title}</p>
</Link>
<Link href={`news/detail/${article[currentNewsIndex]?.id}`} className="lg:hidden">
<p className="text-sm lg:text-base">{textEllipsis(article[currentNewsIndex]?.title, 28)}</p>
</Link>
<p className="text-xs">{formatDateToIndonesian(article[currentNewsIndex]?.createdAt)}</p>
{" "}
<Link
href={`news/detail/${article[currentNewsIndex]?.id}`}
className="hidden lg:block"
>
{" "}
<p className="text-sm lg:text-base">
{article[currentNewsIndex]?.title}
</p>{" "}
</Link>{" "}
<Link
href={`news/detail/${article[currentNewsIndex]?.id}`}
className="lg:hidden"
>
{" "}
<p className="text-sm lg:text-base">
{textEllipsis(article[currentNewsIndex]?.title, 28)}
</p>{" "}
</Link>{" "}
<p className="text-xs">
{formatDateToIndonesian(article[currentNewsIndex]?.createdAt)}
</p>{" "}
</>
)}
</div>
)}{" "}
</div>{" "}
<div className="flex flex-row text-white h-full gap-[1px]">
<a className="bg-[#bb3523] h-full flex items-center" onClick={() => handlePrev()}>
<Icon icon="ic:twotone-arrow-left" fontSize={30} />
</a>
<a className="bg-[#bb3523] h-full flex items-center" onClick={() => handleNext()}>
<Icon icon="ic:twotone-arrow-right" fontSize={30} />
</a>
</div>
{" "}
<a
className="bg-[#bb3523] h-full flex items-center"
onClick={() => handlePrev()}
>
{" "}
<Icon icon="ic:twotone-arrow-left" fontSize={30} />{" "}
</a>{" "}
<a
className="bg-[#bb3523] h-full flex items-center"
onClick={() => handleNext()}
>
{" "}
<Icon icon="ic:twotone-arrow-right" fontSize={30} />{" "}
</a>{" "}
</div>{" "}
</div>
);
}

249
components/partials/auth/login-form.tsx
View File

@ -1,5 +1,5 @@
"use client";
import React from "react";
import React, { useState } from "react";
import { Button } from "@/components/ui/button";
import { Checkbox } from "@/components/ui/checkbox";
import { Input } from "@/components/ui/input";
@ -11,12 +11,19 @@ import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import { cn, setCookiesEncrypt } from "@/lib/utils";
import { Loader2 } from "lucide-react";
import { getProfile, login } from "@/service/auth";
import { getProfile, login, requestOTP } from "@/service/auth";
import { toast } from "sonner";
import { useRouter } from "@/components/navigation";
import { warning } from "@/lib/swal";
import { Link } from "@/i18n/routing";
import { useTranslations } from "next-intl";
import {
InputOTP,
InputOTPGroup,
InputOTPSeparator,
InputOTPSlot,
} from "@/components/ui/input-otp";
import { error, loading } from "@/config/swal";
// Schema validasi menggunakan zod
const schema = z.object({
@ -38,6 +45,24 @@ const LoginForm = () => {
const [passwordType, setPasswordType] = React.useState("password");
const t = useTranslations("LandingPage");
const [isOtpStep, setIsOtpStep] = useState(false);
const [otpValue, setOtpValue] = useState("");
const [userIdentity] = useState();
const [email, setEmail] = useState();
const [category, setCategory] = useState("5");
const handleSignInClick = () => {
handleSendOTP();
setIsOtpStep(true);
};
const [otp1, setOtp1] = useState();
const [otp2, setOtp2] = useState();
const [otp3, setOtp3] = useState();
const [otp4, setOtp4] = useState();
const [otp5, setOtp5] = useState();
const [otp6, setOtp6] = useState();
const togglePasswordType = () => {
setPasswordType((prevType) =>
prevType === "password" ? "text" : "password"
@ -53,6 +78,40 @@ const LoginForm = () => {
mode: "all",
});
const handleTypeOTP = (event: any) => {
const { form } = event.target;
const index = [...form].indexOf(event.target);
form.elements[index + 1].focus();
event.preventDefault();
};
// const handleNextStep = () => {
// setIsOtpStep(true);
// };
const handleSendOTP = async () => {
console.log(userIdentity, email);
console.log("UMUM");
if (email != "") {
const data = {
memberIdentity: null,
email: "",
category,
};
// loading();
const response = await requestOTP(data);
if (response.error) {
error(response.message);
return false;
}
close();
}
};
// Fungsi submit form
const onSubmit: SubmitHandler<LoginFormValues> = async (data) => {
try {
@ -202,77 +261,129 @@ const LoginForm = () => {
return (
<form onSubmit={handleSubmit(onSubmit)} className="mt-5 2xl:mt-7 space-y-4">
<div className="space-y-2">
<Label htmlFor="username" className="font-medium text-default-600">
Username
</Label>
<Input
size="lg"
disabled={isPending}
{...register("username")}
id="username"
type="username"
className={cn("", {
"border-destructive": errors.username,
})}
/>
{errors.username?.message && (
<div className="text-destructive mt-2 text-sm">
{errors.username.message}
{!isOtpStep && (
<>
<div className="text-left 2xl:mb-10 mb-4 mt-10">
<h4 className="font-semibold text-3xl text-left">
{t("logInPlease")}
</h4>
<div className="text-default-500 text-base">
{t("acc")} <span className="text-red-500">{t("reg")}</span>
</div>
</div>
)}
</div>
<div className="mt-3.5 space-y-2">
<Label htmlFor="password" className="mb-2 font-medium text-default-600">
{t("password")}
</Label>
<div className="relative">
<Input
size="lg"
disabled={isPending}
{...register("password")}
id="password"
type={passwordType}
className="peer"
/>
<div
className="absolute top-1/2 -translate-y-1/2 ltr:right-4 rtl:left-4 cursor-pointer"
onClick={togglePasswordType}
>
{passwordType === "password" ? (
<Icon icon="heroicons:eye" className="w-5 h-5 text-default-400" />
) : (
<Icon
icon="heroicons:eye-slash"
className="w-5 h-5 text-default-400"
/>
<div className="space-y-2">
<Label htmlFor="username" className="font-medium text-default-600">
Username
</Label>
<Input
size="lg"
disabled={isPending}
{...register("username")}
id="username"
type="text"
className={cn("", {
"border-destructive": errors.username,
})}
/>
{errors.username?.message && (
<div className="text-destructive mt-2 text-sm">
{errors.username.message}
</div>
)}
</div>
</div>
{errors.password?.message && (
<div className="text-destructive mt-2 text-sm">
{errors.password.message}
</div>
)}
</div>
<div className="flex justify-between">
<div className="flex gap-2 items-center">
<Checkbox id="checkbox" defaultChecked />
<Label htmlFor="checkbox">{t("rememberMe")}</Label>
</div>
<Link
href="/auth/forgot-password"
className="text-sm text-default-800 dark:text-default-400 leading-6 font-medium"
>
{t("forgotPass")}
</Link>
</div>
<Button fullWidth disabled={isPending}>
{isPending && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
{isPending ? "Loading..." : "Sign In"}
</Button>
<div className="mt-3.5 space-y-2">
<Label htmlFor="password" className="font-medium text-default-600">
{t("password")}
</Label>
<div className="relative">
<Input
size="lg"
disabled={isPending}
{...register("password")}
id="password"
type="password"
className="peer"
/>
</div>
{errors.password?.message && (
<div className="text-destructive mt-2 text-sm">
{errors.password.message}
</div>
)}
</div>
<div className="flex justify-between">
<div className="flex gap-2 items-center">
<Checkbox id="checkbox" defaultChecked />
<Label htmlFor="checkbox">{t("rememberMe")}</Label>
</div>
<Link
href="/auth/forgot-password"
className="text-sm text-default-800 dark:text-default-400 leading-6 font-medium"
>
{t("forgotPass")}
</Link>
</div>
<Button fullWidth onClick={handleSignInClick}>
Selanjutnya
</Button>
</>
)}
{isOtpStep && (
<>
<div className="text-left 2xl:mb-10 mb-4 mt-10">
<h4 className="font-semibold text-3xl text-left">
{t("pleaseEnterOtp")}
</h4>
</div>
<div className="flex justify-center mb-6">
<InputOTP maxLength={6} onChange={(e) => setOtpValue(e)}>
<InputOTPGroup>
<InputOTPSlot
index={0}
onChange={(e: any) => setOtp1(e.target.value)}
onKeyUp={handleTypeOTP}
/>
<InputOTPSlot
index={1}
onChange={(e: any) => setOtp2(e.target.value)}
onKeyUp={handleTypeOTP}
/>
</InputOTPGroup>
<InputOTPSeparator />
<InputOTPGroup>
<InputOTPSlot
index={2}
onChange={(e: any) => setOtp3(e.target.value)}
onKeyUp={handleTypeOTP}
/>
<InputOTPSlot
index={3}
onChange={(e: any) => setOtp4(e.target.value)}
onKeyUp={handleTypeOTP}
/>
</InputOTPGroup>
<InputOTPSeparator />
<InputOTPGroup>
<InputOTPSlot
index={4}
onChange={(e: any) => setOtp5(e.target.value)}
onKeyUp={handleTypeOTP}
/>
<InputOTPSlot
index={5}
onChange={(e: any) => setOtp6(e.target.value)}
onKeyUp={handleTypeOTP}
/>
</InputOTPGroup>
</InputOTP>
</div>
<Button fullWidth className="bg-red-500">
Sign in
</Button>
</>
)}
</form>
);
};

150
lib/menus.ts
View File

@ -2312,6 +2312,70 @@ export function getMenuList(pathname: string, t: any): Group[] {
},
],
},
{
groupLabel: "",
id: "settings",
menus: [
{
id: "settings",
href: "/admin/settings",
label: t("settings"),
active: pathname.includes("/settinng"),
icon: "material-symbols:settings",
submenus: [
{
href: "/admin/settings/category",
label: t("category"),
active: pathname === "/admin/settings/category",
icon: "heroicons:arrow-trending-up",
children: [],
},
{
href: "/admin/settings/tag",
label: "Tag",
active: pathname === "/admin/settings/tag",
icon: "heroicons:arrow-trending-up",
children: [],
},
{
href: "/admin/settings/banner",
label: "Banner",
active: pathname === "/admin/settings/banner",
icon: "heroicons:arrow-trending-up",
children: [],
},
{
href: "/admin/settings/feedback",
label: "Feedback",
active: pathname === "/admin/settings/feedback",
icon: "heroicons:arrow-trending-up",
children: [],
},
{
href: "/admin/settings/faq",
label: "FAQ",
active: pathname === "/admin/settings/faq",
icon: "heroicons:arrow-trending-up",
children: [],
},
{
href: "https://nat-mediahub.polri.go.id/",
label: "Mediahub 2022",
active: pathname === "/admin/settings/mediahub-2022",
icon: "heroicons:arrow-trending-up",
children: [],
},
{
href: "/admin/settings/privacy",
label: t("privacy"),
active: pathname === "/admin/settings/privacy",
icon: "heroicons:arrow-trending-up",
children: [],
},
],
},
],
},
];
} else if (Number(userParentLevelId) == 761) {
menusSelected = [
@ -2521,6 +2585,70 @@ export function getMenuList(pathname: string, t: any): Group[] {
},
],
},
{
groupLabel: "",
id: "settings",
menus: [
{
id: "settings",
href: "/admin/settings",
label: t("settings"),
active: pathname.includes("/settinng"),
icon: "material-symbols:settings",
submenus: [
{
href: "/admin/settings/category",
label: t("category"),
active: pathname === "/admin/settings/category",
icon: "heroicons:arrow-trending-up",
children: [],
},
{
href: "/admin/settings/tag",
label: "Tag",
active: pathname === "/admin/settings/tag",
icon: "heroicons:arrow-trending-up",
children: [],
},
{
href: "/admin/settings/banner",
label: "Banner",
active: pathname === "/admin/settings/banner",
icon: "heroicons:arrow-trending-up",
children: [],
},
{
href: "/admin/settings/feedback",
label: "Feedback",
active: pathname === "/admin/settings/feedback",
icon: "heroicons:arrow-trending-up",
children: [],
},
{
href: "/admin/settings/faq",
label: "FAQ",
active: pathname === "/admin/settings/faq",
icon: "heroicons:arrow-trending-up",
children: [],
},
{
href: "https://nat-mediahub.polri.go.id/",
label: "Mediahub 2022",
active: pathname === "/admin/settings/mediahub-2022",
icon: "heroicons:arrow-trending-up",
children: [],
},
{
href: "/admin/settings/privacy",
label: t("privacy"),
active: pathname === "/admin/settings/privacy",
icon: "heroicons:arrow-trending-up",
children: [],
},
],
},
],
},
];
}
} else if (Number(roleId) == 9) {
@ -2606,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"),
@ -2620,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"),
@ -2627,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: [],
},
],
},
],

6
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",
@ -420,6 +423,7 @@
"audioSize": "Audio Size Options",
"relatedPosts": "Related Posts",
"logInPlease": "Please Log In to Your Account First",
"pleaseEnterOtp": "Please enter the OTP code first",
"acc": "Don't have an account yet?",
"reg": "Register",
"password": "Password",

6
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",
@ -421,6 +424,7 @@
"audioSize": "Opsi Ukuran Audio",
"relatedPosts": "Post Terkait",
"logInPlease": "Silahkan masuk ke akun Anda terlebih dahulu",
"pleaseEnterOtp": "Silahkan masukan Kode OTP terlebih dahulu",
"acc": "Belum Punya Akun?",
"reg": "Daftar",
"password": "Kata Sandi",

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}`
);
}