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

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

This commit is contained in:
hanif salafi 2024-12-25 07:09:39 +07:00
parent 990fbf44a5 aa9cedb7e8
commit 6af52b3a49
44 changed files with 3343 additions and 161 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
app/[locale]/(protected)/contributor/agenda-setting/calender-view.tsx
View File

@ -17,12 +17,15 @@ import { EventContentArg } from "@fullcalendar/core";
import EventModal from "./event-modal";
import { useTranslations } from "next-intl";
import { getAgendaSettingsList } from "@/service/agenda-setting/agenda-setting";
import dayjs from "dayjs";
const wait = () => new Promise((resolve) => setTimeout(resolve, 1000));
interface CalendarViewProps {
events: CalendarEvent[];
categories: CalendarCategory[];
}
const INITIAL_YEAR = dayjs().format("YYYY");
const INITIAL_MONTH = dayjs().format("M");
export interface CalendarEvent {
id: string;
title: string;
@ -80,6 +83,18 @@ const CalendarView = ({ events, categories }: CalendarViewProps) => {
{ title: "Create New theme", id: "104", tag: "etc" },
]);
useEffect(() => {
getCalendarEvents();
});
const getCalendarEvents = async () => {
const res = await getAgendaSettingsList(INITIAL_YEAR, INITIAL_MONTH, "");
console.log("ress", res);
if (res.error) {
return false;
}
};
useEffect(() => {
setSelectedCategory(categories?.map((c) => c.value));
}, [events, categories]);
@ -251,14 +266,14 @@ const CalendarView = ({ events, categories }: CalendarViewProps) => {
/>
</div>
<div id="external-events" className=" space-y-1.5 mt-6 px-4">
{/* <div id="external-events" className=" space-y-1.5 mt-6 px-4">
<p className="text-sm font-medium text-default-700 mb-3">
{t("shortDesc")}
</p>
{dragEvents.map((event) => (
<ExternalDraggingevent key={event.id} event={event} />
))}
</div>
</div> */}
<div className="py-4 text-default-800 font-semibold text-xs uppercase mt-4 mb-2 px-4">
{t("filter")}
</div>

16
app/[locale]/(protected)/contributor/agenda-setting/data.ts
View File

@ -1,17 +1,31 @@
import { getAgendaSettingsList } from "@/service/agenda-setting/agenda-setting";
import { faker } from "@faker-js/faker";
import dayjs from "dayjs";
const date = new Date();
const prevDay = new Date().getDate() - 1;
const nextDay = new Date(new Date().getTime() + 24 * 60 * 60 * 1000);
const INITIAL_YEAR = dayjs().format("YYYY");
const INITIAL_MONTH = dayjs().format("M");
// prettier-ignore
const nextMonth = date.getMonth() === 11 ? new Date(date.getFullYear() + 1, 0, 1) : new Date(date.getFullYear(), date.getMonth() + 1, 1)
// prettier-ignore
const prevMonth = date.getMonth() === 11 ? new Date(date.getFullYear() - 1, 0, 1) : new Date(date.getFullYear(), date.getMonth() - 1, 1)
export const getCalendarEvents = async () => {
const res = await getAgendaSettingsList(INITIAL_YEAR, INITIAL_MONTH, "");
if (res.error) {
return false;
}
console.log("ress", res.data.data);
return res?.data?.data;
};
export const calendarEvents = [
{
id: faker.string.uuid(),
title: "All Day Event",
title: "aaaAll Day Event",
start: date,
end: nextDay,
allDay: false,

6
app/[locale]/(protected)/contributor/agenda-setting/utils.ts
View File

@ -2,10 +2,10 @@ import { calendarEvents, categories } from "./data";
// get events
export const getEvents = async () => {
return calendarEvents;
return calendarEvents;
};
// get categories
export const getCategories = async () => {
return categories;
}
return categories;
};

9
app/[locale]/(protected)/curator/content-production/layout.tsx Normal file
View File

@ -0,0 +1,9 @@
export const metadata = {
title: "Content Production",
};
const Layout = ({ children }: { children: React.ReactNode }) => {
return <>{children}</>;
};
export default Layout;

11
app/[locale]/(protected)/curator/content-production/page.tsx Normal file
View File

@ -0,0 +1,11 @@
import SiteBreadcrumb from "@/components/site-breadcrumb";
import ContentProductionVisualization from "@/components/visualization/content-production";
export default function ContentProduction() {
return (
<div>
<SiteBreadcrumb />
<ContentProductionVisualization />
</div>
);
}

9
app/[locale]/(protected)/curator/pattern-relation/layout.tsx Normal file
View File

@ -0,0 +1,9 @@
export const metadata = {
title: "Pattern Relation",
};
const Layout = ({ children }: { children: React.ReactNode }) => {
return <>{children}</>;
};
export default Layout;

11
app/[locale]/(protected)/curator/pattern-relation/page.tsx Normal file
View File

@ -0,0 +1,11 @@
import SiteBreadcrumb from "@/components/site-breadcrumb";
import PatternRelationVisualization from "@/components/visualization/pattern-relation-viz";
export default function PatternRelation() {
return (
<div>
<SiteBreadcrumb />
<PatternRelationVisualization />
</div>
);
}

75
app/[locale]/(protected)/curator/task-plan/mediahub/components/columns.tsx Normal file
View File

@ -0,0 +1,75 @@
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 { htmlToString } from "@/utils/globals";
import { Link, useRouter } from "@/i18n/routing";
const columns: ColumnDef<any>[] = [
{
accessorKey: "no",
header: "No",
cell: ({ row }) => <span>{row.getValue("no")}</span>,
},
{
accessorKey: "title",
header: "Judul Perencanaan",
cell: ({ row }) => <span>{row.getValue("title")}</span>,
},
{
accessorKey: "createdByName",
header: "Nama Pembuat",
cell: ({ row }) => <span>{row.getValue("createdByName")}</span>,
},
{
accessorKey: "description",
header: "Deskripsi",
cell: ({ row }) => <span>{htmlToString(row.getValue("description"))}</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"
>
<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">
<Link
href={`/curator/task-plan/mediahub/detail/${row.original.id}`}
>
Detail
</Link>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
);
},
},
];
export default columns;

183
app/[locale]/(protected)/curator/task-plan/mediahub/components/table.tsx Normal file
View File

@ -0,0 +1,183 @@
"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,
} from "lucide-react";
import { cn } from "@/lib/utils";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
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";
const TaskPlanMediahubTable = (props: {
data: any;
totalPage: number;
totalData: number;
}) => {
const { data, totalPage, totalData } = props;
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 [pagination, setPagination] = React.useState<PaginationState>({
pageIndex: 0,
pageSize: 10,
});
const [page, setPage] = React.useState(1);
const [limit, setLimit] = React.useState(10);
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();
}, [page, limit, data]);
async function fetchData() {
// try {
// const res = await ticketingPagination("", limit, page - 1);
// const data = res.data?.data;
console.log("datgaa", data);
const contentData = data;
contentData.forEach((item: any, index: number) => {
item.no = (page - 1) * limit + index + 1;
});
console.log("contentData : ", contentData);
setDataTable(contentData);
// setTotalData(data?.totalElements);
// } catch (error) {
// console.error("Error fetching tasks:", error);
// }
}
return (
<div className="w-full overflow-x-auto">
<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>
);
};
export default TaskPlanMediahubTable;

436
app/[locale]/(protected)/curator/task-plan/mediahub/create-daily/page.tsx Normal file
View File

@ -0,0 +1,436 @@
"use client";
import SiteBreadcrumb from "@/components/site-breadcrumb";
import { Button } from "@/components/ui/button";
import { Calendar } from "@/components/ui/calendar";
import { Input } from "@/components/ui/input";
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "@/components/ui/popover";
import { Link } from "@/i18n/routing";
import { CalendarIcon } from "lucide-react";
import React, { useRef, useState } from "react";
import { cn } from "@/lib/utils";
import { format } from "date-fns";
import JoditEditor from "jodit-react";
import {
Form,
FormControl,
FormDescription,
FormField,
FormItem,
FormLabel,
FormMessage,
} from "@/components/ui/form";
import { z } from "zod";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import Swal from "sweetalert2";
import withReactContent from "sweetalert2-react-content";
import { Checkbox } from "@/components/ui/checkbox";
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
const FormSchema = z.object({
date: z.date({
required_error: "Required",
}),
title: z.string({
required_error: "Required",
}),
detail: z.string({
required_error: "Required",
}),
output: z.array(z.string()).refine((value) => value.some((item) => item), {
message: "Required",
}),
unit: z.array(z.string()).refine((value) => value.some((item) => item), {
message: "Required",
}),
type: z.enum(["publication", "amplification", "contra"], {
required_error: "Required",
}),
});
const items = [
{
id: "video",
label: "Audio Visual",
},
{
id: "image",
label: "Foto",
},
{
id: "audio",
label: "Audio",
},
{
id: "text",
label: "Text",
},
];
const units = [
{
id: "mabes",
label: "Mabes Polri",
},
{
id: "polda",
label: "Polda",
},
{
id: "polres",
label: "Polres",
},
];
export default function CreateMonthly() {
const MySwal = withReactContent(Swal);
const form = useForm<z.infer<typeof FormSchema>>({
resolver: zodResolver(FormSchema),
defaultValues: {
unit: [],
output: [],
detail: "",
},
});
const editor = useRef(null);
const onSubmit = async (data: z.infer<typeof FormSchema>) => {
console.log("data", data);
if (form.getValues("detail") == "") {
form.setError("detail", {
type: "manual",
message: "Required",
});
} else {
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 output = form.watch("output");
const isAllChecked = items.every((item) => output?.includes(item.id));
const unit = form.watch("unit");
const isAllUnitChecked = units.every((item) => unit?.includes(item.id));
const handleAllCheckedChange = (checked: boolean | string) => {
if (checked) {
form.setValue(
"output",
items.map((item) => item.id)
);
} else {
form.setValue("output", []);
}
};
const handleItemCheckedChange = (id: string, checked: boolean | string) => {
form.setValue(
"output",
checked ? [...output, id] : output.filter((value) => value !== id)
);
};
const handleAllUnitCheckedChange = (checked: boolean | string) => {
if (checked) {
form.setValue(
"unit",
units.map((item) => item.id)
);
} else {
form.setValue("unit", []);
}
};
const handleUnitCheckedChange = (id: string, checked: boolean | string) => {
form.setValue(
"unit",
checked ? [...unit, id] : unit.filter((value) => value !== id)
);
};
return (
<div>
<SiteBreadcrumb />
<div className="flex flex-col gap-4">
<div className="flex flex-row justify-center gap-5 mt-10">
<Link
href="/curator/task-plan/mediahub/create-monthly"
className="bg-slate-200 text-black rounded-full px-5 py-2 text-sm"
>
Bulanan
</Link>
<Link
href="/curator/task-plan/mediahub/create-weekly"
className="bg-slate-200 text-black rounded-full px-5 py-2 text-sm"
>
Mingguan
</Link>
<div className="bg-primary rounded-full px-5 py-2 text-white text-sm">
Harian
</div>
</div>
<div className="flex flex-col bg-white gap-2 p-6">
<p className="text-lg">Perencanaan MediaHub</p>
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-3">
<FormField
control={form.control}
name="title"
render={({ field }) => (
<FormItem>
<FormLabel>Judul Perencanaan</FormLabel>
<Input
value={field.value}
placeholder="Masukkan Judul Perencanaan"
onChange={field.onChange}
/>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="output"
render={() => (
<FormItem>
<div className="mb-4">
<FormLabel className="text-sm">Output Tugas</FormLabel>
</div>
<div className="flex flex-row gap-3 items-center ">
<div className="flex items-center gap-3">
<Checkbox
id="all"
checked={isAllChecked}
// indeterminate={isSomeChecked && !isAllChecked}
onCheckedChange={(checked) =>
handleAllCheckedChange(checked)
}
/>
<label htmlFor="all" className="text-sm">
Semua
</label>
</div>
{items.map((item) => (
<FormField
key={item.id}
control={form.control}
name="output"
render={({ field }) => {
return (
<FormItem
key={item.id}
className="flex flex-row items-start space-x-3 space-y-0"
>
<FormControl>
<Checkbox
checked={output?.includes(item.id)}
onCheckedChange={(checked) =>
handleItemCheckedChange(item.id, checked)
}
/>
</FormControl>
<FormLabel className="font-normal">
{item.label}
</FormLabel>
</FormItem>
);
}}
/>
))}
</div>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="unit"
render={() => (
<FormItem>
<div className="mb-4">
<FormLabel className="text-sm">Pelaksana Tugas</FormLabel>
</div>
<div className="flex flex-row gap-3 items-center ">
<div className="flex items-center gap-3">
<Checkbox
id="all"
checked={isAllUnitChecked}
onCheckedChange={(checked) =>
handleAllUnitCheckedChange(checked)
}
/>
<label htmlFor="all" className="text-sm">
Semua
</label>
</div>
{units.map((item) => (
<FormField
key={item.id}
control={form.control}
name="unit"
render={({ field }) => {
return (
<FormItem
key={item.id}
className="flex flex-row items-start space-x-3 space-y-0"
>
<FormControl>
<Checkbox
checked={unit?.includes(item.id)}
disabled={
item.id === "polres" &&
!unit.includes("polda")
}
onCheckedChange={(checked) =>
handleUnitCheckedChange(item.id, checked)
}
/>
</FormControl>
<FormLabel className="font-normal">
{item.label}
</FormLabel>
</FormItem>
);
}}
/>
))}
</div>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="type"
render={({ field }) => (
<FormItem>
<FormLabel>Jenis Penugasan</FormLabel>
<FormControl>
<RadioGroup
onValueChange={field.onChange}
defaultValue={field.value}
className="flex flex-row gap-3"
>
<FormItem className="flex items-center space-x-3 space-y-0">
<FormControl>
<RadioGroupItem value="publication" />
</FormControl>
<FormLabel className="font-normal">
Publikasi
</FormLabel>
</FormItem>
<FormItem className="flex items-center space-x-3 space-y-0">
<FormControl>
<RadioGroupItem value="amplification" />
</FormControl>
<FormLabel className="font-normal">
Amplifikasi
</FormLabel>
</FormItem>
<FormItem className="flex items-center space-x-3 space-y-0">
<FormControl>
<RadioGroupItem value="contra" />
</FormControl>
<FormLabel className="font-normal">Kontra</FormLabel>
</FormItem>
</RadioGroup>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="date"
render={({ field }) => (
<FormItem className="flex flex-col">
<FormLabel>Pilih Tanggal</FormLabel>
<Popover>
<PopoverTrigger asChild>
<Button
variant={"outline"}
className={cn(
"w-[280px] justify-start text-left font-normal",
!field.value && "text-muted-foreground"
)}
>
<CalendarIcon className="mr-2 h-4 w-4" />
{field.value ? (
format(field.value, "PPP")
) : (
<span>Masukkan Tanggal</span>
)}
</Button>
</PopoverTrigger>
<PopoverContent className="w-auto p-0">
<Calendar
mode="single"
selected={field.value}
onSelect={field.onChange}
initialFocus
/>
</PopoverContent>
</Popover>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="detail"
render={({ field }) => (
<FormItem>
<FormLabel>Detail Perencanaan</FormLabel>
<JoditEditor
ref={editor}
value={field.value}
className="dark:text-black"
onChange={field.onChange}
/>
<FormMessage />
</FormItem>
)}
/>
<div className="flex flex-row gap-2 justify-end mt-4 pt-4">
<Button type="submit" variant="outline" color="destructive">
Cancel
</Button>
<Button type="submit" color="primary">
Submit
</Button>
</div>
</form>
</Form>
</div>
</div>
</div>
);
}

227
app/[locale]/(protected)/curator/task-plan/mediahub/create-monthly/page.tsx Normal file
View File

@ -0,0 +1,227 @@
"use client";
import SiteBreadcrumb from "@/components/site-breadcrumb";
import { Button } from "@/components/ui/button";
import { Calendar } from "@/components/ui/calendar";
import { Input } from "@/components/ui/input";
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "@/components/ui/popover";
import { Link, useRouter } from "@/i18n/routing";
import { CalendarIcon } from "lucide-react";
import React, { useRef, useState } from "react";
import { cn } from "@/lib/utils";
import { format } from "date-fns";
import JoditEditor from "jodit-react";
import {
Form,
FormControl,
FormDescription,
FormField,
FormItem,
FormLabel,
FormMessage,
} from "@/components/ui/form";
import { z } from "zod";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import Swal from "sweetalert2";
import withReactContent from "sweetalert2-react-content";
import { error } from "@/config/swal";
import { savePlanning } from "@/service/agenda-setting/agenda-setting";
const FormSchema = z.object({
month: z.date({
required_error: "Required",
}),
title: z.string({
required_error: "Required",
}),
detail: z.string({
required_error: "Required",
}),
});
export default function CreateMonthly() {
const MySwal = withReactContent(Swal);
const router = useRouter();
const form = useForm<z.infer<typeof FormSchema>>({
resolver: zodResolver(FormSchema),
defaultValues: {
detail: "",
},
});
const editor = useRef(null);
const onSubmit = async (data: z.infer<typeof FormSchema>) => {
if (form.getValues("detail") == "") {
form.setError("detail", {
type: "manual",
message: "Required",
});
} else {
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>) => {
const reqData = {
planningTypeId: 1,
title: data.title,
time: "3",
description: data.detail,
username: "",
date: new Date(data.month).getMonth() + 1,
status: "Open",
};
console.log("req", reqData, data.month);
const response = await savePlanning(reqData);
close();
if (response.error) {
error(response.message);
return false;
}
MySwal.fire({
title: "Sukses",
icon: "success",
confirmButtonColor: "#3085d6",
confirmButtonText: "OK",
}).then((result) => {
if (result.isConfirmed) {
router.push("/curator/task-plan/mediahub");
}
});
};
const handleMonthSelect = (selectedDate: Date | undefined) => {
if (!selectedDate) return;
const newDate = new Date(
selectedDate.getFullYear(),
selectedDate.getMonth(),
1
);
form.setValue("month", newDate);
};
return (
<div>
<SiteBreadcrumb />
<div className="flex flex-col gap-4">
<div className="flex flex-row justify-center gap-5 mt-10">
<div className="bg-primary rounded-full px-5 py-2 text-white text-sm">
Bulanan
</div>
<Link
href="/curator/task-plan/mediahub/create-weekly"
className="bg-slate-200 text-black rounded-full px-5 py-2 text-sm"
>
Mingguan
</Link>
<Link
href="/curator/task-plan/mediahub/create-daily"
className="bg-slate-200 text-black rounded-full px-5 py-2 text-sm"
>
Harian
</Link>
</div>
<div className="flex flex-col bg-white gap-2 p-6">
<p className="text-lg">Perencanaan MediaHub Bulanan</p>
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-3">
<FormField
control={form.control}
name="title"
render={({ field }) => (
<FormItem>
<FormLabel>Judul Perencanaan</FormLabel>
<Input
value={field.value}
placeholder="Masukkan Judul Perencanaan"
onChange={field.onChange}
/>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="month"
render={({ field }) => (
<FormItem className="flex flex-col">
<FormLabel>Pilih Bulan</FormLabel>
<Popover>
<PopoverTrigger asChild>
<Button
variant={"outline"}
className={cn(
"w-[280px] justify-start text-left font-normal",
!field.value && "text-muted-foreground"
)}
>
<CalendarIcon className="mr-2 h-4 w-4" />
{field.value ? (
format(field.value, "MMMM yyyy")
) : (
<span>Masukkan Bulan</span>
)}
</Button>
</PopoverTrigger>
<PopoverContent className="w-auto p-0">
<Calendar
mode="single"
selected={field.value}
onSelect={handleMonthSelect}
initialFocus
/>
</PopoverContent>
</Popover>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="detail"
render={({ field }) => (
<FormItem>
<FormLabel>Detail Perencanaan</FormLabel>
<JoditEditor
ref={editor}
value={field.value}
className="dark:text-black"
onChange={field.onChange}
/>
<FormMessage />
</FormItem>
)}
/>
<div className="flex flex-row gap-2 justify-end mt-4 pt-4">
<Button type="submit" variant="outline" color="destructive">
Cancel
</Button>
<Button type="submit" color="primary">
Submit
</Button>
</div>
</form>
</Form>
</div>
</div>
</div>
);
}

232
app/[locale]/(protected)/curator/task-plan/mediahub/create-weekly/page.tsx Normal file
View File

@ -0,0 +1,232 @@
"use client";
import SiteBreadcrumb from "@/components/site-breadcrumb";
import { Button } from "@/components/ui/button";
import { Calendar } from "@/components/ui/calendar";
import { Input } from "@/components/ui/input";
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "@/components/ui/popover";
import { Link, useRouter } from "@/i18n/routing";
import { CalendarIcon } from "lucide-react";
import React, { useRef, useState } from "react";
import { cn } from "@/lib/utils";
import { format } from "date-fns";
import JoditEditor from "jodit-react";
import {
Form,
FormControl,
FormDescription,
FormField,
FormItem,
FormLabel,
FormMessage,
} from "@/components/ui/form";
import { z } from "zod";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import Swal from "sweetalert2";
import withReactContent from "sweetalert2-react-content";
import { error } from "@/config/swal";
import { getOnlyDate } from "@/utils/globals";
import { savePlanning } from "@/service/agenda-setting/agenda-setting";
const FormSchema = z.object({
week: z.object({
from: z.date({
required_error: "Start date (from) is required",
}),
to: z.date({
required_error: "End date (to) is required",
}),
}),
title: z.string({
required_error: "Required",
}),
detail: z.string({
required_error: "Required",
}),
});
export default function CreateMonthly() {
const MySwal = withReactContent(Swal);
const router = useRouter();
const form = useForm<z.infer<typeof FormSchema>>({
resolver: zodResolver(FormSchema),
defaultValues: {
detail: "",
},
});
const editor = useRef(null);
const onSubmit = async (data: z.infer<typeof FormSchema>) => {
if (form.getValues("detail") == "") {
form.setError("detail", {
type: "manual",
message: "Required",
});
} else {
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>) => {
const reqData = {
planningTypeId: 1,
title: data.title,
time: "2",
description: data.detail,
username: "",
date: `${getOnlyDate(data.week.from)} - ${getOnlyDate(data.week.to)}`,
status: "Open",
};
console.log("req", reqData);
const response = await savePlanning(reqData);
close();
if (response.error) {
error(response.message);
return false;
}
MySwal.fire({
title: "Sukses",
icon: "success",
confirmButtonColor: "#3085d6",
confirmButtonText: "OK",
}).then((result) => {
if (result.isConfirmed) {
router.push("/curator/task-plan/mediahub");
}
});
};
return (
<div>
<SiteBreadcrumb />
<div className="flex flex-col gap-4">
<div className="flex flex-row justify-center gap-5 mt-10">
<Link
href="/curator/task-plan/mediahub/create-monthly"
className="bg-slate-200 text-black rounded-full px-5 py-2 text-sm"
>
Bulanan
</Link>
<div className="bg-primary rounded-full px-5 py-2 text-white text-sm">
Mingguan
</div>
<Link
href="/curator/task-plan/mediahub/create-daily"
className="bg-slate-200 text-black rounded-full px-5 py-2 text-sm"
>
Harian
</Link>
</div>
<div className="flex flex-col bg-white gap-2 p-6">
<p className="text-lg">Perencanaan MediaHub Mingguan</p>
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-3">
<FormField
control={form.control}
name="title"
render={({ field }) => (
<FormItem>
<FormLabel>Judul Perencanaan</FormLabel>
<Input
value={field.value}
placeholder="Masukkan Judul Perencanaan"
onChange={field.onChange}
/>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="week"
render={({ field }) => (
<FormItem className="flex flex-col">
<FormLabel>Pilih Tanggal</FormLabel>
<Popover>
<PopoverTrigger asChild>
<Button
variant={"outline"}
className={cn(
"w-[280px] justify-start text-left font-normal",
!field.value && "text-muted-foreground"
)}
>
<CalendarIcon className="mr-2 h-4 w-4" />
{field.value?.from ? (
field.value.to ? (
<>
{format(field.value.from, "LLL dd, y")} -{" "}
{format(field.value.to, "LLL dd, y")}
</>
) : (
format(field.value.from, "LLL dd, y")
)
) : (
<span>Masukkan Tanggal</span>
)}
</Button>
</PopoverTrigger>
<PopoverContent className="w-auto p-0">
<Calendar
mode="range"
selected={field.value}
onSelect={field.onChange}
initialFocus
/>
</PopoverContent>
</Popover>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="detail"
render={({ field }) => (
<FormItem>
<FormLabel>Detail Perencanaan</FormLabel>
<JoditEditor
ref={editor}
value={field.value}
className="dark:text-black"
onChange={field.onChange}
/>
<FormMessage />
</FormItem>
)}
/>
<div className="flex flex-row gap-2 justify-end mt-4 pt-4">
<Button type="submit" variant="outline" color="destructive">
Cancel
</Button>
<Button type="submit" color="primary">
Submit
</Button>
</div>
</form>
</Form>
</div>
</div>
</div>
);
}

270
app/[locale]/(protected)/curator/task-plan/mediahub/detail/[id]/page.tsx Normal file
View File

@ -0,0 +1,270 @@
"use client";
import SiteBreadcrumb from "@/components/site-breadcrumb";
import { Checkbox } from "@/components/ui/checkbox";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
import { close, loading } from "@/config/swal";
import { getWeeklyPlanList } from "@/service/agenda-setting/agenda-setting";
import { getPlanningById } from "@/service/planning/planning";
import { useParams } from "next/navigation";
import dayjs from "dayjs";
import { useEffect, useRef, useState } from "react";
import {
Select,
SelectContent,
SelectGroup,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import JoditEditor from "jodit-react";
export default function DetailTaskPlanMediahub() {
const params = useParams();
const id = params?.id;
const editor = useRef(null);
const [planningData, setPlanningData] = useState<any>();
const [type, setType] = useState("");
const [weeklyList, setWeeklyList] = useState<any>([]);
const [weeklySelected, setWeeklySelected] = useState();
const [taskOutput, setTaskOutput] = useState<any>([]);
const [destination, setDestination] = useState<any>([]);
const [listDest, setListDest] = useState([]);
const [topDestination, setTopDestination] = useState<any>([]);
useEffect(() => {
initFetch();
}, [id]);
async function initFetch() {
if (id != undefined) {
loading();
const res = await getPlanningById(id);
close();
if (res?.data?.data != undefined) {
const data = res?.data?.data;
console.log("Data :", data);
setPlanningData(data);
setAssignedTopLevel(data?.assignedToTopLevel);
setArrayDestination(data?.assignedToLevel);
setArrayTaskOutput(data?.fileTypeOutput);
setType(String(data?.assignmentTypeId));
}
}
}
function setArrayDestination(assignedToLevel: any) {
if (assignedToLevel?.length > 0) {
const arrayDestination = [];
const arrayDest = assignedToLevel.split(",");
for (const element of arrayDest) {
arrayDestination.push(element);
}
setDestination(arrayDestination);
}
}
function setAssignedTopLevel(assignedToTopLevel: any) {
if (assignedToTopLevel?.length > 0) {
const arrayTopLevel = [];
const arrayTop = assignedToTopLevel.split(",");
for (const element of arrayTop) {
arrayTopLevel.push(Number(element));
}
setTopDestination(arrayTopLevel);
}
}
function setArrayTaskOutput(output: any) {
if (output?.length > 0) {
const arrayOutput = [];
const arrOutput = output.split(",");
for (const element of arrOutput) {
arrayOutput.push(Number(element));
}
setTaskOutput(arrayOutput);
}
}
useEffect(() => {
getWeeklyPlanning();
}, [planningData]);
async function getWeeklyPlanning() {
const TODAY = dayjs().format("YYYY-MM-DD");
const res = await getWeeklyPlanList(planningData?.date || TODAY, 1);
if (res.data !== null) {
const rawUser = res.data?.data;
const optionArr = rawUser.map((option: any) => ({
id: option.id,
label: option.title,
value: option.id,
}));
console.log("res", optionArr);
setWeeklyList(optionArr);
}
}
return (
<>
<SiteBreadcrumb />
<div className="text-black flex flex-col gap-4">
<p className="text-lg">Perencanaan Mediahub</p>
<p className="text-sm">Judul Perencanaan</p>
<Input value={planningData?.title} readOnly />
<p className="text-sm">Output Tugas</p>
<div className="flex flex-row gap-3">
<div className="flex items-center space-x-2">
<Checkbox
id="all"
checked={taskOutput ? taskOutput.length == 4 : false}
/>
<label
htmlFor="all"
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
>
Semua
</label>
</div>
<div className="flex items-center space-x-2">
<Checkbox
id="all"
checked={taskOutput ? taskOutput.includes(2) : false}
/>
<label
htmlFor="all"
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
>
Audio Visual
</label>
</div>
<div className="flex items-center space-x-2">
<Checkbox
id="all"
checked={taskOutput ? taskOutput.includes(4) : false}
/>
<label
htmlFor="all"
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
>
Audio
</label>
</div>
<div className="flex items-center space-x-2">
<Checkbox
id="all"
checked={taskOutput ? taskOutput.includes(1) : false}
/>
<label
htmlFor="all"
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
>
Foto
</label>
</div>
<div className="flex items-center space-x-2">
<Checkbox
id="all"
checked={taskOutput ? taskOutput.includes(3) : false}
/>
<label
htmlFor="all"
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
>
Text
</label>
</div>
</div>
<p className="text-sm">Pelaksana Tugas</p>
<div className="flex flex-row gap-3">
<div className="flex items-center space-x-2">
<Checkbox
id="all"
checked={topDestination ? topDestination.includes(0) : false}
/>
<label
htmlFor="all"
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
>
Semua Unit
</label>
</div>
<div className="flex items-center space-x-2">
<Checkbox
id="all"
checked={topDestination ? topDestination.includes(1) : false}
/>
<label
htmlFor="all"
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
>
Mabes Polri
</label>
</div>
<div className="flex items-center space-x-2">
<Checkbox
id="all"
checked={topDestination ? topDestination.includes(2) : false}
/>
<label
htmlFor="all"
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
>
Polda
</label>
</div>
<div className="flex items-center space-x-2">
<Checkbox
id="all"
checked={topDestination ? topDestination.includes(3) : false}
/>
<label
htmlFor="all"
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
>
Polres
</label>
</div>
</div>
<p className="text-sm">Jenis Penugasan</p>
<RadioGroup className="flex flex-row" disabled>
<div className="flex items-center space-x-2">
<RadioGroupItem value="1" id="1" checked={type === "1"} />
<Label htmlFor="1">Publikasi {type}</Label>
</div>
<div className="flex items-center space-x-2">
<RadioGroupItem value="2" id="2" checked={type === "2"} />
<Label htmlFor="2">Amplifikasi</Label>
</div>
<div className="flex items-center space-x-2">
<RadioGroupItem value="3" id="3" checked={type === "3"} />
<Label htmlFor="3">Kontra</Label>
</div>
</RadioGroup>
<p className="text-sm">Tanggal</p>
<Input value={planningData?.date} className="w-fit" readOnly />
<p className="text-sm">Penugasan Mingguan</p>
<Input value={weeklyList[0]?.label} readOnly />
<JoditEditor
ref={editor}
value={planningData?.description}
className="dark:text-black"
config={{ readonly: true, toolbar: false }}
/>
</div>
</>
);
}

9
app/[locale]/(protected)/curator/task-plan/mediahub/layout.tsx Normal file
View File

@ -0,0 +1,9 @@
export const metadata = {
title: "Mediahub",
};
const Layout = ({ children }: { children: React.ReactNode }) => {
return <>{children}</>;
};
export default Layout;

37
app/[locale]/(protected)/curator/task-plan/mediahub/page.tsx Normal file
View File

@ -0,0 +1,37 @@
"use client";
import SiteBreadcrumb from "@/components/site-breadcrumb";
import ListViewTable from "@/components/table/task-plan/list-view-table";
import SingleViewTable from "@/components/table/task-plan/single-view-table";
import { Button } from "@/components/ui/button";
import { useRouter } from "@/i18n/routing";
import { useState } from "react";
export default function TaskPlanMediaHub() {
const router = useRouter();
const [view, setView] = useState("single");
return (
<>
<SiteBreadcrumb />
<div className="flex flex-col gap-4">
<div className="flex justify-between">
<Button
onClick={() =>
view === "single" ? setView("list") : setView("single")
}
>
{view == "single" ? "List" : "Single"} View
</Button>
<Button
color="primary"
onClick={() =>
router.push("/curator/task-plan/mediahub/create-monthly")
}
>
Buat Perencaan
</Button>
</div>
{view == "single" ? <SingleViewTable /> : <ListViewTable />}
</div>
</>
);
}

9
app/[locale]/(protected)/curator/task-plan/medsos-mediahub/layout.tsx Normal file
View File

@ -0,0 +1,9 @@
export const metadata = {
title: "Medos Mediahub",
};
const Layout = ({ children }: { children: React.ReactNode }) => {
return <>{children}</>;
};
export default Layout;

9
app/[locale]/(protected)/curator/task-plan/medsos-mediahub/page.tsx Normal file
View File

@ -0,0 +1,9 @@
import SiteBreadcrumb from "@/components/site-breadcrumb";
export default function TaskPlanMedsosMediaHub() {
return (
<div>
<SiteBreadcrumb />
</div>
);
}

17
app/[locale]/(protected)/dashboard/page.tsx
View File

@ -1,4 +1,4 @@
'use client'
"use client";
import { StatisticsBlock } from "@/components/blocks/statistics-block";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
@ -7,6 +7,12 @@ import { useTranslations } from "next-intl";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Button } from "@/components/ui/button";
import { UploadIcon } from "lucide-react";
import Cookies from "js-cookie";
import { useEffect } from "react";
import { getCookiesDecrypt } from "@/lib/utils";
import DashboardVisualization from "@/components/visualization/dashboard-viz";
import SiteBreadcrumb from "@/components/site-breadcrumb";
import TaskTable from "../contributor/task/components/task-table";
import PressConferenceTable from "../contributor/schedule/press-release/components/pressrilis-table";
import BlogTable from "../contributor/blog/components/blog-table";
@ -16,7 +22,14 @@ import { Link } from "@/components/navigation";
const DashboardPage = () => {
const t = useTranslations("AnalyticsDashboard");
return (
const roleId = getCookiesDecrypt("urie");
return Number(roleId) == 2 || Number(roleId) == 11 || Number(roleId) == 12 ? (
<div>
<SiteBreadcrumb />
<DashboardVisualization />
</div>
) : (
<div>
<div className="my-3">
<Tabs defaultValue="routine-task" className="w-full">

4
app/[locale]/(public)/audio/layout.tsx
View File

@ -6,8 +6,8 @@ import ThemeCustomize from "@/components/partials/customizer";
import DashCodeHeader from "@/components/partials/header";
import { redirect } from "@/components/navigation";
import Footer from "@/components/landing-page/footer";
import Navbar from "@/components/landing-page/navbar";
import Footer from "@/components/landing-page/Footer";
import Navbar from "@/components/landing-page/Navbar";
const layout = async ({ children }: { children: React.ReactNode }) => {
return (

4
app/[locale]/(public)/contact/layout.tsx
View File

@ -6,8 +6,8 @@ import ThemeCustomize from "@/components/partials/customizer";
import DashCodeHeader from "@/components/partials/header";
import { redirect } from "@/components/navigation";
import Navbar from "@/components/landing-page/navbar";
import Footer from "@/components/landing-page/footer";
import Navbar from "@/components/landing-page/Navbar";
import Footer from "@/components/landing-page/Footer";
const layout = async ({ children }: { children: React.ReactNode }) => {
return (

4
app/[locale]/(public)/document/layout.tsx
View File

@ -6,8 +6,8 @@ import ThemeCustomize from "@/components/partials/customizer";
import DashCodeHeader from "@/components/partials/header";
import { redirect } from "@/components/navigation";
import Footer from "@/components/landing-page/footer";
import Navbar from "@/components/landing-page/navbar";
import Footer from "@/components/landing-page/Footer";
import Navbar from "@/components/landing-page/Navbar";
const layout = async ({ children }: { children: React.ReactNode }) => {
return (

4
app/[locale]/(public)/faqs/layout.tsx
View File

@ -6,8 +6,8 @@ import ThemeCustomize from "@/components/partials/customizer";
import DashCodeHeader from "@/components/partials/header";
import { redirect } from "@/components/navigation";
import Navbar from "@/components/landing-page/navbar";
import Footer from "@/components/landing-page/footer";
import Navbar from "@/components/landing-page/Navbar";
import Footer from "@/components/landing-page/Footer";
const layout = async ({ children }: { children: React.ReactNode }) => {
return (

4
app/[locale]/(public)/feedback/layout.tsx
View File

@ -6,8 +6,8 @@ import ThemeCustomize from "@/components/partials/customizer";
import DashCodeHeader from "@/components/partials/header";
import { redirect } from "@/components/navigation";
import Navbar from "@/components/landing-page/navbar";
import Footer from "@/components/landing-page/footer";
import Navbar from "@/components/landing-page/Navbar";
import Footer from "@/components/landing-page/Footer";
const layout = async ({ children }: { children: React.ReactNode }) => {
return (

4
app/[locale]/(public)/image/layout.tsx
View File

@ -6,8 +6,8 @@ import ThemeCustomize from "@/components/partials/customizer";
import DashCodeHeader from "@/components/partials/header";
import { redirect } from "@/components/navigation";
import Footer from "@/components/landing-page/footer";
import Navbar from "@/components/landing-page/navbar";
import Footer from "@/components/landing-page/Footer";
import Navbar from "@/components/landing-page/Navbar";
const layout = async ({ children }: { children: React.ReactNode }) => {
return (

4
app/[locale]/(public)/indeks/layout.tsx
View File

@ -6,8 +6,8 @@ import ThemeCustomize from "@/components/partials/customizer";
import DashCodeHeader from "@/components/partials/header";
import { redirect } from "@/components/navigation";
import Footer from "@/components/landing-page/footer";
import Navbar from "@/components/landing-page/navbar";
import Footer from "@/components/landing-page/Footer";
import Navbar from "@/components/landing-page/Navbar";
const layout = async ({ children }: { children: React.ReactNode }) => {
return (

4
app/[locale]/(public)/schedule/layout.tsx
View File

@ -6,8 +6,8 @@ import ThemeCustomize from "@/components/partials/customizer";
import DashCodeHeader from "@/components/partials/header";
import { redirect } from "@/components/navigation";
import Footer from "@/components/landing-page/footer";
import Navbar from "@/components/landing-page/navbar";
import Footer from "@/components/landing-page/Footer";
import Navbar from "@/components/landing-page/Navbar";
const layout = async ({ children }: { children: React.ReactNode }) => {
return (

4
app/[locale]/(public)/video/layout.tsx
View File

@ -6,8 +6,8 @@ import ThemeCustomize from "@/components/partials/customizer";
import DashCodeHeader from "@/components/partials/header";
import { redirect } from "@/components/navigation";
import Footer from "@/components/landing-page/footer";
import Navbar from "@/components/landing-page/navbar";
import Footer from "@/components/landing-page/Footer";
import Navbar from "@/components/landing-page/Navbar";
const layout = async ({ children }: { children: React.ReactNode }) => {
return (

95
app/[locale]/globals.css
View File

@ -34,8 +34,6 @@
--warning: 16 93% 70%;
--warning-foreground: 33.3 100% 96.5%;
--success: 154 52% 55%;
--success-foreground: 138.5 76.5% 96.7%;
@ -85,7 +83,6 @@
}
.dark {
--background: 222.2 47.4% 11.2%;
--foreground: 210 40% 98%;
@ -94,7 +91,6 @@
--popover: 222.2 84% 4.9%;
--popover-foreground: 210 40% 98%;
--card: 215 27.9% 16.9%;
--card-foreground: 210 40% 98%;
@ -166,19 +162,16 @@
.dashcode-app-codeVmapWarning path {
@apply fill-warning;
}
.dashcode-app-codeVmapWarning path .svg-map__location[aria-checked="true"] {
@apply fill-warning;
.dashcode-app-codeVmapWarning path .svg-map__location[aria-checked="true"] {
@apply fill-warning;
}
.dashcode-app-codeVmapSuccess path {
@apply fill-success;
}
.dashcode-app-codeVmapSuccess path .svg-map__location[aria-checked="true"] {
@apply fill-success;
.dashcode-app-codeVmapSuccess path .svg-map__location[aria-checked="true"] {
@apply fill-success;
}
@layer base {
* {
@apply border-border;
@ -208,7 +201,6 @@
padding-right: 0px !important;
}
.no-scrollbar::-webkit-scrollbar {
width: 0px;
}
@ -216,7 +208,6 @@
.no-scrollbar::-webkit-scrollbar-thumb {
background-color: transparent;
}
}
.logo-box-3 {
@ -227,15 +218,23 @@
@apply flex flex-col items-center justify-center;
}
.has-sticky-header::after {
position: absolute;
z-index: -10;
--tw-backdrop-blur: blur(12px);
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)
var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale)
var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)
var(--tw-backdrop-sepia);
--tw-content: "";
content: var(--tw-content);
background: linear-gradient(180deg, rgba(var(--v-theme-background)) 44%, rgba(var(--v-theme-background)) 73%, rgba(var(--v-theme-background)));
background: linear-gradient(
180deg,
rgba(var(--v-theme-background)) 44%,
rgba(var(--v-theme-background)) 73%,
rgba(var(--v-theme-background))
);
background-repeat: repeat;
block-size: 5.5rem;
inset-block-start: -2.5rem;
@ -248,10 +247,19 @@
position: absolute;
z-index: -10;
--tw-backdrop-blur: blur(12px);
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)
var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale)
var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)
var(--tw-backdrop-sepia);
--tw-content: "";
content: var(--tw-content);
background: linear-gradient(180deg, rgba(var(--v-theme-background)) 44%, rgba(var(--v-theme-background)) 73%, rgba(var(--v-theme-background)));
background: linear-gradient(
180deg,
rgba(var(--v-theme-background)) 44%,
rgba(var(--v-theme-background)) 73%,
rgba(var(--v-theme-background))
);
background-repeat: repeat;
block-size: 5.5rem;
inset-block-start: 1.5rem;
@ -365,7 +373,7 @@
@apply hidden;
}
.dashcode-app-calendar .fc .fc-list-sticky .fc-list-day>* {
.dashcode-app-calendar .fc .fc-list-sticky .fc-list-day > * {
@apply bg-default-50;
}
@ -373,12 +381,11 @@
@apply pt-0;
}
.dashcode-app-calendar .fc-timegrid-event-harness>.fc-timegrid-event {
.dashcode-app-calendar .fc-timegrid-event-harness > .fc-timegrid-event {
@apply static;
}
@media (max-width: 981px) {
.dashcode-app-calendar .fc-button-group,
.dashcode-app-calendar .fc .fc-toolbar {
display: block !important;
@ -445,14 +452,13 @@
@apply bg-success border-none text-primary-foreground text-center px-2 font-medium text-sm;
}
.dashcode-app-calendar .dark {
.dashcode-app-calendar .dark {
@apply bg-card-foreground border-none text-primary-foreground px-2 font-medium text-sm;
}
/* react select */
.dashcode-app .react-select .react-select.is-invalid .select__control {
.dashcode-app .react-select .react-select.is-invalid .select__control {
border-color: none !important;
}
@ -473,10 +479,13 @@
}
.dashcode-app .react-select .select__menu .select__option {
@apply hover:bg-default/10;
@apply hover:bg-default/10;
}
.dashcode-app .react-select .select__menu .select__option.select__option--is-selected {
.dashcode-app
.react-select
.select__menu
.select__option.select__option--is-selected {
@apply bg-default dark:bg-default-200;
}
@ -492,11 +501,16 @@
@apply text-default-500;
}
.dashcode-app .react-select .react-select__control.select__control--is-disabled {
.dashcode-app
.react-select
.react-select__control.select__control--is-disabled {
@apply cursor-not-allowed;
}
.dashcode-app .react-select .react-select__control .select__indicator-separator {
.dashcode-app
.react-select
.react-select__control
.select__indicator-separator {
@apply bg-default-50 text-default-800 placeholder:text-opacity-60;
}
@ -504,7 +518,12 @@
@apply cursor-pointer text-default-600;
}
.dashcode-app .react-select .has-error .react-select__control .select__indicator svg {
.dashcode-app
.react-select
.has-error
.react-select__control
.select__indicator
svg {
@apply text-destructive;
}
@ -520,9 +539,9 @@
@apply fill-default-foreground;
}
html[dir=rtl] .react-select .select__loading-indicator {
html[dir="rtl"] .react-select .select__loading-indicator {
flex-direction: row-reverse;
}
}
/* quil editor */
.ql-container {
@ -540,4 +559,18 @@ html[dir=rtl] .react-select .select__loading-indicator {
width: 100%;
}
.custom-scrollbar-table::-webkit-scrollbar {
width: 1px;
}
.custom-scrollbar-table::-webkit-scrollbar-track {
background: #e5e7eb;
}
.custom-scrollbar-table::-webkit-scrollbar-thumb {
background: #6b7280;
}
.custom-scrollbar-table::-webkit-scrollbar-thumb:hover {
background: #9ca3af;
}

4
app/[locale]/page.tsx
View File

@ -5,8 +5,8 @@ import NewContent from "@/components/landing-page/new-content";
import PopularContent from "@/components/landing-page/popular-content";
import ContentCategory from "@/components/landing-page/content-category";
import Coverage from "@/components/landing-page/coverage";
import Hero from "@/components/landing-page/hero";
import Footer from "@/components/landing-page/footer";
import Hero from "@/components/landing-page/Hero";
import Footer from "@/components/landing-page/Footer";
import Division from "@/components/landing-page/division";
import Navbar from "@/components/landing-page/navbar";
import { ReactLenis } from "@studio-freight/react-lenis";

12
components/page-title.tsx
View File

@ -1,8 +1,8 @@
"use client";
import React from "react";
import React, { useEffect } from "react";
import DateRangePicker from "@/components/date-range-picker";
import { usePathname } from "@/components/navigation";
import { cn } from "@/lib/utils";
import { cn, getCookiesDecrypt } from "@/lib/utils";
const PageTitle = ({
title,
@ -13,8 +13,14 @@ const PageTitle = ({
}) => {
const pathname = usePathname();
const name = pathname?.split("/").slice(1).join(" ");
const roleId = getCookiesDecrypt("urie");
return (
useEffect(() => {
console.log("role", roleId);
}, [roleId]);
return Number(roleId) == 2 || Number(roleId) == 11 || Number(roleId) == 12 ? (
""
) : (
<div
className={cn(
"flex flex-wrap gap-4 items-center justify-between",

128
components/partials/footer/index.tsx
View File

@ -1,75 +1,61 @@
"use client"
import React from 'react'
import FooterContent from './footer-content'
import { Link } from "@/components/navigation"
import Image from 'next/image'
import React from "react";
import FooterContent from "./footer-content";
import { Link } from "@/components/navigation";
import Image from "next/image";
import { Icon } from "@/components/ui/icon";
const DashCodeFooter = () => {
return (
<FooterContent>
<div className=' md:flex justify-between text-default-600 hidden'>
<div className="text-center ltr:md:text-start rtl:md:text-right text-sm">
</div>
<div className="ltr:md:text-right rtl:md:text-end text-center text-sm">
COPYRIGHT &copy; {new Date().getFullYear()} Media Hub, All rights Reserved
</div>
</div>
<div className='flex md:hidden justify-around items-center'>
<Link href="/app/chat" className="text-default-600">
<div>
<span
className="relative cursor-pointer rounded-full text-[20px] flex flex-col items-center justify-center mb-1"
>
<Icon icon="heroicons-outline:mail" />
<span className="absolute right-[5px] lg:top-0 -top-2 h-4 w-4 bg-red-500 text-[8px] font-semibold flex flex-col items-center justify-center rounded-full text-white z-[99]">
10
</span>
</span>
<span
className="block text-xs text-default-600"
>
Messages
</span>
</div>
</Link>
<Link
href="profile"
className="relative bg-card bg-no-repeat backdrop-filter backdrop-blur-[40px] rounded-full footer-bg dark:bg-default-300 h-[65px] w-[65px] z-[-1] -mt-[40px] flex justify-center items-center"
>
<div className="h-[50px] w-[50px] rounded-full relative left-[0px] top-[0px] custom-dropshadow">
<Image
src={"https://netidhub.com/assets/img/user-avatar.png"}
alt={"Image"}
width={50}
height={50}
className="w-full h-full rounded-full border-2"
/>
</div>
</Link>
<Link href="notifications">
<div>
<span
className="relative cursor-pointer rounded-full text-[20px] flex flex-col items-center justify-center mb-1"
>
<Icon icon="heroicons-outline:bell" />
<span className="absolute right-[17px] lg:top-0 -top-2 h-4 w-4 bg-red-500 text-[8px] font-semibold flex flex-col items-center justify-center rounded-full text-white z-[99]">
2
</span>
</span>
<span
className="block text-xs text-default-600"
>
Notifications
</span>
</div>
</Link>
</div>
return (
<FooterContent>
<div className=" md:flex justify-between text-default-600 hidden">
<div className="text-center ltr:md:text-start rtl:md:text-right text-sm"></div>
<div className="ltr:md:text-right rtl:md:text-end text-center text-sm">
COPYRIGHT &copy; {new Date().getFullYear()} Media Hub, All rights
Reserved
</div>
</div>
<div className="flex md:hidden justify-around items-center">
<Link href="/app/chat" className="text-default-600">
<div>
<span className="relative cursor-pointer rounded-full text-[20px] flex flex-col items-center justify-center mb-1">
<Icon icon="heroicons-outline:mail" />
<span className="absolute right-[5px] lg:top-0 -top-2 h-4 w-4 bg-red-500 text-[8px] font-semibold flex flex-col items-center justify-center rounded-full text-white z-[99]">
10
</span>
</span>
<span className="block text-xs text-default-600">Messages</span>
</div>
</Link>
<Link
href="profile"
className="relative bg-card bg-no-repeat backdrop-filter backdrop-blur-[40px] rounded-full footer-bg dark:bg-default-300 h-[65px] w-[65px] z-[-1] -mt-[40px] flex justify-center items-center"
>
<div className="h-[50px] w-[50px] rounded-full relative left-[0px] top-[0px] custom-dropshadow">
<Image
src={"https://netidhub.com/assets/img/user-avatar.png"}
alt={"Image"}
width={50}
height={50}
className="w-full h-full rounded-full border-2"
/>
</div>
</Link>
<Link href="notifications">
<div>
<span className="relative cursor-pointer rounded-full text-[20px] flex flex-col items-center justify-center mb-1">
<Icon icon="heroicons-outline:bell" />
<span className="absolute right-[17px] lg:top-0 -top-2 h-4 w-4 bg-red-500 text-[8px] font-semibold flex flex-col items-center justify-center rounded-full text-white z-[99]">
2
</span>
</span>
<span className="block text-xs text-default-600">
Notifications
</span>
</div>
</Link>
</div>
</FooterContent>
);
};
</FooterContent>
)
}
export default DashCodeFooter
export default DashCodeFooter;

24
components/partials/header/profile-info.tsx
View File

@ -1,3 +1,4 @@
"use client";
import {
DropdownMenu,
DropdownMenuContent,
@ -14,9 +15,16 @@ import {
import { Icon } from "@/components/ui/icon";
import Image from "next/image";
import { Link } from "@/i18n/routing";
import React from "react";
import { Button } from "@/components/ui/button";
import Cookies from "js-cookie";
import { useEffect } from "react";
const ProfileInfo = () => {
const username = Cookies.get("state");
const picture = Cookies.get("profile_picture");
useEffect(() => {
console.log("us", username);
}, [username]);
return (
<div className="md:block hidden">
@ -24,15 +32,15 @@ const ProfileInfo = () => {
<DropdownMenuTrigger asChild className=" cursor-pointer">
<div className=" flex items-center gap-3 text-default-800 ">
<Image
src={"https://netidhub.com/assets/img/user-avatar.png"}
alt={"Image"}
src={"/images/avatar/icon-avatar-1.png"}
alt={username as string}
width={36}
height={36}
className="rounded-full"
/>
<div className="text-sm font-medium capitalize lg:block hidden ">
UserName
{username}
</div>
<span className="text-base me-2.5 lg:inline-block hidden">
<Icon icon="heroicons-outline:chevron-down"></Icon>
@ -42,8 +50,8 @@ const ProfileInfo = () => {
<DropdownMenuContent className="w-56 p-0" align="end">
<DropdownMenuLabel className="flex gap-2 items-center mb-1 p-3">
<Image
src={"https://netidhub.com/assets/img/user-avatar.png"}
alt={"Image"}
src={"/images/avatar/icon-avatar-1.png"}
alt={username as string}
width={36}
height={36}
className="rounded-full"
@ -51,13 +59,13 @@ const ProfileInfo = () => {
<div>
<div className="text-sm font-medium text-default-800 capitalize ">
Name
{username}
</div>
<Link
href="/dashboard"
className="text-xs text-default-600 hover:text-primary"
>
Email
{username}
</Link>
</div>
</DropdownMenuLabel>

133
components/table/task-plan/list-view-column.tsx Normal file
View File

@ -0,0 +1,133 @@
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 { htmlToString } from "@/utils/globals";
import { Link, useRouter } from "@/i18n/routing";
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from "@/components/ui/accordion";
import {
Dialog,
DialogContent,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog";
const columns: ColumnDef<any>[] = [
{
accessorKey: "no",
header: "No",
cell: ({ row }) => <span>{row.getValue("no")}</span>,
},
// {
// accessorKey: "title",
// header: "Judul Perencanaan",
// cell: ({ row }) => <span>{row.getValue("title")}</span>,
// },
{
accessorKey: "title",
header: "Judul Perencanaan",
cell: ({ row }) => {
const datas = row.original.subPlanningList;
return (
<Dialog>
<DialogTrigger asChild>
<a className="cursor-pointer">{row.getValue("title")}</a>
</DialogTrigger>
<DialogContent size="md">
<DialogHeader>
<DialogTitle>Rencanaan Mingguan</DialogTitle>
</DialogHeader>
<table>
<tr>
<th className="text-left">Judul Perencanaan</th>
<th>Batas Waktu</th>
<th>Status</th>
<th>Aksi</th>
</tr>
{datas?.map((data: any) => (
<tr key={data.id}>
<th className="text-left font-normal text-sm">
{data.title}
</th>
<th className="font-normal text-sm">{data.date}</th>
<th className="font-normal text-sm">{data.status}</th>
<th className="flex justify-center text-sm">
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button
size="icon"
className="bg-transparent ring-offset-transparent hover:bg-transparent hover:ring-0 hover:ring-transparent"
>
<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">
Detail
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</th>
</tr>
))}
</table>
</DialogContent>
</Dialog>
);
},
},
{
accessorKey: "date",
header: "Batas Waktu",
cell: ({ row }) => <span>{row.getValue("date")}</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"
>
<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">
Detail
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
);
},
},
];
export default columns;

179
components/table/task-plan/list-view-table.tsx Normal file
View File

@ -0,0 +1,179 @@
"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,
} from "lucide-react";
import { cn } from "@/lib/utils";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
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 "./list-view-column";
import { getPlanningPagination } from "@/service/agenda-setting/agenda-setting";
const ListViewTable = () => {
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 [pagination, setPagination] = React.useState<PaginationState>({
pageIndex: 0,
pageSize: 10,
});
const [page, setPage] = React.useState(1);
const [limit, setLimit] = React.useState(10);
const [totalPage, setTotalPage] = React.useState(1);
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();
}, [page, limit]);
async function fetchData() {
try {
const res = await getPlanningPagination(page - 1, "", 10, 1, 3);
const data = res.data?.data;
const contentData = data?.content;
contentData.forEach((item: any, index: number) => {
item.no = (page - 1) * limit + index + 1;
});
console.log("contentData : ", data);
setDataTable(contentData);
setTotalData(data?.totalElements);
setTotalPage(data?.totalPages);
} catch (error) {
console.error("Error fetching tasks:", error);
}
}
return (
<div className="w-full overflow-x-auto">
<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>
);
};
export default ListViewTable;

328
components/table/task-plan/single-view-table.tsx Normal file
View File

@ -0,0 +1,328 @@
"use client";
import dayjs from "dayjs";
import { useEffect, useRef, useState } from "react";
import utc from "dayjs/plugin/utc";
import { ChevronLeft, ChevronRight } from "lucide-react";
import { close, loading } from "@/config/swal";
import { useSearchParams } from "next/navigation";
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";
import "swiper/css/free-mode";
import "swiper/css/navigation";
import "swiper/css/thumbs";
import Image from "next/image";
import { FreeMode, Navigation, Thumbs } from "swiper/modules";
import { Swiper as SwiperType } from "swiper/types";
import {
getMonthlyPlanList,
getPlanningDailyByTypeId,
getWeeklyPlanList,
getWeeklyPlanListByParentId,
} from "@/service/agenda-setting/agenda-setting";
import TaskPlanMediahubTable from "@/app/[locale]/(protected)/curator/task-plan/mediahub/components/table";
const TODAY = dayjs().format("YYYY-MM-DD"); // Pastikan Anda mendefinisikan TODAY dengan format yang konsisten
export default function SingleViewTable() {
const params = useSearchParams();
const [selectedMonthItem, setSelectedMonthItem] = useState<
string | undefined
>(undefined);
const [selectedWeekly, setSelectedWeekly] = useState<string | undefined>(
undefined
);
const [selectedDate, setSelectedDate] = useState<number>(
new Date(TODAY).getDate()
);
const [nowDate, setNowDate] = useState<string>(TODAY);
const INITIAL_YEAR = dayjs().format("YYYY");
const INITIAL_MONTH = dayjs().format("M");
const size = 20;
const page: string | undefined | null = params?.get("page");
const id: string | undefined | null = params?.get("id");
const pages = page ? Number(page) - 1 : 0;
const no = (size || 10) * pages;
const [selectedMonth, setSelectedMonth] = useState<dayjs.Dayjs>(
dayjs(new Date(parseInt(INITIAL_YEAR), parseInt(INITIAL_MONTH) - 1, 1))
);
const [selectedMonthTitle, setSelectedMonthTitle] = useState<string>("");
const [days, setDays] = useState<any>([]);
const weekday = require("dayjs/plugin/weekday");
const weekOfYear = require("dayjs/plugin/weekOfYear");
dayjs.extend(utc);
dayjs.extend(weekday);
dayjs.extend(weekOfYear);
const [monthlyList, setMonthlyList] = useState([]);
const [weeklyList, setWeeklyList] = useState([]);
const [getData, setGetData] = useState<any>([]);
const [getTotalPage, setGetTotalPage] = useState<number>(1);
const [getTOtalData, setGetTotalData] = useState(0);
useEffect(() => {
createCalendar("START");
}, []);
function createDaysForCurrentMonth(
year: string,
month: string,
daysInMonth: number
) {
const days: any = [];
for (let day = 1; day <= daysInMonth; day++) {
const date = dayjs(
new Date(parseInt(year), parseInt(month) - 1, day)
).format("YYYY-MM-DD");
days.push({
date,
isCurrentMonth: true,
isToday: date === TODAY,
});
}
return days;
}
async function getMonthlyPlanning(dates: number) {
const res = await getMonthlyPlanList(dates, 1);
console.log("monthsss", res);
setMonthlyList(res.data?.data);
}
async function getWeeklyPlanning(
id: string | undefined,
date: number | undefined
) {
if (id) {
const res = await getWeeklyPlanListByParentId(id, 1);
setWeeklyList(res.data?.data);
} else {
const res = await getWeeklyPlanList(date, 1, true);
setWeeklyList(res.data?.data);
}
}
function createCalendar(
year: string = INITIAL_YEAR,
month: string = INITIAL_MONTH
) {
const state = year;
year = year === "START" ? INITIAL_YEAR : year;
setSelectedMonthTitle(
dayjs(new Date(parseInt(year), parseInt(month) - 1))
.utc()
.local()
.format("MMMM YYYY")
);
const currentMonthDays = createDaysForCurrentMonth(
year,
month,
dayjs(`${year}-${month}-01`).daysInMonth()
);
console.log("Month:", currentMonthDays);
getMonthlyPlanning(state === "START" ? TODAY : currentMonthDays[0]?.date);
getWeeklyPlanning(
undefined,
state === "START" ? TODAY : currentMonthDays[0]?.date
);
setDays(currentMonthDays);
console.log("currentMonthDays", currentMonthDays);
}
async function fetchData(
parentId: string | number | undefined,
date?: string
) {
loading();
const response = await getPlanningDailyByTypeId(
pages,
size,
parentId || selectedWeekly,
date || nowDate || TODAY,
1
);
close();
setupData(response.data?.data);
}
function setupData(rawData: any) {
if (rawData != undefined) {
const dataContent = rawData?.content;
const data = [];
for (const [i, element] of dataContent.entries()) {
element.no = no + i + 1;
data.push(element);
}
setGetData(data);
setGetTotalPage(rawData?.totalPages);
setGetTotalData(rawData?.totalElements);
}
}
function getPrevMonth() {
const selectedMonthNew = dayjs(selectedMonth).subtract(1, "month");
createCalendar(
selectedMonthNew.format("YYYY"),
selectedMonthNew.format("M")
);
fetchData(undefined, selectedMonthNew?.format("YYYY-MM-DD"));
setSelectedMonth(selectedMonthNew);
setSelectedDate(1);
}
function getPresentMonth() {
const selectedMonthNew = dayjs(
new Date(parseInt(INITIAL_YEAR), parseInt(INITIAL_MONTH) - 1, 1)
);
createCalendar(
selectedMonthNew.format("YYYY"),
selectedMonthNew.format("M")
);
fetchData(undefined, TODAY);
setSelectedDate(Number(dayjs().format("D")));
setSelectedMonth(selectedMonthNew);
}
function getNextMonth() {
const selectedMonthNew = dayjs(selectedMonth).add(1, "month");
createCalendar(
selectedMonthNew.format("YYYY"),
selectedMonthNew.format("M")
);
fetchData(undefined, selectedMonthNew?.format("YYYY-MM-DD"));
setSelectedMonth(selectedMonthNew);
setSelectedDate(1);
}
const onSelectedMonthItem = (id: string | undefined) => {
// fetchData(date)
setSelectedMonthItem(id);
getWeeklyPlanning(id, undefined);
};
const onSelectedWeekly = (id: string | undefined) => {
setSelectedWeekly(id);
fetchData(id);
};
const onSelectedDay = (day: number, date: string) => {
fetchData(undefined, date);
setSelectedDate(day);
setNowDate(date);
};
const removeSelection = () => {
setSelectedMonthItem(undefined);
setSelectedWeekly(undefined);
};
return (
<div className="border-2 rounded-sm p-4 flex gap-3 flex-col">
<div className="flex justify-between">
<div className="flex flex-row gap-2">
<a onClick={getPrevMonth} className="cursor-pointer">
<ChevronLeft />
</a>
<a onClick={getPresentMonth} className="cursor-pointer">
Today
</a>
<a onClick={getNextMonth} className="cursor-pointer">
<ChevronRight />
</a>
</div>
<p className="text-xl font-semibold">{selectedMonthTitle}</p>
</div>
<div className="flex justify-end">
<a
className="border-2 border-primary px-2 py-1 rounded-full text-[10px] text-primary cursor-pointer"
onClick={() => removeSelection()}
>
Hapus Pilihan
</a>
</div>
<div className="px-8 flex flex-col gap-2 text-sm">
<p className="font-semibold">Rencana Bulanan</p>
{monthlyList?.length > 0 ? (
<div className="flex flex-nowrap gap-3 flex-row">
{monthlyList?.map((item: any) => (
<div
key={item.id}
className={`rounded-full px-8 py-3 cursor-pointer ${
selectedMonthItem === item.id
? "bg-sky-600 text-white "
: "bg-sky-300"
}`}
onClick={() => onSelectedMonthItem(item.id)}
>
<p>{item.title}</p>
</div>
))}
</div>
) : (
<div className="flex justify-center bg-slate-200 rounded-full py-1">
Rencana Bulanan Belum Tersedia
</div>
)}
<p className="font-semibold">Rencana Mingguan</p>
{weeklyList?.length > 0 ? (
<div className="flex flex-nowrap gap-3 flex-row">
{weeklyList?.map((item: any) => (
<a
key={item.id}
className={`bg-sky-300 rounded-full px-8 py-3 cursor-pointer ${
selectedWeekly === item.id
? "bg-sky-600 text-white "
: "bg-sky-300"
}`}
onClick={() => onSelectedWeekly(item.id)}
>
<p>{item.title}</p>
</a>
))}
</div>
) : (
<div className="flex justify-center bg-slate-200 rounded-full py-1">
Rencana Mingguan Belum Tersedia
</div>
)}
<p className="font-semibold">Rencana Harian</p>
</div>
<div className="custom-scrollbar-table flex flex-nowrap justify-between gap-2 overflow-x-auto">
{days.map((day: any) => (
<a
key={day.date}
className={`cursor-pointer px-2 ${
selectedDate == parseInt(day.date.split("-")[2], 10)
? "border-b-2 border-primary text-primary"
: ""
}`}
onClick={() =>
onSelectedDay(parseInt(day.date.split("-")[2], 10), day.date)
}
>
{parseInt(day.date.split("-")[2], 10)}
</a>
))}
</div>
<TaskPlanMediahubTable
data={getData}
totalPage={getTotalPage}
totalData={getTOtalData}
/>
</div>
);
}

246
components/visualization/content-production.tsx Normal file
View File

@ -0,0 +1,246 @@
"use client";
import Cookies from "js-cookie";
import { useEffect, useState } from "react";
import { getCookiesDecrypt } from "@/lib/utils";
import { generateTicket } from "@/service/tableau/tableau-service";
import { Button } from "../ui/button";
import { useTranslations } from "next-intl";
export default function ContentProductionVisualization() {
const [hasMounted, setHasMounted] = useState(false);
const t = useTranslations("AnalyticsDashboard");
const levelName = getCookiesDecrypt("ulnae");
const poldaState = Cookies.get("state");
const provState = Cookies.get("state-prov");
const [ticket1, setTicket1] = useState("");
const [ticket2, setTicket2] = useState("");
const [ticket3, setTicket3] = useState("");
const [isInternational, setIsInternational] = useState([false, false, false]);
const baseUrl = "https://db-mediahub.polri.go.id/";
const url = "https://db-mediahub.polri.go.id/trusted/";
const view1 =
levelName == "MABES POLRI"
? isInternational[0]
? "views/2023_04_MediaHUB-Viz_INTL_Rev202/db-published-produksi?"
: "views/2023_04_MediaHUB-Viz-POLDA_Rev201/db-published-produksi?"
: `views/2023_04_MediaHUB-Viz-POLDA_Rev201/db-published-produksi-polda?provinsi-polda=${provState}&`;
const view2 =
levelName == "MABES POLRI"
? isInternational[1]
? "views/2023_04_MediaHUB-Viz_INTL_Rev202/db-konten-publisher?"
: "views/2023_04_MediaHUB-Viz-POLDA_Rev201/db-konten-publisher?"
: `views/2023_04_MediaHUB-Viz-POLDA_Rev201/db-konten-publisher-polda?provinsi-polda=${poldaState}&`;
const view3 =
levelName == "MABES POLRI"
? isInternational[2]
? "views/2023_04_MediaHUB-Viz_INTL_Rev202/db-waktu-akses-pengguna?"
: "views/2023_04_MediaHUB-Viz-POLDA_Rev201/db-waktu-akses-pengguna?"
: `views/2023_04_MediaHUB-Viz-POLDA_Rev201/db-waktu-akses-pengguna-polda?provinsi-polda=${poldaState}&`;
const param = ":embed=yes&:toolbar=yes&:iframeSizedToWindow=true";
useEffect(() => {
async function initState() {
const response1 = await generateTicket();
setTicket1(response1.data?.data);
const response2 = await generateTicket();
setTicket2(response2.data?.data);
const response3 = await generateTicket();
setTicket3(response3.data?.data);
}
initState();
}, [isInternational]);
// Hooks
useEffect(() => {
setHasMounted(true);
}, []);
// Render
if (!hasMounted) return null;
const handleInternational = (index: number, val: boolean) => {
const updatedIsInternational = [...isInternational];
updatedIsInternational[index] = val;
setIsInternational(updatedIsInternational);
};
return (
<div className="flex flex-col gap-2 bg-white rounded-lg p-3">
<p className="text-lg">
<b>
{isInternational[0]
? "CREATORS WITH THE MOST PUBLISHED CONTENT"
: "KREATOR DENGAN PUBLISH KONTEN TERBANYAK"}
</b>
</p>
{levelName === "MABES POLRI" ? (
<div className="flex flex-col gap-1">
<p>{t("choose_category")}</p>
<div className="flex flex-row gap-1 border-2 w-fit">
<Button
onClick={() => handleInternational(0, false)}
className={` hover:text-white rounded-none
${
isInternational[0]
? "bg-white text-black "
: "bg-black text-white "
}`}
>
Indonesia
</Button>
<Button
onClick={() => handleInternational(0, true)}
className={`hover:text-white rounded-none ${
isInternational[0]
? "bg-black text-white "
: "bg-white text-black "
}
`}
>
{t("international")}
</Button>
</div>
</div>
) : (
""
)}
<div className="my-5">
{ticket1 == "" ? (
<iframe
src={`${baseUrl + view1 + param}`}
width="100%"
height="750"
frameBorder="0"
/>
) : (
<iframe
src={`${`${url + ticket1}/${view1}${param}`}`}
width="100%"
height="750"
frameBorder="0"
/>
)}
</div>
<p className="text-lg">
<b>
{isInternational[1]
? "CREATORS WITH THE MOST INTERACTION OF CONTENT"
: "KREATOR DENGAN INTERAKSI KONTEN TERBANYAK"}
</b>
</p>
{levelName === "MABES POLRI" ? (
<div className="flex flex-col gap-1">
<p>{t("choose_category")}</p>
<div className="flex flex-row gap-1 border-2 w-fit">
<Button
onClick={() => handleInternational(1, false)}
className={` hover:text-white rounded-none
${
isInternational[1]
? "bg-white text-black "
: "bg-black text-white "
}`}
>
Indonesia
</Button>
<Button
onClick={() => handleInternational(1, true)}
className={`hover:text-white rounded-none ${
isInternational[1]
? "bg-black text-white "
: "bg-white text-black "
}
`}
>
{t("international")}
</Button>
</div>
</div>
) : (
""
)}
<div className="my-5">
{ticket2 == "" ? (
<iframe
src={`${baseUrl + view2 + param}`}
width="100%"
height="750"
frameBorder="0"
/>
) : (
<iframe
src={`${`${url + ticket2}/${view2}${param}`}`}
width="100%"
height="750"
frameBorder="0"
/>
)}
</div>
<p className="text-lg">
<b>
{isInternational[2]
? "ACCESS TIME PER CONTENT / CATEGORY"
: "WAKTU AKSES PER KONTEN / KATEGORI"}
</b>
</p>
{levelName === "MABES POLRI" ? (
<div className="flex flex-col gap-1">
<p>{t("choose_category")}</p>
<div className="flex flex-row gap-1 border-2 w-fit">
<Button
onClick={() => handleInternational(2, false)}
className={` hover:text-white rounded-none
${
isInternational[2]
? "bg-white text-black "
: "bg-black text-white "
}`}
>
Indonesia
</Button>
<Button
onClick={() => handleInternational(2, true)}
className={`hover:text-white rounded-none ${
isInternational[1]
? "bg-black text-white "
: "bg-white text-black "
}
`}
>
{t("international")}
</Button>
</div>
</div>
) : (
""
)}
<div className="my-5">
{ticket3 == "" ? (
<iframe
src={`${baseUrl + view3 + param}`}
width="100%"
height="750"
frameBorder="0"
/>
) : (
<iframe
src={`${`${url + ticket3}/${view3}${param}`}`}
width="100%"
height="750"
frameBorder="0"
/>
)}
</div>
</div>
);
}

248
components/visualization/dashboard-viz.tsx Normal file
View File

@ -0,0 +1,248 @@
"use client";
import Cookies from "js-cookie";
import { useEffect, useState } from "react";
import { getCookiesDecrypt } from "@/lib/utils";
import { generateTicket } from "@/service/tableau/tableau-service";
import { Button } from "../ui/button";
import { useTranslations } from "next-intl";
export default function DashboardVisualization() {
const levelName = getCookiesDecrypt("ulnae");
const poldaState = Cookies.get("state");
const t = useTranslations("AnalyticsDashboard");
const [ticket1, setTicket1] = useState("");
const [ticket2, setTicket2] = useState("");
const [ticket3, setTicket3] = useState("");
const [isInternational, setIsInternational] = useState([false, false, false]);
const baseUrl = "https://analytic.sitani.info/";
const url = "https://analytic.sitani.info/trusted/";
const view1 =
levelName == "MABES POLRI"
? isInternational[0]
? "views/2023_04_MediaHUB-Viz_INTL_Rev202/db-content-monitor?"
: "views/2023_09_MediaHUB-Viz-POLDA-content-monitor_Rev100/db-content-monitor?"
: `views/2023_09_MediaHUB-Viz-ADMIN-POLDA-content-monitor_Rev100/db-content-monitor?provinsi-polda=${poldaState}&`;
const view2 =
levelName == "MABES POLRI"
? isInternational[1]
? "views/2023_04_MediaHUB-Viz_INTL_Rev202/db-content-interaction-konten?"
: "views/2023_04_MediaHUB-Viz-POLDA_Rev201/db-content-interaction-konten?"
: `views/2023_04_MediaHUB-Viz-POLDA_Rev201/db-content-interaction-konten-polda?provinsi-polda=${poldaState}&`;
const view3 =
levelName == "MABES POLRI"
? isInternational[2]
? "views/2023_04_MediaHUB-Viz_INTL_Rev202/db-penugasan?"
: "views/2023_09_db-penugasan_rev100/db-penugasan?"
: `views/2023_04_MediaHUB-Viz-POLDA_Rev201/db-penugasan-polda?provinsi-polda=${poldaState}&`;
const param = ":embed=yes&:toolbar=yes&:iframeSizedToWindow=true";
useEffect(() => {
async function initState() {
const response1 = await generateTicket();
setTicket1(response1.data?.data);
console.log("response", response1);
const response2 = await generateTicket();
setTicket2(response2.data?.data);
const response3 = await generateTicket();
setTicket3(response3.data?.data);
}
initState();
}, [isInternational]);
const handleInternational = (index: number, val: boolean) => {
const updatedIsInternational = [...isInternational];
updatedIsInternational[index] = val;
setIsInternational(updatedIsInternational);
};
useEffect(() => {
async function fetchUrl() {
console.log("Fetch tableau");
const urlView = `${url + ticket1}/${view1}${param}`;
console.log("Fetch tableau ", urlView);
const urlRender = await fetch(urlView)
.then((response) => {
console.log("Tableau res : ", response);
})
.catch((error) => {
console.log("Tableau error: ", error);
});
}
fetchUrl();
}, [ticket1]);
return (
<div className="flex flex-col gap-2 bg-white rounded-lg p-3">
<p className="text-lg">
<b>
{isInternational[0]
? "COMMULATION OF USERS, CONTENTS AND INTERACTIONS"
: "KUMULASI PENGGUNA, KONTEN, DAN INTERAKSI"}
</b>
</p>
{levelName === "MABES POLRI" ? (
<div className="flex flex-col gap-1">
<p>{t("choose_category")}</p>
<div className="flex flex-row gap-1 border-2 w-fit">
<Button
onClick={() => handleInternational(0, false)}
className={` hover:text-white rounded-none
${
isInternational[0]
? "bg-white text-black "
: "bg-black text-white "
}`}
>
Indonesia
</Button>
<Button
onClick={() => handleInternational(0, true)}
className={`hover:text-white rounded-none ${
isInternational[0]
? "bg-black text-white "
: "bg-white text-black "
}
`}
>
{t("international")}
</Button>
</div>
</div>
) : (
""
)}
<div className="my-5">
{ticket1 == "" ? (
<iframe
src={`${baseUrl + view1 + param}`}
width="100%"
height="750"
frameBorder="0"
/>
) : (
<iframe
src={`${`${url + ticket1}/${view1}${param}`}`}
width="100%"
height="750"
frameBorder="0"
/>
)}
</div>
<p className="text-lg">
<b>
{isInternational[1]
? "ADDITION OF CONTENT AND INTERACTION"
: "PENAMBAHAN KONTEN DAN INTERAKSI"}
</b>
</p>
{levelName === "MABES POLRI" ? (
<div className="flex flex-col gap-1">
<p>{t("choose_category")}</p>
<div className="flex flex-row gap-1 border-2 w-fit">
<Button
onClick={() => handleInternational(1, false)}
className={` hover:text-white rounded-none
${
isInternational[1]
? "bg-white text-black "
: "bg-black text-white "
}`}
>
Indonesia
</Button>
<Button
onClick={() => handleInternational(1, true)}
className={`hover:text-white rounded-none ${
isInternational[1]
? "bg-black text-white "
: "bg-white text-black "
}
`}
>
{t("international")}
</Button>
</div>
</div>
) : (
""
)}
<div className="my-5">
{ticket2 == "" ? (
<iframe
src={`${baseUrl + view2 + param}`}
width="100%"
height="750"
frameBorder="0"
/>
) : (
<iframe
src={`${`${url + ticket2}/${view2}${param}`}`}
width="100%"
height="750"
frameBorder="0"
/>
)}
</div>
<p className="text-lg">
<b>{isInternational[2] ? "ASSIGNMENT" : "PENUGASAN"}</b>
</p>
{levelName === "MABES POLRI" ? (
<div className="flex flex-col gap-1">
<p>{t("choose_category")}</p>
<div className="flex flex-row gap-1 border-2 w-fit">
<Button
onClick={() => handleInternational(2, false)}
className={` hover:text-white rounded-none
${
isInternational[2]
? "bg-white text-black "
: "bg-black text-white "
}`}
>
Indonesia
</Button>
<Button
onClick={() => handleInternational(2, true)}
className={`hover:text-white rounded-none ${
isInternational[1]
? "bg-black text-white "
: "bg-white text-black "
}
`}
>
{t("international")}
</Button>
</div>
</div>
) : (
""
)}
<div className="my-5">
{ticket3 == "" ? (
<iframe
src={`${baseUrl + view3 + param}`}
width="100%"
height="750"
frameBorder="0"
/>
) : (
<iframe
src={`${`${url + ticket3}/${view3}${param}`}`}
width="100%"
height="750"
frameBorder="0"
/>
)}
</div>
</div>
);
}

312
components/visualization/pattern-relation-viz.tsx Normal file
View File

@ -0,0 +1,312 @@
"use client";
import Cookies from "js-cookie";
import { useEffect, useState } from "react";
import { getCookiesDecrypt } from "@/lib/utils";
import { generateTicket } from "@/service/tableau/tableau-service";
import { Button } from "../ui/button";
import { useTranslations } from "next-intl";
export default function PatternRelationVisualization() {
const [hasMounted, setHasMounted] = useState(false);
const t = useTranslations("AnalyticsDashboard");
const levelName = getCookiesDecrypt("ulnae");
const poldaState = Cookies.get("state");
const provState = Cookies.get("state-prov");
const [ticket1, setTicket1] = useState("");
const [ticket2, setTicket2] = useState("");
const [ticket3, setTicket3] = useState("");
const [ticket4, setTicket4] = useState("");
const [isInternational, setIsInternational] = useState([false, false, false]);
const baseUrl = "https://db-mediahub.polri.go.id/";
const url = "https://db-mediahub.polri.go.id/trusted/";
const view1 =
levelName == "MABES POLRI"
? isInternational[0]
? "views/2023_04_MediaHUB-Viz_INTL_Rev202/db-konten-top10?"
: "views/2023_04_MediaHUB-Viz-POLDA_Rev201/db-konten-top10?"
: `views/2023_04_MediaHUB-Viz-POLDA_Rev201/db-konten-top10-polda?provinsi-polda=${provState}&`;
const view2 =
levelName == "MABES POLRI"
? isInternational[1]
? "views/2023_04_MediaHUB-Viz_INTL_Rev202/db-konten?"
: "views/2023_04_MediaHUB-Viz-POLDA_Rev201/db-konten?"
: `views/2023_04_MediaHUB-Viz-POLDA_Rev201/db-konten-polda?provinsi-polda=${poldaState}&`;
const view3 =
levelName == "MABES POLRI"
? isInternational[2]
? "views/2023_04_MediaHUB-Viz_INTL_Rev202/db-konten-kategori-top10?"
: "views/2023_04_MediaHUB-Viz-POLDA_Rev201/db-konten-kategori-top10?"
: `views/2023_04_MediaHUB-Viz-POLDA_Rev201/db-konten-kategori-top10-polda?provinsi-polda=${poldaState}&`;
const view4 =
levelName == "MABES POLRI"
? isInternational[3]
? "views/2023_04_MediaHUB-Viz_INTL_Rev202/db-konten-kategori?"
: "views/2023_04_MediaHUB-Viz-POLDA_Rev201/db-konten-kategori?"
: `views/2023_04_MediaHUB-Viz-POLDA_Rev201/db-konten-kategori-polda?provinsi-polda=${poldaState}&`;
const param = ":embed=yes&:toolbar=yes&:iframeSizedToWindow=true";
useEffect(() => {
async function initState() {
const response1 = await generateTicket();
setTicket1(response1.data?.data);
const response2 = await generateTicket();
setTicket2(response2.data?.data);
const response3 = await generateTicket();
setTicket3(response3.data?.data);
const response4 = await generateTicket();
setTicket4(response4.data?.data);
}
initState();
}, [isInternational]);
// Hooks
useEffect(() => {
setHasMounted(true);
}, []);
// Render
if (!hasMounted) return null;
const handleInternational = (index: number, val: boolean) => {
const updatedIsInternational = [...isInternational];
updatedIsInternational[index] = val;
setIsInternational(updatedIsInternational);
};
return (
<div className="flex flex-col gap-2 bg-white rounded-lg p-3">
<p className="text-lg">
<b>
{isInternational[0]
? "INTERACTION OF THE MOST POPULAR CONTENT AND TITLES"
: "INTERAKSI KONTEN DAN JUDUL TERPOPULER"}
</b>
</p>
{levelName === "MABES POLRI" ? (
<div className="flex flex-col gap-1">
<p>{t("choose_category")}</p>
<div className="flex flex-row gap-1 border-2 w-fit">
<Button
onClick={() => handleInternational(0, false)}
className={` hover:text-white rounded-none
${
isInternational[0]
? "bg-white text-black "
: "bg-black text-white "
}`}
>
Indonesia
</Button>
<Button
onClick={() => handleInternational(0, true)}
className={`hover:text-white rounded-none ${
isInternational[0]
? "bg-black text-white "
: "bg-white text-black "
}
`}
>
{t("international")}
</Button>
</div>
</div>
) : (
""
)}
<div className="my-5">
{ticket1 == "" ? (
<iframe
src={`${baseUrl + view1 + param}`}
width="100%"
height="750"
frameBorder="0"
/>
) : (
<iframe
src={`${`${url + ticket1}/${view1}${param}`}`}
width="100%"
height="750"
frameBorder="0"
/>
)}
</div>
<p className="text-lg">
<b>
{isInternational[1]
? "INTERACTION OF CONTENT AND ACCESS TIME"
: "INTERAKSI KONTEN DAN WAKTU AKSES"}
</b>
</p>
{levelName === "MABES POLRI" ? (
<div className="flex flex-col gap-1">
<p>{t("choose_category")}</p>
<div className="flex flex-row gap-1 border-2 w-fit">
<Button
onClick={() => handleInternational(1, false)}
className={` hover:text-white rounded-none
${
isInternational[1]
? "bg-white text-black "
: "bg-black text-white "
}`}
>
Indonesia
</Button>
<Button
onClick={() => handleInternational(1, true)}
className={`hover:text-white rounded-none ${
isInternational[1]
? "bg-black text-white "
: "bg-white text-black "
}
`}
>
{t("international")}
</Button>
</div>
</div>
) : (
""
)}
<div className="my-5">
{ticket2 == "" ? (
<iframe
src={`${baseUrl + view2 + param}`}
width="100%"
height="750"
frameBorder="0"
/>
) : (
<iframe
src={`${`${url + ticket2}/${view2}${param}`}`}
width="100%"
height="750"
frameBorder="0"
/>
)}
</div>
<p className="text-lg">
<b>
{isInternational[2]
? "INTERACTION OF THE MOST POPULAR CATEGORIES AND TITLES"
: "INTERAKSI KATEGORI DAN JUDUL TERPOPULER"}
</b>
</p>
{levelName === "MABES POLRI" ? (
<div className="flex flex-col gap-1">
<p>{t("choose_category")}</p>
<div className="flex flex-row gap-1 border-2 w-fit">
<Button
onClick={() => handleInternational(2, false)}
className={` hover:text-white rounded-none
${
isInternational[2]
? "bg-white text-black "
: "bg-black text-white "
}`}
>
Indonesia
</Button>
<Button
onClick={() => handleInternational(2, true)}
className={`hover:text-white rounded-none ${
isInternational[1]
? "bg-black text-white "
: "bg-white text-black "
}
`}
>
{t("international")}
</Button>
</div>
</div>
) : (
""
)}
<div className="my-5">
{ticket3 == "" ? (
<iframe
src={`${baseUrl + view3 + param}`}
width="100%"
height="750"
frameBorder="0"
/>
) : (
<iframe
src={`${`${url + ticket3}/${view3}${param}`}`}
width="100%"
height="750"
frameBorder="0"
/>
)}
</div>
<p className="text-lg">
<b>
{isInternational[3]
? "INTERACTIONS OF CATEGORY AND ACCESS TIME"
: "INTERAKSI KATEGORI DAN WAKTU AKSES"}
</b>
</p>
{levelName === "MABES POLRI" ? (
<div className="flex flex-col gap-1">
<p>{t("choose_category")}</p>
<div className="flex flex-row gap-1 border-2 w-fit">
<Button
onClick={() => handleInternational(3, false)}
className={` hover:text-white rounded-none
${
isInternational[2]
? "bg-white text-black "
: "bg-black text-white "
}`}
>
Indonesia
</Button>
<Button
onClick={() => handleInternational(3, true)}
className={`hover:text-white rounded-none ${
isInternational[1]
? "bg-black text-white "
: "bg-white text-black "
}
`}
>
{t("international")}
</Button>
</div>
</div>
) : (
""
)}
<div className="my-5">
{ticket4 == "" ? (
<iframe
src={`${baseUrl + view4 + param}`}
width="100%"
height="750"
frameBorder="0"
/>
) : (
<iframe
src={`${`${url + ticket4}/${view4}${param}`}`}
width="100%"
height="750"
frameBorder="0"
/>
)}
</div>
</div>
);
}

15
messages/en.json
View File

@ -20,7 +20,9 @@
"invested_amount": "Invested amount",
"last_28_days": "Last 28 days",
"last_months": "Last months",
"last_year": "Last year"
"last_year": "Last year",
"choose_category": "Choose Category",
"international": "International"
},
"BankingDashboard": {
"widget_title": "Good evening",
@ -121,7 +123,6 @@
"ratings": "ratings",
"view_less": "View Less",
"add_to_cart": "Add to Cart"
},
"Menu": {
"dashboard": "Dashboard",
@ -221,14 +222,14 @@
"input": "Input",
"textarea": "Textarea",
"select": "Select",
"reactSelect":"React Select",
"reactSelect": "React Select",
"slider": "Slider",
"switch": "Switch",
"inputGroup": "Input Group",
"inputLayout":"Input Layout",
"inputMask":"Input Mask",
"inputFile":"File Input",
"formValidation":"Form Validation",
"inputLayout": "Input Layout",
"inputMask": "Input Mask",
"inputFile": "File Input",
"formValidation": "Form Validation",
"radio": "Radio",
"checkbox": "Checkbox",
"inputOtp": "Input Otp",

15
messages/in.json
View File

@ -20,7 +20,9 @@
"invested_amount": "Invested amount",
"last_28_days": "Last 28 days",
"last_months": "Last months",
"last_year": "Last year"
"last_year": "Last year",
"choose_category": "Pilih Kategori",
"international": "Internasional"
},
"BankingDashboard": {
"widget_title": "Good evening",
@ -121,7 +123,6 @@
"ratings": "ratings",
"view_less": "View Less",
"add_to_cart": "Add to Cart"
},
"Menu": {
"dashboard": "Dashboard",
@ -221,14 +222,14 @@
"input": "Input",
"textarea": "Textarea",
"select": "Select",
"reactSelect":"React Select",
"reactSelect": "React Select",
"slider": "Slider",
"switch": "Switch",
"inputGroup": "Input Group",
"inputLayout":"Input Layout",
"inputMask":"Input Mask",
"inputFile":"File Input",
"formValidation":"Form Validation",
"inputLayout": "Input Layout",
"inputMask": "Input Mask",
"inputFile": "File Input",
"formValidation": "Form Validation",
"radio": "Radio",
"checkbox": "Checkbox",
"inputOtp": "Input Otp",

3
next.config.mjs
View File

@ -38,10 +38,11 @@ const nextConfig = {
protocol: "https",
hostname: "i.pravatar.cc",
},
{ protocol: "https", hostname: "netidhub.com" },
{
protocol: "https",
hostname: "netidhub.com",
}
},
],
},
};

51
service/agenda-setting/agenda-setting.ts
View File

@ -2,7 +2,7 @@ import { getAPIInterceptor, postAPIInterceptor } from "@/config/api";
export async function getAgendaSettingsById(id: any) {
const url = `agenda-settings?id=${id}`;
return getAPIInterceptor({ url });
return getAPIInterceptor(url);
}
export async function getAgendaSettingsList(year = "", month = "", type = "") {
@ -14,3 +14,52 @@ export async function saveAgendaSettings(data: any) {
const url = `agenda-settings`;
return postAPIInterceptor(url, data);
}
export async function getPlanningDailyByTypeId(
page: number,
size = 10,
parentId: any,
date: string,
typeId: number
) {
const url = `planning/pagination/daily?enablePage=1&size=${size}&page=${page}&date=${date}&typeId=${typeId}${
parentId ? `&parentId=${parentId}` : ""
}`;
return getAPIInterceptor(url);
}
export async function getMonthlyPlanList(dates: number, typeId: number) {
const url = `planning/monthly/list?date=${dates}&typeId=${typeId}`;
return getAPIInterceptor(url);
}
export async function getWeeklyPlanList(
dates: number | undefined,
typeId: number,
isMonthly = false
) {
const url = `planning/weekly/list?date=${dates}&typeId=${typeId}&isMonthly=${isMonthly}`;
return getAPIInterceptor(url);
}
export async function getWeeklyPlanListByParentId(id: string, typeId: number) {
const url = `planning/weekly/list?parentId=${id}&typeId=${typeId}`;
return getAPIInterceptor(url);
}
export async function getPlanningPagination(
page: number,
title = "",
size = 10,
typeId: number,
time: number,
parentId = ""
) {
const url = `planning/pagination?enablePage=1&size=${size}&page=${page}&title=${title}&typeId=${typeId}&time=${time}&parentId=${parentId}`;
return getAPIInterceptor(url);
}
export async function savePlanning(data: any) {
const url = "planning";
return postAPIInterceptor(url, data);
}

50
service/tableau/tableau-service.ts Normal file
View File

@ -0,0 +1,50 @@
"use client";
import axios from "axios";
import Cookies from "js-cookie";
import qs from "qs";
import { data } from "@/app/[locale]/(protected)/charts/rechart/charts-rechart-bar/data";
import { url } from "inspector";
const baseURL = "https://netidhub.com/api/";
const tokenAuth = Cookies.get("access_token")
? Cookies.get("access_token")
: null;
import { getAPIInterceptor } from "@/config/api";
import axiosInterceptor from "@/config/axiosInterceptor";
export async function postAPIInterceptorTableau(url: string, data?: any) {
const response = await axiosInterceptor
.post(url, data)
.catch((error) => error.response);
if (response?.status === 401) {
Object.keys(Cookies.get()).forEach((cookieName) => {
Cookies.remove(cookieName);
});
window.location.href = "/";
} else if (response?.status > 300 && response?.status !== 401) {
return {
error: true,
message: response?.data?.message,
data: null,
};
} else if (response?.data?.success) {
return {
error: false,
message: "success",
data: response?.data,
};
}
return {
error: true,
message: response?.data?.message,
data: null,
};
}
export async function generateTicket() {
const url = "/admin/tableau-ticket";
return postAPIInterceptorTableau(url);
}

40
utils/globals.tsx
View File

@ -1,8 +1,6 @@
import { format } from "date-fns";
import { id, tr } from "date-fns/locale";
export const generateLocalizedPath = (href: string, locale: string): string => {
if (href.startsWith(`/${locale}`)) {
return href;
@ -10,7 +8,11 @@ export const generateLocalizedPath = (href: string, locale: string): string => {
return `/${locale}${href}`;
};
export function textEllipsis(str: string, maxLength: number, { side = "end", ellipsis = "..." } = {}) {
export function textEllipsis(
str: string,
maxLength: number,
{ side = "end", ellipsis = "..." } = {}
) {
if (str !== undefined && str?.length > maxLength) {
switch (side) {
case "start":
@ -21,7 +23,7 @@ export function textEllipsis(str: string, maxLength: number, { side = "end", ell
}
}
return str;
};
}
export function formatDateToIndonesian(d: Date) {
try {
@ -31,3 +33,33 @@ export function formatDateToIndonesian(d: Date) {
return "";
}
}
export function htmlToString(str: string) {
if (str == undefined || str == null) {
return "";
}
return (
str
.replaceAll(/<style[^>]*>.*<\/style>/gm, "")
// Remove script tags and content
.replaceAll(/<script[^>]*>.*<\/script>/gm, "")
// Replace &nbsp,&ndash
.replaceAll("&nbsp;", "")
.replaceAll("&ndash;", "-")
// Replace quotation mark
.replaceAll("&ldquo;", '"')
.replaceAll("&rdquo;", '"')
// Remove all opening, closing and orphan HTML tags
.replaceAll(/<[^>]+>/gm, "")
// Remove leading spaces and repeated CR/LF
.replaceAll(/([\n\r]+ +)+/gm, "")
);
}
export function getOnlyDate(date: Date) {
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, "0");
const day = String(date.getDate()).padStart(2, "0");
return `${year}-${month}-${day}`;
}