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

Compare commits

base: mediahub:main
Branches Tags
mediahub:main
mediahub:prod
mediahub:dev-sabda-v2
mediahub:staging
mediahub:dev-noProd
mediahub:prod-with-new-analytics
mediahub:dev-anang
mediahub:dev-landing-v2
mediahub:dev-rama
mediahub:main-v2
mediahub:dev-sabda
mediahub:v1.0.0
..
compare: mediahub:dev-anang
Branches Tags
mediahub:main
mediahub:prod
mediahub:dev-sabda-v2
mediahub:staging
mediahub:dev-noProd
mediahub:prod-with-new-analytics
mediahub:dev-anang
mediahub:dev-landing-v2
mediahub:dev-rama
mediahub:main-v2
mediahub:dev-sabda
mediahub:v1.0.0

2 Commits
main ... dev-anang

Author SHA1 Message Date
Anang Yusman 2b1ce75470 update 2025-09-24 16:42:47 +08:00
Anang Yusman 81f46414bb fix 2025-09-24 16:41:59 +08:00
167 changed files with 9255 additions and 63397 deletions
Show Stats Expand all files Collapse all files

46
.drone.yml
View File

@ -1,46 +0,0 @@
kind: pipeline
type: ssh
name: mediahub-fe-build-deploy
server:
host:
from_secret: ssh_host
user:
from_secret: ssh_user
ssh_key:
from_secret: ssh_key
steps:
- name: prepare repo
when:
branch:
- dev-sabda-v2
- main
- prod
commands:
- rm -rf /opt/build/mediahub-fe
- mkdir -p /opt/build
- cd /opt/build
- git clone http://38.47.180.165:3000/mediahub/mediahub-fe.git
- name: build image
when:
branch:
- dev-sabda-v2
- main
- prod
commands:
- docker login 38.47.180.165:3000 -u administrator -p HarborDockerImageRep0
- cd /opt/build/mediahub-fe
- docker build -t 38.47.180.165:3000/mediahub/mediahub-fe:$DRONE_BRANCH .
- docker push 38.47.180.165:3000/mediahub/mediahub-fe:$DRONE_BRANCH
- name: deploy
when:
branch:
- main
commands:
- docker pull 38.47.180.165:3000/mediahub/mediahub-fe:$DRONE_BRANCH
- docker stop new-mediahub-fe || true
- docker rm new-mediahub-fe || true
- docker run -dt -p 4200:3000 --restart always --name new-mediahub-fe 38.47.180.165:3000/mediahub/mediahub-fe:$DRONE_BRANCH

4
.env
View File

@ -1,3 +1,3 @@
NEXT_PUBLIC_API=https://new.netidhub.com/api
NEXT_PUBLIC=https://new.netidhub.com
NEXT_PUBLIC_API=https://netidhub.com/api
NEXT_PUBLIC=https://netidhub.com
NEXT_PUBLIC_TINYMCE_API_KEY=bhteuja26yz5p0aubxry9b95hs33amgn65kjv5km0fd5iuev

19
.gitlab-ci.yml
View File

@ -1,23 +1,22 @@
stages:
- build
- deploy
build-dev:
stage: build
when: on_success
only:
- main
- dev-landing-v2
image:
name: docker:25.0.3-cli
image: docker:stable
services:
- name: docker:25.0.3-dind
command: ["--insecure-registry=38.47.185.86:8900"]
- name: docker:dind
command: ["--insecure-registry=103.82.242.92:8900"]
script:
- docker logout
- docker login -u $DEPLOY_USERNAME -p $DEPLOY_TOKEN 38.47.185.86:8900
- docker build -t 38.47.185.86:8900/mediahub/new-mediahub-fe:dev .
- docker push 38.47.185.86:8900/mediahub/new-mediahub-fe:dev
- docker login -u $DEPLOY_USERNAME -p $DEPLOY_TOKEN 103.82.242.92:8900
- docker build -t 103.82.242.92:8900/mediahub/new-mediahub-fe:dev .
- docker push 103.82.242.92:8900/mediahub/new-mediahub-fe:dev
auto-deploy:
stage: deploy
@ -26,5 +25,7 @@ auto-deploy:
- main
- dev-landing-v2
image: curlimages/curl:latest
services:
- docker:dind
script:
- curl --user admin:$JENKINS_PWD http://38.47.185.86:8080/job/auto-deploy-new-mediahub-fe/build?token=autodeploynewmediahub
- curl --user admin:$JENKINS_PWD http://38.47.180.165:8080/job/auto-deploy-new-mediahub-fe/build?token=autodeploynewmediahub

39
Dockerfile
View File

@ -32,42 +32,3 @@ EXPOSE 3000
# Perintah untuk menjalankan aplikasi
CMD ["pnpm", "run", "start"]
# # Gunakan base image Node.js Alpine yang ringan
# FROM node:23.5.0-alpine
# # Atur environment
# ENV PORT=3000
# ENV NODE_ENV=production
# ENV NODE_OPTIONS="--max-old-space-size=4096"
# # Install dependencies global
# RUN npm install -g pnpm pm2
# # Set working directory
# WORKDIR /usr/src/app
# # Salin file penting untuk caching dependencies
# COPY package.json pnpm-lock.yaml* ./
# # Salin vendor jika diperlukan (ckeditor misalnya)
# COPY vendor/ckeditor5 ./vendor/ckeditor5
# # Install dependencies
# RUN pnpm install --frozen-lockfile
# # Salin semua source code
# COPY . .
# # Salin ecosystem config
# COPY ecosystem.config.js ./
# # Build Next.js
# RUN pnpm run build
# # Expose port
# EXPOSE 3000
# # Jalankan Next.js dalam mode cluster
# CMD ["pm2-runtime", "start", "ecosystem.config.js"]

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

@ -18,7 +18,7 @@ import { useRouter } from "next/navigation";
import { deleteUser } from "@/service/management-user/management-user";
import { stringify } from "querystring";
const getColumns = ({ onRefresh }: { onRefresh: () => void }): ColumnDef<any>[] => [
const columns: ColumnDef<any>[] = [
{
accessorKey: "no",
header: "No",
@ -30,13 +30,11 @@ const getColumns = ({ onRefresh }: { onRefresh: () => void }): ColumnDef<any>[]
header: "Nama",
cell: ({ row }) => <span>{row.getValue("fullname")}</span>,
},
{
accessorKey: "address",
header: "Wilayah",
cell: () => <span>MABES</span>,
cell: ({ row }) => <span>MABES</span>,
},
{
accessorKey: "userRolePlacements",
header: "Posisi",
@ -54,7 +52,6 @@ const getColumns = ({ onRefresh }: { onRefresh: () => void }): ColumnDef<any>[]
return <span>{posisi}</span>;
},
},
{
accessorKey: "role.name",
header: "Bidang Keahlian",
@ -84,77 +81,72 @@ const getColumns = ({ onRefresh }: { onRefresh: () => void }): ColumnDef<any>[]
{
id: "actions",
accessorKey: "action",
header: "Actions",
enableHiding: false,
cell: ({ row }) => {
const { toast } = useToast();
const MySwal = withReactContent(Swal);
const router = useRouter();
const doDelete = async (id: number) => {
Swal.fire({
title: "Menghapus user...",
text: "Mohon tunggu",
allowOutsideClick: false,
didOpen: () => Swal.showLoading(),
});
const response = await deleteUser(id);
Swal.close();
if (response?.error) {
toast({
title: stringify(response?.message),
variant: "destructive",
});
return;
}
toast({
title: "Success delete",
});
toast({ title: "Berhasil menghapus user" });
// ⬅️ INI YANG PENTING → REFRESH TABLE TANPA RELOAD
onRefresh();
router.push("?dataChange=true");
};
const handleDelete = (id: number) => {
MySwal.fire({
title: "Hapus user ini?",
title: "Apakah anda ingin menghapus data user?",
showCancelButton: true,
confirmButtonColor: "#dc3545",
confirmButtonText: "Iya",
cancelButtonText: "Tidak",
}).then((res) => {
if (res.isConfirmed) doDelete(id);
}).then((result) => {
if (result.isConfirmed) {
doDelete(id);
}
});
};
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button size="icon" variant="ghost">
<MoreVertical className="h-4 w-4" />
<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 align="end">
<Link href={`/admin/add-experts/detail/${row.original.id}`}>
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none cursor-pointer">
<Eye className="w-4 h-4 me-1.5" /> View
<DropdownMenuContent className="p-0" align="end">
<Link href={`/admin/add-experts/detail/${row?.original?.id}`}>
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
<Eye className="w-4 h-4 me-1.5" />
View
</DropdownMenuItem>
</Link>
<Link href={`/admin/add-experts/update/${row.original.id}`}>
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none cursor-pointer">
<SquarePen className="w-4 h-4 me-1.5" /> Edit
<Link href={`/admin/add-experts/update/${row?.original?.id}`}>
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
<SquarePen className="w-4 h-4 me-1.5" />
Edit
</DropdownMenuItem>
</Link>
<DropdownMenuItem
onClick={() => handleDelete(row.original.userKeycloakId)}
className="text-red-600 cursor-pointer hover:bg-red-300"
className="p-2 border-b text-destructive bg-destructive/30 focus:bg-destructive focus:text-destructive-foreground rounded-none"
>
<Trash2 className="w-4 h-4 me-1.5" /> Delete
<Trash2 className="w-4 h-4 me-1.5" />
Delete
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
);
@ -162,4 +154,4 @@ const getColumns = ({ onRefresh }: { onRefresh: () => void }): ColumnDef<any>[]
},
];
export default getColumns;
export default columns;

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

@ -2,6 +2,7 @@
import * as React from "react";
import {
ColumnDef,
ColumnFiltersState,
PaginationState,
SortingState,
@ -14,6 +15,7 @@ import {
useReactTable,
} from "@tanstack/react-table";
import { Button } from "@/components/ui/button";
import {
Table,
TableBody,
@ -23,6 +25,7 @@ import {
TableRow,
} from "@/components/ui/table";
import { UserIcon } from "lucide-react";
import { cn } from "@/lib/utils";
import {
DropdownMenu,
DropdownMenuContent,
@ -32,14 +35,43 @@ import {
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 "./column";
import getColumns from "./column";
import columns from "./column";
import { getPlanningPagination } from "@/service/agenda-setting/agenda-setting";
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "@/components/ui/popover";
import { listDataMedia } from "@/service/broadcast/broadcast";
import { listEnableCategory } from "@/service/content/content";
import { Checkbox } from "@/components/ui/checkbox";
import { close, loading } from "@/config/swal";
import { Link } from "@/i18n/routing";
import { listDataExperts } from "@/service/experts/experts";
const dummyData = [
{
id: 1,
name: "Prof. Dr. Ravi",
region: "Nasional",
skills: "Komunikasi",
experience: "Akademisi",
},
{
id: 2,
name: "Prof. Dr. Novan",
region: "DKI Jakarta",
skills: "Hukum",
experience: "Akademisi + Praktisi",
},
];
const AddExpertTable = () => {
const router = useRouter();
const searchParams = useSearchParams();
@ -65,8 +97,7 @@ const AddExpertTable = () => {
const [limit, setLimit] = React.useState(10);
const table = useReactTable({
data: dataTable,
// columns,
columns: getColumns({ onRefresh: fetchData }),
columns,
onSortingChange: setSorting,
onColumnFiltersChange: setColumnFilters,
getCoreRowModel: getCoreRowModel(),
@ -252,11 +283,7 @@ const AddExpertTable = () => {
))
) : (
<TableRow>
<TableCell
// colSpan={columns.length}
colSpan={table.getAllLeafColumns().length}
className="h-24 text-center"
>
<TableCell colSpan={columns.length} className="h-24 text-center">
No results.
</TableCell>
</TableRow>

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

@ -35,61 +35,32 @@ import {
import { error, loading } from "@/config/swal";
import { Eye, EyeOff } from "lucide-react";
// const FormSchema = z.object({
// name: z.string({
// required_error: "Required",
// }),
// username: z.string({
// required_error: "Required",
// }),
// password: z.string({
// required_error: "Required",
// }),
// phoneNumber: z.string({
// required_error: "Required",
// }),
// email: z.string({
// required_error: "Required",
// }),
// skills: z.string({
// required_error: "Required",
// }),
// experiences: z.string({
// required_error: "Required",
// }),
// company: z.string({
// required_error: "Required",
// }),
// });
const FormSchema = z.object({
name: z.string({ required_error: "Required" }),
username: z
.string({ required_error: "Required" })
.refine((val) => !/\s/.test(val), {
message: "Username tidak boleh mengandung spasi",
}),
// .transform((val) => val.toLowerCase()),
password: z
.string({ required_error: "Required" })
.min(8, "Minimal 8 karakter")
.regex(/[A-Z]/, "Harus mengandung huruf besar (A-Z)")
.regex(/[0-9]/, "Harus mengandung angka (0-9)")
.regex(/[^A-Za-z0-9]/, "Harus mengandung karakter spesial (!@#$%^&*)"),
// confirmPassword: z.string({ required_error: "Required" }),
phoneNumber: z.string({ required_error: "Required" }),
email: z.string({ required_error: "Required" }),
skills: z.string({ required_error: "Required" }),
experiences: z.string({ required_error: "Required" }),
company: z.string({ required_error: "Required" }),
name: z.string({
required_error: "Required",
}),
username: z.string({
required_error: "Required",
}),
password: z.string({
required_error: "Required",
}),
phoneNumber: z.string({
required_error: "Required",
}),
email: z.string({
required_error: "Required",
}),
skills: z.string({
required_error: "Required",
}),
experiences: z.string({
required_error: "Required",
}),
company: z.string({
required_error: "Required",
}),
});
// .refine((data) => data.password === data.confirmPassword, {
// path: ["confirmPassword"],
// message: "Konfirmasi password tidak sama",
// });
export type Placements = {
index: number;
@ -103,7 +74,6 @@ export default function AddExpertForm() {
const form = useForm<z.infer<typeof FormSchema>>({
resolver: zodResolver(FormSchema),
});
const [passwordStrength, setPasswordStrength] = useState("");
const [incrementId, setIncrementId] = useState(1);
const [placementRows, setPlacementRows] = useState<Placements[]>([
{ index: 0, roleId: "", userLevelId: 0 },
@ -165,7 +135,7 @@ export default function AddExpertForm() {
};
loading();
// check availability first
var placementArr: any[] = [];
placementRows.forEach((row: any) => {
@ -291,19 +261,6 @@ export default function AddExpertForm() {
}
};
const computeStrength = (password: string) => {
let score = 0;
if (password.length >= 8) score++;
if (/[A-Z]/.test(password)) score++;
if (/[0-9]/.test(password)) score++;
if (/[^A-Za-z0-9]/.test(password)) score++;
if (score <= 1) return "weak";
if (score === 2 || score === 3) return "medium";
if (score === 4) return "strong";
return "";
};
return (
<div>
<SiteBreadcrumb />
@ -331,39 +288,6 @@ export default function AddExpertForm() {
)}
/>
<FormField
control={form.control}
name="username"
render={({ field }) => (
<FormItem>
<FormLabel>Username (huruf kecil, tanpa spasi)</FormLabel>
<Input
type="text"
value={field.value}
placeholder="masukkan username"
onChange={(e) => {
let value = e.target.value;
// Hapus spasi otomatis
value = value.replace(/\s+/g, "");
// Jadikan lowercase otomatis
value = value.toLowerCase();
field.onChange(value);
}}
/>
{/* Info tambahan */}
<p className="text-xs text-gray-500 mt-1">
Username otomatis menjadi huruf kecil tanpa spasi.
</p>
<FormMessage />
</FormItem>
)}
/>
{/* <FormField
control={form.control}
name="username"
render={({ field }) => (
@ -379,7 +303,7 @@ export default function AddExpertForm() {
<FormMessage />
</FormItem>
)}
/> */}
/>
<FormField
control={form.control}
name="phoneNumber"
@ -425,69 +349,6 @@ export default function AddExpertForm() {
)}
/>
<FormField
control={form.control}
name="password"
render={({ field }) => (
<FormItem>
<FormLabel>Password</FormLabel>
<div className="relative">
<Input
type={showPassword ? "text" : "password"}
value={field.value}
placeholder="Masukkan Password"
onChange={(e) => {
field.onChange(e.target.value);
setPasswordStrength(computeStrength(e.target.value));
}}
/>
<button
type="button"
onClick={() => setShowPassword(!showPassword)}
className="absolute right-3 top-1/2 -translate-y-1/2 text-default-500"
>
{showPassword ? <EyeOff size={18} /> : <Eye size={18} />}
</button>
</div>
<FormLabel className="text-gray-400 text-[12px]">
Password harus memiliki minimal 8 karakter, special karakter,
angka dan huruf kapital
</FormLabel>
{/* Strength meter */}
{field.value && (
<div className="mt-2">
<div
className={`h-2 rounded transition-all ${
passwordStrength === "weak"
? "bg-red-500 w-1/4"
: passwordStrength === "medium"
? "bg-yellow-500 w-2/4"
: "bg-green-500 w-full"
}`}
/>
<p
className={`text-xs mt-1 ${
passwordStrength === "weak"
? "text-red-500"
: passwordStrength === "medium"
? "text-yellow-600"
: "text-green-600"
}`}
>
{passwordStrength === "weak" && "Weak Password"}
{passwordStrength === "medium" && "Medium Password"}
{passwordStrength === "strong" && "Strong Password"}
</p>
</div>
)}
<FormMessage />
</FormItem>
)}
/>
{/* <FormField
control={form.control}
name="password"
render={({ field }) => (
@ -512,7 +373,7 @@ export default function AddExpertForm() {
<FormMessage />
</FormItem>
)}
/> */}
/>
<FormField
control={form.control}
name="skills"

204
app/[locale]/(protected)/admin/add-experts/update/[id]/page.tsx
View File

@ -37,43 +37,32 @@ import { Eye, EyeOff } from "lucide-react";
import { useParams } from "next/navigation";
const FormSchema = z.object({
name: z.string().optional(),
username: z.string().optional(),
password: z.string().optional(),
phoneNumber: z.string().optional(),
email: z.string().optional(),
skills: z.string().optional(),
experiences: z.string().optional(),
company: z.string().optional(),
name: z.string({
required_error: "Required",
}),
username: z.string({
required_error: "Required",
}),
password: z.string({
required_error: "Required",
}),
phoneNumber: z.string({
required_error: "Required",
}),
email: z.string({
required_error: "Required",
}),
skills: z.string({
required_error: "Required",
}),
experiences: z.string({
required_error: "Required",
}),
company: z.string({
required_error: "Required",
}),
});
// const FormSchema = z.object({
// name: z.string({
// required_error: "Required",
// }),
// username: z.string({
// required_error: "Required",
// }),
// password: z.string({
// required_error: "Required",
// }),
// phoneNumber: z.string({
// required_error: "Required",
// }),
// email: z.string({
// required_error: "Required",
// }),
// skills: z.string({
// required_error: "Required",
// }),
// experiences: z.string({
// required_error: "Required",
// }),
// company: z.string({
// required_error: "Required",
// }),
// });
export type Placements = {
index: number;
roleId?: string;
@ -107,10 +96,6 @@ interface Detail {
createdAt: string;
};
};
userRolePlacements?: {
roleId: number;
userLevelId: number;
}[];
}
export default function UpdateExpertForm() {
@ -164,39 +149,6 @@ export default function UpdateExpertForm() {
initState();
}, [id]);
useEffect(() => {
if (!detail) return;
// Isi semua form field
form.reset({
name: detail.fullname || "",
username: detail.username || "",
phoneNumber: detail.phoneNumber || "",
email: detail.email || "",
password: "",
skills: detail?.userProfilesAdditional?.userCompetency?.id
? String(detail.userProfilesAdditional.userCompetency.id)
: "",
experiences: detail?.userProfilesAdditional?.userExperienceId
? String(detail.userProfilesAdditional.userExperienceId)
: "",
company: detail?.userProfilesAdditional?.companyName || "",
});
// 🔥 Masukkan posisi existing
if (detail.userRolePlacements && detail.userRolePlacements.length > 0) {
const mapped = detail.userRolePlacements.map(
(item: any, idx: number) => ({
index: idx,
roleId: String(item.roleId),
userLevelId: Number(item.userLevelId),
})
);
setPlacementRows(mapped);
}
}, [detail]);
if (!detail) return <div>Loading...</div>;
const togglePasswordType = () => {
@ -237,35 +189,18 @@ export default function UpdateExpertForm() {
const dataReq = {
id: detail?.id,
firstName: data.name || detail.fullname,
username: data.username || detail.username,
email: data.email || detail.email,
password: data.password || undefined,
firstName: data.name,
username: data.username,
email: data.email,
password: data.password,
address: "",
roleId: "EXP-ID",
phoneNumber: data.phoneNumber || detail.phoneNumber,
userCompetencyId:
data.skills || detail.userProfilesAdditional?.userCompetency?.id,
userExperienceId:
data.experiences || detail.userProfilesAdditional?.userExperienceId,
companyName: data.company || detail.userProfilesAdditional?.companyName,
isAdmin: true,
phoneNumber: data.phoneNumber,
userCompetencyId: data.skills,
userExperienceId: data.experiences,
companyName: data.company,
};
// const dataReq = {
// id: detail?.id,
// firstName: data.name,
// username: data.username,
// email: data.email,
// password: data.password,
// address: "",
// roleId: "EXP-ID",
// phoneNumber: data.phoneNumber,
// userCompetencyId: data.skills,
// userExperienceId: data.experiences,
// companyName: data.company,
// };
loading();
const res = await saveUserInternal(dataReq);
const resData = res?.data?.data;
@ -387,15 +322,10 @@ export default function UpdateExpertForm() {
render={({ field }) => (
<FormItem>
<FormLabel>Nama Lengkap</FormLabel>
{/* <Input
<Input
defaultValue={detail?.fullname}
placeholder="Masukkan Nama Lengkap"
onChange={field.onChange}
/> */}
<Input
{...field}
defaultValue={detail?.fullname}
placeholder="Masukkan Nama Lengkap"
/>
<FormMessage />
@ -403,24 +333,18 @@ export default function UpdateExpertForm() {
)}
/>
<FormField
disabled
control={form.control}
name="username"
render={({ field }) => (
<FormItem>
<FormLabel>Username</FormLabel>
{/* <Input
<Input
type="text"
defaultValue={detail?.username}
placeholder="Masukkan"
onChange={field.onChange}
/> */}
<Input
{...field}
type="text"
defaultValue={detail?.username}
placeholder="Masukkan"
/>
<FormMessage />
</FormItem>
)}
@ -431,17 +355,11 @@ export default function UpdateExpertForm() {
render={({ field }) => (
<FormItem>
<FormLabel>No. HP</FormLabel>
{/* <Input
<Input
type="number"
defaultValue={detail?.phoneNumber}
placeholder="Masukkan No.Hp"
onChange={field.onChange}
/> */}
<Input
{...field}
type="number"
defaultValue={detail?.phoneNumber}
placeholder="Masukkan"
/>
<FormMessage />
</FormItem>
@ -453,46 +371,17 @@ export default function UpdateExpertForm() {
render={({ field }) => (
<FormItem>
<FormLabel>Email</FormLabel>
{/* <Input
<Input
type="email"
defaultValue={detail?.email}
placeholder="Masukkan email"
onChange={field.onChange}
/> */}
<Input
{...field}
type="email"
defaultValue={detail?.email}
placeholder="Masukkan email"
/>
<FormMessage />
</FormItem>
)}
/>
{/* <FormField
control={form.control}
name="password"
render={({ field }) => (
<FormItem>
<FormLabel>Password (Opsional)</FormLabel>
<div className="relative">
<Input
{...field}
type={showPassword ? "text" : "password"}
placeholder="Kosongkan jika tidak ingin mengubah password"
/>
<button
type="button"
onClick={() => setShowPassword(!showPassword)}
className="absolute right-3 top-1/2 -translate-y-1/2"
>
{showPassword ? <EyeOff size={18} /> : <Eye size={18} />}
</button>
</div>
</FormItem>
)}
/> */}
{/* <FormField
<FormField
control={form.control}
name="password"
render={({ field }) => (
@ -517,7 +406,7 @@ export default function UpdateExpertForm() {
<FormMessage />
</FormItem>
)}
/> */}
/>
<FormField
control={form.control}
name="skills"
@ -592,21 +481,12 @@ export default function UpdateExpertForm() {
render={({ field }) => (
<FormItem>
<FormLabel>Nama Institusi/Perusahaan</FormLabel>
{/* <Input
<Input
type="text"
value={detail?.userProfilesAdditional?.companyName || ""}
placeholder="Nama Institusi/Perusahaan"
onChange={field.onChange}
/> */}
<Input
{...field}
type="text"
defaultValue={
detail?.userProfilesAdditional?.companyName || ""
}
placeholder="Nama Institusi/Perusahaan"
/>
<FormMessage />
</FormItem>
)}
@ -617,7 +497,6 @@ export default function UpdateExpertForm() {
{placementRows?.map((row: any) => (
<div key={row.index} className="flex items-center gap-2 my-2">
<Select
value={row.roleId}
onValueChange={(e) =>
handleSelectionChange(row.index, "roleId", e)
}
@ -654,7 +533,6 @@ export default function UpdateExpertForm() {
</SelectContent>
</Select> */}
<Select
value={row.userLevelId}
onValueChange={(e) =>
handleSelectionChange(row.index, "userLevelId", e)
}
@ -684,7 +562,7 @@ export default function UpdateExpertForm() {
type="button"
size="md"
onClick={handleAddRow}
disabled={placementRows.length >= 2}
disabled={placementRows.length >= 2} // optional: disable button if already 1 row added
>
Tambah
</Button>

2
app/[locale]/(protected)/admin/broadcast/campaign-list/account-list/component/column.tsx
View File

@ -106,7 +106,7 @@ const columns: ColumnDef<any>[] = [
<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={`/admin/broadcast/campaign-list/account-list/edit/${row.original.mediaBlastAccountId}`}
href={`/admin/broadcast/campaign-list/account-list/edit/${row.original.id}`}
>
Edit
</Link>

107
app/[locale]/(protected)/admin/broadcast/campaign-list/account-list/component/table.tsx
View File

@ -59,12 +59,8 @@ import {
deleteMediaBlastCampaignAccount,
saveMediaBlastCampaignAccountBulk,
} from "@/service/broadcast/broadcast";
import {
AdministrationUserList,
getUserListAll,
} from "@/service/management-user/management-user";
import { AdministrationUserList } from "@/service/management-user/management-user";
import { close, loading, error, success, successCallback } from "@/config/swal";
import { Link } from "@/i18n/routing";
// Mock data for available accounts - replace with actual API call
const availableAccounts = [
@ -102,8 +98,7 @@ const AccountListTable = () => {
const [accountCategory, setAccountCategory] = React.useState<string>("");
const [selectedAccount, setSelectedAccount] = React.useState<any[]>([]);
const [selectedCategory, setSelectedCategory] = React.useState<string>("");
const [availableAccountsList, setAvailableAccountsList] =
React.useState<any[]>(availableAccounts);
const [availableAccountsList, setAvailableAccountsList] = React.useState<any[]>(availableAccounts);
const [usersList, setUsersList] = React.useState<any[]>([]);
const table = useReactTable({
@ -176,7 +171,7 @@ const AccountListTable = () => {
async function saveCampaignAccount() {
try {
loading();
if (accountCategory === "all-account") {
// Handle all accounts - send only campaignId and category "all"
const request = {
@ -207,7 +202,7 @@ const AccountListTable = () => {
default:
roleId = "5";
}
const request = {
mediaBlastCampaignId: campaignId,
mediaBlastAccountCategory: `role-${roleId}`,
@ -221,7 +216,7 @@ const AccountListTable = () => {
// Handle custom selection - send campaignId and selected user IDs
const request = {
mediaBlastCampaignId: campaignId,
mediaBlastAccountIds: selectedAccount.map((acc) => acc.id),
mediaBlastAccountIds: selectedAccount.map(acc => acc.id),
};
const response = await saveMediaBlastCampaignAccountBulk(request);
if (response?.error) {
@ -229,7 +224,7 @@ const AccountListTable = () => {
return;
}
}
close();
successCallback("Akun berhasil ditambahkan ke campaign!");
resetDialogState();
@ -251,8 +246,15 @@ const AccountListTable = () => {
const fetchUsersList = async () => {
try {
loading();
const response = await getUserListAll();
const response = await AdministrationUserList(
"1", // levelId
0, // page
"", // name
"100", // size
"1", // featureId
"" // role
);
if (response?.data?.data?.content) {
setUsersList(response.data.data.content);
}
@ -270,15 +272,15 @@ const AccountListTable = () => {
setFiltered(temp);
};
const removeSelectedAccount = (accountId: string) => {
setSelectedAccount(selectedAccount.filter((acc) => acc.id !== accountId));
setSelectedAccount(selectedAccount.filter(acc => acc.id !== accountId));
};
const getFilteredAccounts = () => {
if (accountCategory === "kategori" && selectedCategory) {
return availableAccountsList.filter(
(acc) => acc.category === selectedCategory
);
return availableAccountsList.filter(acc => acc.category === selectedCategory);
}
return availableAccountsList;
};
@ -296,10 +298,7 @@ const AccountListTable = () => {
Pilih Akun
</Button>
</DialogTrigger>
<DialogContent
size="md"
className="max-w-xl max-h-[80vh] overflow-y-auto"
>
<DialogContent size="md" className="max-w-xl max-h-[80vh] overflow-y-auto">
<DialogHeader>
<DialogTitle>Pilih Akun Untuk Campaign Ini</DialogTitle>
</DialogHeader>
@ -358,17 +357,15 @@ const AccountListTable = () => {
options={usersList.map((user: any) => ({
value: user.id,
label: `${user.fullname} (${user.role?.name})`,
user: user,
user: user
}))}
value={selectedAccount.map((acc: any) => ({
value: acc.id,
label: `${acc.fullname} (${acc.role?.name})`,
user: acc,
user: acc
}))}
onChange={(selectedOptions: any) => {
const selectedUsers = selectedOptions
? selectedOptions.map((option: any) => option.user)
: [];
const selectedUsers = selectedOptions ? selectedOptions.map((option: any) => option.user) : [];
setSelectedAccount(selectedUsers);
}}
placeholder="Cari dan pilih user..."
@ -379,17 +376,14 @@ const AccountListTable = () => {
className="react-select"
classNamePrefix="select"
/>
{/* Selected Accounts Display */}
{selectedAccount.length > 0 && (
<div className="space-y-2">
<Label>User Terpilih ({selectedAccount.length}):</Label>
<div className="flex flex-wrap gap-2">
{selectedAccount.map((acc) => (
<Badge
key={acc.id}
className="flex items-center gap-1"
>
<Badge key={acc.id} className="flex items-center gap-1">
{acc.fullname}
<X
className="h-3 w-3 cursor-pointer"
@ -416,8 +410,7 @@ const AccountListTable = () => {
{accountCategory === "kategori" && selectedCategory && (
<div className="p-3 bg-green-50 rounded-md">
<p className="text-sm text-green-700">
Semua akun dengan role "{selectedCategory.toUpperCase()}"
akan ditambahkan.
Semua akun dengan role "{selectedCategory.toUpperCase()}" akan ditambahkan.
</p>
</div>
)}
@ -426,8 +419,7 @@ const AccountListTable = () => {
{accountCategory === "custom" && (
<div className="p-3 bg-purple-50 rounded-md">
<p className="text-sm text-purple-700">
{selectedAccount.length} user terpilih akan ditambahkan ke
campaign ini.
{selectedAccount.length} user terpilih akan ditambahkan ke campaign ini.
</p>
</div>
)}
@ -438,8 +430,7 @@ const AccountListTable = () => {
onClick={saveCampaignAccount}
disabled={
!accountCategory ||
(accountCategory === "custom" &&
selectedAccount.length < 1) ||
(accountCategory === "custom" && selectedAccount.length < 1) ||
(accountCategory === "kategori" && !selectedCategory)
}
>
@ -457,47 +448,7 @@ const AccountListTable = () => {
</div>
{/* === Filter Akun === */}
<div className="flex flex-row justify-end">
{/* <div className="flex flex-row gap-4">
<Link href="/admin/broadcast/campaign-list/account-list/create">
<Button variant="default" className="bg-[#3f37c9] gap-2">
<span>
<svg
xmlns="http://www.w3.org/2000/svg"
width="22"
height="22"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="M17 13h-4v4h-2v-4H7v-2h4V7h2v4h4m2-8H5c-1.11 0-2 .89-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2"
/>
</svg>
</span>
Tambahkan Akun
</Button>
</Link>
<Button variant="default" className="bg-[#3f37c9] gap-2">
<span>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
>
<g fill="none">
<path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z" />
<path
fill="currentColor"
d="M12 2v6.5a1.5 1.5 0 0 0 1.5 1.5H20v10a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-1h3.414l-1.121 1.121a1 1 0 1 0 1.414 1.415l2.829-2.829a1 1 0 0 0 0-1.414l-2.829-2.828a1 1 0 1 0-1.414 1.414L7.414 17H4V4a2 2 0 0 1 2-2zM4 17v2H3a1 1 0 1 1 0-2zM14 2.043a2 2 0 0 1 1 .543L19.414 7a2 2 0 0 1 .543 1H14z"
/>
</g>
</svg>
</span>
Import Akun
</Button>
</div> */}
<div className="flex justify-end">
<Popover>
<PopoverTrigger asChild>
<Button size="md" variant="outline">

713
app/[locale]/(protected)/admin/broadcast/campaign-list/account-list/create/page.tsx
View File

@ -6,6 +6,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
import {
Form,
FormControl,
FormDescription,
FormField,
FormItem,
FormLabel,
@ -13,80 +14,55 @@ import {
} from "@/components/ui/form";
import withReactContent from "sweetalert2-react-content";
import Swal from "sweetalert2";
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "@/components/ui/popover";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";
import { format } from "date-fns";
import { CalendarIcon } from "lucide-react";
import { Calendar } from "@/components/ui/calendar";
import { getOnlyDate } from "@/utils/globals";
import {
getMediaBlastCampaignPage,
saveMediaBlastAccount,
saveMediaBlastCampaign,
} from "@/service/broadcast/broadcast";
import { error } from "@/config/swal";
import { useRouter } from "@/i18n/routing";
import { Checkbox } from "@/components/ui/checkbox";
import { useEffect, useState } from "react";
// ----------------------------
// ZOD SCHEMA (dinamis)
// ----------------------------
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
const FormSchema = z.object({
name: z.string({ required_error: "Required" }),
name: z.string({
required_error: "Required",
}),
accountType: z
.array(z.string())
.min(1, "Pilih minimal satu tipe akun"),
email: z.string().optional(),
whatsapp: z.string().optional(),
campaignId: z.string({ required_error: "Required" }),
}).refine(
(data) => {
if (data.accountType.includes("email") && !data.email) return false;
return true;
},
{ message: "Email wajib diisi", path: ["email"] }
).refine(
(data) => {
if (data.accountType.includes("wa") && !data.whatsapp) return false;
return true;
},
{ message: "Whatsapp wajib diisi", path: ["whatsapp"] }
);
// ----------------------------
// COMPONENT
// ----------------------------
.refine((value) => value.some((item) => item), {
message: "Required",
}),
accountCategory: z.enum(["polri", "jurnalis", "umum", "ksp"], {
required_error: "Required",
}),
email: z.string({
required_error: "Required",
}),
whatsapp: z.string({
required_error: "Required",
}),
});
export default function CreateAccountForBroadcast() {
const MySwal = withReactContent(Swal);
const router = useRouter();
const form = useForm<z.infer<typeof FormSchema>>({
resolver: zodResolver(FormSchema),
defaultValues: {
accountType: [],
email: "",
whatsapp: "",
},
defaultValues: { accountType: [] },
});
const selectedTypes = form.watch("accountType");
const [campaigns, setCampaigns] = useState<any[]>([]);
useEffect(() => {
fetchCampaignList();
}, []);
async function fetchCampaignList() {
try {
const res = await getMediaBlastCampaignPage(0);
setCampaigns(res?.data?.data?.content ?? []);
} catch (e) {
console.log("Error fetch campaign:", e);
}
}
const onSubmit = async (data: z.infer<typeof FormSchema>) => {
MySwal.fire({
title: "Simpan Data",
@ -109,8 +85,10 @@ export default function CreateAccountForBroadcast() {
icon: "success",
confirmButtonColor: "#3085d6",
confirmButtonText: "OK",
}).then(() => {
router.push("/admin/broadcast/campaign-list/account-list");
}).then((result) => {
if (result.isConfirmed) {
router.push("/admin/broadcast/campaign-list/account-list");
}
});
}
@ -118,21 +96,20 @@ export default function CreateAccountForBroadcast() {
const reqData = {
accountName: data.name,
accountType: data.accountType.join(","),
emailAddress: data.email ?? "",
whatsappNumber: data.whatsapp ?? "",
campaignId: data.campaignId,
accountCategory: data.accountCategory,
emailAddress: data.email,
whatsappNumber: data.whatsapp,
};
console.log("REQ:", reqData);
console.log("data", data);
const response = await saveMediaBlastAccount(reqData);
if (response?.error) {
error(response.message);
return;
return false;
}
successSubmit();
};
return (
<div>
<SiteBreadcrumb />
@ -141,9 +118,7 @@ export default function CreateAccountForBroadcast() {
onSubmit={form.handleSubmit(onSubmit)}
className="space-y-3 bg-white rounded-sm p-4"
>
<p className="font-semibold">Account</p>
{/* NAMA */}
<p className="fonnt-semibold">Account</p>
<FormField
control={form.control}
name="name"
@ -155,125 +130,172 @@ export default function CreateAccountForBroadcast() {
placeholder="Masukkan nama"
onChange={field.onChange}
/>
<FormMessage />
</FormItem>
)}
/>
{/* CHECKBOX TIPE AKUN */}
<FormField
control={form.control}
name="accountType"
render={({ field }) => (
render={() => (
<FormItem>
<FormLabel>Tipe Akun</FormLabel>
<div className="flex flex-row gap-4">
{/* WA */}
<div className="flex items-center gap-2">
<Checkbox
checked={field.value.includes("wa")}
onCheckedChange={(checked) =>
checked
? field.onChange([...field.value, "wa"])
: field.onChange(field.value.filter((v) => v !== "wa"))
}
/>
<label>Whatsapp</label>
</div>
{/* EMAIL */}
<div className="flex items-center gap-2">
<Checkbox
checked={field.value.includes("email")}
onCheckedChange={(checked) =>
checked
? field.onChange([...field.value, "email"])
: field.onChange(
field.value.filter((v) => v !== "email")
)
}
/>
<label>Email</label>
</div>
<div className="flex flex-row gap-2">
{" "}
<FormField
key="wa"
control={form.control}
name="accountType"
render={({ field }) => {
return (
<FormItem
key="wa"
className="flex flex-row items-start space-x-3 space-y-0"
>
<FormControl>
<Checkbox
checked={field.value?.includes("wa")}
onCheckedChange={(checked) => {
return checked
? field.onChange([...field.value, "wa"])
: field.onChange(
field.value?.filter(
(value) => value !== "wa"
)
);
}}
/>
</FormControl>
<FormLabel className="font-normal">
Whatsapp
</FormLabel>
</FormItem>
);
}}
/>
<FormField
key="email"
control={form.control}
name="accountType"
render={({ field }) => {
return (
<FormItem
key="email"
className="flex flex-row items-start space-x-3 space-y-0"
>
<FormControl>
<Checkbox
checked={field.value?.includes("email")}
onCheckedChange={(checked) => {
return checked
? field.onChange([...field.value, "email"])
: field.onChange(
field.value?.filter(
(value) => value !== "email"
)
);
}}
/>
</FormControl>
<FormLabel className="font-normal">Email</FormLabel>
</FormItem>
);
}}
/>
</div>
<FormMessage />
</FormItem>
)}
/>
{/* FORM WHATSAPP */}
{selectedTypes.includes("wa") && (
<FormField
control={form.control}
name="whatsapp"
render={({ field }) => (
<FormItem>
<FormLabel>Whatsapp</FormLabel>
<Input
type="number"
placeholder="Masukkan nomor Whatsapp"
{...field}
/>
<FormMessage />
</FormItem>
)}
/>
)}
{/* FORM EMAIL */}
{selectedTypes.includes("email") && (
<FormField
control={form.control}
name="email"
render={({ field }) => (
<FormItem>
<FormLabel>Email</FormLabel>
<Input
type="email"
placeholder="Masukkan email"
{...field}
/>
<FormMessage />
</FormItem>
)}
/>
)}
{/* CAMPAIGN */}
<FormField
control={form.control}
name="campaignId"
name="accountCategory"
render={({ field }) => (
<FormItem>
<FormLabel>Campaign</FormLabel>
<FormItem className="space-y-3">
<FormLabel>Kategori</FormLabel>
<FormControl>
<select
className="w-full border rounded-md p-2 text-sm"
value={field.value}
onChange={field.onChange}
<RadioGroup
onValueChange={field.onChange}
defaultValue={field.value}
className="flex flex-row gap-2"
>
<option value="" className="text-slate-400">
Pilih campaign
</option>
{campaigns.map((c: any) => (
<option key={c.id} value={c.id}>
{c.title || `Campaign ${c.id}`}
</option>
))}
</select>
<FormItem className="flex items-center space-x-3 space-y-0">
<FormControl>
<RadioGroupItem value="polri" />
</FormControl>
<FormLabel className="font-normal">POLRI</FormLabel>
</FormItem>
<FormItem className="flex items-center space-x-3 space-y-0">
<FormControl>
<RadioGroupItem value="jurnalis" />
</FormControl>
<FormLabel className="font-normal">JURNALIS</FormLabel>
</FormItem>
<FormItem className="flex items-center space-x-3 space-y-0">
<FormControl>
<RadioGroupItem value="umum" />
</FormControl>
<FormLabel className="font-normal">UMUM</FormLabel>
</FormItem>
<FormItem className="flex items-center space-x-3 space-y-0">
<FormControl>
<RadioGroupItem value="ksp" />
</FormControl>
<FormLabel className="font-normal">KSP</FormLabel>
</FormItem>
</RadioGroup>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="email"
render={({ field }) => (
<FormItem>
<FormLabel>Nama</FormLabel>
<Input
type="email"
value={field.value}
placeholder="Masukkan email"
onChange={field.onChange}
/>
{/* BUTTON */}
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="whatsapp"
render={({ field }) => (
<FormItem>
<FormLabel>Nama</FormLabel>
<Input
type="number"
value={field.value}
placeholder="Masukkan whatsapp"
onChange={field.onChange}
/>
<FormMessage />
</FormItem>
)}
/>
<div className="flex flex-row gap-2 mt-4 pt-4">
<Button type="button" variant="outline" color="destructive">
<Button
size="md"
type="button"
variant="outline"
color="destructive"
className="text-xs"
>
Cancel
</Button>
<Button type="submit" color="primary">
<Button size="md" type="submit" color="primary" className="text-xs">
Submit
</Button>
</div>
@ -282,380 +304,3 @@ export default function CreateAccountForBroadcast() {
</div>
);
}
// "use client";
// import SiteBreadcrumb from "@/components/site-breadcrumb";
// import { z } from "zod";
// import { useForm } from "react-hook-form";
// import { zodResolver } from "@hookform/resolvers/zod";
// import {
// Form,
// FormControl,
// FormField,
// FormItem,
// FormLabel,
// FormMessage,
// } from "@/components/ui/form";
// import withReactContent from "sweetalert2-react-content";
// import Swal from "sweetalert2";
// import { Input } from "@/components/ui/input";
// import { Button } from "@/components/ui/button";
// import {
// getMediaBlastCampaignPage,
// saveMediaBlastAccount,
// } from "@/service/broadcast/broadcast";
// import { error } from "@/config/swal";
// import { useRouter } from "@/i18n/routing";
// import { Checkbox } from "@/components/ui/checkbox";
// import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
// import { useEffect, useState } from "react";
// // const FormSchema = z.object({
// // name: z.string({
// // required_error: "Required",
// // }),
// // accountType: z
// // .array(z.string())
// // .refine((value) => value.some((item) => item), {
// // message: "Required",
// // }),
// // accountCategory: z.enum(["polri", "jurnalis", "umum", "ksp"], {
// // required_error: "Required",
// // }),
// // email: z.string({
// // required_error: "Required",
// // }),
// // whatsapp: z.string({
// // required_error: "Required",
// // }),
// // campaignId: z.string({ required_error: "Required" }),
// // });
// const FormSchema = z
// .object({
// name: z.string().min(1, "Required"),
// accountType: z.array(z.string()).refine((value) => value.length > 0, {
// message: "Pilih minimal satu tipe akun",
// }),
// accountCategory: z.enum(["polri", "jurnalis", "umum", "ksp"], {
// required_error: "Required",
// }),
// email: z.string().optional(),
// whatsapp: z.string().optional(),
// campaignId: z.string().min(1, "Required"),
// })
// .refine(
// (data) => {
// if (data.accountType.includes("email")) {
// return !!data.email && data.email.trim() !== "";
// }
// return true;
// },
// { path: ["email"], message: "Email wajib diisi" }
// )
// .refine(
// (data) => {
// if (data.accountType.includes("wa")) {
// return !!data.whatsapp && data.whatsapp.trim() !== "";
// }
// return true;
// },
// { path: ["whatsapp"], message: "Whatsapp wajib diisi" }
// );
// export default function CreateAccountForBroadcast() {
// const MySwal = withReactContent(Swal);
// const router = useRouter();
// const form = useForm<z.infer<typeof FormSchema>>({
// resolver: zodResolver(FormSchema),
// defaultValues: { accountType: [] },
// });
// const selectedTypes = form.watch("accountType");
// const [campaigns, setCampaigns] = useState<any[]>([]);
// useEffect(() => {
// fetchCampaignList();
// }, []);
// async function fetchCampaignList() {
// try {
// const res = await getMediaBlastCampaignPage(0);
// setCampaigns(res?.data?.data?.content ?? []);
// } catch (e) {
// console.log("Error fetch campaign:", e);
// }
// }
// const onSubmit = async (data: z.infer<typeof FormSchema>) => {
// MySwal.fire({
// title: "Simpan Data",
// text: "Apakah Anda yakin ingin menyimpan data ini?",
// icon: "warning",
// showCancelButton: true,
// cancelButtonColor: "#d33",
// confirmButtonColor: "#3085d6",
// confirmButtonText: "Simpan",
// }).then((result) => {
// if (result.isConfirmed) {
// save(data);
// }
// });
// };
// function successSubmit() {
// MySwal.fire({
// title: "Sukses",
// icon: "success",
// confirmButtonColor: "#3085d6",
// confirmButtonText: "OK",
// }).then((result) => {
// if (result.isConfirmed) {
// router.push("/admin/broadcast/campaign-list/account-list");
// }
// });
// }
// const save = async (data: z.infer<typeof FormSchema>) => {
// const reqData = {
// accountName: data.name,
// accountType: data.accountType.join(","),
// accountCategory: data.accountCategory,
// emailAddress: data.email ?? "",
// whatsappNumber: data.whatsapp ?? "",
// campaignId: data.campaignId,
// };
// console.log("data", data);
// const response = await saveMediaBlastAccount(reqData);
// if (response?.error) {
// error(response.message);
// return false;
// }
// successSubmit();
// };
// return (
// <div>
// <SiteBreadcrumb />
// <Form {...form}>
// <form
// onSubmit={form.handleSubmit(onSubmit)}
// className="space-y-3 bg-white rounded-sm p-4"
// >
// <p className="fonnt-semibold">Account</p>
// <FormField
// control={form.control}
// name="name"
// render={({ field }) => (
// <FormItem>
// <FormLabel>Nama</FormLabel>
// <Input
// value={field.value}
// placeholder="Masukkan nama"
// onChange={field.onChange}
// />
// <FormMessage />
// </FormItem>
// )}
// />
// <FormField
// control={form.control}
// name="accountType"
// render={() => (
// <FormItem>
// <FormLabel>Tipe Akun</FormLabel>
// <div className="flex flex-row gap-2">
// {" "}
// <FormField
// key="wa"
// control={form.control}
// name="accountType"
// render={({ field }) => {
// return (
// <FormItem
// key="wa"
// className="flex flex-row items-start space-x-3 space-y-0"
// >
// <FormControl>
// <Checkbox
// checked={field.value?.includes("wa")}
// onCheckedChange={(checked) => {
// return checked
// ? field.onChange([...field.value, "wa"])
// : field.onChange(
// field.value?.filter(
// (value) => value !== "wa"
// )
// );
// }}
// />
// </FormControl>
// <FormLabel className="font-normal">
// Whatsapp
// </FormLabel>
// </FormItem>
// );
// }}
// />
// <FormField
// key="email"
// control={form.control}
// name="accountType"
// render={({ field }) => {
// return (
// <FormItem
// key="email"
// className="flex flex-row items-start space-x-3 space-y-0"
// >
// <FormControl>
// <Checkbox
// checked={field.value?.includes("email")}
// onCheckedChange={(checked) => {
// return checked
// ? field.onChange([...field.value, "email"])
// : field.onChange(
// field.value?.filter(
// (value) => value !== "email"
// )
// );
// }}
// />
// </FormControl>
// <FormLabel className="font-normal">Email</FormLabel>
// </FormItem>
// );
// }}
// />
// </div>
// <FormMessage />
// </FormItem>
// )}
// />
// {/* <FormField
// control={form.control}
// name="accountCategory"
// render={({ field }) => (
// <FormItem className="space-y-3">
// <FormLabel>Kategori</FormLabel>
// <FormControl>
// <RadioGroup
// onValueChange={field.onChange}
// defaultValue={field.value}
// className="flex flex-row gap-2"
// >
// <FormItem className="flex items-center space-x-3 space-y-0">
// <FormControl>
// <RadioGroupItem value="polri" />
// </FormControl>
// <FormLabel className="font-normal">POLRI</FormLabel>
// </FormItem>
// <FormItem className="flex items-center space-x-3 space-y-0">
// <FormControl>
// <RadioGroupItem value="jurnalis" />
// </FormControl>
// <FormLabel className="font-normal">JURNALIS</FormLabel>
// </FormItem>
// <FormItem className="flex items-center space-x-3 space-y-0">
// <FormControl>
// <RadioGroupItem value="umum" />
// </FormControl>
// <FormLabel className="font-normal">UMUM</FormLabel>
// </FormItem>
// <FormItem className="flex items-center space-x-3 space-y-0">
// <FormControl>
// <RadioGroupItem value="ksp" />
// </FormControl>
// <FormLabel className="font-normal">KSP</FormLabel>
// </FormItem>
// </RadioGroup>
// </FormControl>
// <FormMessage />
// </FormItem>
// )}
// /> */}
// <FormField
// control={form.control}
// name="email"
// render={({ field }) => (
// <FormItem>
// <FormLabel>Email</FormLabel>
// <Input
// type="email"
// value={field.value}
// placeholder="Masukkan email"
// onChange={field.onChange}
// />
// <FormMessage />
// </FormItem>
// )}
// />
// <FormField
// control={form.control}
// name="whatsapp"
// render={({ field }) => (
// <FormItem>
// <FormLabel>Nama</FormLabel>
// <Input
// type="number"
// value={field.value}
// placeholder="Masukkan whatsapp"
// onChange={field.onChange}
// />
// <FormMessage />
// </FormItem>
// )}
// />
// <FormField
// control={form.control}
// name="campaignId"
// render={({ field }) => (
// <FormItem>
// <FormLabel>Campaign</FormLabel>
// <FormControl>
// <select
// className="w-full border rounded-md p-2"
// value={field.value}
// onChange={field.onChange}
// >
// <option value="" className="text-slate-400">
// Pilih campaign
// </option>
// {campaigns.map((c: any) => (
// <option key={c.id} value={c.id}>
// {c.title || `Campaign ${c.id}`}
// </option>
// ))}
// </select>
// </FormControl>
// <FormMessage />
// </FormItem>
// )}
// />
// <div className="flex flex-row gap-2 mt-4 pt-4">
// <Button
// size="md"
// type="button"
// variant="outline"
// color="destructive"
// className="text-xs"
// >
// Cancel
// </Button>
// <Button size="md" type="submit" color="primary" className="text-xs">
// Submit
// </Button>
// </div>
// </form>
// </Form>
// </div>
// );
// }

121
app/[locale]/(protected)/admin/broadcast/campaign-list/account-list/edit/[id]/page.tsx
View File

@ -37,74 +37,46 @@ import { Checkbox } from "@/components/ui/checkbox";
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
import { useParams } from "next/navigation";
import { useEffect } from "react";
import {
getUserById,
saveUserInternal,
} from "@/service/management-user/management-user";
// const FormSchema = z.object({
// fullname: z.string({
// required_error: "Required",
// }),
// // accountType: z
// // .array(z.string())
// // .refine((value) => value.some((item) => item), {
// // message: "Required",
// // }),
// // accountCategory: z.enum(["polri", "jurnalis", "umum", "ksp"], {
// // required_error: "Required",
// // }),
// email: z.string({
// required_error: "Required",
// }),
// phoneNumber: z.string({
// required_error: "Required",
// }),
// });
const FormSchema = z.object({
fullname: z.string({ required_error: "Required" }),
email: z.string({ required_error: "Required" }),
phoneNumber: z.string({ required_error: "Required" }),
username: z.string().optional(),
role: z.string().optional(),
level: z.string().optional(),
nrp: z.string().optional(),
address: z.string().optional(),
password: z.string().optional(),
confirmPassword: z.string().optional(),
name: z.string({
required_error: "Required",
}),
accountType: z
.array(z.string())
.refine((value) => value.some((item) => item), {
message: "Required",
}),
accountCategory: z.enum(["polri", "jurnalis", "umumu", "ksp"], {
required_error: "Required",
}),
email: z.string({
required_error: "Required",
}),
whatsapp: z.string({
required_error: "Required",
}),
});
export default function EditAccountForBroadcast() {
const id = useParams()?.id;
const MySwal = withReactContent(Swal);
const router = useRouter();
const form = useForm<z.infer<typeof FormSchema>>({
resolver: zodResolver(FormSchema),
// defaultValues: { accountType: [] },
defaultValues: { accountType: [] },
});
useEffect(() => {
async function getDetailData() {
const response = await getUserById(String(id));
const response = await getMediaBlastAccount(String(id));
const details = response?.data?.data;
console.log("Response full:", response);
form.setValue("fullname", details?.fullname);
form.setValue("username", details?.username);
form.setValue("phoneNumber", details?.phoneNumber);
// form.setValue("nrp", details?.memberIdentity);
// form.setValue("address", details?.address);
form.setValue("email", details?.email);
form.setValue("role", details?.role?.code);
// form.setValue("level", String(details?.userLevelId));
// form.setValue("name", details?.accountName);
// form.setValue("fullname", details?.fullname);
// form.setValue("email", details?.email);
// form.setValue("phoneNumber", details?.phoneNumber);
// form.setValue("whatsapp", details?.whatsappNumber);
// form.setValue("accountCategory", details?.accountCategory);
// form.setValue("accountType", details?.accountType.split(","));
console.log("new", details);
form.setValue("name", details.accountName);
form.setValue("email", details?.emailAddress);
form.setValue("whatsapp", details?.whatsappNumber);
form.setValue("accountCategory", details?.accountCategory);
form.setValue("accountType", details?.accountType.split(","));
}
getDetailData();
@ -134,32 +106,23 @@ export default function EditAccountForBroadcast() {
confirmButtonText: "OK",
}).then((result) => {
if (result.isConfirmed) {
router.push("/admin/broadcast/campaign-list");
router.push("/admin/broadcast/campaign-list/account-list");
}
});
}
const save = async (data: z.infer<typeof FormSchema>) => {
const reqData = {
id: Number(id),
// accountName: data.fullname,
// accountType: data.accountType.join(","),
// accountCategory: data.accountCategory,
// emailAddress: data.email,
phoneNumber: data.phoneNumber,
firstName: data.fullname,
username: data.username,
roleId: data.role,
// userLevelId: Number(data.level),
// memberIdentity: data.nrp,
// address: data.address,
email: data.email,
isDefault: false,
isAdmin: true,
id: String(id),
accountName: data.name,
accountType: data.accountType.join(","),
accountCategory: data.accountCategory,
emailAddress: data.email,
whatsappNumber: data.whatsapp,
};
console.log("data", data);
const response = await saveUserInternal(reqData);
const response = await saveMediaBlastAccount(reqData);
if (response?.error) {
error(response.message);
return false;
@ -178,7 +141,7 @@ export default function EditAccountForBroadcast() {
<p className="fonnt-semibold">Account</p>
<FormField
control={form.control}
name="fullname"
name="name"
render={({ field }) => (
<FormItem>
<FormLabel>Nama</FormLabel>
@ -192,7 +155,7 @@ export default function EditAccountForBroadcast() {
</FormItem>
)}
/>
{/* <FormField
<FormField
control={form.control}
name="accountType"
render={() => (
@ -264,8 +227,8 @@ export default function EditAccountForBroadcast() {
<FormMessage />
</FormItem>
)}
/> */}
{/* <FormField
/>
<FormField
control={form.control}
name="accountCategory"
render={({ field }) => (
@ -306,13 +269,13 @@ export default function EditAccountForBroadcast() {
<FormMessage />
</FormItem>
)}
/> */}
/>
<FormField
control={form.control}
name="email"
render={({ field }) => (
<FormItem>
<FormLabel>Email</FormLabel>
<FormLabel>Nama</FormLabel>
<Input
type="email"
value={field.value}
@ -326,14 +289,14 @@ export default function EditAccountForBroadcast() {
/>
<FormField
control={form.control}
name="phoneNumber"
name="whatsapp"
render={({ field }) => (
<FormItem>
<FormLabel>Nomor Whatsapp</FormLabel>
<FormLabel>Nama</FormLabel>
<Input
type="number"
value={field.value}
placeholder="Masukkan nomor whatsapp"
placeholder="Masukkan whatsapp"
onChange={field.onChange}
/>

115
app/[locale]/(protected)/admin/broadcast/campaign-list/component/column.tsx
View File

@ -11,6 +11,7 @@ import {
} from "@/components/ui/dropdown-menu";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Link, useRouter } from "@/i18n/routing";
import { close, error, loading, success } from "@/config/swal";
import { deleteMediaBlastCampaign } from "@/service/broadcast/broadcast";
@ -61,47 +62,38 @@ const columns: ColumnDef<any>[] = [
{
id: "actions",
accessorKey: "action",
header: "Actions",
cell: ({ row, onDeleteSuccess }: any) => {
enableHiding: false,
cell: ({ row }) => {
const MySwal = withReactContent(Swal);
const handleDelete = (id: number) => {
const handleDelete = (id: any) => {
MySwal.fire({
title: "Apakah anda ingin menghapus data?",
showCancelButton: true,
confirmButtonColor: "#dc3545",
confirmButtonText: "Iya",
cancelButtonText: "Tidak",
}).then((result) => {
}).then((result: any) => {
if (result.isConfirmed) {
doDeleteAccount(id);
}
});
};
async function doDeleteAccount(id: number) {
async function doDeleteAccount(id: any) {
loading();
const response = await deleteMediaBlastCampaign(id);
close();
if (response.error) {
error(response.message);
return false;
}
console.log("Delete response:", response);
MySwal.fire({
icon: "success",
title: "Berhasil!",
text: "Data berhasil dihapus.",
confirmButtonColor: "#3085d6",
timer: 2000,
timerProgressBar: true,
});
// ✅ panggil callback dari parent
onDeleteSuccess?.(id);
// success();
}
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
@ -127,99 +119,14 @@ const columns: ColumnDef<any>[] = [
Edit
</DropdownMenuItem>
</Link>
<DropdownMenuItem
onClick={() => handleDelete(row.original.id)}
className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none cursor-pointer"
>
Delete
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none cursor-pointer">
<a>Delete</a>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
);
},
},
// {
// id: "actions",
// accessorKey: "action",
// header: "Actions",
// enableHiding: false,
// cell: ({ row, onDeleteSuccess }: any) => {
// const MySwal = withReactContent(Swal);
// const handleDelete = (id: any) => {
// MySwal.fire({
// title: "Apakah anda ingin menghapus data?",
// showCancelButton: true,
// confirmButtonColor: "#dc3545",
// confirmButtonText: "Iya",
// cancelButtonText: "Tidak",
// }).then((result: any) => {
// if (result.isConfirmed) {
// doDeleteAccount(id);
// }
// });
// };
// async function doDeleteAccount(id: any) {
// loading();
// const response = await deleteMediaBlastCampaign(id);
// close();
// if (response.error) {
// error(response.message);
// return false;
// }
// console.log("Delete response:", response);
// MySwal.fire({
// icon: "success",
// title: "Berhasil!",
// text: "Data berhasil dihapus.",
// confirmButtonColor: "#3085d6",
// timer: 2000,
// timerProgressBar: true,
// });
// // ✅ langsung hapus dari state
// onDeleteSuccess?.(id);
// }
// 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">
// <Link
// href={`/admin/broadcast/campaign-list/detail/${row.original.id}`}
// >
// <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none cursor-pointer">
// Detail
// </DropdownMenuItem>
// </Link>
// <Link
// href={`//admin/broadcast/campaign-list/edit/${row.original.id}`}
// >
// <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none cursor-pointer">
// Edit
// </DropdownMenuItem>
// </Link>
// <DropdownMenuItem
// onClick={() => handleDelete(row.original.id)}
// className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none cursor-pointer"
// >
// Delete
// </DropdownMenuItem>
// </DropdownMenuContent>
// </DropdownMenu>
// );
// },
// },
];
export default columns;

18
app/[locale]/(protected)/admin/broadcast/campaign-list/component/table.tsx
View File

@ -89,11 +89,6 @@ const CampaignListTable = () => {
const [page, setPage] = React.useState(1);
const [totalPage, setTotalPage] = React.useState(1);
function handleDeleteSuccess(id: number) {
setDataTable((prev) => prev.filter((item) => item.id !== id));
}
const table = useReactTable({
data: dataTable,
columns,
@ -152,12 +147,12 @@ const CampaignListTable = () => {
<div className="flex justify-between mb-10 items-center">
<p className="text-xl font-medium text-default-900">Daftar Campaign</p>
<div className="flex flex-row gap-2">
{/* <Link href="/admin/broadcast/campaign-list/account-list">
<Link href="/admin/broadcast/campaign-list/account-list">
<Button color="primary" size="md" className="text-sm">
<UserIcon />
Daftar Akun
</Button>
</Link> */}
</Link>
<Link href="/admin/broadcast/campaign-list/create">
<Button color="primary" size="md" className="text-sm">
<NewCampaignIcon size={23} />
@ -194,14 +189,7 @@ const CampaignListTable = () => {
>
{row.getVisibleCells().map((cell) => (
<TableCell key={cell.id}>
{/* {flexRender(cell.column.columnDef.cell, cell.getContext())} */}
{flexRender(cell.column.columnDef.cell, {
...cell.getContext(),
onDeleteSuccess: (id: number) => {
// setDataTable((prev) => prev.filter((item) => item.id !== id)
fetchData()
},
})}
{flexRender(cell.column.columnDef.cell, cell.getContext())}
</TableCell>
))}
</TableRow>

2
app/[locale]/(protected)/admin/broadcast/create/[id]/page.tsx → app/[locale]/(protected)/admin/broadcast/email/[id]/page.tsx
View File

@ -5,7 +5,7 @@ export default function CreateEmailBlast() {
return (
<div>
<SiteBreadcrumb />
<ContentBlast />
<ContentBlast type="email" />
</div>
);
}

8
app/[locale]/(protected)/admin/broadcast/create/component/column.tsx → app/[locale]/(protected)/admin/broadcast/email/component/column.tsx
View File

@ -90,16 +90,16 @@ const columns: ColumnDef<any>[] = [
Detail
</DropdownMenuItem>
</Link>
<Link href={`/admin/broadcast/create/${row.original.id}`}>
<Link href={`/admin/broadcast/email/${row.original.id}`}>
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none cursor-pointer">
Email & Whatsapp Blast
Email Blast
</DropdownMenuItem>
</Link>
{/* <Link href={`/admin/broadcast/whatsapp/${row.original.id}`}>
<Link href={`/admin/broadcast/whatsapp/${row.original.id}`}>
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none cursor-pointer">
Whatsapp Blast
</DropdownMenuItem>
</Link> */}
</Link>
</DropdownMenuContent>
</DropdownMenu>
);

0
app/[locale]/(protected)/admin/broadcast/create/component/table.tsx → app/[locale]/(protected)/admin/broadcast/email/component/table.tsx
View File

4
app/[locale]/(protected)/admin/broadcast/page.tsx
View File

@ -1,6 +1,6 @@
"use client";
import SiteBreadcrumb from "@/components/site-breadcrumb";
import BroadcastTable from "./create/component/table";
import BroadcastTable from "./email/component/table";
import { PlusIcon } from "lucide-react";
import EscalationTable from "../../shared/communication/escalation/components/escalation-table";
@ -8,7 +8,7 @@ import InternalTable from "../../shared/communication/internal/components/intern
import { useState } from "react";
import { Link } from "@/i18n/routing";
import { Button } from "@/components/ui/button";
import BroadcastEmailTable from "./create/component/table";
import BroadcastEmailTable from "./email/component/table";
import BroadcastWhatsAppTable from "./whatsapp/component/table";
export default function AdminBroadcast() {

2
app/[locale]/(protected)/admin/broadcast/whatsapp/[id]/page.tsx
View File

@ -5,7 +5,7 @@ export default function CreateWABlast() {
return (
<div>
<SiteBreadcrumb />
{/* <ContentBlast /> */}
<ContentBlast type="wa" />
</div>
);
}

13
app/[locale]/(protected)/admin/management-user/internal/create/page.tsx
View File

@ -5,6 +5,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
import { Check, ChevronsUpDown, Eye, EyeOff } from "lucide-react";
import { useForm } from "react-hook-form";
import { z } from "zod";
import { cn, getCookiesDecrypt } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import {
@ -289,17 +290,7 @@ export default function CreateUserForm() {
};
if (data.role == "OPT-ID") {
// req.handledSocialMedia = data?.sns ? data.sns.join(",") : "";
if (data.role == "OPT-ID") {
let snsValue = data?.sns ? data.sns.join(",") : "";
// ✅ Jika hanya 1 value → tambahkan koma agar backend tidak error
if (data?.sns && data.sns.length === 1) {
snsValue = snsValue + ",";
}
req.handledSocialMedia = snsValue;
}
req.handledSocialMedia = data?.sns ? data.sns.join(",") : "";
}
if (data.role == "KUR-ID") {

1
app/[locale]/(protected)/admin/management-user/internal/edit/[id]/page.tsx
View File

@ -221,6 +221,7 @@ export default function EditUserForm() {
form.setValue("level", String(res?.userLevelId));
} else {
initFetch();
console.log("sadad", res?.role?.code);
form.setValue("fullname", res?.fullname);
form.setValue("username", res?.username);
form.setValue("phoneNumber", res?.phoneNumber);

128
app/[locale]/(protected)/admin/media-tracking/detail/component/column.tsx
View File

@ -31,8 +31,6 @@ import {
DialogTrigger,
} from "@/components/ui/dialog";
import { Collapsible, CollapsibleContent } from "@/components/ui/collapsible";
import { validateMediaLink } from "@/service/media-tracking/media-tracking";
import toast from "react-hot-toast";
const columns: ColumnDef<any>[] = [
{
@ -54,132 +52,12 @@ const columns: ColumnDef<any>[] = [
<span className="normal-case">{row.getValue("title")}</span>
),
},
// {
// accessorKey: "link",
// header: "Link Berita",
// cell: ({ row }) => (
// <span className="normal-case">{row.getValue("link")}</span>
// ),
// },
{
accessorKey: "link",
header: "Link Berita",
cell: ({ row }) => {
const link = row.getValue<string>("link");
if (!link) {
return <span className="text-muted-foreground">-</span>;
}
return (
<Link
href={link}
target="_blank"
rel="noopener noreferrer"
className="text-blue-600 underline hover:text-blue-800 break-all"
>
{link}
</Link>
);
},
},
{
id: "validation",
header: "Validasi",
cell: ({ row, table }) => {
const original = row.original;
// const isValid = original.isValid;
const isRelevant = original.isRelevant;
const link = original.link;
const updateRow = (data: Partial<any>) => {
table.options.meta?.updateData(row.index, data);
};
const handleValid = async () => {
try {
await validateMediaLink(original.id, true);
updateRow({
isRelevant: true,
});
table.options.meta?.refetchData?.();
} catch (err: any) {
toast.error(err.message);
}
};
const handleInvalid = async () => {
try {
await validateMediaLink(original.id, false);
updateRow({
isRelevant: false,
});
table.options.meta?.refetchData?.();
} catch (err: any) {
toast.error(err.message);
}
};
if (!link) {
return <span className="text-muted-foreground">-</span>;
}
if (isRelevant === true) {
return (
<Button
size="sm"
className="bg-green-600 hover:bg-green-700"
disabled
>
Relevan
</Button>
);
}
return (
<div className="flex gap-2">
<Button
size="sm"
variant="outline"
onClick={handleValid}
className="flex items-center"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="M18.7 7.2c-.4-.4-1-.4-1.4 0l-7.5 7.5l-3.1-3.1c-.4-.4-1-.4-1.4 0s-.4 1 0 1.4l3.8 3.8c.2.2.4.3.7.3s.5-.1.7-.3l8.2-8.2c.4-.4.4-1 0-1.4"
/>
</svg>
Relevan
</Button>
<Button size="sm" variant="outline" onClick={handleInvalid} className="flex text-center items-center justify-center">
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 24 24"
>
<path
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
d="M6.758 17.243L12.001 12m5.243-5.243L12 12m0 0L6.758 6.757M12.001 12l5.243 5.243"
/>
</svg>
Tidak Relevan
</Button>
</div>
);
},
cell: ({ row }) => (
<span className="normal-case">{row.getValue("link")}</span>
),
},
];

14
app/[locale]/(protected)/admin/media-tracking/detail/component/table.tsx
View File

@ -116,18 +116,6 @@ const NewsDetailTable = () => {
onColumnVisibilityChange: setColumnVisibility,
onRowSelectionChange: setRowSelection,
onPaginationChange: setPagination,
meta: {
updateData: (rowIndex: number, value: Partial<any>) => {
setDataTable((old) =>
old.map((row, index) =>
index === rowIndex ? { ...row, ...value } : row
)
);
},
refetchData: () => {
fetchData();
},
},
state: {
sorting,
columnFilters,
@ -166,7 +154,7 @@ const NewsDetailTable = () => {
pageIndex: 0,
pageSize: Number(showData),
});
}, [page, showData, id]);
}, [page, showData]);
async function fetchData() {
try {

134
app/[locale]/(protected)/admin/media-tracking/results/component/column.tsx
View File

@ -1,15 +1,7 @@
import * as React from "react";
import { ColumnDef } from "@tanstack/react-table";
import { exportMediaTrackingToExcel } from "@/utils/export-media-tracking";
import { loading, close } from "@/config/swal";
import { error } from "@/lib/swal";
import {
DownloadIcon,
Eye,
MoreVertical,
SquarePen,
Trash2,
} from "lucide-react";
import { Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react";
import { cn } from "@/lib/utils";
import {
DropdownMenu,
@ -53,101 +45,19 @@ const columns: ColumnDef<any>[] = [
cell: ({ row }) => <span>{row.getValue("title")}</span>,
},
{
accessorKey: "resultTotal",
header: () => <div className="text-center w-full">Total Artikel</div>,
cell: ({ row }) => {
const value = row.getValue("resultTotal") as number | string | null;
const finalValue =
value === null || value === undefined || value === ""
? 0
: Number(value);
return <div className="text-center w-full">{finalValue}</div>;
},
accessorKey: "link",
header: "Jumlah Amplifikasi",
cell: ({ row }) => <span>{row.getValue("link")}</span>,
},
{
accessorKey: "amplification",
header: () => <div className="text-center w-full">Jumlah Amplifikasi</div>,
cell: ({ row }) => {
const raw = row.getValue("amplification") as string | null;
let total = 0;
let invalidTotal = 0;
if (raw && typeof raw === "string") {
const parts = raw.split("/").map((v) => v.trim());
total = Number(parts[0]) || 0;
invalidTotal = Number(parts[1]) || 0;
}
return (
<div className="text-center w-full font-medium">
{total}
<span className="text-muted-foreground">/{invalidTotal}</span>
</div>
);
},
accessorKey: "status",
header: "Status",
cell: ({ row }) => <span>{row.getValue("status")}</span>,
},
// {
// accessorKey: "status",
// header: "Status",
// cell: ({ row }) => <span>{row.getValue("status")}</span>,
// },
// {
// accessorKey: "isProcessing",
// header: () => <div className="text-center">Status</div>,
// cell: ({ row }) => {
// const raw = row.getValue("isProcessing");
// var status = "Sedang Diproses"
// if (Boolean(raw) == true) {
// status = "Selesai Diproses";
// }
// return <div className="text-center">{status}</div>;
// },
// },
{
accessorKey: "isProcessing",
header: () => <div className="text-center">Status</div>,
cell: ({ row }) => {
const raw = Boolean(row.getValue("isProcessing"));
const statusText = raw ? "Sedang Diproses" : "Sudah Selesai";
const colorClass = raw
? "bg-yellow-100 text-yellow-700 border border-yellow-300"
: "bg-green-100 text-green-700 border border-green-300";
return (
<div className="text-center">
<span
className={`px-2 py-1 rounded text-xs font-medium inline-block ${colorClass}`}
>
{statusText}
</span>
</div>
);
},
},
{
accessorKey: "createdAt",
header: () => <div className="text-center">Tanggal Penarikan</div>,
cell: ({ row }) => {
const raw = row.getValue("createdAt");
if (!raw || typeof raw !== "string")
return <div className="text-center">-</div>;
const date = new Date(raw);
if (isNaN(date.getTime())) return <div className="text-center">-</div>;
const formatted = date.toLocaleDateString("id-ID", {
day: "2-digit",
month: "short",
year: "numeric",
});
return <div className="text-center">{formatted}</div>;
},
accessorKey: "date",
header: "Tanggal Penarikan",
cell: ({ row }) => <span>{row.getValue("date")}</span>,
},
{
id: "actions",
@ -168,31 +78,13 @@ const columns: ColumnDef<any>[] = [
</DropdownMenuTrigger>
<DropdownMenuContent className="p-0" align="end">
<Link href={`/admin/media-tracking/detail/${row.original.id}`}>
<DropdownMenuItem className="p-2 border-b cursor-pointer text-default-700 group focus:bg-default focus:text-primary-foreground items-center rounded-none">
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
<Eye className="w-4 h-4 me-1.5" />
View&nbsp;
View
{row.original.mediaUpload.fileType.secondaryName &&
row.original.mediaUpload.fileType.secondaryName.toLowerCase()}
</DropdownMenuItem>
</Link>
<DropdownMenuItem
className="p-2 border-b cursor-pointer text-default-700 group rounded-none focus:bg-default focus:text-primary-foreground "
onClick={async () => {
try {
loading();
await exportMediaTrackingToExcel({
mediaTrackingId: row.original.id,
});
close();
} catch (e: any) {
close();
error(e.message || "Gagal export data");
}
}}
>
<DownloadIcon className="w-4 h-4 me-1.5" />
<p>Download</p>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
);

213
app/[locale]/(protected)/admin/media-tracking/tracking-berita/component/table.tsx
View File

@ -32,7 +32,7 @@ export default function TrackingBeritaCard() {
const [page, setPage] = useState(1);
const [totalPage, setTotalPage] = useState(1);
const [showData, setShowData] = useState("6");
const MySwal = withReactContent(Swal);
const MySwal = withReactContent(Swal);
useEffect(() => {
initFecth();
@ -40,7 +40,7 @@ export default function TrackingBeritaCard() {
const initFecth = async () => {
loading();
const response = await listDataTracking(Number(showData), page - 1, search);
const response = await listDataTracking(showData, page - 1);
const data = response?.data?.data;
const newData = data?.content;
setTotalPage(data?.totalPages || 1);
@ -56,85 +56,23 @@ export default function TrackingBeritaCard() {
setContent(response?.data?.data?.content || []);
};
const handleInputChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const value = e.target.value;
setSearch(value);
const response = await listDataTracking(Number(showData), 0, value);
setContent(response?.data?.data?.content || []);
if (value.trim() === "") {
initFecth();
} else {
fecthAll(value);
}
};
// const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
// const value = e.target.value;
// setSearch(value);
// if (value.trim() === "") {
// initFecth();
// } else {
// fecthAll(value);
// }
// };
const handleSelect = (id: number) => {
setSelectedItems((prev) =>
prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]
);
};
const doSave = async () => {
if (selectedItems.length === 0) {
MySwal.fire(
"Peringatan",
"Pilih minimal 1 berita untuk disimpan.",
"warning"
);
return;
}
try {
loading();
const promises = selectedItems.map(async (id) => {
const res = await mediaTrackingSave({
mediaUploadId: id,
duration: 24,
scrapingPeriod: 3,
});
// cek pesan API
if (!res?.data?.success) {
throw new Error(
res?.data?.message ||
"Limit media tracking per hari sudah tercapai. Maksimal 5 tracking per hari."
);
}
return res;
});
await Promise.all(promises);
close();
await MySwal.fire({
icon: "success",
title: "Berhasil!",
text: "Tracking berita berhasil ditambahkan.",
confirmButtonColor: "#2563eb",
});
setSelectedItems([]);
initFecth();
} catch (err: any) {
close();
MySwal.fire({
icon: "error",
title: "Gagal!",
text: err?.message || "Terjadi kesalahan saat menyimpan data.",
confirmButtonColor: "#dc2626",
});
}
};
// const doSave = async () => {
// if (selectedItems.length === 0) {
// toast("Pilih minimal 1 berita untuk disimpan.");
@ -161,63 +99,48 @@ export default function TrackingBeritaCard() {
// }
// };
// const doSave = async () => {
// if (selectedItems.length === 0) {
// MySwal.fire(
// "Peringatan",
// "Pilih minimal 1 berita untuk disimpan.",
// "warning"
// );
// return;
// }
const doSave = async () => {
if (selectedItems.length === 0) {
MySwal.fire(
"Peringatan",
"Pilih minimal 1 berita untuk disimpan.",
"warning"
);
return;
}
// try {
// loading();
try {
loading();
// const promises = selectedItems.map((id) =>
// mediaTrackingSave({
// mediaUploadId: id,
// duration: 24,
// scrapingPeriod: 3,
// })
// );
// await Promise.all(promises);
const promises = selectedItems.map((id) =>
mediaTrackingSave({
mediaUploadId: id,
duration: 24,
scrapingPeriod: 3,
})
);
await Promise.all(promises);
// close();
close();
// await MySwal.fire({
// icon: "success",
// title: "Berhasil!",
// text: "Tracking berita berhasil ditambahkan.",
// confirmButtonColor: "#2563eb",
// });
await MySwal.fire({
icon: "success",
title: "Berhasil!",
text: "Tracking berita berhasil ditambahkan.",
confirmButtonColor: "#2563eb",
});
// setSelectedItems([]);
// initFecth();
// } catch (err: any) {
// close();
// MySwal.fire({
// icon: "error",
// title: "Gagal!",
// text: err?.message || "Terjadi kesalahan saat menyimpan data.",
// confirmButtonColor: "#dc2626",
// });
// }
// };
const slugify = (text: string) => {
return text
.toLowerCase()
.replace(/[^a-z0-9]+/g, "-")
.replace(/(^-|-$)+/g, "");
};
const goToDetail = (item: any) => {
const type = item.type || "image";
const slug = slugify(item.title || "");
const url = `/in/${type}/detail/${item.id}-${slug}`;
window.location.href = url;
setSelectedItems([]);
initFecth();
} catch (err: any) {
close();
MySwal.fire({
icon: "error",
title: "Gagal!",
text: err?.message || "Terjadi kesalahan saat menyimpan data.",
confirmButtonColor: "#dc2626",
});
}
};
return (
@ -265,7 +188,7 @@ export default function TrackingBeritaCard() {
<div className="text-sm text-blue-600 font-medium">
{selectedItems.length} Item Terpilih{" "}
<span className="text-black">
/ Tracking Berita tersisa {5 - selectedItems.length}
/ Tracking Berita tersisa {29 - selectedItems.length}
</span>
</div>
<Button className="bg-blue-600 text-white" onClick={doSave}>
@ -275,48 +198,6 @@ export default function TrackingBeritaCard() {
)}
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
{content?.length > 0 &&
content.map((item: any) => (
<Card
key={item.id}
className="relative overflow-hidden shadow-sm border rounded-lg"
>
{/* KLIK GAMBAR = CHECKLIST */}
<div
className="cursor-pointer"
onClick={() => handleSelect(item.id)}
>
<img
src={item.thumbnailLink}
alt={item.title}
className="w-full h-[300px] object-cover"
/>
{/* CHECKBOX */}
<div className="absolute top-2 left-2">
<div className="w-5 h-5 border-2 border-white bg-white rounded-sm flex items-center justify-center">
{selectedItems.includes(item.id) && (
<div className="w-3 h-3 bg-blue-600 rounded-sm" />
)}
</div>
</div>
</div>
{/* KLIK JUDUL = DETAIL */}
<p
className="p-2 text-sm font-medium hover:underline cursor-pointer"
onClick={(e) => {
e.stopPropagation();
goToDetail(item);
}}
>
{item.title}
</p>
</Card>
))}
</div>
{/* <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
{content?.length > 1 &&
content.map((item: any) => (
<Card
@ -341,7 +222,7 @@ export default function TrackingBeritaCard() {
</p>
</Card>
))}
</div> */}
</div>
<div className="mt-3">
{content && content?.length > 0 ? (
<CustomPagination

23
app/[locale]/(protected)/admin/settings/category/component/status.tsx
View File

@ -10,34 +10,15 @@ export default function StatusToogle(props: {
}) {
const { id, initValue } = props;
const router = useRouter();
// const publishCategory = async (id: number, status: string) => {
// const response = await publishUnpublishCategory(id, status);
// console.log(response);
// if (response?.error) {
// error(response.message);
// return false;
// }
// router.push("/admin/settings/category?dataChange=true");
// };
const publishCategory = async (id: number, status: string) => {
const response = await publishUnpublishCategory(id, status);
console.log("API Response:", response);
// cek error interceptor
console.log(response);
if (response?.error) {
error(response.message || "Terjadi kesalahan");
error(response.message);
return false;
}
// cek flag success asli dari backend
if (response?.data?.success === false) {
error(response?.data?.message || "Terjadi kesalahan");
return false;
}
router.push("/admin/settings/category?dataChange=true");
};
return (
<Switch
id={String(id)}

11
app/[locale]/(protected)/admin/settings/category/component/table.tsx
View File

@ -28,10 +28,21 @@ import {
import { useSearchParams } from "next/navigation";
import TablePagination from "@/components/table/table-pagination";
import columns from "./column";
import { listEnableCategory } from "@/service/content/content";
import { Checkbox } from "@/components/ui/checkbox";
import { close, loading } from "@/config/swal";
import { Link, useRouter } from "@/i18n/routing";
import { NewCampaignIcon } from "@/components/icon";
import { getCategories } from "@/service/settings/settings";
import {
Dialog,
DialogContent,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog";
import CreateCategoryModal from "./create";
import { useTranslations } from "next-intl";
import {

12
app/[locale]/(protected)/admin/settings/setting-tracking/component/table.tsx
View File

@ -27,10 +27,22 @@ import {
import { useSearchParams } from "next/navigation";
import TablePagination from "@/components/table/table-pagination";
import columns from "./column";
import { listEnableCategory } from "@/service/content/content";
import { Checkbox } from "@/components/ui/checkbox";
import { close, loading } from "@/config/swal";
import { Link, useRouter } from "@/i18n/routing";
import { NewCampaignIcon } from "@/components/icon";
import { getCategories } from "@/service/settings/settings";
import {
Dialog,
DialogContent,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog";
import { useTranslations } from "next-intl";
import {
Popover,

343
app/[locale]/(protected)/contributor/agenda-setting/event-modal.tsx
View File

@ -109,9 +109,7 @@ const EventModal = ({
const pathname = usePathname();
const [isLoading, setIsLoading] = useState(false);
const [checkedLevels, setCheckedLevels] = useState<Set<number>>(new Set());
const [expandedPolda, setExpandedPolda] = useState<Record<number, boolean>>(
{}
);
const [expandedPolda, setExpandedPolda] = useState<Record<number, boolean>>({});
const [audioFile, setAudioFile] = useState<File | null>(null);
const [isRecording, setIsRecording] = useState(false);
const [timer, setTimer] = useState<number>(120);
@ -155,11 +153,9 @@ const EventModal = ({
});
// State untuk melacak apakah perubahan berasal dari checkbox Jenis Agenda
const [isUpdatingFromJenisAgenda, setIsUpdatingFromJenisAgenda] =
useState(false);
const [isUpdatingFromJenisAgenda, setIsUpdatingFromJenisAgenda] = useState(false);
// State untuk melacak jenis perubahan spesifik
const [jenisAgendaChangeType, setJenisAgendaChangeType] =
useState<string>("");
const [jenisAgendaChangeType, setJenisAgendaChangeType] = useState<string>("");
const levelNumber = Number(getCookiesDecrypt("ulne")) || 0;
const userLevelId = getCookiesDecrypt("ulie");
@ -265,11 +261,7 @@ const EventModal = ({
// useEffect untuk sinkronisasi checkbox modal dengan Jenis Agenda
useEffect(() => {
if (
listDest.length > 0 &&
isUpdatingFromJenisAgenda &&
jenisAgendaChangeType
) {
if (listDest.length > 0 && isUpdatingFromJenisAgenda && jenisAgendaChangeType) {
syncModalWithJenisAgenda();
}
}, [isUpdatingFromJenisAgenda, jenisAgendaChangeType]);
@ -281,55 +273,44 @@ const EventModal = ({
}
}, [checkedLevels, isUpdatingFromJenisAgenda]);
// Fungsi untuk update wilayahPublish berdasarkan checkbox modal
// Fungsi untuk update wilayahPublish berdasarkan checkbox modal
const updateWilayahPublishFromModal = () => {
// Hanya update jika tidak sedang dalam proses update dari Jenis Agenda
if (!isUpdatingFromJenisAgenda && listDest.length > 0) {
// Hitung item yang dipilih berdasarkan checkedLevels
const checkedPoldaCount = listDest.filter(
(item: any) =>
item.levelNumber === 2 &&
item.name !== "SATKER POLRI" &&
checkedLevels.has(Number(item.id))
const checkedPoldaCount = listDest.filter((item: any) =>
item.levelNumber === 2 &&
item.name !== "SATKER POLRI" &&
checkedLevels.has(Number(item.id))
).length;
const checkedPolresCount = listDest.reduce((total: number, item: any) => {
if (item.subDestination) {
return (
total +
item.subDestination.filter((sub: any) =>
checkedLevels.has(Number(sub.id))
).length
);
return total + item.subDestination.filter((sub: any) => checkedLevels.has(Number(sub.id))).length;
}
return total;
}, 0);
const satkerItem: any = listDest.find(
(item: any) => item.name === "SATKER POLRI"
);
const checkedSatkerCount = satkerItem
? (checkedLevels.has(Number(satkerItem.id)) ? 1 : 0) +
(satkerItem.subDestination?.filter((sub: any) =>
checkedLevels.has(Number(sub.id))
).length || 0)
: 0;
const satkerItem: any = listDest.find((item: any) => item.name === "SATKER POLRI");
const checkedSatkerCount = satkerItem ? (
(checkedLevels.has(Number(satkerItem.id)) ? 1 : 0) +
(satkerItem.subDestination?.filter((sub: any) => checkedLevels.has(Number(sub.id))).length || 0)
) : 0;
// Checkbox aktif jika ADA item yang dipilih dalam kategori tersebut
const hasSelectedPolda = checkedPoldaCount > 0;
const hasSelectedPolres = checkedPolresCount > 0;
const hasSelectedSatker = checkedSatkerCount > 0;
// Update arrays untuk backend
const newSelectedPolda = listDest
.filter(
(item: any) =>
item.levelNumber === 2 &&
item.name !== "SATKER POLRI" &&
checkedLevels.has(Number(item.id))
.filter((item: any) =>
item.levelNumber === 2 &&
item.name !== "SATKER POLRI" &&
checkedLevels.has(Number(item.id))
)
.map((item: any) => String(item.id));
const newSelectedPolres: string[] = [];
listDest.forEach((item: any) => {
if (item.subDestination) {
@ -340,7 +321,7 @@ const EventModal = ({
});
}
});
const newSelectedSatker: string[] = [];
if (satkerItem) {
if (checkedLevels.has(Number(satkerItem.id))) {
@ -354,56 +335,51 @@ const EventModal = ({
});
}
}
// Update state arrays
setSelectedPolda(newSelectedPolda);
setSelectedPolres(newSelectedPolres);
setSelectedSatker(newSelectedSatker);
// Update wilayahPublish berdasarkan yang dipilih di modal
setWilayahPublish((prev) => {
setWilayahPublish(prev => {
const newState = { ...prev };
// Update individual checkboxes
newState.polda = hasSelectedPolda;
newState.polres = hasSelectedPolres;
newState.satker = hasSelectedSatker;
// Update checkbox "semua" berdasarkan level user
if (levelNumber === 1) {
// Level 1: semua checkbox harus aktif (nasional, polda, polres, satker, international)
newState.semua =
newState.nasional &&
hasSelectedPolda &&
hasSelectedPolres &&
hasSelectedSatker &&
newState.international;
newState.semua = newState.nasional && hasSelectedPolda && hasSelectedPolres && hasSelectedSatker && newState.international;
} else if (levelNumber === 2) {
// Level 2: hanya polres yang perlu aktif
newState.semua = hasSelectedPolres;
} else {
newState.semua = false;
}
return newState;
});
// Update agendaType berdasarkan checkbox yang aktif
const selectedKeys = [];
if (hasSelectedPolda) selectedKeys.push(wilayahValueMap.polda);
if (hasSelectedPolres) selectedKeys.push(wilayahValueMap.polres);
if (hasSelectedSatker) selectedKeys.push(wilayahValueMap.satker);
setAgendaType(selectedKeys.join(","));
}
};
// Fungsi untuk sinkronisasi checkbox modal dengan Jenis Agenda
// Fungsi untuk sinkronisasi checkbox modal dengan Jenis Agenda
const syncModalWithJenisAgenda = () => {
// Hanya jalankan sinkronisasi jika perubahan berasal dari checkbox Jenis Agenda
if (isUpdatingFromJenisAgenda) {
const newCheckedLevels = new Set(checkedLevels);
// Handle checklist actions - menambahkan semua item ke modal
if (jenisAgendaChangeType === "polda_checked") {
// Checklist semua polda
@ -415,11 +391,7 @@ const EventModal = ({
} else if (jenisAgendaChangeType === "polres_checked") {
// Checklist semua polres, tapi hanya yang poldanya sudah di-checklist
listDest.forEach((item: any) => {
if (
item.levelNumber === 2 &&
item.name !== "SATKER POLRI" &&
newCheckedLevels.has(Number(item.id))
) {
if (item.levelNumber === 2 && item.name !== "SATKER POLRI" && newCheckedLevels.has(Number(item.id))) {
if (item.subDestination) {
item.subDestination.forEach((polres: any) => {
newCheckedLevels.add(Number(polres.id));
@ -429,9 +401,7 @@ const EventModal = ({
});
} else if (jenisAgendaChangeType === "satker_checked") {
// Checklist satker
const satkerItem: any = listDest.find(
(item: any) => item.name === "SATKER POLRI"
);
const satkerItem: any = listDest.find((item: any) => item.name === "SATKER POLRI");
if (satkerItem) {
newCheckedLevels.add(Number(satkerItem.id));
if (satkerItem.subDestination) {
@ -464,12 +434,10 @@ const EventModal = ({
}
}
});
setWilayahPublish((prev) => ({ ...prev, polres: false }));
setWilayahPublish(prev => ({ ...prev, polres: false }));
} else if (jenisAgendaChangeType === "satker_unchecked") {
// Clear satker dari checkedLevels
const satkerItem: any = listDest.find(
(item: any) => item.name === "SATKER POLRI"
);
const satkerItem: any = listDest.find((item: any) => item.name === "SATKER POLRI");
if (satkerItem) {
newCheckedLevels.delete(Number(satkerItem.id));
if (satkerItem.subDestination) {
@ -479,9 +447,9 @@ const EventModal = ({
}
}
}
setCheckedLevels(newCheckedLevels);
// Reset flag setelah sinkronisasi selesai
setIsUpdatingFromJenisAgenda(false);
setJenisAgendaChangeType("");
@ -516,14 +484,12 @@ const EventModal = ({
setCheckedLevels((prev) => {
const updatedLevels = new Set(prev);
const isCurrentlyChecked = updatedLevels.has(levelId);
if (isCurrentlyChecked) {
updatedLevels.delete(levelId);
// Jika ini adalah POLDA yang di-unchecklist, unchecklist juga semua polres di bawahnya
const poldaItem = listDest.find(
(item: any) => Number(item.id) === levelId
) as any;
const poldaItem = listDest.find((item: any) => Number(item.id) === levelId) as any;
if (poldaItem && poldaItem.subDestination) {
poldaItem.subDestination.forEach((polres: any) => {
updatedLevels.delete(Number(polres.id));
@ -548,12 +514,7 @@ const EventModal = ({
const toggleWilayah = (key: string) => {
// Set flag bahwa perubahan berasal dari checkbox Jenis Agenda
setIsUpdatingFromJenisAgenda(true);
setJenisAgendaChangeType(
key +
(wilayahPublish[key as keyof typeof wilayahPublish]
? "_unchecked"
: "_checked")
);
setJenisAgendaChangeType(key + (wilayahPublish[key as keyof typeof wilayahPublish] ? "_unchecked" : "_checked"));
setWilayahPublish((prev: any) => {
let newState = { ...prev };
@ -590,21 +551,18 @@ const EventModal = ({
return newState;
}
// Validasi khusus untuk POLRES
// Validasi khusus untuk POLRES
if (key === "polres" && !prev[key]) {
// Cek apakah ada POLDA yang sudah dipilih di modal
const hasSelectedPolda = listDest.some(
(item: any) =>
item.levelNumber === 2 &&
item.name !== "SATKER POLRI" &&
checkedLevels.has(Number(item.id))
const hasSelectedPolda = listDest.some((item: any) =>
item.levelNumber === 2 &&
item.name !== "SATKER POLRI" &&
checkedLevels.has(Number(item.id))
);
if (!hasSelectedPolda) {
// Jika tidak ada POLDA yang dipilih, tampilkan peringatan dan batalkan
alert(
"Harap pilih POLDA di Modal terlebih dahulu sebelum mengaktifkan checkbox POLRES."
);
alert("Harap pilih POLDA di Modal terlebih dahulu sebelum mengaktifkan checkbox POLRES.");
// Reset flag karena perubahan dibatalkan
setIsUpdatingFromJenisAgenda(false);
setJenisAgendaChangeType("");
@ -640,9 +598,7 @@ const EventModal = ({
});
} else if (key === "satker") {
// Clear satker
const satkerItem: any = listDest.find(
(item: any) => item.name === "SATKER POLRI"
);
const satkerItem: any = listDest.find((item: any) => item.name === "SATKER POLRI");
if (satkerItem) {
newCheckedLevels.delete(Number(satkerItem.id));
if (satkerItem.subDestination) {
@ -657,14 +613,9 @@ const EventModal = ({
// Update checkbox "semua" berdasarkan status semua checkbox lainnya
// Untuk level 1: semua, nasional, polda, polres, satker, international harus aktif
// Untuk level 2: semua, polres harus aktif
// Untuk level 2: semua, polres harus aktif
if (levelNumber === 1) {
newState.semua =
newState.nasional &&
newState.polda &&
newState.polres &&
newState.satker &&
newState.international;
newState.semua = newState.nasional && newState.polda && newState.polres && newState.satker && newState.international;
} else if (levelNumber === 2) {
newState.semua = newState.polres;
} else {
@ -819,7 +770,7 @@ const EventModal = ({
const onDeleteEventAction = async () => {
try {
} catch (error) {}
} catch (error) { }
};
const handleOpenDeleteModal = (eventId: string) => {
@ -894,6 +845,7 @@ const EventModal = ({
const resCsrf = await getCsrfToken();
const csrfToken = resCsrf?.data?.token;
console.log("CSRF TOKEN : ", csrfToken);
const headers = {
"X-XSRF-TOKEN": csrfToken,
};
@ -998,7 +950,7 @@ const EventModal = ({
);
};
const handleRemoveFile = (id: number) => {};
const handleRemoveFile = (id: number) => { };
async function doDelete(id: any) {
loading();
@ -1154,42 +1106,40 @@ const EventModal = ({
<div className="space-y-1.5">
<Label htmlFor="wilayahPublish">Jenis Agenda</Label>
<div className="flex flex-wrap items-center gap-2">
<div>
<Checkbox
id="semua"
checked={wilayahPublish.semua}
onCheckedChange={() => toggleWilayah("semua")}
/>
<label htmlFor="semua" className="ml-2 text-sm">
Semua
</label>
</div>
<div>
<Checkbox
id="semua"
checked={wilayahPublish.semua}
onCheckedChange={() => toggleWilayah("semua")}
/>
<label htmlFor="semua" className="ml-2 text-sm">
Semua
</label>
</div>
{levelNumber === 1 && (
<>
<div>
<Checkbox
id="nasional"
checked={wilayahPublish.nasional}
onCheckedChange={() => toggleWilayah("nasional")}
/>
<label
htmlFor="nasional"
className="ml-2 text-sm mr-2"
>
Nasional
</label>
</div>
<div>
<Checkbox
id="polda"
checked={wilayahPublish.polda}
onCheckedChange={() => toggleWilayah("polda")}
/>
<label htmlFor="polda" className="mx-2 text-sm mr-2">
Polda
</label>
</div>
<div>
<Checkbox
id="nasional"
checked={wilayahPublish.nasional}
onCheckedChange={() => toggleWilayah("nasional")}
/>
<label htmlFor="nasional" className="ml-2 text-sm mr-2">
Nasional
</label>
</div>
<div>
<Checkbox
id="polda"
checked={wilayahPublish.polda}
onCheckedChange={() => toggleWilayah("polda")}
/>
<label htmlFor="polda" className="mx-2 text-sm mr-2">
Polda
</label>
</div>
</>
)}
@ -1201,41 +1151,39 @@ const EventModal = ({
onCheckedChange={() => toggleWilayah("polres")}
/>
<label htmlFor="polres" className="ml-2 text-sm mr-2">
Polres
Polres
</label>
</div>
)}
{levelNumber === 1 && (
<>
<div>
<Checkbox
id="satker"
checked={wilayahPublish.satker}
onCheckedChange={() => toggleWilayah("satker")}
/>
<label htmlFor="satker" className="mx-2 text-sm mr-2">
Satker
</label>
</div>
<div>
<Checkbox
id="international"
checked={wilayahPublish.international}
onCheckedChange={() =>
toggleWilayah("international")
}
/>
<label
htmlFor="international"
className="ml-2 text-sm mr-2"
>
Internasional
</label>
</div>
<div>
<Checkbox
id="satker"
checked={wilayahPublish.satker}
onCheckedChange={() => toggleWilayah("satker")}
/>
<label htmlFor="satker" className="mx-2 text-sm mr-2">
Satker
</label>
</div>
<div>
<Checkbox
id="international"
checked={wilayahPublish.international}
onCheckedChange={() => toggleWilayah("international")}
/>
<label
htmlFor="international"
className="ml-2 text-sm mr-2"
>
Internasional
</label>
</div>
</>
)}
<div className="pl-1">
<Dialog>
<DialogTrigger asChild>
@ -1254,9 +1202,7 @@ const EventModal = ({
<div key={polda.id} className="border p-2">
<Label className="flex items-center">
<Checkbox
checked={checkedLevels.has(
Number(polda.id)
)}
checked={checkedLevels.has(Number(polda.id))}
onCheckedChange={() =>
handleCheckboxChange(Number(polda.id))
}
@ -1294,13 +1240,9 @@ const EventModal = ({
polda?.subDestination?.forEach(
(polres: any) => {
if (isChecked) {
updatedLevels.add(
Number(polres.id)
);
updatedLevels.add(Number(polres.id));
} else {
updatedLevels.delete(
Number(polres.id)
);
updatedLevels.delete(Number(polres.id));
}
}
);
@ -1310,27 +1252,18 @@ const EventModal = ({
/>
Pilih Semua
</Label>
{polda?.subDestination?.map(
(polres: any) => (
<Label
key={polres.id}
className="block mt-1"
>
<Checkbox
checked={checkedLevels.has(
Number(polres.id)
)}
onCheckedChange={() =>
handleCheckboxChange(
Number(polres.id)
)
}
className="mr-2"
/>
{polres.name}
</Label>
)
)}
{polda?.subDestination?.map((polres: any) => (
<Label key={polres.id} className="block mt-1">
<Checkbox
checked={checkedLevels.has(Number(polres.id))}
onCheckedChange={() =>
handleCheckboxChange(Number(polres.id))
}
className="mr-2"
/>
{polres.name}
</Label>
))}
</div>
)}
</div>
@ -1371,7 +1304,8 @@ const EventModal = ({
<Label>Video</Label>
<FileUploader
accept={{
"video/*": [],
"mp4/*": [],
"mov/*": [],
}}
maxSize={100}
label="Upload file dengan format .mp4 atau .mov."
@ -1383,7 +1317,7 @@ const EventModal = ({
className="object-fill h-full w-full rounded-md"
src={file.url}
controls
title={`Video ${file.id}`}
title={`Video ${file.id}`} // Mengganti alt dengan title
/>
<div
key={index}
@ -1462,9 +1396,10 @@ const EventModal = ({
</div>
<div>
<Label>Teks</Label>
<FileUploader
accept={{
"application/pdf": [],
"pdf/*": [],
}}
maxSize={100}
label="Upload file dengan format .pdf."
@ -1520,7 +1455,8 @@ const EventModal = ({
/>
<FileUploader
accept={{
"audio/*": [],
"mp3/*": [],
"wav/*": [],
}}
maxSize={100}
label="Upload file dengan format .mp3 atau .wav."
@ -1546,8 +1482,7 @@ const EventModal = ({
type="button"
onClick={onPlayPause}
disabled={isPlaying}
className={`flex items-center gap-2 ${
isPlaying
className={`flex items-center gap-2 ${isPlaying
? "bg-gray-300 cursor-not-allowed"
: "bg-primary text-white"
} p-2 rounded`}

39
app/[locale]/(protected)/contributor/content/audio/components/columns.tsx
View File

@ -18,7 +18,6 @@ import { deleteMedia } from "@/service/content/content";
import { error } from "@/lib/swal";
import Swal from "sweetalert2";
import { useTranslations } from "next-intl";
import { useRouter } from "@/i18n/routing";
const useTableColumns = () => {
const t = useTranslations("Table");
@ -182,11 +181,14 @@ const useTableColumns = () => {
header: t("action", { defaultValue: "Action" }),
enableHiding: false,
cell: ({ row }) => {
const router = useRouter();
const MySwal = withReactContent(Swal);
async function doDelete(id: any) {
const data = { id };
// loading();
const data = {
id,
};
const response = await deleteMedia(data);
if (response?.error) {
@ -228,21 +230,16 @@ const useTableColumns = () => {
const [isMabesApprover, setIsMabesApprover] = React.useState(false);
const userId = getCookiesDecrypt("uie");
const userLevelId = getCookiesDecrypt("ulie");
const roleId = Number(getCookiesDecrypt("urie")); // pastikan jadi number
const roleId = getCookiesDecrypt("urie");
React.useEffect(() => {
if (userLevelId !== undefined && roleId !== undefined) {
setIsMabesApprover(
Number(userLevelId) === 216 && Number(roleId) === 3
Number(userLevelId) == 216 && Number(roleId) == 3
);
}
}, [userLevelId, roleId]);
const canEdit =
Number(row.original.uploadedById) === Number(userId) ||
isMabesApprover ||
roleId === 14;
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
@ -263,8 +260,16 @@ const useTableColumns = () => {
View
</DropdownMenuItem>
</Link>
{canEdit && (
{/* <Link
href={`/contributor/content/audio/update/${row.original.id}`}
>
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
<SquarePen className="w-4 h-4 me-1.5" />
Edit
</DropdownMenuItem>
</Link> */}
{(Number(row.original.uploadedById) === Number(userId) ||
isMabesApprover) && (
<Link
href={`/contributor/content/audio/update/${row.original.id}`}
>
@ -274,7 +279,6 @@ const useTableColumns = () => {
</DropdownMenuItem>
</Link>
)}
<DropdownMenuItem
onClick={() => handleDeleteMedia(row.original.id)}
className="p-2 border-b text-destructive bg-destructive/30 focus:bg-destructive focus:text-destructive-foreground rounded-none"
@ -282,6 +286,15 @@ const useTableColumns = () => {
<Trash2 className="w-4 h-4 me-1.5" />
Delete
</DropdownMenuItem>
{/* {(row.original.uploadedById === userId || isMabesApprover) && (
<DropdownMenuItem
onClick={() => handleDeleteMedia(row.original.id)}
className="p-2 border-b text-destructive bg-destructive/30 focus:bg-destructive focus:text-destructive-foreground rounded-none"
>
<Trash2 className="w-4 h-4 me-1.5" />
Hapus
</DropdownMenuItem>
)} */}
</DropdownMenuContent>
</DropdownMenu>
);

1077
app/[locale]/(protected)/contributor/content/audio/components/table-audio.tsx
View File

File diff suppressed because it is too large Load Diff

164
app/[locale]/(protected)/contributor/content/image/components/columns.tsx
View File

@ -186,7 +186,11 @@ const useTableColumns = () => {
const MySwal = withReactContent(Swal);
async function doDelete(id: any) {
const data = { id };
// loading();
const data = {
id,
};
const response = await deleteMedia(data);
if (response?.error) {
@ -228,21 +232,16 @@ const useTableColumns = () => {
const [isMabesApprover, setIsMabesApprover] = React.useState(false);
const userId = getCookiesDecrypt("uie");
const userLevelId = getCookiesDecrypt("ulie");
const roleId = Number(getCookiesDecrypt("urie")); // pastikan jadi number
const roleId = getCookiesDecrypt("urie");
React.useEffect(() => {
if (userLevelId !== undefined && roleId !== undefined) {
setIsMabesApprover(
Number(userLevelId) === 216 && Number(roleId) === 3
Number(userLevelId) == 216 && Number(roleId) == 3
);
}
}, [userLevelId, roleId]);
const canEdit =
Number(row.original.uploadedById) === Number(userId) ||
isMabesApprover ||
roleId === 14;
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
@ -263,8 +262,16 @@ const useTableColumns = () => {
View
</DropdownMenuItem>
</Link>
{canEdit && (
{/* <Link
href={`/contributor/content/image/update/${row.original.id}`}
>
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
<SquarePen className="w-4 h-4 me-1.5" />
Edit
</DropdownMenuItem>
</Link> */}
{(Number(row.original.uploadedById) === Number(userId) ||
isMabesApprover) && (
<Link
href={`/contributor/content/image/update/${row.original.id}`}
>
@ -274,7 +281,6 @@ const useTableColumns = () => {
</DropdownMenuItem>
</Link>
)}
<DropdownMenuItem
onClick={() => handleDeleteMedia(row.original.id)}
className="p-2 border-b text-destructive bg-destructive/30 focus:bg-destructive focus:text-destructive-foreground rounded-none"
@ -282,138 +288,20 @@ const useTableColumns = () => {
<Trash2 className="w-4 h-4 me-1.5" />
Delete
</DropdownMenuItem>
{/* {(row.original.uploadedById === userId || isMabesApprover) && (
<DropdownMenuItem
onClick={() => handleDeleteMedia(row.original.id)}
className="p-2 border-b text-destructive bg-destructive/30 focus:bg-destructive focus:text-destructive-foreground rounded-none"
>
<Trash2 className="w-4 h-4 me-1.5" />
Hapus
</DropdownMenuItem>
)} */}
</DropdownMenuContent>
</DropdownMenu>
);
},
},
// {
// id: "actions",
// accessorKey: "action",
// header: t("action", { defaultValue: "Action" }),
// enableHiding: false,
// cell: ({ row }) => {
// const router = useRouter();
// const MySwal = withReactContent(Swal);
// async function doDelete(id: any) {
// // loading();
// const data = {
// id,
// };
// const response = await deleteMedia(data);
// if (response?.error) {
// error(response.message);
// return false;
// }
// success();
// }
// function success() {
// MySwal.fire({
// title: "Sukses",
// icon: "success",
// confirmButtonColor: "#3085d6",
// confirmButtonText: "OK",
// }).then((result) => {
// if (result.isConfirmed) {
// window.location.reload();
// }
// });
// }
// const handleDeleteMedia = (id: any) => {
// MySwal.fire({
// title: "Hapus Data",
// text: "",
// icon: "warning",
// showCancelButton: true,
// cancelButtonColor: "#3085d6",
// confirmButtonColor: "#d33",
// confirmButtonText: "Hapus",
// }).then((result) => {
// if (result.isConfirmed) {
// doDelete(id);
// }
// });
// };
// const [isMabesApprover, setIsMabesApprover] = React.useState(false);
// const userId = getCookiesDecrypt("uie");
// const userLevelId = getCookiesDecrypt("ulie");
// const roleId = getCookiesDecrypt("urie");
// React.useEffect(() => {
// if (userLevelId !== undefined && roleId !== undefined) {
// setIsMabesApprover(
// Number(userLevelId) == 216 && Number(roleId) == 3
// );
// }
// }, [userLevelId, roleId]);
// return (
// <DropdownMenu>
// <DropdownMenuTrigger asChild>
// <Button
// size="icon"
// className="bg-transparent ring-offset-transparent hover:bg-transparent hover:ring-0 hover:ring-transparent"
// >
// <span className="sr-only">Open menu</span>
// <MoreVertical className="h-4 w-4 text-default-800" />
// </Button>
// </DropdownMenuTrigger>
// <DropdownMenuContent className="p-0" align="end">
// <Link
// href={`/contributor/content/image/detail/${row.original.id}`}
// >
// <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
// <Eye className="w-4 h-4 me-1.5" />
// View
// </DropdownMenuItem>
// </Link>
// {/* <Link
// href={`/contributor/content/image/update/${row.original.id}`}
// >
// <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
// <SquarePen className="w-4 h-4 me-1.5" />
// Edit
// </DropdownMenuItem>
// </Link> */}
// {(Number(row.original.uploadedById) === Number(userId) ||
// isMabesApprover) && (
// <Link
// href={`/contributor/content/image/update/${row.original.id}`}
// >
// <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
// <SquarePen className="w-4 h-4 me-1.5" />
// Edit
// </DropdownMenuItem>
// </Link>
// )}
// <DropdownMenuItem
// onClick={() => handleDeleteMedia(row.original.id)}
// className="p-2 border-b text-destructive bg-destructive/30 focus:bg-destructive focus:text-destructive-foreground rounded-none"
// >
// <Trash2 className="w-4 h-4 me-1.5" />
// Delete
// </DropdownMenuItem>
// {/* {(row.original.uploadedById === userId || isMabesApprover) && (
// <DropdownMenuItem
// onClick={() => handleDeleteMedia(row.original.id)}
// className="p-2 border-b text-destructive bg-destructive/30 focus:bg-destructive focus:text-destructive-foreground rounded-none"
// >
// <Trash2 className="w-4 h-4 me-1.5" />
// Hapus
// </DropdownMenuItem>
// )} */}
// </DropdownMenuContent>
// </DropdownMenu>
// );
// },
// },
];
return columns;

1133
app/[locale]/(protected)/contributor/content/image/components/table-image.tsx
View File

File diff suppressed because it is too large Load Diff

31
app/[locale]/(protected)/contributor/content/spit/table-spit/table-spit.tsx
View File

@ -187,13 +187,6 @@ const TableSPIT = () => {
setCategories(resCategory || []);
}
// Panggil fetchData otomatis ketika dateFilter berubah
React.useEffect(() => {
if (dateFilter) {
fetchData();
}
}, [dateFilter]);
async function fetchData() {
let isPublish;
if (statusFilter.length === 0) {
@ -205,7 +198,7 @@ const TableSPIT = () => {
}
const formattedStartDate = dateFilter
? format(new Date(dateFilter + "T00:00:00"), "yyyy-MM-dd")
? format(parseISO(dateFilter), "yyyy-MM-dd")
: "";
try {
@ -247,15 +240,15 @@ const TableSPIT = () => {
return (
<div className="w-full">
<div className="flex justify-between items-center px-5">
<div className="w-[150px] md:w-[250px] lg:w-[300px]">
<div className="w-[150px] md:w-[250px] lg:w-[250px]">
<InputGroup merged>
<InputGroupText className="bg-transparent dark:border-secondary dark:group-focus-within:border-secondary">
<Search className=" h-6 w-6 dark:text-white" />
<Search className=" h-4 w-4 dark:text-white" />
</InputGroupText>
<Input
type="text"
placeholder="Search Judul..."
className="bg-transparent dark:border-secondary dark:placeholder-white/80 dark:focus:border-secondary dark:text-white text-[16px]"
className="bg-transparent dark:border-secondary dark:placeholder-white/80 dark:focus:border-secondary dark:text-white"
value={search}
onChange={handleSearch}
/>
@ -312,7 +305,7 @@ const TableSPIT = () => {
<div className="flex flex-row justify-between my-1 mx-1">
<p>Filter</p>
</div>
{/* <div className="mx-2 my-1">
<div className="mx-2 my-1">
<Label>{t("date", { defaultValue: "Date" })}</Label>
<Input
type="date"
@ -320,21 +313,7 @@ const TableSPIT = () => {
onChange={(e) => setDateFilter(e.target.value)}
className="max-w-sm"
/>
</div> */}
<div className="mx-2 my-1">
<Label>{t("date", { defaultValue: "Tanggal" })}</Label>
<Input
type="date"
value={dateFilter}
onChange={(e) => {
const value = e.target.value;
setDateFilter(value);
fetchData(); // langsung panggil data baru
}}
className="max-w-sm"
/>
</div>
<Label className="ml-2 mt-2">Status</Label>
<div className="flex items-center px-4 py-1">
<input

165
app/[locale]/(protected)/contributor/content/teks/components/columns.tsx
View File

@ -18,7 +18,6 @@ import { deleteMedia } from "@/service/content/content";
import withReactContent from "sweetalert2-react-content";
import Swal from "sweetalert2";
import { useTranslations } from "next-intl";
import { useRouter } from "@/i18n/routing";
const useTableColumns = () => {
const t = useTranslations("Table");
@ -177,18 +176,20 @@ const useTableColumns = () => {
);
},
},
{
id: "actions",
accessorKey: "action",
header: t("action", { defaultValue: "Action" }),
enableHiding: false,
cell: ({ row }) => {
const router = useRouter();
const MySwal = withReactContent(Swal);
async function doDelete(id: any) {
const data = { id };
// loading();
const data = {
id,
};
const response = await deleteMedia(data);
if (response?.error) {
@ -230,21 +231,16 @@ const useTableColumns = () => {
const [isMabesApprover, setIsMabesApprover] = React.useState(false);
const userId = getCookiesDecrypt("uie");
const userLevelId = getCookiesDecrypt("ulie");
const roleId = Number(getCookiesDecrypt("urie")); // pastikan jadi number
const roleId = getCookiesDecrypt("urie");
React.useEffect(() => {
if (userLevelId !== undefined && roleId !== undefined) {
setIsMabesApprover(
Number(userLevelId) === 216 && Number(roleId) === 3
Number(userLevelId) == 216 && Number(roleId) == 3
);
}
}, [userLevelId, roleId]);
const canEdit =
Number(row.original.uploadedById) === Number(userId) ||
isMabesApprover ||
roleId === 14;
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
@ -265,8 +261,8 @@ const useTableColumns = () => {
View
</DropdownMenuItem>
</Link>
{canEdit && (
{(Number(row.original.uploadedById) === Number(userId) ||
isMabesApprover) && (
<Link
href={`/contributor/content/teks/update/${row.original.id}`}
>
@ -276,7 +272,14 @@ const useTableColumns = () => {
</DropdownMenuItem>
</Link>
)}
{/* <Link
href={`/contributor/content/teks/update/${row.original.id}`}
>
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
<SquarePen className="w-4 h-4 me-1.5" />
Edit
</DropdownMenuItem>
</Link> */}
<DropdownMenuItem
onClick={() => handleDeleteMedia(row.original.id)}
className="p-2 border-b text-destructive bg-destructive/30 focus:bg-destructive focus:text-destructive-foreground rounded-none"
@ -284,136 +287,20 @@ const useTableColumns = () => {
<Trash2 className="w-4 h-4 me-1.5" />
Delete
</DropdownMenuItem>
{/* {(row.original.uploadedById === userId || isMabesApprover) && (
<DropdownMenuItem
onClick={() => handleDeleteMedia(row.original.id)}
className="p-2 border-b text-destructive bg-destructive/30 focus:bg-destructive focus:text-destructive-foreground rounded-none"
>
<Trash2 className="w-4 h-4 me-1.5" />
Hapus
</DropdownMenuItem>
)} */}
</DropdownMenuContent>
</DropdownMenu>
);
},
},
// {
// id: "actions",
// accessorKey: "action",
// header: t("action", { defaultValue: "Action" }),
// enableHiding: false,
// cell: ({ row }) => {
// const MySwal = withReactContent(Swal);
// async function doDelete(id: any) {
// // loading();
// const data = {
// id,
// };
// const response = await deleteMedia(data);
// if (response?.error) {
// error(response.message);
// return false;
// }
// success();
// }
// function success() {
// MySwal.fire({
// title: "Sukses",
// icon: "success",
// confirmButtonColor: "#3085d6",
// confirmButtonText: "OK",
// }).then((result) => {
// if (result.isConfirmed) {
// window.location.reload();
// }
// });
// }
// const handleDeleteMedia = (id: any) => {
// MySwal.fire({
// title: "Hapus Data",
// text: "",
// icon: "warning",
// showCancelButton: true,
// cancelButtonColor: "#3085d6",
// confirmButtonColor: "#d33",
// confirmButtonText: "Hapus",
// }).then((result) => {
// if (result.isConfirmed) {
// doDelete(id);
// }
// });
// };
// const [isMabesApprover, setIsMabesApprover] = React.useState(false);
// const userId = getCookiesDecrypt("uie");
// const userLevelId = getCookiesDecrypt("ulie");
// const roleId = getCookiesDecrypt("urie");
// React.useEffect(() => {
// if (userLevelId !== undefined && roleId !== undefined) {
// setIsMabesApprover(
// Number(userLevelId) == 216 && Number(roleId) == 3
// );
// }
// }, [userLevelId, roleId]);
// return (
// <DropdownMenu>
// <DropdownMenuTrigger asChild>
// <Button
// size="icon"
// className="bg-transparent ring-offset-transparent hover:bg-transparent hover:ring-0 hover:ring-transparent"
// >
// <span className="sr-only">Open menu</span>
// <MoreVertical className="h-4 w-4 text-default-800" />
// </Button>
// </DropdownMenuTrigger>
// <DropdownMenuContent className="p-0" align="end">
// <Link
// href={`/contributor/content/teks/detail/${row.original.id}`}
// >
// <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
// <Eye className="w-4 h-4 me-1.5" />
// View
// </DropdownMenuItem>
// </Link>
// {(Number(row.original.uploadedById) === Number(userId) ||
// isMabesApprover) && (
// <Link
// href={`/contributor/content/teks/update/${row.original.id}`}
// >
// <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
// <SquarePen className="w-4 h-4 me-1.5" />
// Edit
// </DropdownMenuItem>
// </Link>
// )}
// {/* <Link
// href={`/contributor/content/teks/update/${row.original.id}`}
// >
// <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
// <SquarePen className="w-4 h-4 me-1.5" />
// Edit
// </DropdownMenuItem>
// </Link> */}
// <DropdownMenuItem
// onClick={() => handleDeleteMedia(row.original.id)}
// className="p-2 border-b text-destructive bg-destructive/30 focus:bg-destructive focus:text-destructive-foreground rounded-none"
// >
// <Trash2 className="w-4 h-4 me-1.5" />
// Delete
// </DropdownMenuItem>
// {/* {(row.original.uploadedById === userId || isMabesApprover) && (
// <DropdownMenuItem
// onClick={() => handleDeleteMedia(row.original.id)}
// className="p-2 border-b text-destructive bg-destructive/30 focus:bg-destructive focus:text-destructive-foreground rounded-none"
// >
// <Trash2 className="w-4 h-4 me-1.5" />
// Hapus
// </DropdownMenuItem>
// )} */}
// </DropdownMenuContent>
// </DropdownMenu>
// );
// },
// },
];
return columns;
};

1065
app/[locale]/(protected)/contributor/content/teks/components/table-teks.tsx
View File

File diff suppressed because it is too large Load Diff

165
app/[locale]/(protected)/contributor/content/video/components/columns.tsx
View File

@ -18,7 +18,6 @@ import Swal from "sweetalert2";
import withReactContent from "sweetalert2-react-content";
import { error } from "@/lib/swal";
import { useTranslations } from "next-intl";
import { useRouter } from "@/i18n/routing";
const useTableColumns = () => {
const t = useTranslations("Table");
@ -177,18 +176,20 @@ const useTableColumns = () => {
);
},
},
{
id: "actions",
accessorKey: "action",
header: t("action", { defaultValue: "Action" }),
enableHiding: false,
cell: ({ row }) => {
const router = useRouter();
const MySwal = withReactContent(Swal);
async function doDelete(id: any) {
const data = { id };
// loading();
const data = {
id,
};
const response = await deleteMedia(data);
if (response?.error) {
@ -230,21 +231,16 @@ const useTableColumns = () => {
const [isMabesApprover, setIsMabesApprover] = React.useState(false);
const userId = getCookiesDecrypt("uie");
const userLevelId = getCookiesDecrypt("ulie");
const roleId = Number(getCookiesDecrypt("urie")); // pastikan jadi number
const roleId = getCookiesDecrypt("urie");
React.useEffect(() => {
if (userLevelId !== undefined && roleId !== undefined) {
setIsMabesApprover(
Number(userLevelId) === 216 && Number(roleId) === 3
Number(userLevelId) == 216 && Number(roleId) == 3
);
}
}, [userLevelId, roleId]);
const canEdit =
Number(row.original.uploadedById) === Number(userId) ||
isMabesApprover ||
roleId === 14;
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
@ -265,8 +261,16 @@ const useTableColumns = () => {
View
</DropdownMenuItem>
</Link>
{canEdit && (
{/* <Link
href={`/contributor/content/video/update/${row.original.id}`}
>
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
<SquarePen className="w-4 h-4 me-1.5" />
Edit
</DropdownMenuItem>
</Link> */}
{(Number(row.original.uploadedById) === Number(userId) ||
isMabesApprover) && (
<Link
href={`/contributor/content/video/update/${row.original.id}`}
>
@ -276,7 +280,6 @@ const useTableColumns = () => {
</DropdownMenuItem>
</Link>
)}
<DropdownMenuItem
onClick={() => handleDeleteMedia(row.original.id)}
className="p-2 border-b text-destructive bg-destructive/30 focus:bg-destructive focus:text-destructive-foreground rounded-none"
@ -284,136 +287,20 @@ const useTableColumns = () => {
<Trash2 className="w-4 h-4 me-1.5" />
Delete
</DropdownMenuItem>
{/* {(row.original.uploadedById === userId || isMabesApprover) && (
<DropdownMenuItem
onClick={() => handleDeleteMedia(row.original.id)}
className="p-2 border-b text-destructive bg-destructive/30 focus:bg-destructive focus:text-destructive-foreground rounded-none"
>
<Trash2 className="w-4 h-4 me-1.5" />
Hapus
</DropdownMenuItem>
)} */}
</DropdownMenuContent>
</DropdownMenu>
);
},
},
// {
// id: "actions",
// accessorKey: "action",
// header: t("action", { defaultValue: "Action" }),
// enableHiding: false,
// cell: ({ row }) => {
// const MySwal = withReactContent(Swal);
// async function doDelete(id: any) {
// // loading();
// const data = {
// id,
// };
// const response = await deleteMedia(data);
// if (response?.error) {
// error(response.message);
// return false;
// }
// success();
// }
// function success() {
// MySwal.fire({
// title: "Sukses",
// icon: "success",
// confirmButtonColor: "#3085d6",
// confirmButtonText: "OK",
// }).then((result) => {
// if (result.isConfirmed) {
// window.location.reload();
// }
// });
// }
// const handleDeleteMedia = (id: any) => {
// MySwal.fire({
// title: "Hapus Data",
// text: "",
// icon: "warning",
// showCancelButton: true,
// cancelButtonColor: "#3085d6",
// confirmButtonColor: "#d33",
// confirmButtonText: "Hapus",
// }).then((result) => {
// if (result.isConfirmed) {
// doDelete(id);
// }
// });
// };
// const [isMabesApprover, setIsMabesApprover] = React.useState(false);
// const userId = getCookiesDecrypt("uie");
// const userLevelId = getCookiesDecrypt("ulie");
// const roleId = getCookiesDecrypt("urie");
// React.useEffect(() => {
// if (userLevelId !== undefined && roleId !== undefined) {
// setIsMabesApprover(
// Number(userLevelId) == 216 && Number(roleId) == 3
// );
// }
// }, [userLevelId, roleId]);
// return (
// <DropdownMenu>
// <DropdownMenuTrigger asChild>
// <Button
// size="icon"
// className="bg-transparent ring-offset-transparent hover:bg-transparent hover:ring-0 hover:ring-transparent"
// >
// <span className="sr-only">Open menu</span>
// <MoreVertical className="h-4 w-4 text-default-800" />
// </Button>
// </DropdownMenuTrigger>
// <DropdownMenuContent className="p-0" align="end">
// <Link
// href={`/contributor/content/video/detail/${row.original.id}`}
// >
// <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
// <Eye className="w-4 h-4 me-1.5" />
// View
// </DropdownMenuItem>
// </Link>
// {/* <Link
// href={`/contributor/content/video/update/${row.original.id}`}
// >
// <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
// <SquarePen className="w-4 h-4 me-1.5" />
// Edit
// </DropdownMenuItem>
// </Link> */}
// {(Number(row.original.uploadedById) === Number(userId) ||
// isMabesApprover) && (
// <Link
// href={`/contributor/content/video/update/${row.original.id}`}
// >
// <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
// <SquarePen className="w-4 h-4 me-1.5" />
// Edit
// </DropdownMenuItem>
// </Link>
// )}
// <DropdownMenuItem
// onClick={() => handleDeleteMedia(row.original.id)}
// className="p-2 border-b text-destructive bg-destructive/30 focus:bg-destructive focus:text-destructive-foreground rounded-none"
// >
// <Trash2 className="w-4 h-4 me-1.5" />
// Delete
// </DropdownMenuItem>
// {/* {(row.original.uploadedById === userId || isMabesApprover) && (
// <DropdownMenuItem
// onClick={() => handleDeleteMedia(row.original.id)}
// className="p-2 border-b text-destructive bg-destructive/30 focus:bg-destructive focus:text-destructive-foreground rounded-none"
// >
// <Trash2 className="w-4 h-4 me-1.5" />
// Hapus
// </DropdownMenuItem>
// )} */}
// </DropdownMenuContent>
// </DropdownMenu>
// );
// },
// },
];
return columns;

1093
app/[locale]/(protected)/contributor/content/video/components/table-video.tsx
View File

File diff suppressed because it is too large Load Diff

39
app/[locale]/(protected)/contributor/report/components/columns.tsx
View File

@ -26,7 +26,6 @@ import { deleteBlog } from "@/service/blog/blog";
import { error, loading, close } from "@/lib/swal";
import { useTranslations } from "next-intl";
import axios from "axios";
import { downloadReport } from "@/service/report/report";
const useTableColumns = ({
handlePreview,
@ -128,10 +127,14 @@ const useTableColumns = ({
const handleDownload = async (id: string) => {
try {
loading();
const response = await axios.get(
`https://netidhub.com/api/media/report/download?id=${id}`,
{
responseType: "blob",
}
);
const response = await downloadReport(id);
console.log(response?.data);
const url = window.URL.createObjectURL(new Blob([response?.data], { type : "application/pdf"}));
const url = window.URL.createObjectURL(new Blob([response.data]));
const link = document.createElement("a");
link.href = url;
link.setAttribute("download", `report-${id}.pdf`);
@ -149,34 +152,6 @@ const useTableColumns = ({
}
};
// const handleDownload = async (id: string) => {
// try {
// loading();
// const response = await axios.get(
// `https://new.netidhub.com/api/media/report/download?id=${id}`,
// {
// responseType: "blob",
// }
// );
// const url = window.URL.createObjectURL(new Blob([response.data]));
// const link = document.createElement("a");
// link.href = url;
// link.setAttribute("download", `report-${id}.pdf`);
// document.body.appendChild(link);
// link.click();
// link.remove();
// close();
// } catch (error) {
// console.error("Download failed", error);
// MySwal.fire({
// title: "Gagal",
// text: "Terjadi kesalahan saat mengunduh file.",
// icon: "error",
// });
// }
// };
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>

73
app/[locale]/(protected)/contributor/task-ta/components/columns.tsx
View File

@ -22,9 +22,7 @@ import withReactContent from "sweetalert2-react-content";
import Swal from "sweetalert2";
import { useTranslations } from "next-intl";
const useTableColumns = (
activeTab: "ta" | "daily" | "special" | "mabes-koor",
) => {
const useTableColumns = () => {
const t = useTranslations("Table");
const columns: ColumnDef<any>[] = [
{
@ -115,31 +113,6 @@ const useTableColumns = (
const MySwal = withReactContent(Swal);
const roleId = Number(getCookiesDecrypt("urie")) || 0;
// ❗ jika tab = "special"
if (activeTab === "special") {
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">
<Link href={`/contributor/task/detail/${row.original.id}`}>
<DropdownMenuItem className="p-2 text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
<Eye className="w-4 h-4 me-1.5" />
View
</DropdownMenuItem>
</Link>
</DropdownMenuContent>
</DropdownMenu>
);
}
async function deleteProcess(id: any) {
loading();
const resDelete = await deleteTaskTa(id);
@ -192,11 +165,7 @@ const useTableColumns = (
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="p-0" align="end">
{/* {(roleId == 11 || roleId == 12 || roleId == 19) && ( */}
{(roleId == 11 ||
roleId == 12 ||
roleId == 19 ||
roleId == 3) && (
{(roleId == 11 || roleId == 12 || roleId == 19) && (
<Link href={`/contributor/task-ta/detail/${row.original.id}`}>
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
<Eye className="w-4 h-4 me-1.5" />
@ -204,16 +173,15 @@ const useTableColumns = (
</DropdownMenuItem>
</Link>
)}
{roleId == 11 ||
(roleId == 3 && (
<Link href={`/contributor/task-ta/update/${row.original.id}`}>
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
<SquarePen className="w-4 h-4 me-1.5" />
Edit
</DropdownMenuItem>
</Link>
))}
{(roleId == 12 || roleId == 19) && (
{roleId == 11 && (
<Link href={`/contributor/task-ta/update/${row.original.id}`}>
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
<SquarePen className="w-4 h-4 me-1.5" />
Edit
</DropdownMenuItem>
</Link>
)}
{(roleId == 11 || roleId == 12 || roleId == 19) && (
<Link
href={`/contributor/task-ta/upload-task/${row.original.id}`}
>
@ -223,16 +191,15 @@ const useTableColumns = (
</DropdownMenuItem>
</Link>
)}
{roleId == 11 ||
(roleId == 3 && (
<DropdownMenuItem
onClick={() => TaskDelete(row.original.id)}
className="p-2 border-b text-destructive bg-destructive/30 focus:bg-destructive focus:text-destructive-foreground rounded-none"
>
<Trash2 className="w-4 h-4 me-1.5" />
Delete
</DropdownMenuItem>
))}
{roleId == 11 && (
<DropdownMenuItem
onClick={() => TaskDelete(row.original.id)}
className="p-2 border-b text-destructive bg-destructive/30 focus:bg-destructive focus:text-destructive-foreground rounded-none"
>
<Trash2 className="w-4 h-4 me-1.5" />
Delete
</DropdownMenuItem>
)}
</DropdownMenuContent>
</DropdownMenu>
);

975
app/[locale]/(protected)/contributor/task-ta/components/task-ta-table.tsx
View File

File diff suppressed because it is too large Load Diff

13
app/[locale]/(protected)/contributor/task-ta/page.tsx
View File

@ -35,19 +35,10 @@ const TaskTaPage = () => {
<CardTitle>
<div className="flex flex-col sm:flex-row lg:flex-row lg:items-center">
<div className="flex-1 text-xl font-medium text-default-900">
{t("tabel", { defaultValue: "Tabel" })}{" "}
{t("task-ta", { defaultValue: "Task Ta" })}
{t("tabel", { defaultValue: "Tabel" })} {t("task-ta", { defaultValue: "Task Ta" })}
</div>
<div className="flex-none">
{/* {roleId !== 12 && (
<Link href={"/contributor/task-ta/create"}>
<Button color="primary" className="text-white">
<UploadIcon size={18} className="mr-2" />
{t("create-task", { defaultValue: "Create Task" })}
</Button>
</Link>
)} */}
{roleId !== 12 && roleId !== 19 && (
{roleId !== 12 && (
<Link href={"/contributor/task-ta/create"}>
<Button color="primary" className="text-white">
<UploadIcon size={18} className="mr-2" />

27
app/[locale]/(protected)/contributor/task/page.tsx
View File

@ -5,11 +5,7 @@ import { Button } from "@/components/ui/button";
import { UploadIcon } from "lucide-react";
import SiteBreadcrumb from "@/components/site-breadcrumb";
import { Link } from "@/components/navigation";
import {
checkAuthorization,
checkLoginSession,
getCookiesDecrypt,
} from "@/lib/utils";
import { checkAuthorization, checkLoginSession } from "@/lib/utils";
import React, { useEffect } from "react";
import { useTranslations } from "next-intl";
@ -17,13 +13,12 @@ const TaskPage = () => {
const t = useTranslations("AnalyticsDashboard");
useEffect(() => {
function initState() {
checkAuthorization("admin");
checkAuthorization("admin");
checkLoginSession();
}
initState();
}, []);
const levelNumber = getCookiesDecrypt("ulne");
return (
<div>
@ -34,28 +29,16 @@ const TaskPage = () => {
<CardTitle>
<div className="flex flex-col sm:flex-row lg:flex-row lg:items-center">
<div className="flex-1 text-xl font-medium text-default-900">
{t("tabel", { defaultValue: "Tabel" })}{" "}
{t("task", { defaultValue: "Task" })}
{t("tabel", { defaultValue: "Tabel" })} {t("task", { defaultValue: "Task" })}
</div>
{Number(levelNumber) !== 3 && (
<div className="flex-none">
<Link href="/contributor/task/create">
<Button color="primary" className="text-white">
<UploadIcon size={18} className="mr-2" />
{t("create-task", { defaultValue: "Create Task" })}
</Button>
</Link>
</div>
)}
{/* <div className="flex-none">
<div className="flex-none">
<Link href={"/contributor/task/create"}>
<Button color="primary" className="text-white">
<UploadIcon size={18} className="mr-2" />
{t("create-task", { defaultValue: "Create Task" })}
</Button>
</Link>
</div> */}
</div>
</div>
</CardTitle>
</CardHeader>

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

@ -24,7 +24,6 @@ import ReportTable from "../contributor/report/components/report-table";
const DashboardPage = () => {
const t = useTranslations("AnalyticsDashboard");
const roleId = getCookiesDecrypt("urie");
const levelNumber = Number(getCookiesDecrypt("ulne"));
return Number(roleId) == 2 || Number(roleId) == 11 || Number(roleId) == 12 ? (
<div>
@ -55,23 +54,18 @@ const DashboardPage = () => {
>
{t("schedule", { defaultValue: "Schedule" })}
</TabsTrigger>
{levelNumber !== 3 && (
<>
<TabsTrigger
value="indeks"
className="data-[state=active]:bg-primary data-[state=active]:text-primary-foreground rounded-md px-6"
>
{t("indeks", { defaultValue: "Indeks" })}
</TabsTrigger>
<TabsTrigger
value="report"
className="data-[state=active]:bg-primary data-[state=active]:text-primary-foreground rounded-md px-6"
>
{t("report", { defaultValue: "Report" })}
</TabsTrigger>
</>
)}
<TabsTrigger
value="indeks"
className="data-[state=active]:bg-primary data-[state=active]:text-primary-foreground rounded-md px-6"
>
{t("indeks", { defaultValue: "Indeks" })}
</TabsTrigger>
<TabsTrigger
value="report"
className="data-[state=active]:bg-primary data-[state=active]:text-primary-foreground rounded-md px-6"
>
{t("report", { defaultValue: "Report" })}
</TabsTrigger>
</TabsList>
</Card>
<TabsContent value="routine-task">
@ -81,24 +75,18 @@ const DashboardPage = () => {
<CardContent className="p-4">
<div className="grid md:grid-cols-3 gap-4">
<StatisticsBlock
title={t("Hasil_unggah_disetujui_hari_ini", {
defaultValue: "Hasil Unggah Disetujui Hari Ini",
})}
title={t("Hasil_unggah_disetujui_hari_ini", { defaultValue: "Hasil Unggah Disetujui Hari Ini" })}
total="3,564"
className="bg-info/10 border-none shadow-none"
/>
<StatisticsBlock
title={t("Hasil_unggah_direvisi_hari_ini", {
defaultValue: "Hasil Unggah Direvisi Hari Ini",
})}
title={t("Hasil_unggah_direvisi_hari_ini", { defaultValue: "Hasil Unggah Direvisi Hari Ini" })}
total="564"
className="bg-warning/10 border-none shadow-none"
chartColor="#FB8F65"
/>
<StatisticsBlock
title={t("Hasil_unggah_ditolak_hari_ini", {
defaultValue: "Hasil Unggah Ditolak Hari Ini",
})}
title={t("Hasil_unggah_ditolak_hari_ini", { defaultValue: "Hasil Unggah Ditolak Hari Ini" })}
total="+5.0%"
className="bg-primary/10 border-none shadow-none"
chartColor="#2563eb"
@ -113,9 +101,7 @@ const DashboardPage = () => {
<Card>
<CardHeader className="flex flex-row items-center">
<CardTitle className="flex-1 text-lg">
{t("Total-Content-Production", {
defaultValue: "Total Content Production",
})}
{t("Total-Content-Production", { defaultValue: "Total Content Production" })}
</CardTitle>
<DashboardDropdown />
</CardHeader>
@ -127,9 +113,7 @@ const DashboardPage = () => {
<div className="lg:col-span-8 col-span-12">
<Card>
<CardHeader className="flex flex-row items-center">
<CardTitle className="flex-1">
{t("tabel", { defaultValue: "Tabel" })}
</CardTitle>
<CardTitle className="flex-1">{t("tabel", { defaultValue: "Tabel" })}</CardTitle>
{/* <DashboardDropdown /> */}
</CardHeader>
<CardContent className="p-0">
@ -148,26 +132,14 @@ const DashboardPage = () => {
<div className="flex-1 text-xl font-medium text-default-900">
Tabel Penugasan
</div>
{Number(levelNumber) !== 3 && (
<div className="flex-none">
<Link href="/contributor/task/create">
<Button color="primary" className="text-white">
<UploadIcon size={18} className="mr-2" />
{t("create-task", {
defaultValue: "Create Task",
})}
</Button>
</Link>
</div>
)}
{/* <div>
<div>
<Link href={"/contributor/task/create"}>
<Button color="primary" className="text-white">
<UploadIcon />
Buat Penugasan
</Button>
</Link>
</div> */}
</div>
</div>
</Card>
<CardContent className="p-0 mt-3">

115
app/[locale]/(protected)/shared/communication/internal/components/columns.tsx
View File

@ -1,6 +1,8 @@
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,
@ -8,42 +10,13 @@ import {
DropdownMenuItem,
} from "@/components/ui/dropdown-menu";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { format } from "date-fns";
import { Link } from "@/components/navigation";
import { deleteTicketInternal } from "@/service/communication/communication";
import withReactContent from "sweetalert2-react-content";
import Swal from "sweetalert2";
import { useTranslations } from "next-intl";
const MySwal = withReactContent(Swal);
const useTableColumns = (onDeleteSuccess?: () => void) => {
const t = useTranslations("Table");
const handleDelete = async (id: any) => {
MySwal.fire({
title: "Delete Data?",
text: "Apakah Anda yakin ingin menghapus data ini?",
icon: "warning",
showCancelButton: true,
cancelButtonColor: "#d33",
confirmButtonColor: "#3085d6",
confirmButtonText: "Ya, hapus",
}).then(async (result) => {
if (result.isConfirmed) {
try {
await deleteTicketInternal(id);
MySwal.fire("Sukses", "Data berhasil dihapus!", "success");
if (onDeleteSuccess) onDeleteSuccess();
} catch (error) {
console.log(error);
MySwal.fire("Gagal", "Terjadi kesalahan saat menghapus", "error");
}
}
});
};
const useTableColumns = () => {
const t = useTranslations("Table"); // Panggil di dalam hook
const columns: ColumnDef<any>[] = [
{
@ -94,46 +67,46 @@ const useTableColumns = (onDeleteSuccess?: () => void) => {
},
{
id: "actions",
header: t("action"),
cell: ({ row }) => (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button size="icon" className="bg-transparent hover:bg-transparent">
<MoreVertical className="h-4 w-4 text-default-800" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end" className="p-0">
{/* View */}
<Link
href={`/shared/communication/internal/detail/${row.original.id}`}
>
<DropdownMenuItem className="p-2 border-b cursor-pointer hover:bg-slate-100">
<Eye className="w-4 h-4 me-1.5" />
View
accessorKey: "action",
header: t("action", { defaultValue: "Action" }),
enableHiding: false,
cell: ({ row }) => {
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button
size="icon"
className="bg-transparent ring-offset-transparent hover:bg-transparent hover:ring-0 hover:ring-transparent"
>
<span className="sr-only">Open menu</span>
<MoreVertical className="h-4 w-4 text-default-800" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="p-0" align="end">
<Link
href={`/shared/communication/internal/detail/${row.original.id}`}
>
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
<Eye className="w-4 h-4 me-1.5" />
View
</DropdownMenuItem>
</Link>
<Link
href={`/shared/communication/internal/update/${row.original.id}`}
>
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
<SquarePen className="w-4 h-4 me-1.5" />
Edit
</DropdownMenuItem>
</Link>
<DropdownMenuItem className="p-2 border-b text-destructive bg-destructive/30 focus:bg-destructive focus:text-destructive-foreground rounded-none">
<Trash2 className="w-4 h-4 me-1.5" />
Delete
</DropdownMenuItem>
</Link>
{/* Edit */}
<Link
href={`/shared/communication/internal/update/${row.original.id}`}
>
<DropdownMenuItem className="p-2 border-b cursor-pointer hover:bg-slate-100">
<SquarePen className="w-4 h-4 me-1.5" />
Edit
</DropdownMenuItem>
</Link>
{/* Delete */}
<DropdownMenuItem
className="p-2 text-destructive bg-destructive/30 cursor-pointer"
onClick={() => handleDelete(row.original.id)}
>
<Trash2 className="w-4 h-4 me-1.5" />
Delete
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
),
</DropdownMenuContent>
</DropdownMenu>
);
},
},
];

8
app/[locale]/(protected)/shared/communication/internal/components/internal-table.tsx
View File

@ -68,6 +68,7 @@ import useTableColumns from "./columns";
const InternalTable = () => {
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>([]);
@ -78,6 +79,7 @@ const InternalTable = () => {
React.useState<VisibilityState>({});
const [rowSelection, setRowSelection] = React.useState({});
const [showData, setShowData] = React.useState("10");
const [pagination, setPagination] = React.useState<PaginationState>({
pageIndex: 0,
pageSize: Number(showData),
@ -85,7 +87,11 @@ const InternalTable = () => {
const [page, setPage] = React.useState(1);
const [totalPage, setTotalPage] = React.useState(1);
const [search, setSearch] = React.useState<string>("");
const columns = useTableColumns(() => fetchData());
const userId = getCookiesDecrypt("uie");
const userLevelId = getCookiesDecrypt("ulie");
const roleId = getCookiesDecrypt("urie");
const columns = useTableColumns();
const table = useReactTable({
data: dataTable,
columns,

28
app/[locale]/(protected)/shared/contest/page.tsx
View File

@ -13,8 +13,6 @@ import { useTranslations } from "next-intl";
const ContestPage = () => {
const [userLevelId, setUserLevelId] = useState<any>(null);
const t = useTranslations("Contest");
const levelNumber = Number(getCookiesDecrypt("ulne"));
useEffect(() => {
setUserLevelId(Number(getCookiesDecrypt("ulie")));
}, []);
@ -27,36 +25,18 @@ const ContestPage = () => {
<CardTitle>
<div className="flex items-center">
<div className="flex-1 text-xl font-medium text-default-900">
{t("table", { defaultValue: "Table" })}{" "}
{t("contest", { defaultValue: "Contest" })}
{t("table", { defaultValue: "Table" })} {t("contest", { defaultValue: "Contest" })}
</div>
{userLevelId !== 776 &&
userLevelId !== null &&
levelNumber !== 3 && (
<div className="flex-none">
<Link href={"/shared/contest/create"}>
<Button color="primary" className="text-white">
<UploadIcon size={18} className="mr-2" />
{t("create-contest", {
defaultValue: "Create Contest",
})}
</Button>
</Link>
</div>
)}
{/* {userLevelId !== 776 && userLevelId !== null && (
{userLevelId !== 776 && userLevelId !== null && (
<div className="flex-none">
<Link href={"/shared/contest/create"}>
<Button color="primary" className="text-white">
<UploadIcon size={18} className="mr-2" />
{t("create-contest", {
defaultValue: "Create Contest",
})}
{t("create-contest", { defaultValue: "Create Contest" })}
</Button>
</Link>
</div>
)} */}
)}
</div>
</CardTitle>
</CardHeader>

2
app/[locale]/(protected)/shared/curated-content/giat-penugasan/audio-visual.tsx
View File

@ -26,7 +26,7 @@ const VideoSliderPage = () => {
});
const initFetch = async () => {
const request = {
sortBy: type == "popular" ? "favorite" : "createdAt",
sortBy: type == "popular" ? "clickCount" : "createdAt",
contentTypeId: "2",
};
const response = await getListContent(request);

2
app/[locale]/(protected)/shared/curated-content/giat-penugasan/audio.tsx
View File

@ -30,7 +30,7 @@ const AudioSliderPage = () => {
});
const initFetch = async () => {
const request = {
sortBy: type == "popular" ? "favorite" : "createdAt",
sortBy: type == "popular" ? "clickCount" : "createdAt",
contentTypeId: "4",
};
const response = await getListContent(request);

2
app/[locale]/(protected)/shared/curated-content/giat-penugasan/image.tsx
View File

@ -30,7 +30,7 @@ const ImageSliderPage = () => {
});
const initFetch = async () => {
const request = {
sortBy: type == "popular" ? "favorite" : "createdAt",
sortBy: type == "popular" ? "clickCount" : "createdAt",
contentTypeId: "3",
};
const response = await getListContent(request);

2
app/[locale]/(protected)/shared/curated-content/giat-penugasan/teks.tsx
View File

@ -30,7 +30,7 @@ const TeksSliderPage = () => {
});
const initFetch = async () => {
const request = {
sortBy: type == "popular" ? "favorite" : "createdAt",
sortBy: type == "popular" ? "clickCount" : "createdAt",
contentTypeId: "1",
};
const response = await getListContent(request);

2
app/[locale]/(protected)/supervisor/setting/social-media/page.tsx
View File

@ -33,7 +33,7 @@ const responseFacebook = (response: FacebookLoginResponse) => {
const clientId =
"515231445138-5ius52rjsqucc6petfpv1d42v1lj778o.apps.googleusercontent.com";
const feedbackUrl = "https://new.netidhub.com/admin/settings/socmed";
const feedbackUrl = "https://mediahub.polri.go.id/admin/settings/socmed";
async function sendFbToken(token: string) {
const res = await saveFbToken(token);

6
app/[locale]/(public)/(polda)/polda/[polda_name]/all/filter/page.tsx
View File

@ -68,7 +68,7 @@ export default function FilterPage() {
const [monthYearFilter, setMonthYearFilter] = useState<any>();
const [searchTitle, setSearchTitle] = useState<string>("");
const [sortByOpt, setSortByOpt] = useState<any>(
sortBy === "popular" ? "favorite" : "createdAt"
sortBy === "popular" ? "clickCount" : "createdAt"
);
const isRegional = asPath?.includes("regional");
const isSatker = asPath?.includes("satker");
@ -97,7 +97,7 @@ export default function FilterPage() {
setSearchTitle(title);
setCategoryFilter(category ? category.split("&") : []);
setSortByOpt(sortBy === "popular" ? "favorite" : "createdAt");
setSortByOpt(sortBy === "popular" ? "clickCount" : "createdAt");
}, [searchParams]);
useEffect(() => {
@ -381,7 +381,7 @@ export default function FilterPage() {
if (e.target.value == "terbaru") {
setSortByOpt("createdAt");
} else {
setSortByOpt("favorite");
setSortByOpt("clickCount");
}
setChange(!change);

4
app/[locale]/(public)/(polda)/polda/[polda_name]/audio/filter/page.tsx
View File

@ -90,7 +90,7 @@ const FilterPage = () => {
const [monthYearFilter, setMonthYearFilter] = useState<any>();
const [searchTitle, setSearchTitle] = useState<string>("");
const [sortByOpt, setSortByOpt] = useState<any>(
sortBy === "popular" ? "favorite" : "createdAt"
sortBy === "popular" ? "clickCount" : "createdAt"
);
const isRegional = asPath?.includes("regional");
const isSatker = asPath?.includes("satker");
@ -435,7 +435,7 @@ const FilterPage = () => {
if (e.target.value == "terbaru") {
setSortByOpt("createdAt");
} else {
setSortByOpt("favorite");
setSortByOpt("clickCount");
}
setChange(!change);

942
app/[locale]/(public)/(polda)/polda/[polda_name]/audio/regional/page.tsx
View File

@ -1,942 +0,0 @@
"use client";
import React, { useEffect, useState } from "react";
import { Card, CardContent } from "@/components/ui/card";
import { Checkbox } from "@/components/ui/checkbox";
import { Icon } from "@iconify/react/dist/iconify.js";
import {
formatDateToIndonesian,
getOnlyDate,
getOnlyMonthAndYear,
} from "@/utils/globals";
import { useParams, usePathname, useSearchParams } from "next/navigation";
import {
getPublicCategoryData,
getUserLevelListByParent,
listData,
listDataRegional,
} from "@/service/landing/landing";
import {
ColumnDef,
ColumnFiltersState,
PaginationState,
SortingState,
VisibilityState,
getCoreRowModel,
getFilteredRowModel,
getPaginationRowModel,
getSortedRowModel,
useReactTable,
} from "@tanstack/react-table";
import LandingPagination from "@/components/landing-page/pagination";
import { Reveal } from "@/components/landing-page/Reveal";
import { Link, useRouter } from "@/i18n/routing";
import { Input } from "@/components/ui/input";
import ReactDatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
import { close, loading } from "@/config/swal";
import { useTranslations } from "next-intl";
import ImageBlurry from "@/components/ui/image-blurry";
import { Skeleton } from "@/components/ui/skeleton";
import Image from "next/image";
const columns: ColumnDef<any>[] = [
{
accessorKey: "no",
header: "No",
cell: ({ row }) => <span>{row.getValue("no")}</span>,
},
];
export default function FilterPage() {
const router = useRouter();
const asPath = usePathname();
const params = useParams();
const searchParams = useSearchParams();
const locale = params?.locale;
const t = useTranslations("FilterPage");
const [isLoading, setIsLoading] = useState(true);
const [audioData, setAudioData] = useState<any[]>([]);
const [totalData, setTotalData] = useState<number>(1);
const [totalPage, setTotalPage] = useState<number>(1);
const [sorting, setSorting] = useState<SortingState>([]);
const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({});
const [rowSelection, setRowSelection] = useState({});
const [pagination, setPagination] = useState<PaginationState>({
pageIndex: 0,
pageSize: 10,
});
const [page, setPage] = useState(1);
const [totalContent, setTotalContent] = useState(0);
const [change, setChange] = useState(false);
const sortBy = searchParams?.get("sortBy");
const title = searchParams?.get("title");
const categorie = searchParams?.get("category");
const group = searchParams?.get("group");
const [categoryFilter, setCategoryFilter] = useState<any[]>([]);
const [monthYearFilter, setMonthYearFilter] = useState<any>();
const [searchTitle, setSearchTitle] = useState<string>("");
const [sortByOpt, setSortByOpt] = useState<any>(
sortBy === "popular" ? "favorite" : "createdAt"
);
const [formatFilter, setFormatFilter] = useState<any[]>([]);
const pages = page ? page - 1 : 0;
const [startDateString, setStartDateString] = useState<any>();
const [endDateString, setEndDateString] = useState<any>();
const [dateRange, setDateRange] = useState<any>([null, null]);
const [handleClose, setHandleClose] = useState(false);
const [categories, setCategories] = useState<any[]>([]);
const [isFilterOpen, setIsFilterOpen] = useState(true);
const poldaName = params?.polda_name;
const satkerName = params?.satker_name;
let prefixPath = poldaName
? `/polda/${poldaName}`
: satkerName
? `/satker/${satkerName}`
: "";
// === INIT ===
useEffect(() => {
const timer = setTimeout(() => setIsLoading(false), 1200);
return () => clearTimeout(timer);
}, []);
useEffect(() => {
const pageFromUrl = searchParams?.get("page");
if (pageFromUrl) setPage(Number(pageFromUrl));
}, [searchParams]);
useEffect(() => {
if (categorie) {
setCategoryFilter(
categorie?.split("&")?.length > 1 ? categorie?.split("&") : [categorie]
);
}
}, [categorie]);
useEffect(() => {
fetchCategories(categoryPage);
}, []);
const fetchCategories = async (pageNumber: number) => {
const groupParam =
poldaName && poldaName.length > 1
? poldaName
: satkerName && satkerName.length > 1
? "satker-" + satkerName
: "";
const isInt = locale === "en";
const response = await getPublicCategoryData(
groupParam,
"",
isInt,
pageNumber
); // halaman 1-based
const content = response?.data?.data?.content || [];
const total = response?.data?.data?.totalPages || 1;
setCategories(content);
setCategoryTotalPages(total);
};
useEffect(() => {
if (asPath?.includes("/regional")) getDataRegional();
else getDataAll();
}, [
asPath,
monthYearFilter,
page,
sortBy,
sortByOpt,
title,
startDateString,
endDateString,
categorie,
formatFilter,
]);
async function getDataAll() {
const filter =
categoryFilter?.length > 0
? categoryFilter?.sort().join(",")
: categorie || "";
const name = title || "";
const format = formatFilter?.length > 0 ? formatFilter.join(",") : "";
loading();
const response = await listData(
"4",
name,
filter,
12,
pages,
sortByOpt,
format,
"",
"",
startDateString,
endDateString,
monthYearFilter
? getOnlyMonthAndYear(monthYearFilter)?.split("/")[0]?.replace("", "")
: "",
monthYearFilter
? getOnlyMonthAndYear(monthYearFilter)?.split("/")[1]
: "",
locale == "en" ? true : false
);
close();
const data = response?.data?.data;
setAudioData(data?.content || []);
setTotalData(data?.totalElements || 0);
setTotalPage(data?.totalPages || 1);
setTotalContent(data?.totalElements || 0);
}
async function getDataRegional() {
const filter =
categoryFilter?.length > 0
? categoryFilter?.sort().join(",")
: categorie || "";
const name = title || "";
const format = formatFilter?.length > 0 ? formatFilter.join(",") : "";
loading();
const response = await listDataRegional(
"4",
name,
filter,
format,
"",
startDateString,
endDateString,
monthYearFilter
? getOnlyMonthAndYear(monthYearFilter)?.split("/")[0]?.replace("", "")
: "",
monthYearFilter
? getOnlyMonthAndYear(monthYearFilter)?.split("/")[1]
: "",
12,
pages,
sortByOpt
);
close();
const data = response?.data?.data;
setAudioData(data?.content || []);
setTotalData(data?.totalElements || 0);
setTotalPage(data?.totalPages || 1);
setTotalContent(data?.totalElements || 0);
}
const handleCategoryFilter = (e: boolean, id: string) => {
let filter = [...categoryFilter];
if (e) filter.push(String(id));
else filter = filter.filter((item) => item !== String(id));
router.push(`?category=${filter.join("&")}`);
};
const handleFormatFilter = (e: boolean, id: string) => {
let filter = [...formatFilter];
if (e) filter.push(id);
else filter = filter.filter((item) => item !== id);
setFormatFilter(filter);
};
const handleSorting = (e: any) => {
const value = e.target.value;
setSortByOpt(value === "latest" ? "createdAt" : "favorite");
};
const handleDeleteDate = () => {
setDateRange([null, null]);
setStartDateString("");
setEndDateString("");
setHandleClose(false);
};
const handleKeyUp = () => {
if (!searchTitle) router.push("?title=");
else router.push(`?title=${searchTitle.toLowerCase()}`);
};
// === REACT TABLE ===
const table = useReactTable({
data: audioData,
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,
},
});
const [calenderState, setCalenderState] = useState(false);
const [categoryPage, setCategoryPage] = useState(1);
const [categoryTotalPages, setCategoryTotalPages] = useState(1);
let typingTimer: any;
const cleanCheckbox = () => {
setCategoryFilter([]);
setFormatFilter([]);
router.push(`?category=&title=`);
setDateRange([null, null]);
setMonthYearFilter(null);
setChange(!change);
};
const handleKeyDown = () => {
clearTimeout(typingTimer);
};
return (
<div className="flex flex-col">
{/* Header */}
<div className="flex flex-row items-start gap-3 py-10 px-4 lg:px-20 bg-[#f7f7f7] dark:bg-black">
<p>
{" "}
Audio {">"}{" "}
<span className="font-bold">
{t("allAudio", { defaultValue: "All Audio" })}
</span>
</p>
<p className="font-bold">|</p>
{!title ? (
<p>
{`${t("thereIs", { defaultValue: "Terdapat" })} ${totalContent} ${t(
"downloadableImage",
{ defaultValue: "artikel berisi Foto yang dapat diunduh" }
)}`}
</p>
) : (
<p>
{t("search-results", { defaultValue: "Hasil pencarian untuk" })}{" "}
<span className="font-bold">"{title}"</span>
</p>
)}
</div>
<div className="flex flex-col lg:flex-row gap-6 pl-4 lg:pl-20 py-4">
{/* Left */}
<div className="h-fit min-w-full lg:min-w-[280px] max-w-full lg:max-w-[300px] bg-[#f7f7f7] dark:bg-black p-4 rounded-lg shadow-md">
<h2 className="text-lg font-semibold mb-4 flex items-center gap-1">
<Icon icon="stash:filter-light" fontSize={30} />
Filter
</h2>
<div className="border-t border-black my-4 dark:border-white"></div>
<div className="space-y-6">
<div>
<label
htmlFor="search"
className="block text-sm font-medium text-gray-700 dark:text-white"
>
{t("search", { defaultValue: "Search" })}
</label>
<Input
value={searchTitle}
onChange={(e) => setSearchTitle(e.target.value)}
onKeyUp={handleKeyUp}
onKeyDown={handleKeyDown}
type="text"
id="search"
placeholder={t("searchTitle", { defaultValue: "Search Title" })}
className="mt-1 w-full text-sm border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 dark:text-white">
{t("monthYear", { defaultValue: "Month Year" })}
</label>
<ReactDatePicker
selected={monthYearFilter}
className="mt-1 w-full text-xs border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
onChange={(date) => setMonthYearFilter(date)}
dateFormat="MM | yyyy"
placeholderText={t("selectYear", {
defaultValue: "Select Year",
})}
showMonthYearPicker
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 dark:text-white">
{t("date", { defaultValue: "Date" })}
</label>
<div className="flex flex-row justify justify-between gap-2">
<ReactDatePicker
selectsRange
className="mt-1 w-full border text-sm rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
startDate={dateRange[0]}
endDate={dateRange[1]}
onChange={(update) => {
setDateRange(update);
}}
placeholderText={t("searchDate", {
defaultValue: "Search Date",
})}
onCalendarClose={() => setCalenderState(!calenderState)}
/>
<div className="flex items-center">
{handleClose ? (
<Icon
icon="carbon:close-filled"
onClick={handleDeleteDate}
width="20"
inline
color="#216ba5"
/>
) : (
""
)}
</div>
</div>
</div>
<div>
<h3 className="text-sm font-medium text-gray-700 dark:text-white">
{t("categories", { defaultValue: "Categories" })}
</h3>
<ul className="mt-2 space-y-2">
{categories.map((category: any) => (
<li key={category?.id}>
<label
className="inline-flex items-center"
htmlFor={`${category.id}`}
>
<Checkbox
id={`${category.id}`}
value={category.id}
checked={categoryFilter.includes(String(category.id))}
onCheckedChange={(e) =>
handleCategoryFilter(Boolean(e), category.id)
}
/>
<span className="ml-2 text-gray-700 dark:text-white">
{category?.name}
</span>
</label>
</li>
))}
</ul>
{/* ⬇️ Pagination kategori (rata sejajar) */}
<div className="mt-4 flex justify-center items-center gap-2 flex-wrap">
{/* Tombol Prev */}
<button
onClick={() =>
setCategoryPage((prev) => Math.max(prev - 1, 1))
}
disabled={categoryPage === 1}
className="px-2 py-1 border rounded disabled:opacity-50 flex items-center justify-center"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="m13.15 16.15l-3.625-3.625q-.125-.125-.175-.25T9.3 12t.05-.275t.175-.25L13.15 7.85q.075-.075.163-.112T13.5 7.7q.2 0 .35.138T14 8.2v7.6q0 .225-.15.363t-.35.137q-.05 0-.35-.15"
/>
</svg>
</button>
{(() => {
const maxVisible = 4;
let startPage = Math.max(
1,
Math.min(
categoryPage - Math.floor(maxVisible / 2),
categoryTotalPages - maxVisible + 1
)
);
const endPage = Math.min(
categoryTotalPages,
startPage + maxVisible - 1
);
const visiblePages = [];
for (let i = startPage; i <= endPage; i++) {
visiblePages.push(i);
}
return visiblePages.map((pageNum) => (
<button
key={pageNum}
onClick={() => setCategoryPage(pageNum)}
className={`px-3 py-1 border rounded text-sm transition-colors ${
categoryPage === pageNum
? "bg-[#bb3523] text-white"
: "bg-white dark:bg-gray-800"
}`}
>
{pageNum}
</button>
));
})()}
{/* Tombol Next */}
<button
onClick={() =>
setCategoryPage((prev) =>
Math.min(prev + 1, categoryTotalPages)
)
}
disabled={categoryPage === categoryTotalPages}
className="px-2 py-1 border rounded disabled:opacity-50 flex items-center justify-center"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="M10.5 16.3q-.2 0-.35-.137T10 15.8V8.2q0-.225.15-.362t.35-.138q.05 0 .35.15l3.625 3.625q.125.125.175.25t.05.275t-.05.275t-.175.25L10.85 16.15q-.075.075-.162.113t-.188.037"
/>
</svg>
</button>
</div>
</div>
{/* <div>
<h3 className="text-sm font-medium text-gray-700 dark:text-white">
{t("categories", { defaultValue: "Categories" })}
</h3>
<ul className="mt-2 space-y-2">
{categories?.map((category: any) => (
<li key={category?.id}>
<label
className="inline-flex items-center"
htmlFor={`${category.id}`}
>
<Checkbox
id={`${category.id}`}
value={category.id}
checked={categoryFilter.includes(String(category.id))}
onCheckedChange={(e) =>
handleCategoryFilter(Boolean(e), category.id)
}
/>
<span className="ml-2 text-gray-700 dark:text-white">
{category?.name}
</span>
</label>
</li>
))}
<div className="mt-4 flex gap-2 justify-center items-center">
<button
onClick={() =>
setCategoryPage((prev) => Math.max(prev - 1, 1))
}
disabled={categoryPage === 1}
className="px-3 py-1 border rounded disabled:opacity-50"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="m13.15 16.15l-3.625-3.625q-.125-.125-.175-.25T9.3 12t.05-.275t.175-.25L13.15 7.85q.075-.075.163-.112T13.5 7.7q.2 0 .35.138T14 8.2v7.6q0 .225-.15.363t-.35.137q-.05 0-.35-.15"
/>
</svg>
</button>
{Array.from({ length: categoryTotalPages }, (_, i) => (
<button
key={i}
onClick={() => setCategoryPage(i + 1)}
className={`px-3 py-1 border rounded ${
categoryPage === i + 1 ? "bg-[#bb3523] text-white" : ""
}`}
>
{i + 1}
</button>
))}
<button
onClick={() =>
setCategoryPage((prev) =>
Math.min(prev + 1, categoryTotalPages)
)
}
disabled={categoryPage === categoryTotalPages}
className="px-3 py-1 border rounded disabled:opacity-50"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="M10.5 16.3q-.2 0-.35-.137T10 15.8V8.2q0-.225.15-.362t.35-.138q.05 0 .35.15l3.625 3.625q.125.125.175.25t.05.275t-.05.275t-.175.25L10.85 16.15q-.075.075-.162.113t-.188.037"
/>
</svg>
</button>
</div>
</ul>
</div> */}
{/* Garis */}
<div className="border-t border-black my-4 dark:border-white"></div>
{/* Garis */}
<div>
<h3 className="text-sm font-medium text-gray-700 dark:text-white">
Format
</h3>
<ul className="mt-2 space-y-2">
<li>
<label className="inline-flex items-center">
<Checkbox
id="png"
value="png"
checked={formatFilter.includes("wav")}
onCheckedChange={(e) =>
handleFormatFilter(Boolean(e), "wav")
}
/>
<span className="ml-2 text-gray-700 dark:text-white">
WAV
</span>
</label>
</li>
<li>
<label className="inline-flex items-center">
<Checkbox
id="jpeg"
value="jpeg"
checked={formatFilter.includes("mp3")}
onCheckedChange={(e) =>
handleFormatFilter(Boolean(e), "mp3")
}
/>
<span className="ml-2 text-gray-700 dark:text-white">
MP3
</span>
</label>
</li>
</ul>
</div>
<div className="border-t border-black dark:border-white my-4"></div>
<div className="text-center">
<a
onClick={cleanCheckbox}
className="text-[#bb3523] cursor-pointer"
>
<b>Reset Filter</b>
</a>
</div>
</div>
</div>
{/* CONTENT */}
<div className="w-full pr-4 lg:pr-16 pb-4">
<Reveal>
<div className="flex flex-col items-end mb-4">
<h2 className="text-lg font-semibold">Sort By</h2>
<select
defaultValue={sortBy == "popular" ? "popular" : "latest"}
onChange={handleSorting}
className="border rounded-md py-2 px-3"
>
<option value="latest">Latest</option>
<option value="popular">Most Popular</option>
</select>
</div>
{isLoading ? (
<div className="flex flex-col gap-4">
<Skeleton className="h-[200px] w-full rounded-xl" />
<Skeleton className="h-[200px] w-full rounded-xl" />
</div>
) : audioData?.length > 0 ? (
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
{audioData?.map((audio: any) => (
<Card
key={audio?.id}
className="hover:scale-105 transition-transform duration-300"
>
<CardContent
key={audio?.id}
className="md:basis-1/2 lg:basis-1/3"
>
<Link
href={`${prefixPath}/audio/detail/${audio?.slug
?.split("/")
.pop()}`}
// href={`${prefixPath}/document/detail/${text?.slug}`}
// href={prefixPath + `/document/detail/${text?.slug}`}
// onClick={() =>
// router.push(prefixPath + `/document/detail/${text?.slug}`)
// }
className="cursor-pointer rounded-lg shadow-md overflow-hidden bg-white dark:bg-black dark:border dark:border-gray-500"
>
{/* Ikon di tengah dengan latar kuning */}
<div className="flex items-center justify-center bg-[#bb3523] w-full h-[180px] text-white">
<svg
xmlns="http://www.w3.org/2000/svg"
width="150"
height="150"
viewBox="0 0 20 20"
>
<path
fill="currentColor"
d="M14.702 2.226A1 1 0 0 1 16 3.18v6.027a5.5 5.5 0 0 0-1-.184V6.18L8 8.368V15.5a2.5 2.5 0 1 1-1-2V5.368a1 1 0 0 1 .702-.955zM8 7.32l7-2.187V3.18L8 5.368zM5.5 14a1.5 1.5 0 1 0 0 3a1.5 1.5 0 0 0 0-3m13.5.5a4.5 4.5 0 1 1-9 0a4.5 4.5 0 0 1 9 0m-2.265-.436l-2.994-1.65a.5.5 0 0 0-.741.438v3.3a.5.5 0 0 0 .741.438l2.994-1.65a.5.5 0 0 0 0-.876"
/>
</svg>{" "}
</div>
{/* Konten bawah */}
<div className="p-4 flex flex-col gap-2">
{/* Kategori merah */}
<div className="text-[12px] font-bold text-red-600 uppercase">
{audio?.categoryName?.toUpperCase() ?? "Text"}
</div>
{/* Judul */}
<div className="font-semibold text-gray-900 dark:text-white text-xl leading-snug line-clamp-4">
{audio?.title}
</div>
</div>
</Link>
</CardContent>
</Card>
))}
</div>
) : (
<div className="flex justify-center items-center py-10">
<Image
src="/assets/empty-data.png"
alt="empty"
width={200}
height={200}
/>
</div>
)}
{totalPage > 1 && (
<LandingPagination
table={table}
totalData={totalData}
totalPage={totalPage}
/>
)}
</Reveal>
</div>
</div>
</div>
);
}
// import AllContentPage from "@/components/landing-page/all-content-page";
// const regions = [
// { name: "Polda Aceh", slug: "aceh", logo: "/logo/polda/polda-aceh.png" },
// { name: "Polda Bali", slug: "bali", logo: "/logo/polda/polda-bali.png" },
// {
// name: "Polda Bangka Belitung",
// slug: "bangka-belitung",
// logo: "/logo/polda/polda-bangka-belitung.png",
// },
// {
// name: "Polda Banten",
// slug: "banten",
// logo: "/logo/polda/polda-banten.png",
// },
// {
// name: "Polda Bengkulu",
// slug: "bengkulu",
// logo: "/logo/polda/polda-bengkulu.png",
// },
// {
// name: "Polda DIY",
// slug: "jogja",
// logo: "/logo/polda/polda-jogja.png",
// },
// {
// name: "Polda Gorontalo",
// slug: "gorontalo",
// logo: "/logo/polda/polda-gorontalo.png",
// },
// { name: "Polda Jambi", slug: "jambi", logo: "/logo/polda/polda-jambi.png" },
// {
// name: "Polda Jawa Barat",
// slug: "jawa-barat",
// logo: "/logo/polda/polda-jawa-barat.png",
// },
// {
// name: "Polda Jawa Tengah",
// slug: "jawa-tengah",
// logo: "/logo/polda/polda-jawa-tengah.png",
// },
// {
// name: "Polda Jawa Timur",
// slug: "jawa-timur",
// logo: "/logo/polda/polda-jawa-timur.png",
// },
// {
// name: "Polda Kalimantan Barat",
// slug: "kalimantan-barat",
// logo: "/logo/polda/polda-kalimantan-barat.png",
// },
// {
// name: "Polda Kalimantan Selatan",
// slug: "kalimantan-selatan",
// logo: "/logo/polda/polda-kalimantan-selatan.png",
// },
// {
// name: "Polda Kalimantan Tengah",
// slug: "kalimantan-tengah",
// logo: "/logo/polda/polda-kalimantan-tengah.png",
// },
// {
// name: "Polda Kalimantan Timur",
// slug: "kalimantan-timur",
// logo: "/logo/polda/polda-kalimantan-timur.png",
// },
// {
// name: "Polda Kalimantan Utara",
// slug: "kalimantan-utara",
// logo: "/logo/polda/polda-kalimantan-utara.png",
// },
// {
// name: "Polda Kepulauan Riau",
// slug: "kepulauan-riau",
// logo: "/logo/polda/polda-kepulauan-riau.png",
// },
// {
// name: "Polda Lampung",
// slug: "lampung",
// logo: "/logo/polda/polda-lampung.png",
// },
// {
// name: "Polda Maluku",
// slug: "maluku",
// logo: "/logo/polda/polda-maluku.png",
// },
// {
// name: "Polda Maluku Utara",
// slug: "maluku-utara",
// logo: "/logo/polda/polda-maluku-utara.png",
// },
// {
// name: "Polda Metro Jaya",
// slug: "metro-jaya",
// logo: "/logo/polda/polda-metro-jaya.png",
// },
// {
// name: "Polda NTB",
// slug: "ntb",
// logo: "/logo/polda/polda-ntb.png",
// },
// {
// name: "Polda NTT",
// slug: "ntt",
// logo: "/logo/polda/polda-ntt.png",
// },
// { name: "Polda Papua", slug: "papua", logo: "/logo/polda/polda-papua.png" },
// {
// name: "Polda Papua Barat",
// slug: "papua-barat",
// logo: "/logo/polda/polda-papua-barat.png",
// },
// {
// name: "Polda Papua Barat Daya",
// slug: "papua-barat-daya",
// logo: "/logo/polda/polda-papua-barat-daya.png",
// },
// {
// name: "Polda Papua Tengah",
// slug: "papua-tengah",
// logo: "/logo/polda/polda-papua-tengah.png",
// },
// { name: "Polda Riau", slug: "riau", logo: "/logo/polda/polda-riau.png" },
// {
// name: "Polda Sulawesi Barat",
// slug: "sulawesi-barat",
// logo: "/logo/polda/polda-sulawesi-barat.png",
// },
// {
// name: "Polda Sulawesi Selatan",
// slug: "sulawesi-selatan",
// logo: "/logo/polda/polda-sulawesi-selatan.png",
// },
// {
// name: "Polda Sulawesi Tengah",
// slug: "sulawesi-tengah",
// logo: "/logo/polda/polda-sulawesi-tengah.png",
// },
// {
// name: "Polda Sulawesi Tenggara",
// slug: "sulawesi-tenggara",
// logo: "/logo/polda/polda-sulawesi-tenggara.png",
// },
// {
// name: "Polda Sulawesi Utara",
// slug: "sulawesi-utara",
// logo: "/logo/polda/polda-sulawesi-utara.png",
// },
// {
// name: "Polda Sumatera Barat",
// slug: "sumatera-barat",
// logo: "/logo/polda/polda-sumatera-barat.png",
// },
// {
// name: "Polda Sumatera Selatan",
// slug: "sumatera-selatan",
// logo: "/logo/polda/polda-sumatera-selatan.png",
// },
// {
// name: "Polda Sumatera Utara",
// slug: "sumatera-utara",
// logo: "/logo/polda/polda-sumatera-utara.png",
// },
// // {
// // name: "Satuan Kerja POLRI",
// // slug: "satker-polri",
// // logo: "/logo/satker/SATUAN-KERJA-POLRI.png",
// // },
// // {
// // name: "Internasional",
// // slug: "internasional",
// // logo: "/assets/polda/internasional.png",
// // },
// ];
// export default function PoldaAllAudioPage() {
// return (
// <AllContentPage
// typeId="4"
// title="Semua Konten Audio per Polda"
// basePath="audio"
// mode="polda"
// dataList={regions}
// />
// );
// }

4
app/[locale]/(public)/(polda)/polda/[polda_name]/document/filter/page.tsx
View File

@ -83,7 +83,7 @@ const FilterPage = () => {
const [monthYearFilter, setMonthYearFilter] = useState<any>();
const [searchTitle, setSearchTitle] = useState<string>("");
const [sortByOpt, setSortByOpt] = useState<any>(
sortBy === "popular" ? "favorite" : "createdAt"
sortBy === "popular" ? "clickCount" : "createdAt"
);
const isRegional = asPath?.includes("regional");
const isSatker = asPath?.includes("satker");
@ -451,7 +451,7 @@ const FilterPage = () => {
if (e.target.value == "terbaru") {
setSortByOpt("createdAt");
} else {
setSortByOpt("favorite");
setSortByOpt("clickCount");
}
setChange(!change);

988
app/[locale]/(public)/(polda)/polda/[polda_name]/document/regional/page.tsx
View File

@ -1,988 +0,0 @@
"use client";
import React, { useEffect, useState } from "react";
import { Card, CardContent } from "@/components/ui/card";
import { Checkbox } from "@/components/ui/checkbox";
import { Icon } from "@iconify/react/dist/iconify.js";
import {
formatDateToIndonesian,
getOnlyDate,
getOnlyMonthAndYear,
} from "@/utils/globals";
import { useParams, usePathname, useSearchParams } from "next/navigation";
import {
getPublicCategoryData,
getUserLevelListByParent,
listData,
listDataRegional,
} from "@/service/landing/landing";
import {
ColumnDef,
ColumnFiltersState,
PaginationState,
SortingState,
VisibilityState,
getCoreRowModel,
getFilteredRowModel,
getPaginationRowModel,
getSortedRowModel,
useReactTable,
} from "@tanstack/react-table";
import LandingPagination from "@/components/landing-page/pagination";
import { Reveal } from "@/components/landing-page/Reveal";
import { Link, useRouter } from "@/i18n/routing";
import { Input } from "@/components/ui/input";
import ReactDatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
import { close, loading } from "@/config/swal";
import { useTranslations } from "next-intl";
import ImageBlurry from "@/components/ui/image-blurry";
import { Skeleton } from "@/components/ui/skeleton";
import Image from "next/image";
const columns: ColumnDef<any>[] = [
{
accessorKey: "no",
header: "No",
cell: ({ row }) => <span>{row.getValue("no")}</span>,
},
];
export default function FilterPage() {
const router = useRouter();
const asPath = usePathname();
const params = useParams();
const searchParams = useSearchParams();
const locale = params?.locale;
const t = useTranslations("FilterPage");
const [isLoading, setIsLoading] = useState(true);
const [documentData, setDocumentData] = useState<any[]>([]);
const [totalData, setTotalData] = useState<number>(1);
const [totalPage, setTotalPage] = useState<number>(1);
const [sorting, setSorting] = useState<SortingState>([]);
const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({});
const [rowSelection, setRowSelection] = useState({});
const [pagination, setPagination] = useState<PaginationState>({
pageIndex: 0,
pageSize: 10,
});
const [page, setPage] = useState(1);
const [totalContent, setTotalContent] = useState(0);
const [change, setChange] = useState(false);
const sortBy = searchParams?.get("sortBy");
const title = searchParams?.get("title");
const categorie = searchParams?.get("category");
const group = searchParams?.get("group");
const [categoryFilter, setCategoryFilter] = useState<any[]>([]);
const [monthYearFilter, setMonthYearFilter] = useState<any>();
const [searchTitle, setSearchTitle] = useState<string>("");
const [sortByOpt, setSortByOpt] = useState<any>(
sortBy === "popular" ? "favorite" : "createdAt"
);
const [formatFilter, setFormatFilter] = useState<any[]>([]);
const pages = page ? page - 1 : 0;
const [startDateString, setStartDateString] = useState<any>();
const [endDateString, setEndDateString] = useState<any>();
const [dateRange, setDateRange] = useState<any>([null, null]);
const [handleClose, setHandleClose] = useState(false);
const [categories, setCategories] = useState<any[]>([]);
const [isFilterOpen, setIsFilterOpen] = useState(true);
const poldaName = params?.polda_name;
const satkerName = params?.satker_name;
let prefixPath = poldaName
? `/polda/${poldaName}`
: satkerName
? `/satker/${satkerName}`
: "";
// === INIT ===
useEffect(() => {
const timer = setTimeout(() => setIsLoading(false), 1200);
return () => clearTimeout(timer);
}, []);
useEffect(() => {
const pageFromUrl = searchParams?.get("page");
if (pageFromUrl) setPage(Number(pageFromUrl));
}, [searchParams]);
useEffect(() => {
if (categorie) {
setCategoryFilter(
categorie?.split("&")?.length > 1 ? categorie?.split("&") : [categorie]
);
}
}, [categorie]);
useEffect(() => {
fetchCategories(categoryPage);
}, []);
const fetchCategories = async (pageNumber: number) => {
const groupParam =
poldaName && poldaName.length > 1
? poldaName
: satkerName && satkerName.length > 1
? "satker-" + satkerName
: "";
const isInt = locale === "en";
const response = await getPublicCategoryData(
groupParam,
"",
isInt,
pageNumber
); // halaman 1-based
const content = response?.data?.data?.content || [];
const total = response?.data?.data?.totalPages || 1;
setCategories(content);
setCategoryTotalPages(total);
};
useEffect(() => {
if (asPath?.includes("/regional")) getDataRegional();
else getDataAll();
}, [
asPath,
monthYearFilter,
page,
sortBy,
sortByOpt,
title,
startDateString,
endDateString,
categorie,
formatFilter,
]);
async function getDataAll() {
const filter =
categoryFilter?.length > 0
? categoryFilter?.sort().join(",")
: categorie || "";
const name = title || "";
const format = formatFilter?.length > 0 ? formatFilter.join(",") : "";
loading();
const response = await listData(
"3",
name,
filter,
12,
pages,
sortByOpt,
format,
"",
"",
startDateString,
endDateString,
monthYearFilter
? getOnlyMonthAndYear(monthYearFilter)?.split("/")[0]?.replace("", "")
: "",
monthYearFilter
? getOnlyMonthAndYear(monthYearFilter)?.split("/")[1]
: "",
locale == "en" ? true : false
);
close();
const data = response?.data?.data;
setDocumentData(data?.content || []);
setTotalData(data?.totalElements || 0);
setTotalPage(data?.totalPages || 1);
setTotalContent(data?.totalElements || 0);
}
async function getDataRegional() {
const filter =
categoryFilter?.length > 0
? categoryFilter?.sort().join(",")
: categorie || "";
const name = title || "";
const format = formatFilter?.length > 0 ? formatFilter.join(",") : "";
loading();
const response = await listDataRegional(
"3",
name,
filter,
format,
"",
startDateString,
endDateString,
monthYearFilter
? getOnlyMonthAndYear(monthYearFilter)?.split("/")[0]?.replace("", "")
: "",
monthYearFilter
? getOnlyMonthAndYear(monthYearFilter)?.split("/")[1]
: "",
12,
pages,
sortByOpt
);
close();
const data = response?.data?.data;
setDocumentData(data?.content || []);
setTotalData(data?.totalElements || 0);
setTotalPage(data?.totalPages || 1);
setTotalContent(data?.totalElements || 0);
}
const handleCategoryFilter = (e: boolean, id: string) => {
let filter = [...categoryFilter];
if (e) filter.push(String(id));
else filter = filter.filter((item) => item !== String(id));
router.push(`?category=${filter.join("&")}`);
};
const handleFormatFilter = (e: boolean, id: string) => {
let filter = [...formatFilter];
if (e) filter.push(id);
else filter = filter.filter((item) => item !== id);
setFormatFilter(filter);
};
const handleSorting = (e: any) => {
const value = e.target.value;
setSortByOpt(value === "latest" ? "createdAt" : "favorite");
};
const handleDeleteDate = () => {
setDateRange([null, null]);
setStartDateString("");
setEndDateString("");
setHandleClose(false);
};
const handleKeyUp = () => {
if (!searchTitle) router.push("?title=");
else router.push(`?title=${searchTitle.toLowerCase()}`);
};
// === REACT TABLE ===
const table = useReactTable({
data: documentData,
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,
},
});
const [calenderState, setCalenderState] = useState(false);
const [categoryPage, setCategoryPage] = useState(1);
const [categoryTotalPages, setCategoryTotalPages] = useState(1);
let typingTimer: any;
const cleanCheckbox = () => {
setCategoryFilter([]);
setFormatFilter([]);
router.push(`?category=&title=`);
setDateRange([null, null]);
setMonthYearFilter(null);
setChange(!change);
};
const handleKeyDown = () => {
clearTimeout(typingTimer);
};
return (
<div className="flex flex-col">
{/* Header */}
<div className="flex flex-row items-start gap-3 py-10 px-4 lg:px-20 bg-[#f7f7f7] dark:bg-black">
<p>
{" "}
{t("text", { defaultValue: "Text" })} {">"}{" "}
<span className="font-bold">
{t("allText", { defaultValue: "All Text" })}
</span>
</p>
<p className="font-bold">|</p>
{!title ? (
<p>
{`${t("thereIs", { defaultValue: "Terdapat" })} ${totalContent} ${t(
"downloadableImage",
{ defaultValue: "artikel berisi Foto yang dapat diunduh" }
)}`}
</p>
) : (
<p>
{t("search-results", { defaultValue: "Hasil pencarian untuk" })}{" "}
<span className="font-bold">"{title}"</span>
</p>
)}
</div>
<div className="flex flex-col lg:flex-row gap-6 pl-4 lg:pl-20 py-4">
{/* Left */}
<div className="h-fit min-w-full lg:min-w-[280px] max-w-full lg:max-w-[300px] bg-[#f7f7f7] dark:bg-black p-4 rounded-lg shadow-md">
<h2 className="text-lg font-semibold mb-4 flex items-center gap-1">
<Icon icon="stash:filter-light" fontSize={30} />
Filter
</h2>
<div className="border-t border-black my-4 dark:border-white"></div>
<div className="space-y-6">
<div>
<label
htmlFor="search"
className="block text-sm font-medium text-gray-700 dark:text-white"
>
{t("search", { defaultValue: "Search" })}
</label>
<Input
value={searchTitle}
onChange={(e) => setSearchTitle(e.target.value)}
onKeyUp={handleKeyUp}
onKeyDown={handleKeyDown}
type="text"
id="search"
placeholder={t("searchTitle", { defaultValue: "Search Title" })}
className="mt-1 w-full border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 dark:text-white">
{t("monthYear", { defaultValue: "Month Year" })}
</label>
<ReactDatePicker
selected={monthYearFilter}
className="mt-1 w-full text-xs border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
onChange={(date) => setMonthYearFilter(date)}
dateFormat="MM | yyyy"
placeholderText={t("selectYear", {
defaultValue: "Select Year",
})}
showMonthYearPicker
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 dark:text-white">
{t("date", { defaultValue: "Date" })}
</label>
<div className="flex flex-row justify justify-between gap-2">
<ReactDatePicker
selectsRange
className="mt-1 w-full border text-sm rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
startDate={dateRange[0]}
endDate={dateRange[1]}
onChange={(update) => {
setDateRange(update);
}}
placeholderText={t("selectDate", {
defaultValue: "Select Date",
})}
onCalendarClose={() => setCalenderState(!calenderState)}
/>
<div className="flex items-center">
{handleClose ? (
<Icon
icon="carbon:close-filled"
onClick={handleDeleteDate}
width="20"
inline
color="#216ba5"
/>
) : (
""
)}
</div>
</div>
</div>
<div>
<h3 className="text-sm font-medium text-gray-700 dark:text-white">
{t("categories", { defaultValue: "Categories" })}
</h3>
<ul className="mt-2 space-y-2">
{categories.map((category: any) => (
<li key={category?.id}>
<label
className="inline-flex items-center"
htmlFor={`${category.id}`}
>
<Checkbox
id={`${category.id}`}
value={category.id}
checked={categoryFilter.includes(String(category.id))}
onCheckedChange={(e) =>
handleCategoryFilter(Boolean(e), category.id)
}
/>
<span className="ml-2 text-gray-700 dark:text-white">
{category?.name}
</span>
</label>
</li>
))}
</ul>
{/* ⬇️ Pagination kategori (rata sejajar) */}
<div className="mt-4 flex justify-center items-center gap-2 flex-wrap">
{/* Tombol Prev */}
<button
onClick={() =>
setCategoryPage((prev) => Math.max(prev - 1, 1))
}
disabled={categoryPage === 1}
className="px-2 py-1 border rounded disabled:opacity-50 flex items-center justify-center"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="m13.15 16.15l-3.625-3.625q-.125-.125-.175-.25T9.3 12t.05-.275t.175-.25L13.15 7.85q.075-.075.163-.112T13.5 7.7q.2 0 .35.138T14 8.2v7.6q0 .225-.15.363t-.35.137q-.05 0-.35-.15"
/>
</svg>
</button>
{(() => {
const maxVisible = 4;
let startPage = Math.max(
1,
Math.min(
categoryPage - Math.floor(maxVisible / 2),
categoryTotalPages - maxVisible + 1
)
);
const endPage = Math.min(
categoryTotalPages,
startPage + maxVisible - 1
);
const visiblePages = [];
for (let i = startPage; i <= endPage; i++) {
visiblePages.push(i);
}
return visiblePages.map((pageNum) => (
<button
key={pageNum}
onClick={() => setCategoryPage(pageNum)}
className={`px-3 py-1 border rounded text-sm transition-colors ${
categoryPage === pageNum
? "bg-[#bb3523] text-white"
: "bg-white dark:bg-gray-800"
}`}
>
{pageNum}
</button>
));
})()}
{/* Tombol Next */}
<button
onClick={() =>
setCategoryPage((prev) =>
Math.min(prev + 1, categoryTotalPages)
)
}
disabled={categoryPage === categoryTotalPages}
className="px-2 py-1 border rounded disabled:opacity-50 flex items-center justify-center"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="M10.5 16.3q-.2 0-.35-.137T10 15.8V8.2q0-.225.15-.362t.35-.138q.05 0 .35.15l3.625 3.625q.125.125.175.25t.05.275t-.05.275t-.175.25L10.85 16.15q-.075.075-.162.113t-.188.037"
/>
</svg>
</button>
</div>
</div>
{/* <div>
<h3 className="text-sm font-medium text-gray-700 dark:text-white">
{t("categories", { defaultValue: "Categories" })}
</h3>
<ul className="mt-2 space-y-2">
{categories.map((category: any) => (
<li key={category?.id}>
<label
className="inline-flex items-center"
htmlFor={`${category.id}`}
>
<Checkbox
id={`${category.id}`}
value={category.id}
checked={categoryFilter.includes(String(category.id))}
onCheckedChange={(e) =>
handleCategoryFilter(Boolean(e), category.id)
}
/>
<span className="ml-2 text-gray-700 dark:text-white">
{category?.name}
</span>
</label>
</li>
))}
<div className="mt-4 flex gap-2 justify-center items-center">
<button
onClick={() =>
setCategoryPage((prev) => Math.max(prev - 1, 1))
}
disabled={categoryPage === 1}
className="px-3 py-1 border rounded disabled:opacity-50"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="m13.15 16.15l-3.625-3.625q-.125-.125-.175-.25T9.3 12t.05-.275t.175-.25L13.15 7.85q.075-.075.163-.112T13.5 7.7q.2 0 .35.138T14 8.2v7.6q0 .225-.15.363t-.35.137q-.05 0-.35-.15"
/>
</svg>
</button>
{Array.from({ length: categoryTotalPages }, (_, i) => (
<button
key={i}
onClick={() => setCategoryPage(i + 1)}
className={`px-3 py-1 border rounded ${
categoryPage === i + 1 ? "bg-[#bb3523] text-white" : ""
}`}
>
{i + 1}
</button>
))}
<button
onClick={() =>
setCategoryPage((prev) =>
Math.min(prev + 1, categoryTotalPages)
)
}
disabled={categoryPage === categoryTotalPages}
className="px-3 py-1 border rounded disabled:opacity-50"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="M10.5 16.3q-.2 0-.35-.137T10 15.8V8.2q0-.225.15-.362t.35-.138q.05 0 .35.15l3.625 3.625q.125.125.175.25t.05.275t-.05.275t-.175.25L10.85 16.15q-.075.075-.162.113t-.188.037"
/>
</svg>
</button>
</div>
</ul>
</div> */}
{/* Garis */}
<div className="border-t border-black my-4 dark:border-white"></div>
{/* Garis */}
<div>
<h3 className="text-sm font-medium text-gray-700 dark:text-white">
Format
</h3>
<ul className="mt-2 space-y-2">
<li>
<label className="inline-flex items-center">
<Checkbox
id="doc"
value="doc"
checked={formatFilter.includes("doc")}
onCheckedChange={(e) =>
handleFormatFilter(Boolean(e), "doc")
}
/>
<span className="ml-2 text-gray-700 dark:text-white">
DOC
</span>
</label>
</li>
<li>
<label className="inline-flex items-center">
<Checkbox
id="docx"
value="docx"
checked={formatFilter.includes("docx")}
onCheckedChange={(e) =>
handleFormatFilter(Boolean(e), "docx")
}
/>
<span className="ml-2 text-gray-700 dark:text-white">
DOCX
</span>
</label>
</li>
<li>
<label className="inline-flex items-center">
<Checkbox
id="pdf"
value="pdf"
checked={formatFilter.includes("pdf")}
onCheckedChange={(e) =>
handleFormatFilter(Boolean(e), "pdf")
}
/>
<span className="ml-2 text-gray-700 dark:text-white">
PDF
</span>
</label>
</li>
<li>
<label className="inline-flex items-center">
<Checkbox
id="ppt"
value="ppt"
checked={formatFilter.includes("ppt")}
onCheckedChange={(e) =>
handleFormatFilter(Boolean(e), "ppt")
}
/>
<span className="ml-2 text-gray-700 dark:text-white">
PPT
</span>
</label>
</li>
<li>
<label className="inline-flex items-center">
<Checkbox
id="pptx"
value="pptx"
checked={formatFilter.includes("pptx")}
onCheckedChange={(e) =>
handleFormatFilter(Boolean(e), "pptx")
}
/>
<span className="ml-2 text-gray-700 dark:text-white">
PPTX
</span>
</label>
</li>
</ul>
</div>
<div className="border-t border-black dark:border-white my-4"></div>
<div className="text-center">
<a
onClick={cleanCheckbox}
className="text-[#bb3523] cursor-pointer"
>
<b>Reset Filter</b>
</a>
</div>
</div>
</div>
{/* RIGHT */}
<div className="w-full pr-4 lg:pr-16 pb-4">
<Reveal>
<div className="flex flex-col items-end mb-4">
<h2 className="text-lg font-semibold">Sort By</h2>
<select
defaultValue={sortBy == "popular" ? "popular" : "latest"}
onChange={handleSorting}
className="border rounded-md py-2 px-3"
>
<option value="latest">Latest</option>
<option value="popular">Most Popular</option>
</select>
</div>
{isLoading ? (
<div className="flex flex-col gap-4">
<Skeleton className="h-[200px] w-full rounded-xl" />
<Skeleton className="h-[200px] w-full rounded-xl" />
</div>
) : documentData?.length > 0 ? (
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
{documentData?.map((document: any) => (
<Card
key={document?.id}
className="hover:scale-105 transition-transform duration-300"
>
<CardContent
key={document?.id}
className="md:basis-1/2 lg:basis-1/3"
>
<Link
href={`${prefixPath}/document/detail/${document?.slug
?.split("/")
.pop()}`}
// href={`${prefixPath}/document/detail/${text?.slug}`}
// href={prefixPath + `/document/detail/${text?.slug}`}
// onClick={() =>
// router.push(prefixPath + `/document/detail/${text?.slug}`)
// }
className="cursor-pointer rounded-lg shadow-md overflow-hidden bg-white dark:bg-black dark:border dark:border-gray-500"
>
{/* Ikon di tengah dengan latar kuning */}
<div className="bg-[#e0c350] flex items-center justify-center h-[170px] text-white">
<svg
xmlns="http://www.w3.org/2000/svg"
width="150"
height="150"
viewBox="0 0 16 16"
>
<path
fill="currentColor"
d="M5 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V5.414a1.5 1.5 0 0 0-.44-1.06L9.647 1.439A1.5 1.5 0 0 0 8.586 1zM4 3a1 1 0 0 1 1-1h3v2.5A1.5 1.5 0 0 0 9.5 6H12v7a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1zm7.793 2H9.5a.5.5 0 0 1-.5-.5V2.207zM7 7.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5M7.5 9a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1zM7 11.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5M5.5 8a.5.5 0 1 0 0-1a.5.5 0 0 0 0 1M6 9.5a.5.5 0 1 1-1 0a.5.5 0 0 1 1 0M5.5 12a.5.5 0 1 0 0-1a.5.5 0 0 0 0 1"
/>
</svg>
</div>
{/* Konten bawah */}
<div className="p-4 flex flex-col gap-2">
{/* Kategori merah */}
<div className="text-[12px] font-bold text-red-600 uppercase">
{document?.categoryName?.toUpperCase() ?? "Text"}
</div>
{/* Judul */}
<div className="font-semibold text-gray-900 dark:text-white text-xl leading-snug line-clamp-4">
{document?.title}
</div>
</div>
</Link>
</CardContent>
</Card>
))}
</div>
) : (
<div className="flex justify-center items-center py-10">
<Image
src="/assets/empty-data.png"
alt="empty"
width={200}
height={200}
/>
</div>
)}
{totalPage > 1 && (
<LandingPagination
table={table}
totalData={totalData}
totalPage={totalPage}
/>
)}
</Reveal>
</div>
</div>
</div>
);
}
// import AllContentPage from "@/components/landing-page/all-content-page";
// const regions = [
// { name: "Polda Aceh", slug: "aceh", logo: "/logo/polda/polda-aceh.png" },
// { name: "Polda Bali", slug: "bali", logo: "/logo/polda/polda-bali.png" },
// {
// name: "Polda Bangka Belitung",
// slug: "bangka-belitung",
// logo: "/logo/polda/polda-bangka-belitung.png",
// },
// {
// name: "Polda Banten",
// slug: "banten",
// logo: "/logo/polda/polda-banten.png",
// },
// {
// name: "Polda Bengkulu",
// slug: "bengkulu",
// logo: "/logo/polda/polda-bengkulu.png",
// },
// {
// name: "Polda DIY",
// slug: "jogja",
// logo: "/logo/polda/polda-jogja.png",
// },
// {
// name: "Polda Gorontalo",
// slug: "gorontalo",
// logo: "/logo/polda/polda-gorontalo.png",
// },
// { name: "Polda Jambi", slug: "jambi", logo: "/logo/polda/polda-jambi.png" },
// {
// name: "Polda Jawa Barat",
// slug: "jawa-barat",
// logo: "/logo/polda/polda-jawa-barat.png",
// },
// {
// name: "Polda Jawa Tengah",
// slug: "jawa-tengah",
// logo: "/logo/polda/polda-jawa-tengah.png",
// },
// {
// name: "Polda Jawa Timur",
// slug: "jawa-timur",
// logo: "/logo/polda/polda-jawa-timur.png",
// },
// {
// name: "Polda Kalimantan Barat",
// slug: "kalimantan-barat",
// logo: "/logo/polda/polda-kalimantan-barat.png",
// },
// {
// name: "Polda Kalimantan Selatan",
// slug: "kalimantan-selatan",
// logo: "/logo/polda/polda-kalimantan-selatan.png",
// },
// {
// name: "Polda Kalimantan Tengah",
// slug: "kalimantan-tengah",
// logo: "/logo/polda/polda-kalimantan-tengah.png",
// },
// {
// name: "Polda Kalimantan Timur",
// slug: "kalimantan-timur",
// logo: "/logo/polda/polda-kalimantan-timur.png",
// },
// {
// name: "Polda Kalimantan Utara",
// slug: "kalimantan-utara",
// logo: "/logo/polda/polda-kalimantan-utara.png",
// },
// {
// name: "Polda Kepulauan Riau",
// slug: "kepulauan-riau",
// logo: "/logo/polda/polda-kepulauan-riau.png",
// },
// {
// name: "Polda Lampung",
// slug: "lampung",
// logo: "/logo/polda/polda-lampung.png",
// },
// {
// name: "Polda Maluku",
// slug: "maluku",
// logo: "/logo/polda/polda-maluku.png",
// },
// {
// name: "Polda Maluku Utara",
// slug: "maluku-utara",
// logo: "/logo/polda/polda-maluku-utara.png",
// },
// {
// name: "Polda Metro Jaya",
// slug: "metro-jaya",
// logo: "/logo/polda/polda-metro-jaya.png",
// },
// {
// name: "Polda NTB",
// slug: "ntb",
// logo: "/logo/polda/polda-ntb.png",
// },
// {
// name: "Polda NTT",
// slug: "ntt",
// logo: "/logo/polda/polda-ntt.png",
// },
// { name: "Polda Papua", slug: "papua", logo: "/logo/polda/polda-papua.png" },
// {
// name: "Polda Papua Barat",
// slug: "papua-barat",
// logo: "/logo/polda/polda-papua-barat.png",
// },
// {
// name: "Polda Papua Barat Daya",
// slug: "papua-barat-daya",
// logo: "/logo/polda/polda-papua-barat-daya.png",
// },
// {
// name: "Polda Papua Tengah",
// slug: "papua-tengah",
// logo: "/logo/polda/polda-papua-tengah.png",
// },
// { name: "Polda Riau", slug: "riau", logo: "/logo/polda/polda-riau.png" },
// {
// name: "Polda Sulawesi Barat",
// slug: "sulawesi-barat",
// logo: "/logo/polda/polda-sulawesi-barat.png",
// },
// {
// name: "Polda Sulawesi Selatan",
// slug: "sulawesi-selatan",
// logo: "/logo/polda/polda-sulawesi-selatan.png",
// },
// {
// name: "Polda Sulawesi Tengah",
// slug: "sulawesi-tengah",
// logo: "/logo/polda/polda-sulawesi-tengah.png",
// },
// {
// name: "Polda Sulawesi Tenggara",
// slug: "sulawesi-tenggara",
// logo: "/logo/polda/polda-sulawesi-tenggara.png",
// },
// {
// name: "Polda Sulawesi Utara",
// slug: "sulawesi-utara",
// logo: "/logo/polda/polda-sulawesi-utara.png",
// },
// {
// name: "Polda Sumatera Barat",
// slug: "sumatera-barat",
// logo: "/logo/polda/polda-sumatera-barat.png",
// },
// {
// name: "Polda Sumatera Selatan",
// slug: "sumatera-selatan",
// logo: "/logo/polda/polda-sumatera-selatan.png",
// },
// {
// name: "Polda Sumatera Utara",
// slug: "sumatera-utara",
// logo: "/logo/polda/polda-sumatera-utara.png",
// },
// // {
// // name: "Satuan Kerja POLRI",
// // slug: "satker-polri",
// // logo: "/logo/satker/SATUAN-KERJA-POLRI.png",
// // },
// // {
// // name: "Internasional",
// // slug: "internasional",
// // logo: "/assets/polda/internasional.png",
// // },
// ];
// export default function PoldaAllDocumentPage() {
// return (
// <AllContentPage
// typeId="3"
// title="Semua Konten Teks per Polda"
// basePath="document"
// mode="polda"
// dataList={regions}
// />
// );
// }

4
app/[locale]/(public)/(polda)/polda/[polda_name]/image/filter/page.tsx
View File

@ -84,7 +84,7 @@ const FilterPage = () => {
const [monthYearFilter, setMonthYearFilter] = useState<any>();
const [searchTitle, setSearchTitle] = useState<string>("");
const [sortByOpt, setSortByOpt] = useState<any>(
sortBy === "popular" ? "favorite" : "createdAt"
sortBy === "popular" ? "clickCount" : "createdAt"
);
const isRegional = asPath?.includes("regional");
const isSatker = asPath?.includes("satker");
@ -432,7 +432,7 @@ const FilterPage = () => {
if (e.target.value == "terbaru") {
setSortByOpt("createdAt");
} else {
setSortByOpt("favorite");
setSortByOpt("clickCount");
}
setChange(!change);

895
app/[locale]/(public)/(polda)/polda/[polda_name]/image/regional/page.tsx
View File

@ -1,895 +0,0 @@
"use client";
import React, { useEffect, useState } from "react";
import { Card, CardContent } from "@/components/ui/card";
import { Checkbox } from "@/components/ui/checkbox";
import { Icon } from "@iconify/react/dist/iconify.js";
import {
formatDateToIndonesian,
getOnlyDate,
getOnlyMonthAndYear,
} from "@/utils/globals";
import { useParams, usePathname, useSearchParams } from "next/navigation";
import {
getPublicCategoryData,
getUserLevelListByParent,
listData,
listDataRegional,
} from "@/service/landing/landing";
import {
ColumnDef,
ColumnFiltersState,
PaginationState,
SortingState,
VisibilityState,
getCoreRowModel,
getFilteredRowModel,
getPaginationRowModel,
getSortedRowModel,
useReactTable,
} from "@tanstack/react-table";
import LandingPagination from "@/components/landing-page/pagination";
import { Reveal } from "@/components/landing-page/Reveal";
import { Link, useRouter } from "@/i18n/routing";
import { Input } from "@/components/ui/input";
import ReactDatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
import { close, loading } from "@/config/swal";
import { useTranslations } from "next-intl";
import ImageBlurry from "@/components/ui/image-blurry";
import { Skeleton } from "@/components/ui/skeleton";
import Image from "next/image";
const columns: ColumnDef<any>[] = [
{
accessorKey: "no",
header: "No",
cell: ({ row }) => <span>{row.getValue("no")}</span>,
},
];
export default function FilterPage() {
const router = useRouter();
const asPath = usePathname();
const params = useParams();
const searchParams = useSearchParams();
const locale = params?.locale;
const t = useTranslations("FilterPage");
const [isLoading, setIsLoading] = useState(true);
const [imageData, setImageData] = useState<any[]>([]);
const [totalData, setTotalData] = useState<number>(1);
const [totalPage, setTotalPage] = useState<number>(1);
const [sorting, setSorting] = useState<SortingState>([]);
const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({});
const [rowSelection, setRowSelection] = useState({});
const [pagination, setPagination] = useState<PaginationState>({
pageIndex: 0,
pageSize: 10,
});
const [page, setPage] = useState(1);
const [totalContent, setTotalContent] = useState(0);
const [change, setChange] = useState(false);
const sortBy = searchParams?.get("sortBy");
const title = searchParams?.get("title");
const categorie = searchParams?.get("category");
const group = searchParams?.get("group");
const [categoryFilter, setCategoryFilter] = useState<any[]>([]);
const [monthYearFilter, setMonthYearFilter] = useState<any>();
const [searchTitle, setSearchTitle] = useState<string>("");
const [sortByOpt, setSortByOpt] = useState<any>(
sortBy === "popular" ? "favorite" : "createdAt"
);
const [formatFilter, setFormatFilter] = useState<any[]>([]);
const pages = page ? page - 1 : 0;
const [startDateString, setStartDateString] = useState<any>();
const [endDateString, setEndDateString] = useState<any>();
const [dateRange, setDateRange] = useState<any>([null, null]);
const [handleClose, setHandleClose] = useState(false);
const [categories, setCategories] = useState<any[]>([]);
const [isFilterOpen, setIsFilterOpen] = useState(true);
const poldaName = params?.polda_name;
const satkerName = params?.satker_name;
let prefixPath = poldaName
? `/polda/${poldaName}`
: satkerName
? `/satker/${satkerName}`
: "";
// === INIT ===
useEffect(() => {
const timer = setTimeout(() => setIsLoading(false), 1200);
return () => clearTimeout(timer);
}, []);
useEffect(() => {
const pageFromUrl = searchParams?.get("page");
if (pageFromUrl) setPage(Number(pageFromUrl));
}, [searchParams]);
useEffect(() => {
if (categorie) {
setCategoryFilter(
categorie?.split("&")?.length > 1 ? categorie?.split("&") : [categorie]
);
}
}, [categorie]);
useEffect(() => {
fetchCategories(categoryPage);
}, []);
const fetchCategories = async (pageNumber: number) => {
const groupParam =
poldaName && poldaName.length > 1
? poldaName
: satkerName && satkerName.length > 1
? "satker-" + satkerName
: "";
const isInt = locale === "en";
const response = await getPublicCategoryData(
groupParam,
"",
isInt,
pageNumber
); // halaman 1-based
const content = response?.data?.data?.content || [];
const total = response?.data?.data?.totalPages || 1;
setCategories(content);
setCategoryTotalPages(total);
};
// async function fetchCategories() {
// const response = await getPublicCategoryData("", "", locale === "en");
// setCategories(response?.data?.data?.content || []);
// }
useEffect(() => {
if (asPath?.includes("/regional")) getDataRegional();
else getDataAll();
}, [
asPath,
monthYearFilter,
page,
sortBy,
sortByOpt,
title,
startDateString,
endDateString,
categorie,
formatFilter,
]);
async function getDataAll() {
const filter =
categoryFilter?.length > 0
? categoryFilter?.sort().join(",")
: categorie || "";
const name = title || "";
const format = formatFilter?.length > 0 ? formatFilter.join(",") : "";
loading();
const response = await listData(
"1",
name,
filter,
12,
pages,
sortByOpt,
format,
"",
"",
startDateString,
endDateString,
monthYearFilter
? getOnlyMonthAndYear(monthYearFilter)?.split("/")[0]?.replace("", "")
: "",
monthYearFilter
? getOnlyMonthAndYear(monthYearFilter)?.split("/")[1]
: "",
locale == "en" ? true : false
);
close();
const data = response?.data?.data;
setImageData(data?.content || []);
setTotalData(data?.totalElements || 0);
setTotalPage(data?.totalPages || 1);
setTotalContent(data?.totalElements || 0);
}
async function getDataRegional() {
const filter =
categoryFilter?.length > 0
? categoryFilter?.sort().join(",")
: categorie || "";
const name = title || "";
const format = formatFilter?.length > 0 ? formatFilter.join(",") : "";
loading();
const response = await listDataRegional(
"1",
name,
filter,
format,
"",
startDateString,
endDateString,
monthYearFilter
? getOnlyMonthAndYear(monthYearFilter)?.split("/")[0]?.replace("", "")
: "",
monthYearFilter
? getOnlyMonthAndYear(monthYearFilter)?.split("/")[1]
: "",
12,
pages,
sortByOpt
);
close();
const data = response?.data?.data;
setImageData(data?.content || []);
setTotalData(data?.totalElements || 0);
setTotalPage(data?.totalPages || 1);
setTotalContent(data?.totalElements || 0);
}
const handleCategoryFilter = (e: boolean, id: string) => {
let filter = [...categoryFilter];
if (e) filter.push(String(id));
else filter = filter.filter((item) => item !== String(id));
router.push(`?category=${filter.join("&")}`);
};
const handleFormatFilter = (e: boolean, id: string) => {
let filter = [...formatFilter];
if (e) filter.push(id);
else filter = filter.filter((item) => item !== id);
setFormatFilter(filter);
};
const handleSorting = (e: any) => {
const value = e.target.value;
setSortByOpt(value === "latest" ? "createdAt" : "favorite");
};
const handleDeleteDate = () => {
setDateRange([null, null]);
setStartDateString("");
setEndDateString("");
setHandleClose(false);
};
const handleKeyUp = () => {
if (!searchTitle) router.push("?title=");
else router.push(`?title=${searchTitle.toLowerCase()}`);
};
// === REACT TABLE ===
const table = useReactTable({
data: imageData,
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,
},
});
const [calenderState, setCalenderState] = useState(false);
const [categoryPage, setCategoryPage] = useState(1);
const [categoryTotalPages, setCategoryTotalPages] = useState(1);
let typingTimer: any;
const cleanCheckbox = () => {
setCategoryFilter([]);
setFormatFilter([]);
router.push(`?category=&title=`);
setDateRange([null, null]);
setMonthYearFilter(null);
setChange(!change);
};
const handleKeyDown = () => {
clearTimeout(typingTimer);
};
return (
<div className="flex flex-col">
{/* Header */}
<div className="flex flex-row items-start gap-3 py-10 px-4 lg:px-20 bg-[#f7f7f7] dark:bg-black">
<p>{t("image", { defaultValue: "Image" })}</p> {">"}
<p>
<span className="font-bold">
{t("allImage", { defaultValue: "All Image" })}
</span>
</p>
<p className="font-bold">|</p>
{!title ? (
<p>
{`${t("thereIs", { defaultValue: "Terdapat" })} ${totalContent} ${t(
"downloadableImage",
{ defaultValue: "artikel berisi Foto yang dapat diunduh" }
)}`}
</p>
) : (
<p>
{t("search-results", { defaultValue: "Hasil pencarian untuk" })}{" "}
<span className="font-bold">"{title}"</span>
</p>
)}
</div>
<div className="flex flex-col lg:flex-row gap-6 pl-4 lg:pl-20 py-4">
{/* Left */}
<div className="lg:hidden flex justify-end mb-2">
<button
onClick={() => setIsFilterOpen(!isFilterOpen)}
className="text-sm text-white bg-[#bb3523] px-4 py-1 rounded-md shadow"
>
{isFilterOpen ? "Hide Filter" : "Show Filter"}
</button>
</div>
{isFilterOpen && (
<div className="h-fit min-w-full lg:min-w-[280px] max-w-full lg:max-w-[300px] bg-[#f7f7f7] dark:bg-black p-4 rounded-lg shadow-md">
<h2 className="text-lg font-semibold mb-4 flex items-center gap-1">
<Icon icon="stash:filter-light" fontSize={30} />
Filter
</h2>
<div className="border-t border-black my-4 dark:border-white"></div>
<div className="space-y-6">
<div>
<label
htmlFor="search"
className="block text-sm font-medium text-gray-700 dark:text-white"
>
{t("search", { defaultValue: "Search" })}
</label>
<Input
value={searchTitle}
onChange={(e) => setSearchTitle(e.target.value)}
onKeyUp={handleKeyUp}
onKeyDown={handleKeyDown}
type="text"
id="search"
placeholder={t("searchTitle", {
defaultValue: "Search Title",
})}
className="mt-1 w-full border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 dark:text-white">
{t("monthYear", { defaultValue: "Month Year" })}
</label>
<ReactDatePicker
selected={monthYearFilter}
className="mt-1 w-full text-xs border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
onChange={(date) => setMonthYearFilter(date)}
dateFormat="MM | yyyy"
placeholderText={t("selectYear", {
defaultValue: "Select Year",
})}
showMonthYearPicker
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 dark:text-white">
{t("date", { defaultValue: "Date" })}
</label>
<div className="flex flex-row justify justify-between gap-2">
<ReactDatePicker
selectsRange
className="mt-1 w-full border text-sm rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
startDate={dateRange[0]}
endDate={dateRange[1]}
onChange={(update) => {
setDateRange(update);
}}
placeholderText={t("selectDate", {
defaultValue: "Select Date",
})}
onCalendarClose={() => setCalenderState(!calenderState)}
/>
<div className="flex items-center">
{handleClose ? (
<Icon
icon="carbon:close-filled"
onClick={handleDeleteDate}
width="20"
inline
color="#216ba5"
/>
) : (
""
)}
</div>
</div>
</div>
<div>
<h3 className="text-sm font-medium text-gray-700 dark:text-white">
{t("categories", { defaultValue: "Categories" })}
</h3>
<ul className="mt-2 space-y-2">
{categories.map((category: any) => (
<li key={category?.id}>
<label
className="inline-flex items-center"
htmlFor={`${category.id}`}
>
<Checkbox
id={`${category.id}`}
value={category.id}
checked={categoryFilter.includes(String(category.id))}
onCheckedChange={(e) =>
handleCategoryFilter(Boolean(e), category.id)
}
/>
<span className="ml-2 text-gray-700 dark:text-white">
{category?.name}
</span>
</label>
</li>
))}
</ul>
{/* ⬇️ Pagination kategori (rata sejajar) */}
<div className="mt-4 flex justify-center items-center gap-2 flex-wrap">
{/* Tombol Prev */}
<button
onClick={() =>
setCategoryPage((prev) => Math.max(prev - 1, 1))
}
disabled={categoryPage === 1}
className="px-2 py-1 border rounded disabled:opacity-50 flex items-center justify-center"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="m13.15 16.15l-3.625-3.625q-.125-.125-.175-.25T9.3 12t.05-.275t.175-.25L13.15 7.85q.075-.075.163-.112T13.5 7.7q.2 0 .35.138T14 8.2v7.6q0 .225-.15.363t-.35.137q-.05 0-.35-.15"
/>
</svg>
</button>
{(() => {
const maxVisible = 4;
let startPage = Math.max(
1,
Math.min(
categoryPage - Math.floor(maxVisible / 2),
categoryTotalPages - maxVisible + 1
)
);
const endPage = Math.min(
categoryTotalPages,
startPage + maxVisible - 1
);
const visiblePages = [];
for (let i = startPage; i <= endPage; i++) {
visiblePages.push(i);
}
return visiblePages.map((pageNum) => (
<button
key={pageNum}
onClick={() => setCategoryPage(pageNum)}
className={`px-3 py-1 border rounded text-sm transition-colors ${
categoryPage === pageNum
? "bg-[#bb3523] text-white"
: "bg-white dark:bg-gray-800"
}`}
>
{pageNum}
</button>
));
})()}
{/* Tombol Next */}
<button
onClick={() =>
setCategoryPage((prev) =>
Math.min(prev + 1, categoryTotalPages)
)
}
disabled={categoryPage === categoryTotalPages}
className="px-2 py-1 border rounded disabled:opacity-50 flex items-center justify-center"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="M10.5 16.3q-.2 0-.35-.137T10 15.8V8.2q0-.225.15-.362t.35-.138q.05 0 .35.15l3.625 3.625q.125.125.175.25t.05.275t-.05.275t-.175.25L10.85 16.15q-.075.075-.162.113t-.188.037"
/>
</svg>
</button>
</div>
</div>
{/* Garis */}
<div className="border-t border-black my-4 dark:border-white"></div>
{/* Garis */}
<div>
<h3 className="text-sm font-medium text-gray-700 dark:text-white">
Format
</h3>
<ul className="mt-2 space-y-2">
<li>
<label className="inline-flex items-center">
<Checkbox
id="png"
value="png"
checked={formatFilter.includes("png")}
onCheckedChange={(e) =>
handleFormatFilter(Boolean(e), "png")
}
/>
<span className="ml-2 text-gray-700 dark:text-white">
PNG
</span>
</label>
</li>
<li>
<label className="inline-flex items-center">
<Checkbox
id="jpeg"
value="jpeg"
checked={formatFilter.includes("jpeg")}
onCheckedChange={(e) =>
handleFormatFilter(Boolean(e), "jpeg")
}
/>
<span className="ml-2 text-gray-700 dark:text-white">
JPEG
</span>
</label>
</li>
<li>
<label className="inline-flex items-center">
<Checkbox
id="jpg"
value="jpg"
checked={formatFilter.includes("jpg")}
onCheckedChange={(e) =>
handleFormatFilter(Boolean(e), "jpg")
}
/>
<span className="ml-2 text-gray-700 dark:text-white">
JPG
</span>
</label>
</li>
</ul>
</div>
<div className="border-t border-black dark:border-white my-4"></div>
<div className="text-center">
<a
onClick={cleanCheckbox}
className="text-[#bb3523] cursor-pointer"
>
<b>Reset Filter</b>
</a>
</div>
</div>
</div>
)}
{/* CONTENT */}
<div className="w-full pr-4 lg:pr-16 pb-4">
<Reveal>
<div className="flex flex-col items-end mb-4">
<h2 className="text-lg font-semibold">Sort By</h2>
<select
defaultValue={sortBy == "popular" ? "popular" : "latest"}
onChange={handleSorting}
className="border rounded-md py-2 px-3"
>
<option value="latest">Latest</option>
<option value="popular">Most Popular</option>
</select>
</div>
{isLoading ? (
<div className="flex flex-col gap-4">
<Skeleton className="h-[200px] w-full rounded-xl" />
<Skeleton className="h-[200px] w-full rounded-xl" />
</div>
) : imageData?.length > 0 ? (
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
{imageData.map((image: any) => (
<Card
key={image?.id}
className="hover:scale-105 transition-transform duration-300"
>
<CardContent className="flex flex-col p-0">
<Link
href={`${prefixPath}/image/detail/${image?.slug
?.split("/")
.pop()}`}
// href={`/image/detail/${image?.slug}`}
>
<div className="h-60 bg-[#e9e9e9]">
<ImageBlurry
src={
image?.smallThumbnailLink || image?.thumbnailLink
}
alt={image?.title}
style={{
objectFit: "cover",
width: "100%",
height: "100%",
}}
/>
</div>
<div className="p-4">
<div className="flex flex-row justify-between mb-1">
<p className="text-[9px] font-bold text-[#bb3523]">
{image?.categoryName?.toUpperCase() ??
"Giat Pimpinan"}
</p>
<p className="flex flex-row items-center text-[9px] gap-1 text-gray-600">
{formatDateToIndonesian(
new Date(image?.createdAt)
)}{" "}
{image?.timezone ?? "WIB"} |
<Icon
icon="formkit:eye"
width="15"
height="15"
/>{" "}
{image.clickCount}
</p>
</div>
<p className="text-sm lg:text-base font-semibold text-black dark:text-white line-clamp-3">
{image?.title}
</p>
</div>
</Link>
</CardContent>
</Card>
))}
</div>
) : (
<div className="flex justify-center items-center py-10">
<Image
src="/assets/empty-data.png"
alt="empty"
width={200}
height={200}
/>
</div>
)}
{totalPage > 1 && (
<LandingPagination
table={table}
totalData={totalData}
totalPage={totalPage}
/>
)}
</Reveal>
</div>
</div>
</div>
);
}
// import AllContentPage from "@/components/landing-page/all-content-page";
// const regions = [
// { name: "Polda Aceh", slug: "aceh", logo: "/logo/polda/polda-aceh.png" },
// { name: "Polda Bali", slug: "bali", logo: "/logo/polda/polda-bali.png" },
// {
// name: "Polda Bangka Belitung",
// slug: "bangka-belitung",
// logo: "/logo/polda/polda-bangka-belitung.png",
// },
// {
// name: "Polda Banten",
// slug: "banten",
// logo: "/logo/polda/polda-banten.png",
// },
// {
// name: "Polda Bengkulu",
// slug: "bengkulu",
// logo: "/logo/polda/polda-bengkulu.png",
// },
// {
// name: "Polda DIY",
// slug: "jogja",
// logo: "/logo/polda/polda-jogja.png",
// },
// {
// name: "Polda Gorontalo",
// slug: "gorontalo",
// logo: "/logo/polda/polda-gorontalo.png",
// },
// { name: "Polda Jambi", slug: "jambi", logo: "/logo/polda/polda-jambi.png" },
// {
// name: "Polda Jawa Barat",
// slug: "jawa-barat",
// logo: "/logo/polda/polda-jawa-barat.png",
// },
// {
// name: "Polda Jawa Tengah",
// slug: "jawa-tengah",
// logo: "/logo/polda/polda-jawa-tengah.png",
// },
// {
// name: "Polda Jawa Timur",
// slug: "jawa-timur",
// logo: "/logo/polda/polda-jawa-timur.png",
// },
// {
// name: "Polda Kalimantan Barat",
// slug: "kalimantan-barat",
// logo: "/logo/polda/polda-kalimantan-barat.png",
// },
// {
// name: "Polda Kalimantan Selatan",
// slug: "kalimantan-selatan",
// logo: "/logo/polda/polda-kalimantan-selatan.png",
// },
// {
// name: "Polda Kalimantan Tengah",
// slug: "kalimantan-tengah",
// logo: "/logo/polda/polda-kalimantan-tengah.png",
// },
// {
// name: "Polda Kalimantan Timur",
// slug: "kalimantan-timur",
// logo: "/logo/polda/polda-kalimantan-timur.png",
// },
// {
// name: "Polda Kalimantan Utara",
// slug: "kalimantan-utara",
// logo: "/logo/polda/polda-kalimantan-utara.png",
// },
// {
// name: "Polda Kepulauan Riau",
// slug: "kepulauan-riau",
// logo: "/logo/polda/polda-kepulauan-riau.png",
// },
// {
// name: "Polda Lampung",
// slug: "lampung",
// logo: "/logo/polda/polda-lampung.png",
// },
// {
// name: "Polda Maluku",
// slug: "maluku",
// logo: "/logo/polda/polda-maluku.png",
// },
// {
// name: "Polda Maluku Utara",
// slug: "maluku-utara",
// logo: "/logo/polda/polda-maluku-utara.png",
// },
// {
// name: "Polda Metro Jaya",
// slug: "metro-jaya",
// logo: "/logo/polda/polda-metro-jaya.png",
// },
// {
// name: "Polda NTB",
// slug: "ntb",
// logo: "/logo/polda/polda-ntb.png",
// },
// {
// name: "Polda NTT",
// slug: "ntt",
// logo: "/logo/polda/polda-ntt.png",
// },
// { name: "Polda Papua", slug: "papua", logo: "/logo/polda/polda-papua.png" },
// {
// name: "Polda Papua Barat",
// slug: "papua-barat",
// logo: "/logo/polda/polda-papua-barat.png",
// },
// {
// name: "Polda Papua Barat Daya",
// slug: "papua-barat-daya",
// logo: "/logo/polda/polda-papua-barat-daya.png",
// },
// {
// name: "Polda Papua Tengah",
// slug: "papua-tengah",
// logo: "/logo/polda/polda-papua-tengah.png",
// },
// { name: "Polda Riau", slug: "riau", logo: "/logo/polda/polda-riau.png" },
// {
// name: "Polda Sulawesi Barat",
// slug: "sulawesi-barat",
// logo: "/logo/polda/polda-sulawesi-barat.png",
// },
// {
// name: "Polda Sulawesi Selatan",
// slug: "sulawesi-selatan",
// logo: "/logo/polda/polda-sulawesi-selatan.png",
// },
// {
// name: "Polda Sulawesi Tengah",
// slug: "sulawesi-tengah",
// logo: "/logo/polda/polda-sulawesi-tengah.png",
// },
// {
// name: "Polda Sulawesi Tenggara",
// slug: "sulawesi-tenggara",
// logo: "/logo/polda/polda-sulawesi-tenggara.png",
// },
// {
// name: "Polda Sulawesi Utara",
// slug: "sulawesi-utara",
// logo: "/logo/polda/polda-sulawesi-utara.png",
// },
// {
// name: "Polda Sumatera Barat",
// slug: "sumatera-barat",
// logo: "/logo/polda/polda-sumatera-barat.png",
// },
// {
// name: "Polda Sumatera Selatan",
// slug: "sumatera-selatan",
// logo: "/logo/polda/polda-sumatera-selatan.png",
// },
// {
// name: "Polda Sumatera Utara",
// slug: "sumatera-utara",
// logo: "/logo/polda/polda-sumatera-utara.png",
// },
// // {
// // name: "Satuan Kerja POLRI",
// // slug: "satker-polri",
// // logo: "/logo/satker/SATUAN-KERJA-POLRI.png",
// // },
// // {
// // name: "Internasional",
// // slug: "internasional",
// // logo: "/assets/polda/internasional.png",
// // },
// ];
// export default function PoldaAllImagePage() {
// return (
// <AllContentPage
// typeId="1"
// title="Semua Foto per Polda"
// basePath="image"
// mode="polda"
// dataList={regions}
// />
// );
// }

4
app/[locale]/(public)/(polda)/polda/[polda_name]/video/filter/page.tsx
View File

@ -82,7 +82,7 @@ const FilterPage = () => {
const [monthYearFilter, setMonthYearFilter] = useState<any>();
const [searchTitle, setSearchTitle] = useState<string>("");
const [sortByOpt, setSortByOpt] = useState<any>(
sortBy === "popular" ? "favorite" : "createdAt"
sortBy === "popular" ? "clickCount" : "createdAt"
);
const isRegional = asPath?.includes("regional");
const isSatker = asPath?.includes("satker");
@ -445,7 +445,7 @@ const FilterPage = () => {
if (e.target.value == "terbaru") {
setSortByOpt("createdAt");
} else {
setSortByOpt("favorite");
setSortByOpt("clickCount");
}
setChange(!change);

987
app/[locale]/(public)/(polda)/polda/[polda_name]/video/regional/page.tsx
View File

@ -1,987 +0,0 @@
"use client";
import React, { useEffect, useState } from "react";
import { Card, CardContent } from "@/components/ui/card";
import { Checkbox } from "@/components/ui/checkbox";
import { Icon } from "@iconify/react/dist/iconify.js";
import {
formatDateToIndonesian,
getOnlyDate,
getOnlyMonthAndYear,
} from "@/utils/globals";
import { useParams, usePathname, useSearchParams } from "next/navigation";
import {
getPublicCategoryData,
getUserLevelListByParent,
listData,
listDataRegional,
} from "@/service/landing/landing";
import {
ColumnDef,
ColumnFiltersState,
PaginationState,
SortingState,
VisibilityState,
getCoreRowModel,
getFilteredRowModel,
getPaginationRowModel,
getSortedRowModel,
useReactTable,
} from "@tanstack/react-table";
import LandingPagination from "@/components/landing-page/pagination";
import { Reveal } from "@/components/landing-page/Reveal";
import { Link, useRouter } from "@/i18n/routing";
import { Input } from "@/components/ui/input";
import ReactDatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
import { close, loading } from "@/config/swal";
import { useTranslations } from "next-intl";
import ImageBlurry from "@/components/ui/image-blurry";
import { Skeleton } from "@/components/ui/skeleton";
import Image from "next/image";
const columns: ColumnDef<any>[] = [
{
accessorKey: "no",
header: "No",
cell: ({ row }) => <span>{row.getValue("no")}</span>,
},
];
export default function FilterPage() {
const router = useRouter();
const asPath = usePathname();
const params = useParams();
const searchParams = useSearchParams();
const locale = params?.locale;
const t = useTranslations("FilterPage");
const [isLoading, setIsLoading] = useState(true);
const [videoData, setVideoData] = useState<any[]>([]);
const [totalData, setTotalData] = useState<number>(1);
const [totalPage, setTotalPage] = useState<number>(1);
const [sorting, setSorting] = useState<SortingState>([]);
const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({});
const [rowSelection, setRowSelection] = useState({});
const [pagination, setPagination] = useState<PaginationState>({
pageIndex: 0,
pageSize: 10,
});
const [page, setPage] = useState(1);
const [totalContent, setTotalContent] = useState(0);
const [change, setChange] = useState(false);
const sortBy = searchParams?.get("sortBy");
const title = searchParams?.get("title");
const categorie = searchParams?.get("category");
const group = searchParams?.get("group");
const [categoryFilter, setCategoryFilter] = useState<any[]>([]);
const [monthYearFilter, setMonthYearFilter] = useState<any>();
const [searchTitle, setSearchTitle] = useState<string>("");
const [sortByOpt, setSortByOpt] = useState<any>(
sortBy === "popular" ? "favorite" : "createdAt"
);
const [formatFilter, setFormatFilter] = useState<any[]>([]);
const pages = page ? page - 1 : 0;
const [startDateString, setStartDateString] = useState<any>();
const [endDateString, setEndDateString] = useState<any>();
const [dateRange, setDateRange] = useState<any>([null, null]);
const [handleClose, setHandleClose] = useState(false);
const [categories, setCategories] = useState<any[]>([]);
const [isFilterOpen, setIsFilterOpen] = useState(true);
const poldaName = params?.polda_name;
const satkerName = params?.satker_name;
let prefixPath = poldaName
? `/polda/${poldaName}`
: satkerName
? `/satker/${satkerName}`
: "";
// === INIT ===
useEffect(() => {
const timer = setTimeout(() => setIsLoading(false), 1200);
return () => clearTimeout(timer);
}, []);
useEffect(() => {
const pageFromUrl = searchParams?.get("page");
if (pageFromUrl) setPage(Number(pageFromUrl));
}, [searchParams]);
useEffect(() => {
if (categorie) {
setCategoryFilter(
categorie?.split("&")?.length > 1 ? categorie?.split("&") : [categorie]
);
}
}, [categorie]);
useEffect(() => {
fetchCategories(categoryPage);
}, []);
const fetchCategories = async (pageNumber: number) => {
const groupParam =
poldaName && poldaName.length > 1
? poldaName
: satkerName && satkerName.length > 1
? "satker-" + satkerName
: "";
const isInt = locale === "en";
const response = await getPublicCategoryData(
groupParam,
"",
isInt,
pageNumber
); // halaman 1-based
const content = response?.data?.data?.content || [];
const total = response?.data?.data?.totalPages || 1;
setCategories(content);
setCategoryTotalPages(total);
};
useEffect(() => {
if (asPath?.includes("/regional")) getDataRegional();
else getDataAll();
}, [
asPath,
monthYearFilter,
page,
sortBy,
sortByOpt,
title,
startDateString,
endDateString,
categorie,
formatFilter,
]);
async function getDataAll() {
const filter =
categoryFilter?.length > 0
? categoryFilter?.sort().join(",")
: categorie || "";
const name = title || "";
const format = formatFilter?.length > 0 ? formatFilter.join(",") : "";
loading();
const response = await listData(
"2",
name,
filter,
12,
pages,
sortByOpt,
format,
"",
"",
startDateString,
endDateString,
monthYearFilter
? getOnlyMonthAndYear(monthYearFilter)?.split("/")[0]?.replace("", "")
: "",
monthYearFilter
? getOnlyMonthAndYear(monthYearFilter)?.split("/")[1]
: "",
locale == "en" ? true : false
);
close();
const data = response?.data?.data;
setVideoData(data?.content || []);
setTotalData(data?.totalElements || 0);
setTotalPage(data?.totalPages || 1);
setTotalContent(data?.totalElements || 0);
}
async function getDataRegional() {
const filter =
categoryFilter?.length > 0
? categoryFilter?.sort().join(",")
: categorie || "";
const name = title || "";
const format = formatFilter?.length > 0 ? formatFilter.join(",") : "";
loading();
const response = await listDataRegional(
"2",
name,
filter,
format,
"",
startDateString,
endDateString,
monthYearFilter
? getOnlyMonthAndYear(monthYearFilter)?.split("/")[0]?.replace("", "")
: "",
monthYearFilter
? getOnlyMonthAndYear(monthYearFilter)?.split("/")[1]
: "",
12,
pages,
sortByOpt
);
close();
const data = response?.data?.data;
setVideoData(data?.content || []);
setTotalData(data?.totalElements || 0);
setTotalPage(data?.totalPages || 1);
setTotalContent(data?.totalElements || 0);
}
const handleCategoryFilter = (e: boolean, id: string) => {
let filter = [...categoryFilter];
if (e) filter.push(String(id));
else filter = filter.filter((item) => item !== String(id));
router.push(`?category=${filter.join("&")}`);
};
const handleFormatFilter = (e: boolean, id: string) => {
let filter = [...formatFilter];
if (e) filter.push(id);
else filter = filter.filter((item) => item !== id);
setFormatFilter(filter);
};
const handleSorting = (e: any) => {
const value = e.target.value;
setSortByOpt(value === "latest" ? "createdAt" : "favorite");
};
const handleDeleteDate = () => {
setDateRange([null, null]);
setStartDateString("");
setEndDateString("");
setHandleClose(false);
};
const handleKeyUp = () => {
if (!searchTitle) router.push("?title=");
else router.push(`?title=${searchTitle.toLowerCase()}`);
};
// === REACT TABLE ===
const table = useReactTable({
data: videoData,
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,
},
});
const [calenderState, setCalenderState] = useState(false);
const [categoryPage, setCategoryPage] = useState(1);
const [categoryTotalPages, setCategoryTotalPages] = useState(1);
let typingTimer: any;
const cleanCheckbox = () => {
setCategoryFilter([]);
setFormatFilter([]);
router.push(`?category=&title=`);
setDateRange([null, null]);
setMonthYearFilter(null);
setChange(!change);
};
const handleKeyDown = () => {
clearTimeout(typingTimer);
};
return (
<div className="flex flex-col">
{/* Header */}
<div className="flex flex-row items-start gap-3 py-10 px-4 lg:px-20 bg-[#f7f7f7] dark:bg-black">
<p>{t("video", { defaultValue: "Video" })}</p> {">"}
<p>
<span className="font-bold">
{t("allVideo", { defaultValue: "All Video" })}
</span>
</p>
<p className="font-bold">|</p>
{!title ? (
<p>
{`${t("thereIs", { defaultValue: "Terdapat" })} ${totalContent} ${t(
"downloadablevideo",
{ defaultValue: "artikel berisi Foto yang dapat diunduh" }
)}`}
</p>
) : (
<p>
{t("search-results", { defaultValue: "Hasil pencarian untuk" })}{" "}
<span className="font-bold">"{title}"</span>
</p>
)}
</div>
<div className="flex flex-col lg:flex-row gap-6 pl-4 lg:pl-20 py-4">
<div className="h-fit min-w-full lg:min-w-[280px] max-w-full lg:max-w-[300px] bg-[#f7f7f7] dark:bg-black p-4 rounded-lg shadow-md">
<h2 className="text-lg font-semibold mb-4 flex items-center gap-1">
<Icon icon="stash:filter-light" fontSize={30} />
Filter
</h2>
<div className="border-t border-black my-4 dark:border-white"></div>
<div className="space-y-6">
<div>
<label
htmlFor="search"
className="block text-sm font-medium text-gray-700 dark:text-white"
>
{t("search", { defaultValue: "Search" })}
</label>
<Input
value={searchTitle}
onChange={(e) => setSearchTitle(e.target.value)}
onKeyUp={handleKeyUp}
onKeyDown={handleKeyDown}
type="text"
id="search"
placeholder={t("searchTitle", { defaultValue: "Search Title" })}
className="mt-1 w-full border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 dark:text-white">
{t("monthYear", { defaultValue: "Month Year" })}
</label>
<ReactDatePicker
selected={monthYearFilter}
className="mt-1 w-full text-xs border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
onChange={(date) => setMonthYearFilter(date)}
dateFormat="MM | yyyy"
placeholderText={t("selectYear", {
defaultValue: "Select Year",
})}
showMonthYearPicker
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 dark:text-white">
{t("date", { defaultValue: "Date" })}
</label>
<div className="flex flex-row justify justify-between gap-2">
<ReactDatePicker
selectsRange
className="mt-1 w-full text-sm border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
startDate={dateRange[0]}
endDate={dateRange[1]}
onChange={(update) => {
setDateRange(update);
}}
placeholderText={t("selectDate", {
defaultValue: "Select Date",
})}
onCalendarClose={() => setCalenderState(!calenderState)}
/>
<div className="flex items-center">
{handleClose ? (
<Icon
icon="carbon:close-filled"
onClick={handleDeleteDate}
width="20"
inline
color="#216ba5"
/>
) : (
""
)}
</div>
</div>
</div>
<div>
<h3 className="text-sm font-medium text-gray-700 dark:text-white">
{t("categories", { defaultValue: "Categories" })}
</h3>
<ul className="mt-2 space-y-2">
{categories.map((category: any) => (
<li key={category?.id}>
<label
className="inline-flex items-center"
htmlFor={`${category.id}`}
>
<Checkbox
id={`${category.id}`}
value={category.id}
checked={categoryFilter.includes(String(category.id))}
onCheckedChange={(e) =>
handleCategoryFilter(Boolean(e), category.id)
}
/>
<span className="ml-2 text-gray-700 dark:text-white">
{category?.name}
</span>
</label>
</li>
))}
</ul>
{/* ⬇️ Pagination kategori (rata sejajar) */}
<div className="mt-4 flex justify-center items-center gap-2 flex-wrap">
{/* Tombol Prev */}
<button
onClick={() =>
setCategoryPage((prev) => Math.max(prev - 1, 1))
}
disabled={categoryPage === 1}
className="px-2 py-1 border rounded disabled:opacity-50 flex items-center justify-center"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="m13.15 16.15l-3.625-3.625q-.125-.125-.175-.25T9.3 12t.05-.275t.175-.25L13.15 7.85q.075-.075.163-.112T13.5 7.7q.2 0 .35.138T14 8.2v7.6q0 .225-.15.363t-.35.137q-.05 0-.35-.15"
/>
</svg>
</button>
{(() => {
const maxVisible = 4;
let startPage = Math.max(
1,
Math.min(
categoryPage - Math.floor(maxVisible / 2),
categoryTotalPages - maxVisible + 1
)
);
const endPage = Math.min(
categoryTotalPages,
startPage + maxVisible - 1
);
const visiblePages = [];
for (let i = startPage; i <= endPage; i++) {
visiblePages.push(i);
}
return visiblePages.map((pageNum) => (
<button
key={pageNum}
onClick={() => setCategoryPage(pageNum)}
className={`px-3 py-1 border rounded text-sm transition-colors ${
categoryPage === pageNum
? "bg-[#bb3523] text-white"
: "bg-white dark:bg-gray-800"
}`}
>
{pageNum}
</button>
));
})()}
{/* Tombol Next */}
<button
onClick={() =>
setCategoryPage((prev) =>
Math.min(prev + 1, categoryTotalPages)
)
}
disabled={categoryPage === categoryTotalPages}
className="px-2 py-1 border rounded disabled:opacity-50 flex items-center justify-center"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="M10.5 16.3q-.2 0-.35-.137T10 15.8V8.2q0-.225.15-.362t.35-.138q.05 0 .35.15l3.625 3.625q.125.125.175.25t.05.275t-.05.275t-.175.25L10.85 16.15q-.075.075-.162.113t-.188.037"
/>
</svg>
</button>
</div>
</div>
{/* <div>
<h3 className="text-sm font-medium text-gray-700 dark:text-white">
{t("categories", { defaultValue: "Categories" })}
</h3>
<ul className="mt-2 space-y-2">
{categories.map((category: any) => (
<li key={category?.id}>
<label
className="inline-flex items-center"
htmlFor={`${category.id}`}
>
<Checkbox
id={`${category.id}`}
value={category.id}
checked={categoryFilter.includes(String(category.id))}
onCheckedChange={(e) =>
handleCategoryFilter(Boolean(e), category.id)
}
/>
<span className="ml-2 text-gray-700 dark:text-white">
{category?.name}
</span>
</label>
</li>
))}
<div className="mt-4 flex gap-2 justify-center items-center">
<button
onClick={() =>
setCategoryPage((prev) => Math.max(prev - 1, 1))
}
disabled={categoryPage === 1}
className="px-3 py-1 border rounded disabled:opacity-50"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="m13.15 16.15l-3.625-3.625q-.125-.125-.175-.25T9.3 12t.05-.275t.175-.25L13.15 7.85q.075-.075.163-.112T13.5 7.7q.2 0 .35.138T14 8.2v7.6q0 .225-.15.363t-.35.137q-.05 0-.35-.15"
/>
</svg>
</button>
{Array.from({ length: categoryTotalPages }, (_, i) => (
<button
key={i}
onClick={() => setCategoryPage(i + 1)}
className={`px-3 py-1 border rounded ${
categoryPage === i + 1 ? "bg-[#bb3523] text-white" : ""
}`}
>
{i + 1}
</button>
))}
<button
onClick={() =>
setCategoryPage((prev) =>
Math.min(prev + 1, categoryTotalPages)
)
}
disabled={categoryPage === categoryTotalPages}
className="px-3 py-1 border rounded disabled:opacity-50"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="M10.5 16.3q-.2 0-.35-.137T10 15.8V8.2q0-.225.15-.362t.35-.138q.05 0 .35.15l3.625 3.625q.125.125.175.25t.05.275t-.05.275t-.175.25L10.85 16.15q-.075.075-.162.113t-.188.037"
/>
</svg>
</button>
</div>
</ul>
</div> */}
{/* Garis */}
<div className="border-t border-black my-4 dark:border-white"></div>
{/* Garis */}
<div>
<h3 className="text-sm font-medium text-gray-700 dark:text-white">
Format
</h3>
<ul className="mt-2 space-y-2">
<li>
<label className="inline-flex items-center">
<Checkbox
id="mk4"
value="mk4"
checked={formatFilter.includes("mk4")}
onCheckedChange={(e) =>
handleFormatFilter(Boolean(e), "mk4")
}
/>
<span className="ml-2 text-gray-700 dark:text-white">
MK4
</span>
</label>
</li>
<li>
<label className="inline-flex items-center">
<Checkbox
id="mov"
value="mov"
checked={formatFilter.includes("mov")}
onCheckedChange={(e) =>
handleFormatFilter(Boolean(e), "mov")
}
/>
<span className="ml-2 text-gray-700 dark:text-white">
MOV
</span>
</label>
</li>
<li>
<label className="inline-flex items-center">
<Checkbox
id="mp4"
value="mp4"
checked={formatFilter.includes("mp4")}
onCheckedChange={(e) =>
handleFormatFilter(Boolean(e), "mp4")
}
/>
<span className="ml-2 text-gray-700 dark:text-white">
MP4
</span>
</label>
</li>
<li>
<label className="inline-flex items-center">
<Checkbox
id="avi"
value="avi"
checked={formatFilter.includes("avi")}
onCheckedChange={(e) =>
handleFormatFilter(Boolean(e), "avi")
}
/>
<span className="ml-2 text-gray-700 dark:text-white">
AVI
</span>
</label>
</li>
<li>
<label className="inline-flex items-center">
<Checkbox
id="wmv"
value="wmv"
checked={formatFilter.includes("wmv")}
onCheckedChange={(e) =>
handleFormatFilter(Boolean(e), "wmv")
}
/>
<span className="ml-2 text-gray-700 dark:text-white">
WMV
</span>
</label>
</li>
</ul>
</div>
<div className="border-t border-black dark:border-white my-4"></div>
<div className="text-center">
<a
onClick={cleanCheckbox}
className="text-[#bb3523] cursor-pointer"
>
<b>Reset Filter</b>
</a>
</div>
</div>
</div>
{/* CONTENT */}
<div className="w-full pr-4 lg:pr-16 pb-4">
<Reveal>
<div className="flex flex-col items-end mb-4">
<h2 className="text-lg font-semibold">Sort By</h2>
<select
defaultValue={sortBy == "popular" ? "popular" : "latest"}
onChange={handleSorting}
className="border rounded-md py-2 px-3"
>
<option value="latest">Latest</option>
<option value="popular">Most Popular</option>
</select>
</div>
{isLoading ? (
<div className="flex flex-col gap-4">
<Skeleton className="h-[200px] w-full rounded-xl" />
<Skeleton className="h-[200px] w-full rounded-xl" />
</div>
) : videoData?.length > 0 ? (
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
{videoData.map((video: any) => (
<Card
key={video?.id}
className="hover:scale-105 transition-transform duration-300"
>
<CardContent className="flex flex-col p-0">
<Link
href={`${prefixPath}/video/detail/${video?.slug
?.split("/")
.pop()}`}
// href={`/video/detail/${video?.slug}`}
>
<div className="h-60 bg-[#e9e9e9]">
<ImageBlurry
src={
video?.smallThumbnailLink || video?.thumbnailLink
}
alt={video?.title}
style={{
objectFit: "cover",
width: "100%",
height: "100%",
}}
/>
</div>
<div className="p-4">
<div className="flex flex-row justify-between mb-1">
<p className="text-[9px] font-bold text-[#bb3523]">
{video?.categoryName?.toUpperCase() ??
"Giat Pimpinan"}
</p>
<p className="flex flex-row items-center text-[9px] gap-1 text-gray-600">
{formatDateToIndonesian(
new Date(video?.createdAt)
)}{" "}
{video?.timezone ?? "WIB"} |
<Icon
icon="formkit:eye"
width="15"
height="15"
/>{" "}
{video.clickCount}
</p>
</div>
<p className="text-sm lg:text-base font-semibold text-black dark:text-white line-clamp-3">
{video?.title}
</p>
</div>
</Link>
</CardContent>
</Card>
))}
</div>
) : (
<div className="flex justify-center items-center py-10">
<Image
src="/assets/empty-data.png"
alt="empty"
width={200}
height={200}
/>
</div>
)}
{totalPage > 1 && (
<LandingPagination
table={table}
totalData={totalData}
totalPage={totalPage}
/>
)}
</Reveal>
</div>
</div>
</div>
);
}
// import AllContentPage from "@/components/landing-page/all-content-page";
// const regions = [
// { name: "Polda Aceh", slug: "aceh", logo: "/logo/polda/polda-aceh.png" },
// { name: "Polda Bali", slug: "bali", logo: "/logo/polda/polda-bali.png" },
// {
// name: "Polda Bangka Belitung",
// slug: "bangka-belitung",
// logo: "/logo/polda/polda-bangka-belitung.png",
// },
// {
// name: "Polda Banten",
// slug: "banten",
// logo: "/logo/polda/polda-banten.png",
// },
// {
// name: "Polda Bengkulu",
// slug: "bengkulu",
// logo: "/logo/polda/polda-bengkulu.png",
// },
// {
// name: "Polda DIY",
// slug: "jogja",
// logo: "/logo/polda/polda-jogja.png",
// },
// {
// name: "Polda Gorontalo",
// slug: "gorontalo",
// logo: "/logo/polda/polda-gorontalo.png",
// },
// { name: "Polda Jambi", slug: "jambi", logo: "/logo/polda/polda-jambi.png" },
// {
// name: "Polda Jawa Barat",
// slug: "jawa-barat",
// logo: "/logo/polda/polda-jawa-barat.png",
// },
// {
// name: "Polda Jawa Tengah",
// slug: "jawa-tengah",
// logo: "/logo/polda/polda-jawa-tengah.png",
// },
// {
// name: "Polda Jawa Timur",
// slug: "jawa-timur",
// logo: "/logo/polda/polda-jawa-timur.png",
// },
// {
// name: "Polda Kalimantan Barat",
// slug: "kalimantan-barat",
// logo: "/logo/polda/polda-kalimantan-barat.png",
// },
// {
// name: "Polda Kalimantan Selatan",
// slug: "kalimantan-selatan",
// logo: "/logo/polda/polda-kalimantan-selatan.png",
// },
// {
// name: "Polda Kalimantan Tengah",
// slug: "kalimantan-tengah",
// logo: "/logo/polda/polda-kalimantan-tengah.png",
// },
// {
// name: "Polda Kalimantan Timur",
// slug: "kalimantan-timur",
// logo: "/logo/polda/polda-kalimantan-timur.png",
// },
// {
// name: "Polda Kalimantan Utara",
// slug: "kalimantan-utara",
// logo: "/logo/polda/polda-kalimantan-utara.png",
// },
// {
// name: "Polda Kepulauan Riau",
// slug: "kepulauan-riau",
// logo: "/logo/polda/polda-kepulauan-riau.png",
// },
// {
// name: "Polda Lampung",
// slug: "lampung",
// logo: "/logo/polda/polda-lampung.png",
// },
// {
// name: "Polda Maluku",
// slug: "maluku",
// logo: "/logo/polda/polda-maluku.png",
// },
// {
// name: "Polda Maluku Utara",
// slug: "maluku-utara",
// logo: "/logo/polda/polda-maluku-utara.png",
// },
// {
// name: "Polda Metro Jaya",
// slug: "metro-jaya",
// logo: "/logo/polda/polda-metro-jaya.png",
// },
// {
// name: "Polda NTB",
// slug: "ntb",
// logo: "/logo/polda/polda-ntb.png",
// },
// {
// name: "Polda NTT",
// slug: "ntt",
// logo: "/logo/polda/polda-ntt.png",
// },
// { name: "Polda Papua", slug: "papua", logo: "/logo/polda/polda-papua.png" },
// {
// name: "Polda Papua Barat",
// slug: "papua-barat",
// logo: "/logo/polda/polda-papua-barat.png",
// },
// {
// name: "Polda Papua Barat Daya",
// slug: "papua-barat-daya",
// logo: "/logo/polda/polda-papua-barat-daya.png",
// },
// {
// name: "Polda Papua Tengah",
// slug: "papua-tengah",
// logo: "/logo/polda/polda-papua-tengah.png",
// },
// { name: "Polda Riau", slug: "riau", logo: "/logo/polda/polda-riau.png" },
// {
// name: "Polda Sulawesi Barat",
// slug: "sulawesi-barat",
// logo: "/logo/polda/polda-sulawesi-barat.png",
// },
// {
// name: "Polda Sulawesi Selatan",
// slug: "sulawesi-selatan",
// logo: "/logo/polda/polda-sulawesi-selatan.png",
// },
// {
// name: "Polda Sulawesi Tengah",
// slug: "sulawesi-tengah",
// logo: "/logo/polda/polda-sulawesi-tengah.png",
// },
// {
// name: "Polda Sulawesi Tenggara",
// slug: "sulawesi-tenggara",
// logo: "/logo/polda/polda-sulawesi-tenggara.png",
// },
// {
// name: "Polda Sulawesi Utara",
// slug: "sulawesi-utara",
// logo: "/logo/polda/polda-sulawesi-utara.png",
// },
// {
// name: "Polda Sumatera Barat",
// slug: "sumatera-barat",
// logo: "/logo/polda/polda-sumatera-barat.png",
// },
// {
// name: "Polda Sumatera Selatan",
// slug: "sumatera-selatan",
// logo: "/logo/polda/polda-sumatera-selatan.png",
// },
// {
// name: "Polda Sumatera Utara",
// slug: "sumatera-utara",
// logo: "/logo/polda/polda-sumatera-utara.png",
// },
// // {
// // name: "Satuan Kerja POLRI",
// // slug: "satker-polri",
// // logo: "/logo/satker/SATUAN-KERJA-POLRI.png",
// // },
// // {
// // name: "Internasional",
// // slug: "internasional",
// // logo: "/assets/polda/internasional.png",
// // },
// ];
// export default function PoldaAllVideoPage() {
// return (
// <AllContentPage
// typeId="2"
// title="Semua Konten Audio Visual per Polda"
// basePath="video"
// mode="polda"
// dataList={regions}
// />
// );
// }

4
app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/latest-news.tsx
View File

@ -85,7 +85,7 @@ const LatestNews = (props: { type: string }) => {
// useEffect(() => {
// async function fetchCategories() {
// const url = "https://new.netidhub.com/api/csrf";
// const url = "https://netidhub.com/api/csrf";
// try {
// const response = await fetch(url);
@ -119,7 +119,7 @@ const LatestNews = (props: { type: string }) => {
// }
async function fetchData() {
const sortBy = poldaName === "popular" ? "favorite" : "createdAt";
const sortBy = poldaName === "popular" ? "clickCount" : "createdAt";
const res = await listData("1", "", "", 5, 0, sortBy, "", "", poldaName);
let data = res?.data?.data?.content;
setContent(data);

2
app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/national-news.tsx
View File

@ -82,7 +82,7 @@ const NationalNews = () => {
// useEffect(() => {
// async function fetchCategories() {
// const url = "https://new.netidhub.com/api/csrf";
// const url = "https://netidhub.com/api/csrf";
// try {
// const response = await fetch(url);

2
app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/popular-news.tsx
View File

@ -23,7 +23,7 @@ const PopularNews = () => {
useEffect(() => {
async function fetchCategories() {
const url = "https://new.netidhub.com/api/csrf";
const url = "https://netidhub.com/api/csrf";
try {
const response = await fetch(url);

2
app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/regional-news.tsx
View File

@ -75,7 +75,7 @@ const RegionalNews = () => {
// useEffect(() => {
// async function fetchCategories() {
// const url = "https://new.netidhub.com/api/csrf";
// const url = "https://netidhub.com/api/csrf";
// try {
// const response = await fetch(url);

6
app/[locale]/(public)/(polda)/tbnews/[polda_name]/image/detail/[slug]/page.tsx
View File

@ -868,7 +868,7 @@ const DetailInfo = () => {
onClick={() =>
handleShare(
"fb",
`https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fnew.netidhub.com%2F${typeString}%2Fdetail%2F${content?.id}&quote=${content?.title}`
`https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fmediahub.polri.go.id%2F${typeString}%2Fdetail%2F${content?.id}&quote=${content?.title}`
)
}
>
@ -883,7 +883,7 @@ const DetailInfo = () => {
onClick={() =>
handleShare(
"tw",
`https://twitter.com/share?url=https%3A%2F%2Fnew.netidhub.com%2F${typeString}%2Fdetail%2F${content?.id}&text=${content?.title}`
`https://twitter.com/share?url=https%3A%2F%2Fmediahub.polri.go.id%2F${typeString}%2Fdetail%2F${content?.id}&text=${content?.title}`
)
}
>
@ -898,7 +898,7 @@ const DetailInfo = () => {
onClick={() =>
handleShare(
"wa",
`text=${content?.title}%0D%0A%0D%0Ahttps%3A%2F%2Fnew.netidhub.com%2F${typeString}%2Fdetail%2F${content?.id}`
`text=${content?.title}%0D%0A%0D%0Ahttps%3A%2F%2Fmediahub.polri.go.id%2F${typeString}%2Fdetail%2F${content?.id}`
)
}
>

6
app/[locale]/(public)/(satker)/satker/[satker_name]/all/filter/page.tsx
View File

@ -68,7 +68,7 @@ export default function FilterPage() {
const [monthYearFilter, setMonthYearFilter] = useState<any>();
const [searchTitle, setSearchTitle] = useState<string>("");
const [sortByOpt, setSortByOpt] = useState<any>(
sortBy === "popular" ? "favorite" : "createdAt"
sortBy === "popular" ? "clickCount" : "createdAt"
);
const isRegional = asPath?.includes("regional");
const isSatker = asPath?.includes("satker");
@ -97,7 +97,7 @@ export default function FilterPage() {
setSearchTitle(title);
setCategoryFilter(category ? category.split("&") : []);
setSortByOpt(sortBy === "popular" ? "favorite" : "createdAt");
setSortByOpt(sortBy === "popular" ? "clickCount" : "createdAt");
}, [searchParams]);
useEffect(() => {
@ -381,7 +381,7 @@ export default function FilterPage() {
if (e.target.value == "terbaru") {
setSortByOpt("createdAt");
} else {
setSortByOpt("favorite");
setSortByOpt("clickCount");
}
setChange(!change);

4
app/[locale]/(public)/(satker)/satker/[satker_name]/audio/filter/page.tsx
View File

@ -90,7 +90,7 @@ const FilterPage = () => {
const [monthYearFilter, setMonthYearFilter] = useState<any>();
const [searchTitle, setSearchTitle] = useState<string>("");
const [sortByOpt, setSortByOpt] = useState<any>(
sortBy === "popular" ? "favorite" : "createdAt"
sortBy === "popular" ? "clickCount" : "createdAt"
);
const isRegional = asPath?.includes("regional");
const isSatker = asPath?.includes("satker");
@ -435,7 +435,7 @@ const FilterPage = () => {
if (e.target.value == "terbaru") {
setSortByOpt("createdAt");
} else {
setSortByOpt("favorite");
setSortByOpt("clickCount");
}
setChange(!change);

4
app/[locale]/(public)/(satker)/satker/[satker_name]/document/filter/page.tsx
View File

@ -82,7 +82,7 @@ const FilterPage = () => {
const [monthYearFilter, setMonthYearFilter] = useState<any>();
const [searchTitle, setSearchTitle] = useState<string>("");
const [sortByOpt, setSortByOpt] = useState<any>(
sortBy === "popular" ? "favorite" : "createdAt"
sortBy === "popular" ? "clickCount" : "createdAt"
);
const isRegional = asPath?.includes("regional");
const isSatker = asPath?.includes("satker");
@ -442,7 +442,7 @@ const FilterPage = () => {
if (e.target.value == "terbaru") {
setSortByOpt("createdAt");
} else {
setSortByOpt("favorite");
setSortByOpt("clickCount");
}
setChange(!change);

6
app/[locale]/(public)/(satker)/satker/[satker_name]/image/detail/[slug]/page.tsx
View File

@ -526,7 +526,7 @@ const DetailInfo = () => {
onClick={() =>
handleShare(
"fb",
`https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fnew.netidhub.com%2F${typeString}%2Fdetail%2F${content?.id}&quote=${content?.title}`
`https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fmediahub.polri.go.id%2F${typeString}%2Fdetail%2F${content?.id}&quote=${content?.title}`
)
}
>
@ -541,7 +541,7 @@ const DetailInfo = () => {
onClick={() =>
handleShare(
"tw",
`https://twitter.com/share?url=https%3A%2F%2Fnew.netidhub.com%2F${typeString}%2Fdetail%2F${content?.id}&text=${content?.title}`
`https://twitter.com/share?url=https%3A%2F%2Fmediahub.polri.go.id%2F${typeString}%2Fdetail%2F${content?.id}&text=${content?.title}`
)
}
>
@ -556,7 +556,7 @@ const DetailInfo = () => {
onClick={() =>
handleShare(
"wa",
`text=${content?.title}%0D%0A%0D%0Ahttps%3A%2F%2Fnew.netidhub.com%2F${typeString}%2Fdetail%2F${content?.id}`
`text=${content?.title}%0D%0A%0D%0Ahttps%3A%2F%2Fmediahub.polri.go.id%2F${typeString}%2Fdetail%2F${content?.id}`
)
}
>

4
app/[locale]/(public)/(satker)/satker/[satker_name]/image/filter/page.tsx
View File

@ -83,7 +83,7 @@ const FilterPage = () => {
const [monthYearFilter, setMonthYearFilter] = useState<any>();
const [searchTitle, setSearchTitle] = useState<string>("");
const [sortByOpt, setSortByOpt] = useState<any>(
sortBy === "popular" ? "favorite" : "createdAt"
sortBy === "popular" ? "clickCount" : "createdAt"
);
const isRegional = asPath?.includes("regional");
const isSatker = asPath?.includes("satker");
@ -419,7 +419,7 @@ const FilterPage = () => {
if (e.target.value == "terbaru") {
setSortByOpt("createdAt");
} else {
setSortByOpt("favorite");
setSortByOpt("clickCount");
}
setChange(!change);

6
app/[locale]/(public)/(satker)/satker/[satker_name]/video/detail/[slug]/page.tsx
View File

@ -666,7 +666,7 @@ const DetailVideo = () => {
onClick={() =>
handleShare(
"fb",
`https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fnew.netidhub.com%2F${typeString}%2Fdetail%2F${content?.id}&quote=${content?.title}`
`https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fmediahub.polri.go.id%2F${typeString}%2Fdetail%2F${content?.id}&quote=${content?.title}`
)
}
>
@ -681,7 +681,7 @@ const DetailVideo = () => {
onClick={() =>
handleShare(
"tw",
`https://twitter.com/share?url=https%3A%2F%2Fnew.netidhub.com%2F${typeString}%2Fdetail%2F${content?.id}&text=${content?.title}`
`https://twitter.com/share?url=https%3A%2F%2Fmediahub.polri.go.id%2F${typeString}%2Fdetail%2F${content?.id}&text=${content?.title}`
)
}
>
@ -696,7 +696,7 @@ const DetailVideo = () => {
onClick={() =>
handleShare(
"wa",
`text=${content?.title}%0D%0A%0D%0Ahttps%3A%2F%2Fnew.netidhub.com%2F${typeString}%2Fdetail%2F${content?.id}`
`text=${content?.title}%0D%0A%0D%0Ahttps%3A%2F%2Fmediahub.polri.go.id%2F${typeString}%2Fdetail%2F${content?.id}`
)
}
>

4
app/[locale]/(public)/(satker)/satker/[satker_name]/video/filter/page.tsx
View File

@ -79,7 +79,7 @@ const FilterPage = () => {
const [monthYearFilter, setMonthYearFilter] = useState<any>();
const [searchTitle, setSearchTitle] = useState<string>("");
const [sortByOpt, setSortByOpt] = useState<any>(
sortBy === "popular" ? "favorite" : "createdAt"
sortBy === "popular" ? "clickCount" : "createdAt"
);
const isRegional = asPath?.includes("regional");
const isSatker = asPath?.includes("satker");
@ -434,7 +434,7 @@ const FilterPage = () => {
if (e.target.value == "terbaru") {
setSortByOpt("createdAt");
} else {
setSortByOpt("favorite");
setSortByOpt("clickCount");
}
setChange(!change);

68
app/[locale]/(public)/all/filter/page.tsx
View File

@ -69,7 +69,7 @@ export default function FilterPage() {
const [monthYearFilter, setMonthYearFilter] = useState<any>();
const [searchTitle, setSearchTitle] = useState<string>("");
const [sortByOpt, setSortByOpt] = useState<any>(
sortBy === "popular" ? "favorite" : "createdAt"
sortBy === "popular" ? "clickCount" : "createdAt"
);
const isRegional = asPath?.includes("regional");
const isSatker = asPath?.includes("satker");
@ -98,7 +98,7 @@ export default function FilterPage() {
setSearchTitle(title);
setCategoryFilter(category ? category.split("&") : []);
setSortByOpt(sortBy === "popular" ? "favorite" : "createdAt");
setSortByOpt(sortBy === "popular" ? "clickCount" : "createdAt");
}, [searchParams]);
useEffect(() => {
@ -382,7 +382,7 @@ export default function FilterPage() {
if (e.target.value == "terbaru") {
setSortByOpt("createdAt");
} else {
setSortByOpt("favorite");
setSortByOpt("clickCount");
}
setChange(!change);
@ -569,19 +569,18 @@ export default function FilterPage() {
</label>
</li>
))}
<div className="mt-4 flex justify-center items-center gap-2 flex-wrap">
{/* Tombol Prev */}
<div className="mt-4 flex gap-2 justify-center items-center">
<button
onClick={() =>
setCategoryPage((prev) => Math.max(prev - 1, 1))
}
disabled={categoryPage === 1}
className="px-2 py-1 border rounded disabled:opacity-50 flex items-center justify-center"
className="px-3 py-1 border rounded disabled:opacity-50"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
width="24"
height="24"
viewBox="0 0 24 24"
>
<path
@ -591,41 +590,20 @@ export default function FilterPage() {
</svg>
</button>
{(() => {
const maxVisible = 4;
let startPage = Math.max(
1,
Math.min(
categoryPage - Math.floor(maxVisible / 2),
categoryTotalPages - maxVisible + 1
)
);
const endPage = Math.min(
categoryTotalPages,
startPage + maxVisible - 1
);
{Array.from({ length: categoryTotalPages }, (_, i) => (
<button
key={i}
onClick={() => setCategoryPage(i + 1)}
className={`px-3 py-1 border rounded ${
categoryPage === i + 1
? "bg-[#bb3523] text-white"
: ""
}`}
>
{i + 1}
</button>
))}
const visiblePages = [];
for (let i = startPage; i <= endPage; i++) {
visiblePages.push(i);
}
return visiblePages.map((pageNum) => (
<button
key={pageNum}
onClick={() => setCategoryPage(pageNum)}
className={`px-3 py-1 border rounded text-sm transition-colors ${
categoryPage === pageNum
? "bg-[#bb3523] text-white"
: "bg-white dark:bg-gray-800"
}`}
>
{pageNum}
</button>
));
})()}
{/* Tombol Next */}
<button
onClick={() =>
setCategoryPage((prev) =>
@ -633,12 +611,12 @@ export default function FilterPage() {
)
}
disabled={categoryPage === categoryTotalPages}
className="px-2 py-1 border rounded disabled:opacity-50 flex items-center justify-center"
className="px-3 py-1 border rounded disabled:opacity-50"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
width="24"
height="24"
viewBox="0 0 24 24"
>
<path

118
app/[locale]/(public)/audio/filter/page.tsx
View File

@ -82,7 +82,7 @@ const FilterPage = () => {
const [monthYearFilter, setMonthYearFilter] = useState<any>();
const [searchTitle, setSearchTitle] = useState<string>("");
const [sortByOpt, setSortByOpt] = useState<any>(
sortBy === "popular" ? "favorite" : "createdAt"
sortBy === "popular" ? "clickCount" : "createdAt"
);
const isRegional = asPath?.includes("regional");
const isSatker = asPath?.includes("satker");
@ -437,7 +437,7 @@ const FilterPage = () => {
if (e.target.value == "terbaru") {
setSortByOpt("createdAt");
} else {
setSortByOpt("favorite");
setSortByOpt("clickCount");
}
setChange(!change);
@ -511,8 +511,8 @@ const FilterPage = () => {
)}
</div>
{/* Left */}
<div className="flex flex-col lg:flex-row gap-6 pl-4 lg:pl-20 py-4">
{/* Left */}
<div className="h-fit min-w-full lg:min-w-[280px] max-w-full lg:max-w-[300px] bg-[#f7f7f7] dark:bg-black p-4 rounded-lg shadow-md">
<h2 className="text-lg font-semibold mb-4 flex items-center gap-1">
<Icon icon="stash:filter-light" fontSize={30} />
@ -593,116 +593,6 @@ const FilterPage = () => {
<h3 className="text-sm font-medium text-gray-700 dark:text-white">
{t("categories", { defaultValue: "Categories" })}
</h3>
<ul className="mt-2 space-y-2">
{categories.map((category: any) => (
<li key={category?.id}>
<label
className="inline-flex items-center"
htmlFor={`${category.id}`}
>
<Checkbox
id={`${category.id}`}
value={category.id}
checked={categoryFilter.includes(String(category.id))}
onCheckedChange={(e) =>
handleCategoryFilter(Boolean(e), category.id)
}
/>
<span className="ml-2 text-gray-700 dark:text-white">
{category?.name}
</span>
</label>
</li>
))}
</ul>
{/* ⬇️ Pagination kategori (rata sejajar) */}
<div className="mt-4 flex justify-center items-center gap-2 flex-wrap">
{/* Tombol Prev */}
<button
onClick={() =>
setCategoryPage((prev) => Math.max(prev - 1, 1))
}
disabled={categoryPage === 1}
className="px-2 py-1 border rounded disabled:opacity-50 flex items-center justify-center"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="m13.15 16.15l-3.625-3.625q-.125-.125-.175-.25T9.3 12t.05-.275t.175-.25L13.15 7.85q.075-.075.163-.112T13.5 7.7q.2 0 .35.138T14 8.2v7.6q0 .225-.15.363t-.35.137q-.05 0-.35-.15"
/>
</svg>
</button>
{(() => {
const maxVisible = 4;
let startPage = Math.max(
1,
Math.min(
categoryPage - Math.floor(maxVisible / 2),
categoryTotalPages - maxVisible + 1
)
);
const endPage = Math.min(
categoryTotalPages,
startPage + maxVisible - 1
);
const visiblePages = [];
for (let i = startPage; i <= endPage; i++) {
visiblePages.push(i);
}
return visiblePages.map((pageNum) => (
<button
key={pageNum}
onClick={() => setCategoryPage(pageNum)}
className={`px-3 py-1 border rounded text-sm transition-colors ${
categoryPage === pageNum
? "bg-[#bb3523] text-white"
: "bg-white dark:bg-gray-800"
}`}
>
{pageNum}
</button>
));
})()}
{/* Tombol Next */}
<button
onClick={() =>
setCategoryPage((prev) =>
Math.min(prev + 1, categoryTotalPages)
)
}
disabled={categoryPage === categoryTotalPages}
className="px-2 py-1 border rounded disabled:opacity-50 flex items-center justify-center"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="M10.5 16.3q-.2 0-.35-.137T10 15.8V8.2q0-.225.15-.362t.35-.138q.05 0 .35.15l3.625 3.625q.125.125.175.25t.05.275t-.05.275t-.175.25L10.85 16.15q-.075.075-.162.113t-.188.037"
/>
</svg>
</button>
</div>
</div>
{/* <div>
<h3 className="text-sm font-medium text-gray-700 dark:text-white">
{t("categories", { defaultValue: "Categories" })}
</h3>
<ul className="mt-2 space-y-2">
{categories?.map((category: any) => (
<li key={category?.id}>
@ -780,7 +670,7 @@ const FilterPage = () => {
</button>
</div>
</ul>
</div> */}
</div>
{/* Garis */}
<div className="border-t border-black my-4 dark:border-white"></div>
{/* Garis */}

146
app/[locale]/(public)/content-management/download/page.tsx
View File

@ -284,35 +284,31 @@ const Galery = (props: any) => {
const copyToClip = async (url: any) => {
await navigator.clipboard.writeText(
`https://new.netidhub.com/video/detail/${url}`
`https://mediahub.polri.go.id/video/detail/${url}`
);
setCopySuccess("Copied");
// toast.success("Link Berhasil Di Copy");
};
async function shareToEmail(uploadId: any) {
if (!userRoleId) {
async function shareToEmail() {
if (Number(userRoleId) < 1 || userRoleId == undefined) {
router.push("/auth/login");
return;
} else {
const data = {
mediaUploadId: id?.split("-")?.[0],
email: emailShareList || [emailShareInput],
message: emailMessageInput,
url: window.location.href,
};
loading();
const res = await sendMediaUploadToEmail(data);
if (res?.error) {
error(res.message);
return false;
}
close();
successCallback("Konten Telah Dikirim");
}
const data = {
mediaUploadId: uploadId, // ← FIX: ID valid dari response
email: emailShareList || [emailShareInput],
message: emailMessageInput,
url: window.location.href,
};
loading();
const res = await sendMediaUploadToEmail(data);
if (res?.error) {
error(res.message);
return;
}
close();
successCallback("Konten Telah Dikirim");
}
const handleEmailList = (e: any) => {
@ -353,18 +349,12 @@ const Galery = (props: any) => {
Saya */}
{pathname?.split("/")[1] == "in" ? (
<>
<span className="text-black ">
{t("gallery", { defaultValue: "Gallery" })}
</span>
&nbsp;
<span className="text-black ">{t("gallery", { defaultValue: "Gallery" })}</span>&nbsp;
{t("my", { defaultValue: "My" })}
</>
) : (
<>
<span className="text-black">
{t("my", { defaultValue: "My" })}
</span>
&nbsp;
<span className="text-black">{t("my", { defaultValue: "My" })}</span>&nbsp;
{t("gallery", { defaultValue: "Gallery" })}
</>
)}
@ -467,9 +457,7 @@ const Galery = (props: any) => {
fontSize={25}
/>
<p className="text-base font-semibold mb-2">
{t("save", {
defaultValue: "Save",
})}{" "}
{t("save", { defaultValue: "Save" })}{" "}
</p>
</div>
<Link
@ -493,25 +481,18 @@ const Galery = (props: any) => {
fontSize={20}
/>
<p className="text-base font-semibold mb-1">
{t("share", {
defaultValue: "Share",
})}{" "}
{t("share", { defaultValue: "Share" })}{" "}
</p>
</button>
</PopoverTrigger>
<PopoverContent>
<div className="flex flex-col">
<h1 className="mb-2">
{t("shareTo", {
defaultValue: "Share To",
})}{" "}
{t("shareTo", { defaultValue: "Share To" })}{" "}
</h1>
<div className="flex flex-col mb-2">
<p className="text-base font-semibold mb-1">
{t("destinationEmail", {
defaultValue:
"Destination Email",
})}
{t("destinationEmail", { defaultValue: "Destination Email" })}
</p>
<Input
value={emailShareInput}
@ -522,22 +503,14 @@ const Galery = (props: any) => {
}
onKeyPress={handleEmailList}
type="email"
placeholder={t("shareTo", {
defaultValue: "Share To",
})}
placeholder={t("shareTo", { defaultValue: "Share To" })}
/>
</div>
<Button
className="bg-blue-500 text-white p-2 w-fit rounded-lg"
onClick={() =>
shareToEmail(
video.mediaUploadId
)
}
onClick={() => shareToEmail()}
>
{t("send", {
defaultValue: "Send",
})}
{t("send", { defaultValue: "Send" })}
</Button>
</div>
</PopoverContent>
@ -652,16 +625,10 @@ const Galery = (props: any) => {
</PopoverTrigger>
<PopoverContent>
<div className="flex flex-col">
<h1 className="mb-2">
{t("shareTo", {
defaultValue: "Share To",
})}
</h1>
<h1 className="mb-2">{t("shareTo", { defaultValue: "Share To" })}</h1>
<div className="flex flex-col mb-2">
<p className="text-base font-semibold mb-1">
{t("destinationEmail", {
defaultValue: "Destination Email",
})}
{t("destinationEmail", { defaultValue: "Destination Email" })}
</p>
<Input
value={emailShareInput}
@ -670,16 +637,12 @@ const Galery = (props: any) => {
}
onKeyPress={handleEmailList}
type="email"
placeholder={t("pressEnter", {
defaultValue: "Press Enter",
})}
placeholder={t("pressEnter", { defaultValue: "Press Enter" })}
/>
</div>
<Button
className="bg-blue-500 text-white p-2 w-fit rounded-lg"
onClick={() =>
shareToEmail(audio.mediaUploadId)
}
onClick={() => shareToEmail()}
>
{t("send", { defaultValue: "Send" })}
</Button>
@ -769,9 +732,7 @@ const Galery = (props: any) => {
fontSize={25}
/>
<p className="text-base font-semibold mb-2">
{t("save", {
defaultValue: "Save",
})}{" "}
{t("save", { defaultValue: "Save" })}{" "}
</p>
</div>
<Link
@ -795,25 +756,18 @@ const Galery = (props: any) => {
fontSize={20}
/>
<p className="text-base font-semibold mb-1">
{t("share", {
defaultValue: "Share",
})}{" "}
{t("share", { defaultValue: "Share" })}{" "}
</p>
</button>
</PopoverTrigger>
<PopoverContent>
<div className="flex flex-col">
<h1 className="mb-2">
{t("shareTo", {
defaultValue: "Share To",
})}{" "}
{t("shareTo", { defaultValue: "Share To" })}{" "}
</h1>
<div className="flex flex-col mb-2">
<p className="text-base font-semibold mb-1">
{t("destinationEmail", {
defaultValue:
"Destination Email",
})}
{t("destinationEmail", { defaultValue: "Destination Email" })}
</p>
<Input
value={emailShareInput}
@ -824,22 +778,14 @@ const Galery = (props: any) => {
}
onKeyPress={handleEmailList}
type="email"
placeholder={t("shareTo", {
defaultValue: "Share To",
})}
placeholder={t("shareTo", { defaultValue: "Share To" })}
/>
</div>
<Button
className="bg-blue-500 text-white p-2 w-fit rounded-lg"
onClick={() =>
shareToEmail(
image.mediaUploadId
)
}
onClick={() => shareToEmail()}
>
{t("send", {
defaultValue: "Send",
})}
{t("send", { defaultValue: "Send" })}
</Button>
</div>
</PopoverContent>
@ -938,14 +884,10 @@ const Galery = (props: any) => {
</PopoverTrigger>
<PopoverContent>
<div className="flex flex-col">
<h1 className="mb-2">
{t("shareTo", { defaultValue: "Share To" })}
</h1>
<h1 className="mb-2">{t("shareTo", { defaultValue: "Share To" })}</h1>
<div className="flex flex-col mb-2">
<p className="text-base font-semibold mb-1">
{t("destinationEmail", {
defaultValue: "Destination Email",
})}
{t("destinationEmail", { defaultValue: "Destination Email" })}
</p>
<Input
value={emailShareInput}
@ -954,16 +896,12 @@ const Galery = (props: any) => {
}
onKeyPress={handleEmailList}
type="email"
placeholder={t("pressEnter", {
defaultValue: "Press Enter",
})}
placeholder={t("pressEnter", { defaultValue: "Press Enter" })}
/>
</div>
<Button
className="bg-blue-500 text-white p-2 w-fit rounded-lg"
onClick={() =>
shareToEmail(document.mediaUploadId)
}
onClick={() => shareToEmail()}
>
{t("send", { defaultValue: "Send" })}
</Button>

643
app/[locale]/(public)/content-management/galery/page.tsx
View File

@ -1,13 +1,7 @@
"use client";
import { close, error, loading, successCallback } from "@/config/swal";
import {
checkWishlistStatus,
deleteWishlist,
getInfoProfile,
mediaWishlist,
saveWishlist,
} from "@/service/landing/landing";
import { checkWishlistStatus, deleteWishlist, getInfoProfile, mediaWishlist, saveWishlist } from "@/service/landing/landing";
import React, { useEffect, useState } from "react";
import { Link, useRouter } from "@/i18n/routing";
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
@ -19,17 +13,8 @@ import withReactContent from "sweetalert2-react-content";
import { getCookiesDecrypt } from "@/lib/utils";
import Swal from "sweetalert2";
import { useToast } from "@/components/ui/use-toast";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "@/components/ui/popover";
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { Icon } from "@iconify/react/dist/iconify.js";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
@ -76,23 +61,11 @@ const Galery = (props: any) => {
}, [page, category, title]);
async function getDataVideo() {
const filter =
categoryFilter?.length > 0
? categoryFilter?.sort().join(",")
: category || "";
const filter = categoryFilter?.length > 0 ? categoryFilter?.sort().join(",") : category || "";
const name = title == undefined ? "" : title;
const format = formatFilter == undefined ? "" : formatFilter?.join(",");
const response = await mediaWishlist(
"2",
isInstitute ? instituteId : "",
name,
filter,
"9",
pages,
sortBy,
format
);
const response = await mediaWishlist("2", isInstitute ? instituteId : "", name, filter, "9", pages, sortBy, format);
setGetTotalPage(response?.data?.data?.totalPages);
setContentVideo(response?.data?.data?.content);
@ -121,24 +94,12 @@ const Galery = (props: any) => {
}, [page, category, title]);
async function getDataDocument() {
const filter =
categoryFilter?.length > 0
? categoryFilter?.sort().join(",")
: category || "";
const filter = categoryFilter?.length > 0 ? categoryFilter?.sort().join(",") : category || "";
const name = title == undefined ? "" : title;
const format = formatFilter == undefined ? "" : formatFilter?.join(",");
const response = await mediaWishlist(
"3",
isInstitute ? instituteId : "",
name,
filter,
"12",
pages,
sortBy,
format
);
const response = await mediaWishlist("3", isInstitute ? instituteId : "", name, filter, "12", pages, sortBy, format);
setGetTotalPage(response?.data?.data?.totalPages);
setContentDocument(response?.data?.data?.content);
@ -158,24 +119,12 @@ const Galery = (props: any) => {
}, [change, refresh]);
async function getDataAudio() {
const filter =
categoryFilter?.length > 0
? categoryFilter?.sort().join(",")
: category || "";
const filter = categoryFilter?.length > 0 ? categoryFilter?.sort().join(",") : category || "";
const name = title == undefined ? "" : title;
const format = formatFilter == undefined ? "" : formatFilter?.join(",");
const response = await mediaWishlist(
"4",
isInstitute ? instituteId : "",
name,
filter,
"6",
pages,
sortBy,
format
);
const response = await mediaWishlist("4", isInstitute ? instituteId : "", name, filter, "6", pages, sortBy, format);
setGetTotalPage(response?.data?.data?.totalPages);
setContentAudio(response?.data?.data?.content);
@ -191,24 +140,12 @@ const Galery = (props: any) => {
}, [page, category, title, refresh]);
async function getDataImage() {
const filter =
categoryFilter?.length > 0
? categoryFilter?.sort().join(",")
: category || "";
const filter = categoryFilter?.length > 0 ? categoryFilter?.sort().join(",") : category || "";
const name = title == undefined ? "" : title;
const format = formatFilter == undefined ? "" : formatFilter?.join(",");
const response = await mediaWishlist(
"1",
isInstitute ? instituteId : "",
name,
filter,
"12",
pages,
sortBy,
format
);
const response = await mediaWishlist("1", isInstitute ? instituteId : "", name, filter, "12", pages, sortBy, format);
setGetTotalPage(response?.data?.data?.totalPages);
setContentImage(response?.data?.data?.content);
@ -290,9 +227,7 @@ const Galery = (props: any) => {
};
const copyToClip = async (url: any) => {
await navigator.clipboard.writeText(
`https://new.netidhub.com/video/detail/${url}`
);
await navigator.clipboard.writeText(`https://mediahub.polri.go.id/video/detail/${url}`);
setCopySuccess("Copied");
// toast.success("Link Berhasil Di Copy");
toast({
@ -300,29 +235,25 @@ const Galery = (props: any) => {
});
};
async function shareToEmail(uploadId: any) {
if (!userRoleId) {
async function shareToEmail() {
if (Number(userRoleId) < 1 || userRoleId == undefined) {
router.push("/auth/login");
return;
} else {
const data = {
mediaUploadId: id?.split("-")?.[0],
email: emailShareList || [emailShareInput],
message: emailMessageInput,
url: window.location.href,
};
loading();
const res = await sendMediaUploadToEmail(data);
if (res?.error) {
error(res.message);
return false;
}
close();
successCallback("Konten Telah Dikirim");
}
const data = {
mediaUploadId: uploadId, // ← FIX: ID valid dari response
email: emailShareList || [emailShareInput],
message: emailMessageInput,
url: window.location.href,
};
loading();
const res = await sendMediaUploadToEmail(data);
if (res?.error) {
error(res.message);
return;
}
close();
successCallback("Konten Telah Dikirim");
}
const handleEmailList = (e: any) => {
@ -359,9 +290,7 @@ const Galery = (props: any) => {
<div className="flex flex-col mt-4">
<div className="mx-auto w-full max-w-7xl justify-start flex flex-col gap-5 mb-4">
<h1 className="text-2xl w-fit font-bold bg-[#bb3523] px-4 py-1 rounded-lg text-center text-white">
<span className="text-black">
{t("gallery", { defaultValue: "Gallery" })}{" "}
</span>
<span className="text-black">{t("gallery", { defaultValue: "Gallery" })} </span>
{profile?.institute?.name}
</h1>
<Tabs value={selectedTab} onValueChange={setSelectedTab}>
@ -372,27 +301,21 @@ const Galery = (props: any) => {
>
{t("image", { defaultValue: "Image" })}
</TabsTrigger>
<div className="text-[#bb3523] text-lg hidden md:inline-block">
|
</div>
<div className="text-[#bb3523] text-lg hidden md:inline-block">|</div>
<TabsTrigger
value="video"
className="relative text-xs md:text-xl font-bold text-black dark:text-white dark:bg-transparent before:absolute before:top-full before:left-0 before:h-px before:w-full data-[state=active]:before:bg-primary"
>
{t("video", { defaultValue: "Video" })}
</TabsTrigger>
<div className="text-[#bb3523] text-lg hidden md:inline-block">
|
</div>
<div className="text-[#bb3523] text-lg hidden md:inline-block">|</div>
<TabsTrigger
value="text"
className="relative text-xs md:text-xl font-bold text-black dark:text-white dark:bg-transparent before:absolute before:top-full before:left-0 before:h-px before:w-full data-[state=active]:before:bg-primary"
>
{t("text", { defaultValue: "Text" })}
</TabsTrigger>
<div className="text-[#bb3523] text-lg hidden md:inline-block">
|
</div>
<div className="text-[#bb3523] text-lg hidden md:inline-block">|</div>
<TabsTrigger
value="audio"
className="relative text-xs md:text-xl font-bold text-black dark:text-white dark:bg-transparent before:absolute before:top-full before:left-0 before:h-px before:w-full data-[state=active]:before:bg-primary"
@ -408,140 +331,50 @@ const Galery = (props: any) => {
contentVideo?.length > 0 ? (
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
{contentVideo?.map((video: any) => (
<Card
key={video?.id}
className="hover:scale-105 transition-transform duration-300"
>
<Card key={video?.id} className="hover:scale-105 transition-transform duration-300">
<CardContent className="flex flex-col text-xs lg:text-sm w-full p-0">
<div>
<div className="relative group overflow-hidden shadow-md hover:shadow-lg">
<div className="relative h-60 rounded-lg overflow-hidden">
<ImageBlurry
src={video?.mediaUpload?.thumbnailLink}
alt={video?.mediaUpload?.title}
style={{
objectFit: "cover",
width: "100%",
height: "100%",
}}
/>
<ImageBlurry src={video?.mediaUpload?.thumbnailLink} alt={video?.mediaUpload?.title} style={{ objectFit: "cover", width: "100%", height: "100%" }} />
<div className="absolute bottom-0 left-0 right-0 bg-black text-white">
<Link
href={`/video/detail/${video?.mediaUpload?.slug}`}
>
<p className="text-sm p-2 lg:text-base font-semibold truncate">
{video?.mediaUpload?.title}
</p>
<Link href={`/video/detail/${video?.mediaUpload?.slug}`}>
<p className="text-sm p-2 lg:text-base font-semibold truncate">{video?.mediaUpload?.title}</p>
</Link>
<p className="flex text-[10px] mr-1 mb-2 items-center justify-end self-end">
<Popover>
<PopoverTrigger
className="flex cursor-pointer"
asChild
>
<PopoverTrigger className="flex cursor-pointer" asChild>
<a className="flex justify-end items-center">
<Icon
className="text-white ml-1"
fontSize={25}
icon="tabler:dots"
/>
<Icon className="text-white ml-1" fontSize={25} icon="tabler:dots" />
</a>
</PopoverTrigger>
<PopoverContent className="w-52">
<div
onClick={() =>
handleSaveWishlist(
video?.mediaUpload?.id
)
}
className="cursor-pointer flex flex-row gap-2 hover:text-red-800"
>
<Icon
icon="material-symbols:bookmark-outline"
fontSize={25}
/>
<p className="text-base font-semibold mb-2">
{t("save", {
defaultValue: "Save",
})}{" "}
</p>
<div onClick={() => handleSaveWishlist(video?.mediaUpload?.id)} className="cursor-pointer flex flex-row gap-2 hover:text-red-800">
<Icon icon="material-symbols:bookmark-outline" fontSize={25} />
<p className="text-base font-semibold mb-2">{t("save", { defaultValue: "Save" })} </p>
</div>
<Link
href={`/content-management/rewrite/create/${video?.mediaUpload?.id}`}
className="flex flex-row hover:text-red-800 gap-2"
>
<Icon
icon="jam:write"
fontSize={25}
/>
<p className="text-base font-semibold mb-2">
Content Rewrite
</p>
<Link href={`/content-management/rewrite/create/${video?.mediaUpload?.id}`} className="flex flex-row hover:text-red-800 gap-2">
<Icon icon="jam:write" fontSize={25} />
<p className="text-base font-semibold mb-2">Content Rewrite</p>
</Link>
<div className="flex items-center gap-1 hover:text-red-800 w-full rounded-lg">
<Popover>
<PopoverTrigger asChild>
<button className="w-full flex flex-row items-center gap-3">
<Icon
icon="oi:share"
fontSize={20}
/>
<p className="text-base font-semibold mb-1">
{t("share", {
defaultValue: "Share",
})}{" "}
</p>
<Icon icon="oi:share" fontSize={20} />
<p className="text-base font-semibold mb-1">{t("share", { defaultValue: "Share" })} </p>
</button>
</PopoverTrigger>
<PopoverContent>
<div className="flex flex-col">
<h1 className="mb-2">
{t("shareTo", {
defaultValue: "Share To",
})}{" "}
</h1>
<h1 className="mb-2">{t("shareTo", { defaultValue: "Share To" })} </h1>
<div className="flex flex-col mb-2">
<p className="text-base font-semibold mb-1">
{t("destinationEmail", {
defaultValue:
"Destination Email",
})}
</p>
<Input
value={emailShareInput}
onChange={(event) =>
setEmailShareInput(
event.target.value
)
}
onKeyPress={handleEmailList}
type="email"
placeholder={t("shareTo", {
defaultValue: "Share To",
})}
/>
<p className="text-base font-semibold mb-1">{t("destinationEmail", { defaultValue: "Destination Email" })}</p>
<Input value={emailShareInput} onChange={(event) => setEmailShareInput(event.target.value)} onKeyPress={handleEmailList} type="email" placeholder={t("shareTo", { defaultValue: "Share To" })} />
</div>
<Button
className="bg-blue-500 text-white p-2 w-fit rounded-lg"
onClick={() =>
shareToEmail(
video.mediaUploadId
)
}
>
{t("send", {
defaultValue: "Send",
})}
<Button className="bg-blue-500 text-white p-2 w-fit rounded-lg" onClick={() => shareToEmail()}>
{t("send", { defaultValue: "Send" })}
</Button>
{/* <Button
className="bg-blue-500 text-white p-2 w-fit rounded-lg"
onClick={() => shareToEmail()}
>
{t("send", {
defaultValue: "Send",
})}
</Button> */}
</div>
</PopoverContent>
</Popover>
@ -559,64 +392,33 @@ const Galery = (props: any) => {
</div>
) : (
<p className="flex items-center justify-center">
<Image
width={1920}
height={1080}
src="/assets/empty-data.png"
alt="empty"
className="h-52 w-52 my-4"
/>
<Image width={1920} height={1080} src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" />
</p>
)
) : selectedTab == "audio" ? (
contentAudio?.length > 0 ? (
<div className=" grid grid-cols-1 gap-6 ">
{contentAudio?.map((audio: any) => (
<div
key={audio?.id}
className="flex flex-col sm:flex-row items-center bg-white dark:bg-gray-800 cursor-pointer shadow-md rounded-lg p-4 gap-4 w-full"
>
<div key={audio?.id} className="flex flex-col sm:flex-row items-center bg-white dark:bg-gray-800 cursor-pointer shadow-md rounded-lg p-4 gap-4 w-full">
<div className="flex items-center justify-center bg-red-500 text-white rounded-lg w-16 h-8 lg:h-16">
<svg
width="32"
height="34"
viewBox="0 0 32 34"
fill="null"
xmlns="http://www.w3.org/2000/svg"
>
<svg width="32" height="34" viewBox="0 0 32 34" fill="null" xmlns="http://www.w3.org/2000/svg">
<path
d="M23.404 0.452014C23.7033 0.35857 24.0204 0.336816 24.3297 0.388509C24.639 0.440203 24.9318 0.563895 25.1845 0.749599C25.4371 0.935304 25.6426 1.17782 25.7843 1.45756C25.9259 1.73731 25.9998 2.04644 26 2.36001V14.414C25.3462 14.2296 24.6766 14.1064 24 14.046V8.36001L10 12.736V27C10 28.1264 9.6197 29.2197 8.92071 30.1029C8.22172 30.9861 7.24499 31.6075 6.14877 31.8663C5.05255 32.125 3.90107 32.0061 2.88089 31.5287C1.86071 31.0514 1.03159 30.2435 0.52787 29.2361C0.024152 28.2286 -0.124656 27.0806 0.105556 25.9781C0.335768 24.8755 0.931513 23.883 1.79627 23.1613C2.66102 22.4396 3.74413 22.031 4.87009 22.0017C5.99606 21.9724 7.09893 22.3242 8.00001 23V6.73601C7.99982 6.30956 8.13596 5.8942 8.38854 5.55059C8.64112 5.20698 8.99692 4.9531 9.40401 4.82601L23.404 0.452014ZM10 10.64L24 6.26601V2.36001L10 6.73601V10.64ZM5.00001 24C4.20436 24 3.44129 24.3161 2.87869 24.8787C2.31608 25.4413 2.00001 26.2044 2.00001 27C2.00001 27.7957 2.31608 28.5587 2.87869 29.1213C3.44129 29.6839 4.20436 30 5.00001 30C5.79566 30 6.55872 29.6839 7.12133 29.1213C7.68394 28.5587 8.00001 27.7957 8.00001 27C8.00001 26.2044 7.68394 25.4413 7.12133 24.8787C6.55872 24.3161 5.79566 24 5.00001 24ZM32 25C32 27.387 31.0518 29.6761 29.364 31.364C27.6761 33.0518 25.387 34 23 34C20.6131 34 18.3239 33.0518 16.636 31.364C14.9482 29.6761 14 27.387 14 25C14 22.6131 14.9482 20.3239 16.636 18.6361C18.3239 16.9482 20.6131 16 23 16C25.387 16 27.6761 16.9482 29.364 18.6361C31.0518 20.3239 32 22.6131 32 25ZM27.47 24.128L21.482 20.828C21.3298 20.7443 21.1583 20.7016 20.9846 20.7043C20.8108 20.707 20.6408 20.7549 20.4912 20.8433C20.3416 20.9317 20.2176 21.0576 20.1315 21.2086C20.0453 21.3595 20 21.5302 20 21.704V28.304C20 28.4778 20.0453 28.6486 20.1315 28.7995C20.2176 28.9504 20.3416 29.0763 20.4912 29.1647C20.6408 29.2531 20.8108 29.301 20.9846 29.3037C21.1583 29.3064 21.3298 29.2638 21.482 29.18L27.47 25.88C27.6268 25.7937 27.7575 25.6669 27.8486 25.5128C27.9397 25.3587 27.9877 25.183 27.9877 25.004C27.9877 24.825 27.9397 24.6493 27.8486 24.4952C27.7575 24.3412 27.6268 24.2143 27.47 24.128Z"
fill="white"
/>
</svg>
</div>
<Link
href={`/audio/detail/${audio?.mediaUpload?.slug}`}
className="flex flex-col flex-1"
>
<div className="font-semibold text-gray-900 dark:text-white mt-1 text-sm">
{audio?.mediaUpload?.title}
</div>
<Link href={`/audio/detail/${audio?.mediaUpload?.slug}`} className="flex flex-col flex-1">
<div className="font-semibold text-gray-900 dark:text-white mt-1 text-sm">{audio?.mediaUpload?.title}</div>
</Link>
<div className="flex items-center justify-center gap-3">
<div className="mt-2">
<img src="/assets/wave.svg" className="w-80" />
</div>
<div className="flex flex-row items-center justify-center text-gray-500 dark:text-gray-400">
<img
src="/assets/audio-icon.png"
alt="#"
className="flex items-center justify-center"
/>
<div className="flex mx-2 items-center justify-center">
{audio?.mediaUpload?.duration}
</div>
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 20 20"
>
<img src="/assets/audio-icon.png" alt="#" className="flex items-center justify-center" />
<div className="flex mx-2 items-center justify-center">{audio?.mediaUpload?.duration}</div>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
<path
fill="#f00"
d="M7.707 10.293a1 1 0 1 0-1.414 1.414l3 3a1 1 0 0 0 1.414 0l3-3a1 1 0 0 0-1.414-1.414L11 11.586V6h5a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h5v5.586zM9 4a1 1 0 0 1 2 0v2H9z"
@ -625,92 +427,38 @@ const Galery = (props: any) => {
</div>
</div>
<Popover>
<PopoverTrigger
className="flex justify-end gap-1 cursor-pointer"
asChild
>
<PopoverTrigger className="flex justify-end gap-1 cursor-pointer" asChild>
<a className="flex justify-end items-end place-items-end">
<Icon
className="text-white ml-1"
fontSize={25}
icon="tabler:dots"
/>
<Icon className="text-white ml-1" fontSize={25} icon="tabler:dots" />
</a>
</PopoverTrigger>
<PopoverContent className="w-52">
<div
onClick={() =>
handleSaveWishlist(audio?.mediaUpload?.id)
}
className="cursor-pointer flex flex-row gap-2 hover:text-red-800"
>
<Icon
icon="material-symbols:bookmark-outline"
fontSize={25}
/>
<p className="text-base font-semibold mb-2">
{t("save", { defaultValue: "Save" })}
</p>
<div onClick={() => handleSaveWishlist(audio?.mediaUpload?.id)} className="cursor-pointer flex flex-row gap-2 hover:text-red-800">
<Icon icon="material-symbols:bookmark-outline" fontSize={25} />
<p className="text-base font-semibold mb-2">{t("save", { defaultValue: "Save" })}</p>
</div>
<Link
href={`/content-management/rewrite/create/${audio?.mediaUpload?.id}`}
className="flex flex-row hover:text-red-800 gap-2"
>
<Link href={`/content-management/rewrite/create/${audio?.mediaUpload?.id}`} className="flex flex-row hover:text-red-800 gap-2">
<Icon icon="jam:write" fontSize={25} />
<p className="text-base font-semibold mb-2">
Content Rewrite
</p>
<p className="text-base font-semibold mb-2">Content Rewrite</p>
</Link>
<div className="flex items-center gap-1 hover:text-red-800 w-full rounded-lg">
<Popover>
<PopoverTrigger asChild>
<button className="w-full flex items-center gap-2">
<Icon icon="oi:share" fontSize={20} />
<p className="text-base font-semibold mb-2">
{t("share", { defaultValue: "Share" })}
</p>
<p className="text-base font-semibold mb-2">{t("share", { defaultValue: "Share" })}</p>
</button>
</PopoverTrigger>
<PopoverContent>
<div className="flex flex-col">
<h1 className="mb-2">
{t("shareTo", {
defaultValue: "Share To",
})}
</h1>
<h1 className="mb-2">{t("shareTo", { defaultValue: "Share To" })}</h1>
<div className="flex flex-col mb-2">
<p className="text-base font-semibold mb-1">
{t("destinationEmail", {
defaultValue: "Destination Email",
})}
</p>
<Input
value={emailShareInput}
onChange={(event) =>
setEmailShareInput(event.target.value)
}
onKeyPress={handleEmailList}
type="email"
placeholder={t("pressEnter", {
defaultValue: "Press Enter",
})}
/>
<p className="text-base font-semibold mb-1">{t("destinationEmail", { defaultValue: "Destination Email" })}</p>
<Input value={emailShareInput} onChange={(event) => setEmailShareInput(event.target.value)} onKeyPress={handleEmailList} type="email" placeholder={t("pressEnter", { defaultValue: "Press Enter" })} />
</div>
<Button
className="bg-blue-500 text-white p-2 w-fit rounded-lg"
onClick={() =>
shareToEmail(audio.mediaUploadId)
}
>
<Button className="bg-blue-500 text-white p-2 w-fit rounded-lg" onClick={() => shareToEmail()}>
{t("send", { defaultValue: "Send" })}
</Button>
{/* <Button
className="bg-blue-500 text-white p-2 w-fit rounded-lg"
onClick={() => shareToEmail()}
>
{t("send", { defaultValue: "Send" })}
</Button> */}
</div>
</PopoverContent>
</Popover>
@ -722,148 +470,56 @@ const Galery = (props: any) => {
</div>
) : (
<p className="flex items-center justify-center">
<Image
width={1920}
height={1080}
src="/assets/empty-data.png"
alt="empty"
className="h-52 w-52 my-4"
/>
<Image width={1920} height={1080} src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" />
</p>
)
) : selectedTab == "image" ? (
contentImage?.length > 0 ? (
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
{contentImage?.map((image: any) => (
<Card
key={image?.id}
className="hover:scale-105 transition-transform duration-300"
>
<Card key={image?.id} className="hover:scale-105 transition-transform duration-300">
<CardContent className="flex flex-col text-xs lg:text-sm w-full p-0">
<div>
<div className="relative group overflow-hidden shadow-md hover:shadow-lg">
<div className="relative h-60 rounded-lg overflow-hidden">
<ImageBlurry
src={image?.mediaUpload?.thumbnailLink}
alt={image?.mediaUpload?.title}
style={{
objectFit: "cover",
width: "100%",
height: "100%",
}}
/>
<ImageBlurry src={image?.mediaUpload?.thumbnailLink} alt={image?.mediaUpload?.title} style={{ objectFit: "cover", width: "100%", height: "100%" }} />
<div className="absolute bottom-0 left-0 right-0 bg-black text-white">
<Link
href={`/video/detail/${image?.mediaUpload?.slug}`}
>
<p className="text-sm p-2 lg:text-base font-semibold truncate">
{image?.mediaUpload?.title}
</p>
<Link href={`/video/detail/${image?.mediaUpload?.slug}`}>
<p className="text-sm p-2 lg:text-base font-semibold truncate">{image?.mediaUpload?.title}</p>
</Link>
<p className="flex text-[10px] mr-1 mb-2 items-center justify-end self-end">
<Popover>
<PopoverTrigger
className="flex cursor-pointer"
asChild
>
<PopoverTrigger className="flex cursor-pointer" asChild>
<a className="flex justify-end items-end place-items-end">
<Icon
className="text-white ml-1"
fontSize={25}
icon="tabler:dots"
/>
<Icon className="text-white ml-1" fontSize={25} icon="tabler:dots" />
</a>
</PopoverTrigger>
<PopoverContent className="w-52">
<div
onClick={() =>
handleSaveWishlist(
image?.mediaUpload?.id
)
}
className="cursor-pointer flex flex-row gap-2 hover:text-red-800"
>
<Icon
icon="material-symbols:bookmark-outline"
fontSize={25}
/>
<p className="text-base font-semibold mb-2">
{t("save", {
defaultValue: "Save",
})}
</p>
<div onClick={() => handleSaveWishlist(image?.mediaUpload?.id)} className="cursor-pointer flex flex-row gap-2 hover:text-red-800">
<Icon icon="material-symbols:bookmark-outline" fontSize={25} />
<p className="text-base font-semibold mb-2">{t("save", { defaultValue: "Save" })}</p>
</div>
<Link
href={`/content-management/rewrite/create/${image?.mediaUpload?.id}`}
className="flex flex-row hover:text-red-800 gap-2"
>
<Icon
icon="jam:write"
fontSize={25}
/>
<p className="text-base font-semibold mb-2">
Content Rewrite
</p>
<Link href={`/content-management/rewrite/create/${image?.mediaUpload?.id}`} className="flex flex-row hover:text-red-800 gap-2">
<Icon icon="jam:write" fontSize={25} />
<p className="text-base font-semibold mb-2">Content Rewrite</p>
</Link>
<div className="flex items-center gap-1 hover:text-red-800 w-full rounded-lg">
<Popover>
<PopoverTrigger asChild>
<button className="w-full flex flex-row items-center gap-3">
<Icon
icon="oi:share"
fontSize={20}
/>
<p className="text-base font-semibold mb-1">
{" "}
{t("share", {
defaultValue: "Share",
})}
</p>
<Icon icon="oi:share" fontSize={20} />
<p className="text-base font-semibold mb-1"> {t("share", { defaultValue: "Share" })}</p>
</button>
</PopoverTrigger>
<PopoverContent>
<div className="flex flex-col">
<h1 className="mb-2">
{t("shareTo", {
defaultValue: "Share To",
})}
</h1>
<h1 className="mb-2">{t("shareTo", { defaultValue: "Share To" })}</h1>
<div className="flex flex-col mb-2">
<p className="text-base font-semibold mb-1">
{t("destinationEmail", {
defaultValue:
"Destination Email",
})}
</p>
<Input
value={emailShareInput}
onChange={(event) =>
setEmailShareInput(
event.target.value
)
}
onKeyPress={handleEmailList}
type="email"
placeholder={t(
"pressEnter",
{
defaultValue:
"Press Enter",
}
)}
/>
<p className="text-base font-semibold mb-1">{t("destinationEmail", { defaultValue: "Destination Email" })}</p>
<Input value={emailShareInput} onChange={(event) => setEmailShareInput(event.target.value)} onKeyPress={handleEmailList} type="email" placeholder={t("pressEnter", { defaultValue: "Press Enter" })} />
</div>
<Button
className="bg-blue-500 text-white p-2 w-fit rounded-lg"
onClick={() =>
shareToEmail(
image.mediaUploadId
)
}
>
{t("send", {
defaultValue: "Send",
})}
<Button className="bg-blue-500 text-white p-2 w-fit rounded-lg" onClick={() => shareToEmail()}>
{t("send", { defaultValue: "Send" })}
</Button>
</div>
</PopoverContent>
@ -882,30 +538,15 @@ const Galery = (props: any) => {
</div>
) : (
<p className="flex items-center justify-center">
<Image
width={1920}
height={1080}
src="/assets/empty-data.png"
alt="empty"
className="h-52 w-52 my-4"
/>
<Image width={1920} height={1080} src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" />
</p>
)
) : contentDocument.length > 0 ? (
<div className=" grid grid-cols-1 md:grid-cols-2 gap-6">
{contentDocument?.map((document: any) => (
<div
key={document?.id}
className="flex flex-col bg-yellow-500 sm:flex-row items-center dark:bg-gray-800 cursor-pointer shadow-md rounded-lg p-4 gap-4 w-full"
>
<div key={document?.id} className="flex flex-col bg-yellow-500 sm:flex-row items-center dark:bg-gray-800 cursor-pointer shadow-md rounded-lg p-4 gap-4 w-full">
<div className="flex items-center justify-center rounded-lg w-16 h-16">
<svg
width="28"
height="34"
viewBox="0 0 28 34"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<svg width="28" height="34" viewBox="0 0 28 34" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M5.6665 17.4167C5.6665 17.0851 5.7982 16.7672 6.03262 16.5328C6.26704 16.2984 6.58498 16.1667 6.9165 16.1667C7.24802 16.1667 7.56597 16.2984 7.80039 16.5328C8.03481 16.7672 8.1665 17.0851 8.1665 17.4167C8.1665 17.7482 8.03481 18.0661 7.80039 18.3005C7.56597 18.535 7.24802 18.6667 6.9165 18.6667C6.58498 18.6667 6.26704 18.535 6.03262 18.3005C5.7982 18.0661 5.6665 17.7482 5.6665 17.4167ZM6.9165 21.1667C6.58498 21.1667 6.26704 21.2984 6.03262 21.5328C5.7982 21.7672 5.6665 22.0851 5.6665 22.4167C5.6665 22.7482 5.7982 23.0661 6.03262 23.3005C6.26704 23.535 6.58498 23.6667 6.9165 23.6667C7.24802 23.6667 7.56597 23.535 7.80039 23.3005C8.03481 23.0661 8.1665 22.7482 8.1665 22.4167C8.1665 22.0851 8.03481 21.7672 7.80039 21.5328C7.56597 21.2984 7.24802 21.1667 6.9165 21.1667ZM5.6665 27.4167C5.6665 27.0851 5.7982 26.7672 6.03262 26.5328C6.26704 26.2984 6.58498 26.1667 6.9165 26.1667C7.24802 26.1667 7.56597 26.2984 7.80039 26.5328C8.03481 26.7672 8.1665 27.0851 8.1665 27.4167C8.1665 27.7482 8.03481 28.0661 7.80039 28.3005C7.56597 28.535 7.24802 28.6667 6.9165 28.6667C6.58498 28.6667 6.26704 28.535 6.03262 28.3005C5.7982 28.0661 5.6665 27.7482 5.6665 27.4167ZM11.9165 16.1667C11.585 16.1667 11.267 16.2984 11.0326 16.5328C10.7982 16.7672 10.6665 17.0851 10.6665 17.4167C10.6665 17.7482 10.7982 18.0661 11.0326 18.3005C11.267 18.535 11.585 18.6667 11.9165 18.6667H21.0832C21.4147 18.6667 21.7326 18.535 21.9671 18.3005C22.2015 18.0661 22.3332 17.7482 22.3332 17.4167C22.3332 17.0851 22.2015 16.7672 21.9671 16.5328C21.7326 16.2984 21.4147 16.1667 21.0832 16.1667H11.9165ZM10.6665 22.4167C10.6665 22.0851 10.7982 21.7672 11.0326 21.5328C11.267 21.2984 11.585 21.1667 11.9165 21.1667H21.0832C21.4147 21.1667 21.7326 21.2984 21.9671 21.5328C22.2015 21.7672 22.3332 22.0851 22.3332 22.4167C22.3332 22.7482 22.2015 23.0661 21.9671 23.3005C21.7326 23.535 21.4147 23.6667 21.0832 23.6667H11.9165C11.585 23.6667 11.267 23.535 11.0326 23.3005C10.7982 23.0661 10.6665 22.7482 10.6665 22.4167ZM11.9165 26.1667C11.585 26.1667 11.267 26.2984 11.0326 26.5328C10.7982 26.7672 10.6665 27.0851 10.6665 27.4167C10.6665 27.7482 10.7982 28.0661 11.0326 28.3005C11.267 28.535 11.585 28.6667 11.9165 28.6667H21.0832C21.4147 28.6667 21.7326 28.535 21.9671 28.3005C22.2015 28.0661 22.3332 27.7482 22.3332 27.4167C22.3332 27.0851 22.2015 26.7672 21.9671 26.5328C21.7326 26.2984 21.4147 26.1667 21.0832 26.1667H11.9165ZM26.3565 11.0233L16.6415 1.31C16.6157 1.28605 16.5885 1.26378 16.5598 1.24333C16.5392 1.22742 16.5192 1.21074 16.4998 1.19333C16.3852 1.08512 16.2632 0.984882 16.1348 0.893332C16.0922 0.865802 16.0476 0.841298 16.0015 0.819999L15.9215 0.779999L15.8382 0.731666C15.7482 0.679999 15.6565 0.626665 15.5615 0.586665C15.2296 0.454104 14.8783 0.376423 14.5215 0.356665C14.4885 0.354519 14.4557 0.350625 14.4232 0.344999C14.3779 0.338012 14.3323 0.334114 14.2865 0.333332H3.99984C3.11578 0.333332 2.26794 0.684521 1.64281 1.30964C1.01769 1.93476 0.666504 2.78261 0.666504 3.66667V30.3333C0.666504 31.2174 1.01769 32.0652 1.64281 32.6904C2.26794 33.3155 3.11578 33.6667 3.99984 33.6667H23.9998C24.8839 33.6667 25.7317 33.3155 26.3569 32.6904C26.982 32.0652 27.3332 31.2174 27.3332 30.3333V13.38C27.333 12.496 26.9817 11.6483 26.3565 11.0233ZM24.8332 30.3333C24.8332 30.5543 24.7454 30.7663 24.5891 30.9226C24.4328 31.0789 24.2208 31.1667 23.9998 31.1667H3.99984C3.77882 31.1667 3.56686 31.0789 3.41058 30.9226C3.2543 30.7663 3.1665 30.5543 3.1665 30.3333V3.66667C3.1665 3.44565 3.2543 3.23369 3.41058 3.07741C3.56686 2.92113 3.77882 2.83333 3.99984 2.83333H13.9998V10.3333C13.9998 11.2174 14.351 12.0652 14.9761 12.6904C15.6013 13.3155 16.4491 13.6667 17.3332 13.6667H24.8332V30.3333ZM16.4998 4.70166L22.9632 11.1667H17.3332C17.1122 11.1667 16.9002 11.0789 16.7439 10.9226C16.5876 10.7663 16.4998 10.5543 16.4998 10.3333V4.70166Z"
fill="black"
@ -914,103 +555,47 @@ const Galery = (props: any) => {
</div>
<div className="flex flex-col flex-1 gap-2">
<Link
href={`/document/detail/${document?.mediaUpload?.slug}`}
className="font-semibold text-gray-900 dark:text-white mt-1 text-sm"
>
<Link href={`/document/detail/${document?.mediaUpload?.slug}`} className="font-semibold text-gray-900 dark:text-white mt-1 text-sm">
{document?.mediaUpload?.title}
</Link>
<div className="flex gap-2 items-center text-xs text-red-500 dark:text-red-500">
<svg
xmlns="http://www.w3.org/2000/svg"
width="1em"
height="1em"
viewBox="0 0 512 512"
>
<path
fill="#f00"
d="M224 30v256h-64l96 128l96-128h-64V30zM32 434v48h448v-48z"
/>
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512">
<path fill="#f00" d="M224 30v256h-64l96 128l96-128h-64V30zM32 434v48h448v-48z" />
</svg>
Download {t("document", { defaultValue: "Document" })}
</div>
</div>
<Popover>
<PopoverTrigger
className="flex justify-end gap-1 cursor-pointer"
asChild
>
<PopoverTrigger className="flex justify-end gap-1 cursor-pointer" asChild>
<a className="flex justify-end items-end place-items-end">
<Icon
className="text-white ml-1"
fontSize={25}
icon="tabler:dots"
/>
<Icon className="text-white ml-1" fontSize={25} icon="tabler:dots" />
</a>
</PopoverTrigger>
<PopoverContent className="w-52">
<div
onClick={() =>
handleSaveWishlist(document?.mediaUpload?.id)
}
className="cursor-pointer flex flex-row gap-2 hover:text-red-800"
>
<Icon
icon="material-symbols:bookmark-outline"
fontSize={25}
/>
<p className="text-base font-semibold mb-2">
{t("save", { defaultValue: "Save" })}
</p>
<div onClick={() => handleSaveWishlist(document?.mediaUpload?.id)} className="cursor-pointer flex flex-row gap-2 hover:text-red-800">
<Icon icon="material-symbols:bookmark-outline" fontSize={25} />
<p className="text-base font-semibold mb-2">{t("save", { defaultValue: "Save" })}</p>
</div>
<Link
href={`/content-management/rewrite/create/${document?.mediaUpload?.id}`}
className="flex flex-row hover:text-red-800 gap-2"
>
<Link href={`/content-management/rewrite/create/${document?.mediaUpload?.id}`} className="flex flex-row hover:text-red-800 gap-2">
<Icon icon="jam:write" fontSize={25} />
<p className="text-base font-semibold mb-2">
Content Rewrite
</p>
<p className="text-base font-semibold mb-2">Content Rewrite</p>
</Link>
<div className="flex items-center gap-1 hover:text-red-800 w-full rounded-lg">
<Popover>
<PopoverTrigger asChild>
<button className="w-full flex items-center gap-2">
<Icon icon="oi:share" fontSize={20} />
<p className="text-base font-semibold mb-2">
{t("share", { defaultValue: "Share" })}
</p>
<p className="text-base font-semibold mb-2">{t("share", { defaultValue: "Share" })}</p>
</button>
</PopoverTrigger>
<PopoverContent>
<div className="flex flex-col">
<h1 className="mb-2">
{t("shareTo", { defaultValue: "Share To" })}
</h1>
<h1 className="mb-2">{t("shareTo", { defaultValue: "Share To" })}</h1>
<div className="flex flex-col mb-2">
<p className="text-base font-semibold mb-1">
{t("destinationEmail", {
defaultValue: "Destination Email",
})}
</p>
<Input
value={emailShareInput}
onChange={(event) =>
setEmailShareInput(event.target.value)
}
onKeyPress={handleEmailList}
type="email"
placeholder={t("pressEnter", {
defaultValue: "Press Enter",
})}
/>
<p className="text-base font-semibold mb-1">{t("destinationEmail", { defaultValue: "Destination Email" })}</p>
<Input value={emailShareInput} onChange={(event) => setEmailShareInput(event.target.value)} onKeyPress={handleEmailList} type="email" placeholder={t("pressEnter", { defaultValue: "Press Enter" })} />
</div>
<Button
className="bg-blue-500 text-white p-2 w-fit rounded-lg"
onClick={() =>
shareToEmail(document?.mediaUploadId)
}
>
<Button className="bg-blue-500 text-white p-2 w-fit rounded-lg" onClick={() => shareToEmail()}>
{t("send", { defaultValue: "Send" })}
</Button>
</div>
@ -1024,13 +609,7 @@ const Galery = (props: any) => {
</div>
) : (
<p className="flex items-center justify-center">
<Image
width={1920}
height={1080}
src="/assets/empty-data.png"
alt="empty"
className="h-52 w-52 my-4"
/>
<Image width={1920} height={1080} src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" />
</p>
)}
</div>

14
app/[locale]/(public)/content-management/rewrite/page.tsx
View File

@ -29,7 +29,6 @@ import { sendMediaUploadToEmail } from "@/service/media-tracking/media-tracking"
import ImageBlurry from "@/components/ui/image-blurry";
import Image from "next/image";
import { useTranslations } from "next-intl";
import { sendMediaRewriteToEmail } from "@/service/content/content";
const page = () => {
const [, setProfile] = useState();
@ -134,7 +133,7 @@ const page = () => {
const copyToClip = async (url: any) => {
await navigator.clipboard.writeText(
`https://new.netidhub.com/image/detail/${url}`
`https://mediahub.polri.go.id/image/detail/${url}`
);
setCopySuccess("Copied");
// toast.success("Link Berhasil Di Copy");
@ -176,16 +175,18 @@ const page = () => {
}
};
async function shareToEmail(uploadId: any) {
async function shareToEmail() {
if (Number(userRoleId) < 1 || userRoleId == undefined) {
router.push("/auth/login");
} else {
const data = {
id: uploadId,
mediaUploadId: id?.split("-")?.[0],
email: emailShareList || [emailShareInput],
message: emailMessageInput,
url: window.location.href,
};
loading();
const res = await sendMediaRewriteToEmail(data.id, data.email);
const res = await sendMediaUploadToEmail(data);
if (res?.error) {
error(res.message);
return false;
@ -195,7 +196,6 @@ const page = () => {
}
}
const handleEmailList = (e: any) => {
const arrayEmail: any = [];
for (let i = 0; i < emailShareList?.length; i += 1) {
@ -328,7 +328,7 @@ const page = () => {
</div>
<Button
className="bg-blue-500 text-white p-2 w-fit rounded-lg"
onClick={() => shareToEmail(image.id)}
onClick={() => shareToEmail()}
>
{t("send", { defaultValue: "Send" })}
</Button>

119
app/[locale]/(public)/document/filter/page.tsx
View File

@ -83,7 +83,7 @@ const FilterPage = () => {
const [monthYearFilter, setMonthYearFilter] = useState<any>();
const [searchTitle, setSearchTitle] = useState<string>("");
const [sortByOpt, setSortByOpt] = useState<any>(
sortBy === "popular" ? "favorite" : "createdAt"
sortBy === "popular" ? "clickCount" : "createdAt"
);
const isRegional = asPath?.includes("regional");
const isSatker = asPath?.includes("satker");
@ -453,7 +453,7 @@ const FilterPage = () => {
if (e.target.value == "terbaru") {
setSortByOpt("createdAt");
} else {
setSortByOpt("favorite");
setSortByOpt("clickCount");
}
setChange(!change);
@ -500,6 +500,7 @@ const FilterPage = () => {
return (
<div className="flex flex-col">
{/* Header */}
<div className="flex flex-col md:flex-row items-start gap-5 py-10 px-4 lg:px-20 bg-[#f7f7f7] dark:bg-black">
<p>
{" "}
@ -526,8 +527,8 @@ const FilterPage = () => {
)}
</div>
{/* Left */}
<div className="flex flex-col lg:flex-row gap-6 pl-4 lg:pl-20 py-4 ">
{/* Left */}
<div className="h-fit min-w-full lg:min-w-[280px] max-w-full lg:max-w-[300px] bg-[#f7f7f7] dark:bg-black p-4 rounded-lg shadow-md">
<h2 className="text-lg font-semibold mb-4 flex items-center gap-1">
<Icon icon="stash:filter-light" fontSize={30} />
@ -608,116 +609,6 @@ const FilterPage = () => {
<h3 className="text-sm font-medium text-gray-700 dark:text-white">
{t("categories", { defaultValue: "Categories" })}
</h3>
<ul className="mt-2 space-y-2">
{categories.map((category: any) => (
<li key={category?.id}>
<label
className="inline-flex items-center"
htmlFor={`${category.id}`}
>
<Checkbox
id={`${category.id}`}
value={category.id}
checked={categoryFilter.includes(String(category.id))}
onCheckedChange={(e) =>
handleCategoryFilter(Boolean(e), category.id)
}
/>
<span className="ml-2 text-gray-700 dark:text-white">
{category?.name}
</span>
</label>
</li>
))}
</ul>
{/* ⬇️ Pagination kategori (rata sejajar) */}
<div className="mt-4 flex justify-center items-center gap-2 flex-wrap">
{/* Tombol Prev */}
<button
onClick={() =>
setCategoryPage((prev) => Math.max(prev - 1, 1))
}
disabled={categoryPage === 1}
className="px-2 py-1 border rounded disabled:opacity-50 flex items-center justify-center"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="m13.15 16.15l-3.625-3.625q-.125-.125-.175-.25T9.3 12t.05-.275t.175-.25L13.15 7.85q.075-.075.163-.112T13.5 7.7q.2 0 .35.138T14 8.2v7.6q0 .225-.15.363t-.35.137q-.05 0-.35-.15"
/>
</svg>
</button>
{(() => {
const maxVisible = 4;
let startPage = Math.max(
1,
Math.min(
categoryPage - Math.floor(maxVisible / 2),
categoryTotalPages - maxVisible + 1
)
);
const endPage = Math.min(
categoryTotalPages,
startPage + maxVisible - 1
);
const visiblePages = [];
for (let i = startPage; i <= endPage; i++) {
visiblePages.push(i);
}
return visiblePages.map((pageNum) => (
<button
key={pageNum}
onClick={() => setCategoryPage(pageNum)}
className={`px-3 py-1 border rounded text-sm transition-colors ${
categoryPage === pageNum
? "bg-[#bb3523] text-white"
: "bg-white dark:bg-gray-800"
}`}
>
{pageNum}
</button>
));
})()}
{/* Tombol Next */}
<button
onClick={() =>
setCategoryPage((prev) =>
Math.min(prev + 1, categoryTotalPages)
)
}
disabled={categoryPage === categoryTotalPages}
className="px-2 py-1 border rounded disabled:opacity-50 flex items-center justify-center"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="M10.5 16.3q-.2 0-.35-.137T10 15.8V8.2q0-.225.15-.362t.35-.138q.05 0 .35.15l3.625 3.625q.125.125.175.25t.05.275t-.05.275t-.175.25L10.85 16.15q-.075.075-.162.113t-.188.037"
/>
</svg>
</button>
</div>
</div>
{/* <div>
<h3 className="text-sm font-medium text-gray-700 dark:text-white">
{t("categories", { defaultValue: "Categories" })}
</h3>
<ul className="mt-2 space-y-2">
{categories.map((category: any) => (
<li key={category?.id}>
@ -795,7 +686,7 @@ const FilterPage = () => {
</button>
</div>
</ul>
</div> */}
</div>
{/* Garis */}
<div className="border-t border-black my-4 dark:border-white"></div>
{/* Garis */}

128
app/[locale]/(public)/image/filter/page.tsx
View File

@ -85,7 +85,7 @@ const FilterPage = () => {
const [monthYearFilter, setMonthYearFilter] = useState<any>();
const [searchTitle, setSearchTitle] = useState<string>("");
const [sortByOpt, setSortByOpt] = useState<any>(
sortBy === "popular" ? "favorite" : "createdAt"
sortBy === "popular" ? "clickCount" : "createdAt"
);
const isRegional = asPath?.includes("regional");
const isSatker = asPath?.includes("satker");
@ -441,7 +441,7 @@ const FilterPage = () => {
if (e.target.value == "terbaru") {
setSortByOpt("createdAt");
} else {
setSortByOpt("favorite");
setSortByOpt("clickCount");
}
setChange(!change);
@ -627,7 +627,6 @@ const FilterPage = () => {
<h3 className="text-sm font-medium text-gray-700 dark:text-white">
{t("categories", { defaultValue: "Categories" })}
</h3>
<ul className="mt-2 space-y-2">
{categories.map((category: any) => (
<li key={category?.id}>
@ -649,90 +648,65 @@ const FilterPage = () => {
</label>
</li>
))}
</ul>
{/* ⬇️ Pagination kategori (rata sejajar) */}
<div className="mt-4 flex justify-center items-center gap-2 flex-wrap">
{/* Tombol Prev */}
<button
onClick={() =>
setCategoryPage((prev) => Math.max(prev - 1, 1))
}
disabled={categoryPage === 1}
className="px-2 py-1 border rounded disabled:opacity-50 flex items-center justify-center"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 24 24"
<div className="mt-4 flex gap-2 justify-center items-center">
<button
onClick={() =>
setCategoryPage((prev) => Math.max(prev - 1, 1))
}
disabled={categoryPage === 1}
className="px-3 py-1 border rounded disabled:opacity-50"
>
<path
fill="currentColor"
d="m13.15 16.15l-3.625-3.625q-.125-.125-.175-.25T9.3 12t.05-.275t.175-.25L13.15 7.85q.075-.075.163-.112T13.5 7.7q.2 0 .35.138T14 8.2v7.6q0 .225-.15.363t-.35.137q-.05 0-.35-.15"
/>
</svg>
</button>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="m13.15 16.15l-3.625-3.625q-.125-.125-.175-.25T9.3 12t.05-.275t.175-.25L13.15 7.85q.075-.075.163-.112T13.5 7.7q.2 0 .35.138T14 8.2v7.6q0 .225-.15.363t-.35.137q-.05 0-.35-.15"
/>
</svg>
</button>
{(() => {
const maxVisible = 4;
let startPage = Math.max(
1,
Math.min(
categoryPage - Math.floor(maxVisible / 2),
categoryTotalPages - maxVisible + 1
)
);
const endPage = Math.min(
categoryTotalPages,
startPage + maxVisible - 1
);
const visiblePages = [];
for (let i = startPage; i <= endPage; i++) {
visiblePages.push(i);
}
return visiblePages.map((pageNum) => (
{Array.from({ length: categoryTotalPages }, (_, i) => (
<button
key={pageNum}
onClick={() => setCategoryPage(pageNum)}
className={`px-3 py-1 border rounded text-sm transition-colors ${
categoryPage === pageNum
key={i}
onClick={() => setCategoryPage(i + 1)}
className={`px-3 py-1 border rounded ${
categoryPage === i + 1
? "bg-[#bb3523] text-white"
: "bg-white dark:bg-gray-800"
: ""
}`}
>
{pageNum}
{i + 1}
</button>
));
})()}
))}
{/* Tombol Next */}
<button
onClick={() =>
setCategoryPage((prev) =>
Math.min(prev + 1, categoryTotalPages)
)
}
disabled={categoryPage === categoryTotalPages}
className="px-2 py-1 border rounded disabled:opacity-50 flex items-center justify-center"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 24 24"
<button
onClick={() =>
setCategoryPage((prev) =>
Math.min(prev + 1, categoryTotalPages)
)
}
disabled={categoryPage === categoryTotalPages}
className="px-3 py-1 border rounded disabled:opacity-50"
>
<path
fill="currentColor"
d="M10.5 16.3q-.2 0-.35-.137T10 15.8V8.2q0-.225.15-.362t.35-.138q.05 0 .35.15l3.625 3.625q.125.125.175.25t.05.275t-.05.275t-.175.25L10.85 16.15q-.075.075-.162.113t-.188.037"
/>
</svg>
</button>
</div>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="M10.5 16.3q-.2 0-.35-.137T10 15.8V8.2q0-.225.15-.362t.35-.138q.05 0 .35.15l3.625 3.625q.125.125.175.25t.05.275t-.05.275t-.175.25L10.85 16.15q-.075.075-.162.113t-.188.037"
/>
</svg>
</button>
</div>
</ul>
</div>
{/* Garis */}
<div className="border-t border-black my-4 dark:border-white"></div>
{/* Garis */}

15
app/[locale]/(public)/profile/page.tsx
View File

@ -19,15 +19,14 @@ import { Link } from "@/components/navigation";
import { useTranslations } from "next-intl";
const profileSchema = z.object({
username: z.string().optional(),
fullname: z.string().optional(),
memberIdentity: z.string().optional(),
email: z.string().email("Format email tidak valid").optional(),
address: z.string().optional(),
phoneNumber: z.string().optional(),
username: z.string().min(1, { message: "Judul diperlukan" }),
fullname: z.string().min(1, { message: "Judul diperlukan" }),
memberIdentity: z.string().min(1, { message: "Judul diperlukan" }),
email: z.string().min(1, { message: "Judul diperlukan" }),
address: z.string().min(2, { message: "Narasi Penugasan harus lebih dari 2 karakter." }),
phoneNumber: z.string().min(1, { message: "Kategori diperlukan" }),
});
type Detail = {
id: number;
userId: any;
@ -190,7 +189,7 @@ const UbahProfile: React.FC = () => {
</button>
</div>
</div>
</div>
</div>
) : (
""
)}

942
app/[locale]/(public)/regional/all-polda/audio/regional/page.tsx
View File

@ -1,942 +0,0 @@
"use client";
import React, { useEffect, useState } from "react";
import { Card, CardContent } from "@/components/ui/card";
import { Checkbox } from "@/components/ui/checkbox";
import { Icon } from "@iconify/react/dist/iconify.js";
import {
formatDateToIndonesian,
getOnlyDate,
getOnlyMonthAndYear,
} from "@/utils/globals";
import { useParams, usePathname, useSearchParams } from "next/navigation";
import {
getPublicCategoryData,
getUserLevelListByParent,
listData,
listDataRegional,
} from "@/service/landing/landing";
import {
ColumnDef,
ColumnFiltersState,
PaginationState,
SortingState,
VisibilityState,
getCoreRowModel,
getFilteredRowModel,
getPaginationRowModel,
getSortedRowModel,
useReactTable,
} from "@tanstack/react-table";
import LandingPagination from "@/components/landing-page/pagination";
import { Reveal } from "@/components/landing-page/Reveal";
import { Link, useRouter } from "@/i18n/routing";
import { Input } from "@/components/ui/input";
import ReactDatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
import { close, loading } from "@/config/swal";
import { useTranslations } from "next-intl";
import ImageBlurry from "@/components/ui/image-blurry";
import { Skeleton } from "@/components/ui/skeleton";
import Image from "next/image";
const columns: ColumnDef<any>[] = [
{
accessorKey: "no",
header: "No",
cell: ({ row }) => <span>{row.getValue("no")}</span>,
},
];
export default function FilterPage() {
const router = useRouter();
const asPath = usePathname();
const params = useParams();
const searchParams = useSearchParams();
const locale = params?.locale;
const t = useTranslations("FilterPage");
const [isLoading, setIsLoading] = useState(true);
const [audioData, setAudioData] = useState<any[]>([]);
const [totalData, setTotalData] = useState<number>(1);
const [totalPage, setTotalPage] = useState<number>(1);
const [sorting, setSorting] = useState<SortingState>([]);
const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({});
const [rowSelection, setRowSelection] = useState({});
const [pagination, setPagination] = useState<PaginationState>({
pageIndex: 0,
pageSize: 10,
});
const [page, setPage] = useState(1);
const [totalContent, setTotalContent] = useState(0);
const [change, setChange] = useState(false);
const sortBy = searchParams?.get("sortBy");
const title = searchParams?.get("title");
const categorie = searchParams?.get("category");
const group = searchParams?.get("group");
const [categoryFilter, setCategoryFilter] = useState<any[]>([]);
const [monthYearFilter, setMonthYearFilter] = useState<any>();
const [searchTitle, setSearchTitle] = useState<string>("");
const [sortByOpt, setSortByOpt] = useState<any>(
sortBy === "popular" ? "favorite" : "createdAt"
);
const [formatFilter, setFormatFilter] = useState<any[]>([]);
const pages = page ? page - 1 : 0;
const [startDateString, setStartDateString] = useState<any>();
const [endDateString, setEndDateString] = useState<any>();
const [dateRange, setDateRange] = useState<any>([null, null]);
const [handleClose, setHandleClose] = useState(false);
const [categories, setCategories] = useState<any[]>([]);
const [isFilterOpen, setIsFilterOpen] = useState(true);
const poldaName = params?.polda_name;
const satkerName = params?.satker_name;
let prefixPath = poldaName
? `/polda/${poldaName}`
: satkerName
? `/satker/${satkerName}`
: "";
// === INIT ===
useEffect(() => {
const timer = setTimeout(() => setIsLoading(false), 1200);
return () => clearTimeout(timer);
}, []);
useEffect(() => {
const pageFromUrl = searchParams?.get("page");
if (pageFromUrl) setPage(Number(pageFromUrl));
}, [searchParams]);
useEffect(() => {
if (categorie) {
setCategoryFilter(
categorie?.split("&")?.length > 1 ? categorie?.split("&") : [categorie]
);
}
}, [categorie]);
useEffect(() => {
fetchCategories(categoryPage);
}, []);
const fetchCategories = async (pageNumber: number) => {
const groupParam =
poldaName && poldaName.length > 1
? poldaName
: satkerName && satkerName.length > 1
? "satker-" + satkerName
: "";
const isInt = locale === "en";
const response = await getPublicCategoryData(
groupParam,
"",
isInt,
pageNumber
); // halaman 1-based
const content = response?.data?.data?.content || [];
const total = response?.data?.data?.totalPages || 1;
setCategories(content);
setCategoryTotalPages(total);
};
useEffect(() => {
if (asPath?.includes("/regional")) getDataRegional();
else getDataAll();
}, [
asPath,
monthYearFilter,
page,
sortBy,
sortByOpt,
title,
startDateString,
endDateString,
categorie,
formatFilter,
]);
async function getDataAll() {
const filter =
categoryFilter?.length > 0
? categoryFilter?.sort().join(",")
: categorie || "";
const name = title || "";
const format = formatFilter?.length > 0 ? formatFilter.join(",") : "";
loading();
const response = await listData(
"4",
name,
filter,
12,
pages,
sortByOpt,
format,
"",
"",
startDateString,
endDateString,
monthYearFilter
? getOnlyMonthAndYear(monthYearFilter)?.split("/")[0]?.replace("", "")
: "",
monthYearFilter
? getOnlyMonthAndYear(monthYearFilter)?.split("/")[1]
: "",
locale == "en" ? true : false
);
close();
const data = response?.data?.data;
setAudioData(data?.content || []);
setTotalData(data?.totalElements || 0);
setTotalPage(data?.totalPages || 1);
setTotalContent(data?.totalElements || 0);
}
async function getDataRegional() {
const filter =
categoryFilter?.length > 0
? categoryFilter?.sort().join(",")
: categorie || "";
const name = title || "";
const format = formatFilter?.length > 0 ? formatFilter.join(",") : "";
loading();
const response = await listDataRegional(
"4",
name,
filter,
format,
"",
startDateString,
endDateString,
monthYearFilter
? getOnlyMonthAndYear(monthYearFilter)?.split("/")[0]?.replace("", "")
: "",
monthYearFilter
? getOnlyMonthAndYear(monthYearFilter)?.split("/")[1]
: "",
12,
pages,
sortByOpt
);
close();
const data = response?.data?.data;
setAudioData(data?.content || []);
setTotalData(data?.totalElements || 0);
setTotalPage(data?.totalPages || 1);
setTotalContent(data?.totalElements || 0);
}
const handleCategoryFilter = (e: boolean, id: string) => {
let filter = [...categoryFilter];
if (e) filter.push(String(id));
else filter = filter.filter((item) => item !== String(id));
router.push(`?category=${filter.join("&")}`);
};
const handleFormatFilter = (e: boolean, id: string) => {
let filter = [...formatFilter];
if (e) filter.push(id);
else filter = filter.filter((item) => item !== id);
setFormatFilter(filter);
};
const handleSorting = (e: any) => {
const value = e.target.value;
setSortByOpt(value === "latest" ? "createdAt" : "favorite");
};
const handleDeleteDate = () => {
setDateRange([null, null]);
setStartDateString("");
setEndDateString("");
setHandleClose(false);
};
const handleKeyUp = () => {
if (!searchTitle) router.push("?title=");
else router.push(`?title=${searchTitle.toLowerCase()}`);
};
// === REACT TABLE ===
const table = useReactTable({
data: audioData,
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,
},
});
const [calenderState, setCalenderState] = useState(false);
const [categoryPage, setCategoryPage] = useState(1);
const [categoryTotalPages, setCategoryTotalPages] = useState(1);
let typingTimer: any;
const cleanCheckbox = () => {
setCategoryFilter([]);
setFormatFilter([]);
router.push(`?category=&title=`);
setDateRange([null, null]);
setMonthYearFilter(null);
setChange(!change);
};
const handleKeyDown = () => {
clearTimeout(typingTimer);
};
return (
<div className="flex flex-col">
{/* Header */}
<div className="flex flex-row items-start gap-3 py-10 px-4 lg:px-20 bg-[#f7f7f7] dark:bg-black">
<p>
{" "}
Audio {">"}{" "}
<span className="font-bold">
{t("allAudio", { defaultValue: "All Audio" })}
</span>
</p>
<p className="font-bold">|</p>
{!title ? (
<p>
{`${t("thereIs", { defaultValue: "Terdapat" })} ${totalContent} ${t(
"downloadableImage",
{ defaultValue: "artikel berisi Foto yang dapat diunduh" }
)}`}
</p>
) : (
<p>
{t("search-results", { defaultValue: "Hasil pencarian untuk" })}{" "}
<span className="font-bold">"{title}"</span>
</p>
)}
</div>
<div className="flex flex-col lg:flex-row gap-6 pl-4 lg:pl-20 py-4">
{/* Left */}
<div className="h-fit min-w-full lg:min-w-[280px] max-w-full lg:max-w-[300px] bg-[#f7f7f7] dark:bg-black p-4 rounded-lg shadow-md">
<h2 className="text-lg font-semibold mb-4 flex items-center gap-1">
<Icon icon="stash:filter-light" fontSize={30} />
Filter
</h2>
<div className="border-t border-black my-4 dark:border-white"></div>
<div className="space-y-6">
<div>
<label
htmlFor="search"
className="block text-sm font-medium text-gray-700 dark:text-white"
>
{t("search", { defaultValue: "Search" })}
</label>
<Input
value={searchTitle}
onChange={(e) => setSearchTitle(e.target.value)}
onKeyUp={handleKeyUp}
onKeyDown={handleKeyDown}
type="text"
id="search"
placeholder={t("searchTitle", { defaultValue: "Search Title" })}
className="mt-1 w-full text-sm border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 dark:text-white">
{t("monthYear", { defaultValue: "Month Year" })}
</label>
<ReactDatePicker
selected={monthYearFilter}
className="mt-1 w-full text-xs border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
onChange={(date) => setMonthYearFilter(date)}
dateFormat="MM | yyyy"
placeholderText={t("selectYear", {
defaultValue: "Select Year",
})}
showMonthYearPicker
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 dark:text-white">
{t("date", { defaultValue: "Date" })}
</label>
<div className="flex flex-row justify justify-between gap-2">
<ReactDatePicker
selectsRange
className="mt-1 w-full border text-sm rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
startDate={dateRange[0]}
endDate={dateRange[1]}
onChange={(update) => {
setDateRange(update);
}}
placeholderText={t("searchDate", {
defaultValue: "Search Date",
})}
onCalendarClose={() => setCalenderState(!calenderState)}
/>
<div className="flex items-center">
{handleClose ? (
<Icon
icon="carbon:close-filled"
onClick={handleDeleteDate}
width="20"
inline
color="#216ba5"
/>
) : (
""
)}
</div>
</div>
</div>
<div>
<h3 className="text-sm font-medium text-gray-700 dark:text-white">
{t("categories", { defaultValue: "Categories" })}
</h3>
<ul className="mt-2 space-y-2">
{categories.map((category: any) => (
<li key={category?.id}>
<label
className="inline-flex items-center"
htmlFor={`${category.id}`}
>
<Checkbox
id={`${category.id}`}
value={category.id}
checked={categoryFilter.includes(String(category.id))}
onCheckedChange={(e) =>
handleCategoryFilter(Boolean(e), category.id)
}
/>
<span className="ml-2 text-gray-700 dark:text-white">
{category?.name}
</span>
</label>
</li>
))}
</ul>
{/* ⬇️ Pagination kategori (rata sejajar) */}
<div className="mt-4 flex justify-center items-center gap-2 flex-wrap">
{/* Tombol Prev */}
<button
onClick={() =>
setCategoryPage((prev) => Math.max(prev - 1, 1))
}
disabled={categoryPage === 1}
className="px-2 py-1 border rounded disabled:opacity-50 flex items-center justify-center"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="m13.15 16.15l-3.625-3.625q-.125-.125-.175-.25T9.3 12t.05-.275t.175-.25L13.15 7.85q.075-.075.163-.112T13.5 7.7q.2 0 .35.138T14 8.2v7.6q0 .225-.15.363t-.35.137q-.05 0-.35-.15"
/>
</svg>
</button>
{(() => {
const maxVisible = 4;
let startPage = Math.max(
1,
Math.min(
categoryPage - Math.floor(maxVisible / 2),
categoryTotalPages - maxVisible + 1
)
);
const endPage = Math.min(
categoryTotalPages,
startPage + maxVisible - 1
);
const visiblePages = [];
for (let i = startPage; i <= endPage; i++) {
visiblePages.push(i);
}
return visiblePages.map((pageNum) => (
<button
key={pageNum}
onClick={() => setCategoryPage(pageNum)}
className={`px-3 py-1 border rounded text-sm transition-colors ${
categoryPage === pageNum
? "bg-[#bb3523] text-white"
: "bg-white dark:bg-gray-800"
}`}
>
{pageNum}
</button>
));
})()}
{/* Tombol Next */}
<button
onClick={() =>
setCategoryPage((prev) =>
Math.min(prev + 1, categoryTotalPages)
)
}
disabled={categoryPage === categoryTotalPages}
className="px-2 py-1 border rounded disabled:opacity-50 flex items-center justify-center"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="M10.5 16.3q-.2 0-.35-.137T10 15.8V8.2q0-.225.15-.362t.35-.138q.05 0 .35.15l3.625 3.625q.125.125.175.25t.05.275t-.05.275t-.175.25L10.85 16.15q-.075.075-.162.113t-.188.037"
/>
</svg>
</button>
</div>
</div>
{/* <div>
<h3 className="text-sm font-medium text-gray-700 dark:text-white">
{t("categories", { defaultValue: "Categories" })}
</h3>
<ul className="mt-2 space-y-2">
{categories?.map((category: any) => (
<li key={category?.id}>
<label
className="inline-flex items-center"
htmlFor={`${category.id}`}
>
<Checkbox
id={`${category.id}`}
value={category.id}
checked={categoryFilter.includes(String(category.id))}
onCheckedChange={(e) =>
handleCategoryFilter(Boolean(e), category.id)
}
/>
<span className="ml-2 text-gray-700 dark:text-white">
{category?.name}
</span>
</label>
</li>
))}
<div className="mt-4 flex gap-2 justify-center items-center">
<button
onClick={() =>
setCategoryPage((prev) => Math.max(prev - 1, 1))
}
disabled={categoryPage === 1}
className="px-3 py-1 border rounded disabled:opacity-50"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="m13.15 16.15l-3.625-3.625q-.125-.125-.175-.25T9.3 12t.05-.275t.175-.25L13.15 7.85q.075-.075.163-.112T13.5 7.7q.2 0 .35.138T14 8.2v7.6q0 .225-.15.363t-.35.137q-.05 0-.35-.15"
/>
</svg>
</button>
{Array.from({ length: categoryTotalPages }, (_, i) => (
<button
key={i}
onClick={() => setCategoryPage(i + 1)}
className={`px-3 py-1 border rounded ${
categoryPage === i + 1 ? "bg-[#bb3523] text-white" : ""
}`}
>
{i + 1}
</button>
))}
<button
onClick={() =>
setCategoryPage((prev) =>
Math.min(prev + 1, categoryTotalPages)
)
}
disabled={categoryPage === categoryTotalPages}
className="px-3 py-1 border rounded disabled:opacity-50"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="M10.5 16.3q-.2 0-.35-.137T10 15.8V8.2q0-.225.15-.362t.35-.138q.05 0 .35.15l3.625 3.625q.125.125.175.25t.05.275t-.05.275t-.175.25L10.85 16.15q-.075.075-.162.113t-.188.037"
/>
</svg>
</button>
</div>
</ul>
</div> */}
{/* Garis */}
<div className="border-t border-black my-4 dark:border-white"></div>
{/* Garis */}
<div>
<h3 className="text-sm font-medium text-gray-700 dark:text-white">
Format
</h3>
<ul className="mt-2 space-y-2">
<li>
<label className="inline-flex items-center">
<Checkbox
id="png"
value="png"
checked={formatFilter.includes("wav")}
onCheckedChange={(e) =>
handleFormatFilter(Boolean(e), "wav")
}
/>
<span className="ml-2 text-gray-700 dark:text-white">
WAV
</span>
</label>
</li>
<li>
<label className="inline-flex items-center">
<Checkbox
id="jpeg"
value="jpeg"
checked={formatFilter.includes("mp3")}
onCheckedChange={(e) =>
handleFormatFilter(Boolean(e), "mp3")
}
/>
<span className="ml-2 text-gray-700 dark:text-white">
MP3
</span>
</label>
</li>
</ul>
</div>
<div className="border-t border-black dark:border-white my-4"></div>
<div className="text-center">
<a
onClick={cleanCheckbox}
className="text-[#bb3523] cursor-pointer"
>
<b>Reset Filter</b>
</a>
</div>
</div>
</div>
{/* CONTENT */}
<div className="w-full pr-4 lg:pr-16 pb-4">
<Reveal>
<div className="flex flex-col items-end mb-4">
<h2 className="text-lg font-semibold">Sort By</h2>
<select
defaultValue={sortBy == "popular" ? "popular" : "latest"}
onChange={handleSorting}
className="border rounded-md py-2 px-3"
>
<option value="latest">Latest</option>
<option value="popular">Most Popular</option>
</select>
</div>
{isLoading ? (
<div className="flex flex-col gap-4">
<Skeleton className="h-[200px] w-full rounded-xl" />
<Skeleton className="h-[200px] w-full rounded-xl" />
</div>
) : audioData?.length > 0 ? (
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
{audioData?.map((audio: any) => (
<Card
key={audio?.id}
className="hover:scale-105 transition-transform duration-300"
>
<CardContent
key={audio?.id}
className="md:basis-1/2 lg:basis-1/3"
>
<Link
href={`${prefixPath}/audio/detail/${audio?.slug
?.split("/")
.pop()}`}
// href={`${prefixPath}/document/detail/${text?.slug}`}
// href={prefixPath + `/document/detail/${text?.slug}`}
// onClick={() =>
// router.push(prefixPath + `/document/detail/${text?.slug}`)
// }
className="cursor-pointer rounded-lg shadow-md overflow-hidden bg-white dark:bg-black dark:border dark:border-gray-500"
>
{/* Ikon di tengah dengan latar kuning */}
<div className="flex items-center justify-center bg-[#bb3523] w-full h-[180px] text-white">
<svg
xmlns="http://www.w3.org/2000/svg"
width="150"
height="150"
viewBox="0 0 20 20"
>
<path
fill="currentColor"
d="M14.702 2.226A1 1 0 0 1 16 3.18v6.027a5.5 5.5 0 0 0-1-.184V6.18L8 8.368V15.5a2.5 2.5 0 1 1-1-2V5.368a1 1 0 0 1 .702-.955zM8 7.32l7-2.187V3.18L8 5.368zM5.5 14a1.5 1.5 0 1 0 0 3a1.5 1.5 0 0 0 0-3m13.5.5a4.5 4.5 0 1 1-9 0a4.5 4.5 0 0 1 9 0m-2.265-.436l-2.994-1.65a.5.5 0 0 0-.741.438v3.3a.5.5 0 0 0 .741.438l2.994-1.65a.5.5 0 0 0 0-.876"
/>
</svg>{" "}
</div>
{/* Konten bawah */}
<div className="p-4 flex flex-col gap-2">
{/* Kategori merah */}
<div className="text-[12px] font-bold text-red-600 uppercase">
{audio?.categoryName?.toUpperCase() ?? "Text"}
</div>
{/* Judul */}
<div className="font-semibold text-gray-900 dark:text-white text-xl leading-snug line-clamp-4">
{audio?.title}
</div>
</div>
</Link>
</CardContent>
</Card>
))}
</div>
) : (
<div className="flex justify-center items-center py-10">
<Image
src="/assets/empty-data.png"
alt="empty"
width={200}
height={200}
/>
</div>
)}
{totalPage > 1 && (
<LandingPagination
table={table}
totalData={totalData}
totalPage={totalPage}
/>
)}
</Reveal>
</div>
</div>
</div>
);
}
// import AllContentPage from "@/components/landing-page/all-content-page";
// const regions = [
// { name: "Polda Aceh", slug: "aceh", logo: "/logo/polda/polda-aceh.png" },
// { name: "Polda Bali", slug: "bali", logo: "/logo/polda/polda-bali.png" },
// {
// name: "Polda Bangka Belitung",
// slug: "bangka-belitung",
// logo: "/logo/polda/polda-bangka-belitung.png",
// },
// {
// name: "Polda Banten",
// slug: "banten",
// logo: "/logo/polda/polda-banten.png",
// },
// {
// name: "Polda Bengkulu",
// slug: "bengkulu",
// logo: "/logo/polda/polda-bengkulu.png",
// },
// {
// name: "Polda DIY",
// slug: "jogja",
// logo: "/logo/polda/polda-jogja.png",
// },
// {
// name: "Polda Gorontalo",
// slug: "gorontalo",
// logo: "/logo/polda/polda-gorontalo.png",
// },
// { name: "Polda Jambi", slug: "jambi", logo: "/logo/polda/polda-jambi.png" },
// {
// name: "Polda Jawa Barat",
// slug: "jawa-barat",
// logo: "/logo/polda/polda-jawa-barat.png",
// },
// {
// name: "Polda Jawa Tengah",
// slug: "jawa-tengah",
// logo: "/logo/polda/polda-jawa-tengah.png",
// },
// {
// name: "Polda Jawa Timur",
// slug: "jawa-timur",
// logo: "/logo/polda/polda-jawa-timur.png",
// },
// {
// name: "Polda Kalimantan Barat",
// slug: "kalimantan-barat",
// logo: "/logo/polda/polda-kalimantan-barat.png",
// },
// {
// name: "Polda Kalimantan Selatan",
// slug: "kalimantan-selatan",
// logo: "/logo/polda/polda-kalimantan-selatan.png",
// },
// {
// name: "Polda Kalimantan Tengah",
// slug: "kalimantan-tengah",
// logo: "/logo/polda/polda-kalimantan-tengah.png",
// },
// {
// name: "Polda Kalimantan Timur",
// slug: "kalimantan-timur",
// logo: "/logo/polda/polda-kalimantan-timur.png",
// },
// {
// name: "Polda Kalimantan Utara",
// slug: "kalimantan-utara",
// logo: "/logo/polda/polda-kalimantan-utara.png",
// },
// {
// name: "Polda Kepulauan Riau",
// slug: "kepulauan-riau",
// logo: "/logo/polda/polda-kepulauan-riau.png",
// },
// {
// name: "Polda Lampung",
// slug: "lampung",
// logo: "/logo/polda/polda-lampung.png",
// },
// {
// name: "Polda Maluku",
// slug: "maluku",
// logo: "/logo/polda/polda-maluku.png",
// },
// {
// name: "Polda Maluku Utara",
// slug: "maluku-utara",
// logo: "/logo/polda/polda-maluku-utara.png",
// },
// {
// name: "Polda Metro Jaya",
// slug: "metro-jaya",
// logo: "/logo/polda/polda-metro-jaya.png",
// },
// {
// name: "Polda NTB",
// slug: "ntb",
// logo: "/logo/polda/polda-ntb.png",
// },
// {
// name: "Polda NTT",
// slug: "ntt",
// logo: "/logo/polda/polda-ntt.png",
// },
// { name: "Polda Papua", slug: "papua", logo: "/logo/polda/polda-papua.png" },
// {
// name: "Polda Papua Barat",
// slug: "papua-barat",
// logo: "/logo/polda/polda-papua-barat.png",
// },
// {
// name: "Polda Papua Barat Daya",
// slug: "papua-barat-daya",
// logo: "/logo/polda/polda-papua-barat-daya.png",
// },
// {
// name: "Polda Papua Tengah",
// slug: "papua-tengah",
// logo: "/logo/polda/polda-papua-tengah.png",
// },
// { name: "Polda Riau", slug: "riau", logo: "/logo/polda/polda-riau.png" },
// {
// name: "Polda Sulawesi Barat",
// slug: "sulawesi-barat",
// logo: "/logo/polda/polda-sulawesi-barat.png",
// },
// {
// name: "Polda Sulawesi Selatan",
// slug: "sulawesi-selatan",
// logo: "/logo/polda/polda-sulawesi-selatan.png",
// },
// {
// name: "Polda Sulawesi Tengah",
// slug: "sulawesi-tengah",
// logo: "/logo/polda/polda-sulawesi-tengah.png",
// },
// {
// name: "Polda Sulawesi Tenggara",
// slug: "sulawesi-tenggara",
// logo: "/logo/polda/polda-sulawesi-tenggara.png",
// },
// {
// name: "Polda Sulawesi Utara",
// slug: "sulawesi-utara",
// logo: "/logo/polda/polda-sulawesi-utara.png",
// },
// {
// name: "Polda Sumatera Barat",
// slug: "sumatera-barat",
// logo: "/logo/polda/polda-sumatera-barat.png",
// },
// {
// name: "Polda Sumatera Selatan",
// slug: "sumatera-selatan",
// logo: "/logo/polda/polda-sumatera-selatan.png",
// },
// {
// name: "Polda Sumatera Utara",
// slug: "sumatera-utara",
// logo: "/logo/polda/polda-sumatera-utara.png",
// },
// // {
// // name: "Satuan Kerja POLRI",
// // slug: "satker-polri",
// // logo: "/logo/satker/SATUAN-KERJA-POLRI.png",
// // },
// // {
// // name: "Internasional",
// // slug: "internasional",
// // logo: "/assets/polda/internasional.png",
// // },
// ];
// export default function PoldaAllAudioPage() {
// return (
// <AllContentPage
// typeId="4"
// title="Semua Konten Audio per Polda"
// basePath="audio"
// mode="polda"
// dataList={regions}
// />
// );
// }

988
app/[locale]/(public)/regional/all-polda/document/regional/page.tsx
View File

@ -1,988 +0,0 @@
"use client";
import React, { useEffect, useState } from "react";
import { Card, CardContent } from "@/components/ui/card";
import { Checkbox } from "@/components/ui/checkbox";
import { Icon } from "@iconify/react/dist/iconify.js";
import {
formatDateToIndonesian,
getOnlyDate,
getOnlyMonthAndYear,
} from "@/utils/globals";
import { useParams, usePathname, useSearchParams } from "next/navigation";
import {
getPublicCategoryData,
getUserLevelListByParent,
listData,
listDataRegional,
} from "@/service/landing/landing";
import {
ColumnDef,
ColumnFiltersState,
PaginationState,
SortingState,
VisibilityState,
getCoreRowModel,
getFilteredRowModel,
getPaginationRowModel,
getSortedRowModel,
useReactTable,
} from "@tanstack/react-table";
import LandingPagination from "@/components/landing-page/pagination";
import { Reveal } from "@/components/landing-page/Reveal";
import { Link, useRouter } from "@/i18n/routing";
import { Input } from "@/components/ui/input";
import ReactDatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
import { close, loading } from "@/config/swal";
import { useTranslations } from "next-intl";
import ImageBlurry from "@/components/ui/image-blurry";
import { Skeleton } from "@/components/ui/skeleton";
import Image from "next/image";
const columns: ColumnDef<any>[] = [
{
accessorKey: "no",
header: "No",
cell: ({ row }) => <span>{row.getValue("no")}</span>,
},
];
export default function FilterPage() {
const router = useRouter();
const asPath = usePathname();
const params = useParams();
const searchParams = useSearchParams();
const locale = params?.locale;
const t = useTranslations("FilterPage");
const [isLoading, setIsLoading] = useState(true);
const [documentData, setDocumentData] = useState<any[]>([]);
const [totalData, setTotalData] = useState<number>(1);
const [totalPage, setTotalPage] = useState<number>(1);
const [sorting, setSorting] = useState<SortingState>([]);
const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({});
const [rowSelection, setRowSelection] = useState({});
const [pagination, setPagination] = useState<PaginationState>({
pageIndex: 0,
pageSize: 10,
});
const [page, setPage] = useState(1);
const [totalContent, setTotalContent] = useState(0);
const [change, setChange] = useState(false);
const sortBy = searchParams?.get("sortBy");
const title = searchParams?.get("title");
const categorie = searchParams?.get("category");
const group = searchParams?.get("group");
const [categoryFilter, setCategoryFilter] = useState<any[]>([]);
const [monthYearFilter, setMonthYearFilter] = useState<any>();
const [searchTitle, setSearchTitle] = useState<string>("");
const [sortByOpt, setSortByOpt] = useState<any>(
sortBy === "popular" ? "favorite" : "createdAt"
);
const [formatFilter, setFormatFilter] = useState<any[]>([]);
const pages = page ? page - 1 : 0;
const [startDateString, setStartDateString] = useState<any>();
const [endDateString, setEndDateString] = useState<any>();
const [dateRange, setDateRange] = useState<any>([null, null]);
const [handleClose, setHandleClose] = useState(false);
const [categories, setCategories] = useState<any[]>([]);
const [isFilterOpen, setIsFilterOpen] = useState(true);
const poldaName = params?.polda_name;
const satkerName = params?.satker_name;
let prefixPath = poldaName
? `/polda/${poldaName}`
: satkerName
? `/satker/${satkerName}`
: "";
// === INIT ===
useEffect(() => {
const timer = setTimeout(() => setIsLoading(false), 1200);
return () => clearTimeout(timer);
}, []);
useEffect(() => {
const pageFromUrl = searchParams?.get("page");
if (pageFromUrl) setPage(Number(pageFromUrl));
}, [searchParams]);
useEffect(() => {
if (categorie) {
setCategoryFilter(
categorie?.split("&")?.length > 1 ? categorie?.split("&") : [categorie]
);
}
}, [categorie]);
useEffect(() => {
fetchCategories(categoryPage);
}, []);
const fetchCategories = async (pageNumber: number) => {
const groupParam =
poldaName && poldaName.length > 1
? poldaName
: satkerName && satkerName.length > 1
? "satker-" + satkerName
: "";
const isInt = locale === "en";
const response = await getPublicCategoryData(
groupParam,
"",
isInt,
pageNumber
); // halaman 1-based
const content = response?.data?.data?.content || [];
const total = response?.data?.data?.totalPages || 1;
setCategories(content);
setCategoryTotalPages(total);
};
useEffect(() => {
if (asPath?.includes("/regional")) getDataRegional();
else getDataAll();
}, [
asPath,
monthYearFilter,
page,
sortBy,
sortByOpt,
title,
startDateString,
endDateString,
categorie,
formatFilter,
]);
async function getDataAll() {
const filter =
categoryFilter?.length > 0
? categoryFilter?.sort().join(",")
: categorie || "";
const name = title || "";
const format = formatFilter?.length > 0 ? formatFilter.join(",") : "";
loading();
const response = await listData(
"3",
name,
filter,
12,
pages,
sortByOpt,
format,
"",
"",
startDateString,
endDateString,
monthYearFilter
? getOnlyMonthAndYear(monthYearFilter)?.split("/")[0]?.replace("", "")
: "",
monthYearFilter
? getOnlyMonthAndYear(monthYearFilter)?.split("/")[1]
: "",
locale == "en" ? true : false
);
close();
const data = response?.data?.data;
setDocumentData(data?.content || []);
setTotalData(data?.totalElements || 0);
setTotalPage(data?.totalPages || 1);
setTotalContent(data?.totalElements || 0);
}
async function getDataRegional() {
const filter =
categoryFilter?.length > 0
? categoryFilter?.sort().join(",")
: categorie || "";
const name = title || "";
const format = formatFilter?.length > 0 ? formatFilter.join(",") : "";
loading();
const response = await listDataRegional(
"3",
name,
filter,
format,
"",
startDateString,
endDateString,
monthYearFilter
? getOnlyMonthAndYear(monthYearFilter)?.split("/")[0]?.replace("", "")
: "",
monthYearFilter
? getOnlyMonthAndYear(monthYearFilter)?.split("/")[1]
: "",
12,
pages,
sortByOpt
);
close();
const data = response?.data?.data;
setDocumentData(data?.content || []);
setTotalData(data?.totalElements || 0);
setTotalPage(data?.totalPages || 1);
setTotalContent(data?.totalElements || 0);
}
const handleCategoryFilter = (e: boolean, id: string) => {
let filter = [...categoryFilter];
if (e) filter.push(String(id));
else filter = filter.filter((item) => item !== String(id));
router.push(`?category=${filter.join("&")}`);
};
const handleFormatFilter = (e: boolean, id: string) => {
let filter = [...formatFilter];
if (e) filter.push(id);
else filter = filter.filter((item) => item !== id);
setFormatFilter(filter);
};
const handleSorting = (e: any) => {
const value = e.target.value;
setSortByOpt(value === "latest" ? "createdAt" : "favorite");
};
const handleDeleteDate = () => {
setDateRange([null, null]);
setStartDateString("");
setEndDateString("");
setHandleClose(false);
};
const handleKeyUp = () => {
if (!searchTitle) router.push("?title=");
else router.push(`?title=${searchTitle.toLowerCase()}`);
};
// === REACT TABLE ===
const table = useReactTable({
data: documentData,
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,
},
});
const [calenderState, setCalenderState] = useState(false);
const [categoryPage, setCategoryPage] = useState(1);
const [categoryTotalPages, setCategoryTotalPages] = useState(1);
let typingTimer: any;
const cleanCheckbox = () => {
setCategoryFilter([]);
setFormatFilter([]);
router.push(`?category=&title=`);
setDateRange([null, null]);
setMonthYearFilter(null);
setChange(!change);
};
const handleKeyDown = () => {
clearTimeout(typingTimer);
};
return (
<div className="flex flex-col">
{/* Header */}
<div className="flex flex-row items-start gap-3 py-10 px-4 lg:px-20 bg-[#f7f7f7] dark:bg-black">
<p>
{" "}
{t("text", { defaultValue: "Text" })} {">"}{" "}
<span className="font-bold">
{t("allText", { defaultValue: "All Text" })}
</span>
</p>
<p className="font-bold">|</p>
{!title ? (
<p>
{`${t("thereIs", { defaultValue: "Terdapat" })} ${totalContent} ${t(
"downloadableImage",
{ defaultValue: "artikel berisi Foto yang dapat diunduh" }
)}`}
</p>
) : (
<p>
{t("search-results", { defaultValue: "Hasil pencarian untuk" })}{" "}
<span className="font-bold">"{title}"</span>
</p>
)}
</div>
<div className="flex flex-col lg:flex-row gap-6 pl-4 lg:pl-20 py-4">
{/* Left */}
<div className="h-fit min-w-full lg:min-w-[280px] max-w-full lg:max-w-[300px] bg-[#f7f7f7] dark:bg-black p-4 rounded-lg shadow-md">
<h2 className="text-lg font-semibold mb-4 flex items-center gap-1">
<Icon icon="stash:filter-light" fontSize={30} />
Filter
</h2>
<div className="border-t border-black my-4 dark:border-white"></div>
<div className="space-y-6">
<div>
<label
htmlFor="search"
className="block text-sm font-medium text-gray-700 dark:text-white"
>
{t("search", { defaultValue: "Search" })}
</label>
<Input
value={searchTitle}
onChange={(e) => setSearchTitle(e.target.value)}
onKeyUp={handleKeyUp}
onKeyDown={handleKeyDown}
type="text"
id="search"
placeholder={t("searchTitle", { defaultValue: "Search Title" })}
className="mt-1 w-full border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 dark:text-white">
{t("monthYear", { defaultValue: "Month Year" })}
</label>
<ReactDatePicker
selected={monthYearFilter}
className="mt-1 w-full text-xs border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
onChange={(date) => setMonthYearFilter(date)}
dateFormat="MM | yyyy"
placeholderText={t("selectYear", {
defaultValue: "Select Year",
})}
showMonthYearPicker
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 dark:text-white">
{t("date", { defaultValue: "Date" })}
</label>
<div className="flex flex-row justify justify-between gap-2">
<ReactDatePicker
selectsRange
className="mt-1 w-full border text-sm rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
startDate={dateRange[0]}
endDate={dateRange[1]}
onChange={(update) => {
setDateRange(update);
}}
placeholderText={t("selectDate", {
defaultValue: "Select Date",
})}
onCalendarClose={() => setCalenderState(!calenderState)}
/>
<div className="flex items-center">
{handleClose ? (
<Icon
icon="carbon:close-filled"
onClick={handleDeleteDate}
width="20"
inline
color="#216ba5"
/>
) : (
""
)}
</div>
</div>
</div>
<div>
<h3 className="text-sm font-medium text-gray-700 dark:text-white">
{t("categories", { defaultValue: "Categories" })}
</h3>
<ul className="mt-2 space-y-2">
{categories.map((category: any) => (
<li key={category?.id}>
<label
className="inline-flex items-center"
htmlFor={`${category.id}`}
>
<Checkbox
id={`${category.id}`}
value={category.id}
checked={categoryFilter.includes(String(category.id))}
onCheckedChange={(e) =>
handleCategoryFilter(Boolean(e), category.id)
}
/>
<span className="ml-2 text-gray-700 dark:text-white">
{category?.name}
</span>
</label>
</li>
))}
</ul>
{/* ⬇️ Pagination kategori (rata sejajar) */}
<div className="mt-4 flex justify-center items-center gap-2 flex-wrap">
{/* Tombol Prev */}
<button
onClick={() =>
setCategoryPage((prev) => Math.max(prev - 1, 1))
}
disabled={categoryPage === 1}
className="px-2 py-1 border rounded disabled:opacity-50 flex items-center justify-center"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="m13.15 16.15l-3.625-3.625q-.125-.125-.175-.25T9.3 12t.05-.275t.175-.25L13.15 7.85q.075-.075.163-.112T13.5 7.7q.2 0 .35.138T14 8.2v7.6q0 .225-.15.363t-.35.137q-.05 0-.35-.15"
/>
</svg>
</button>
{(() => {
const maxVisible = 4;
let startPage = Math.max(
1,
Math.min(
categoryPage - Math.floor(maxVisible / 2),
categoryTotalPages - maxVisible + 1
)
);
const endPage = Math.min(
categoryTotalPages,
startPage + maxVisible - 1
);
const visiblePages = [];
for (let i = startPage; i <= endPage; i++) {
visiblePages.push(i);
}
return visiblePages.map((pageNum) => (
<button
key={pageNum}
onClick={() => setCategoryPage(pageNum)}
className={`px-3 py-1 border rounded text-sm transition-colors ${
categoryPage === pageNum
? "bg-[#bb3523] text-white"
: "bg-white dark:bg-gray-800"
}`}
>
{pageNum}
</button>
));
})()}
{/* Tombol Next */}
<button
onClick={() =>
setCategoryPage((prev) =>
Math.min(prev + 1, categoryTotalPages)
)
}
disabled={categoryPage === categoryTotalPages}
className="px-2 py-1 border rounded disabled:opacity-50 flex items-center justify-center"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="M10.5 16.3q-.2 0-.35-.137T10 15.8V8.2q0-.225.15-.362t.35-.138q.05 0 .35.15l3.625 3.625q.125.125.175.25t.05.275t-.05.275t-.175.25L10.85 16.15q-.075.075-.162.113t-.188.037"
/>
</svg>
</button>
</div>
</div>
{/* <div>
<h3 className="text-sm font-medium text-gray-700 dark:text-white">
{t("categories", { defaultValue: "Categories" })}
</h3>
<ul className="mt-2 space-y-2">
{categories.map((category: any) => (
<li key={category?.id}>
<label
className="inline-flex items-center"
htmlFor={`${category.id}`}
>
<Checkbox
id={`${category.id}`}
value={category.id}
checked={categoryFilter.includes(String(category.id))}
onCheckedChange={(e) =>
handleCategoryFilter(Boolean(e), category.id)
}
/>
<span className="ml-2 text-gray-700 dark:text-white">
{category?.name}
</span>
</label>
</li>
))}
<div className="mt-4 flex gap-2 justify-center items-center">
<button
onClick={() =>
setCategoryPage((prev) => Math.max(prev - 1, 1))
}
disabled={categoryPage === 1}
className="px-3 py-1 border rounded disabled:opacity-50"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="m13.15 16.15l-3.625-3.625q-.125-.125-.175-.25T9.3 12t.05-.275t.175-.25L13.15 7.85q.075-.075.163-.112T13.5 7.7q.2 0 .35.138T14 8.2v7.6q0 .225-.15.363t-.35.137q-.05 0-.35-.15"
/>
</svg>
</button>
{Array.from({ length: categoryTotalPages }, (_, i) => (
<button
key={i}
onClick={() => setCategoryPage(i + 1)}
className={`px-3 py-1 border rounded ${
categoryPage === i + 1 ? "bg-[#bb3523] text-white" : ""
}`}
>
{i + 1}
</button>
))}
<button
onClick={() =>
setCategoryPage((prev) =>
Math.min(prev + 1, categoryTotalPages)
)
}
disabled={categoryPage === categoryTotalPages}
className="px-3 py-1 border rounded disabled:opacity-50"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="M10.5 16.3q-.2 0-.35-.137T10 15.8V8.2q0-.225.15-.362t.35-.138q.05 0 .35.15l3.625 3.625q.125.125.175.25t.05.275t-.05.275t-.175.25L10.85 16.15q-.075.075-.162.113t-.188.037"
/>
</svg>
</button>
</div>
</ul>
</div> */}
{/* Garis */}
<div className="border-t border-black my-4 dark:border-white"></div>
{/* Garis */}
<div>
<h3 className="text-sm font-medium text-gray-700 dark:text-white">
Format
</h3>
<ul className="mt-2 space-y-2">
<li>
<label className="inline-flex items-center">
<Checkbox
id="doc"
value="doc"
checked={formatFilter.includes("doc")}
onCheckedChange={(e) =>
handleFormatFilter(Boolean(e), "doc")
}
/>
<span className="ml-2 text-gray-700 dark:text-white">
DOC
</span>
</label>
</li>
<li>
<label className="inline-flex items-center">
<Checkbox
id="docx"
value="docx"
checked={formatFilter.includes("docx")}
onCheckedChange={(e) =>
handleFormatFilter(Boolean(e), "docx")
}
/>
<span className="ml-2 text-gray-700 dark:text-white">
DOCX
</span>
</label>
</li>
<li>
<label className="inline-flex items-center">
<Checkbox
id="pdf"
value="pdf"
checked={formatFilter.includes("pdf")}
onCheckedChange={(e) =>
handleFormatFilter(Boolean(e), "pdf")
}
/>
<span className="ml-2 text-gray-700 dark:text-white">
PDF
</span>
</label>
</li>
<li>
<label className="inline-flex items-center">
<Checkbox
id="ppt"
value="ppt"
checked={formatFilter.includes("ppt")}
onCheckedChange={(e) =>
handleFormatFilter(Boolean(e), "ppt")
}
/>
<span className="ml-2 text-gray-700 dark:text-white">
PPT
</span>
</label>
</li>
<li>
<label className="inline-flex items-center">
<Checkbox
id="pptx"
value="pptx"
checked={formatFilter.includes("pptx")}
onCheckedChange={(e) =>
handleFormatFilter(Boolean(e), "pptx")
}
/>
<span className="ml-2 text-gray-700 dark:text-white">
PPTX
</span>
</label>
</li>
</ul>
</div>
<div className="border-t border-black dark:border-white my-4"></div>
<div className="text-center">
<a
onClick={cleanCheckbox}
className="text-[#bb3523] cursor-pointer"
>
<b>Reset Filter</b>
</a>
</div>
</div>
</div>
{/* RIGHT */}
<div className="w-full pr-4 lg:pr-16 pb-4">
<Reveal>
<div className="flex flex-col items-end mb-4">
<h2 className="text-lg font-semibold">Sort By</h2>
<select
defaultValue={sortBy == "popular" ? "popular" : "latest"}
onChange={handleSorting}
className="border rounded-md py-2 px-3"
>
<option value="latest">Latest</option>
<option value="popular">Most Popular</option>
</select>
</div>
{isLoading ? (
<div className="flex flex-col gap-4">
<Skeleton className="h-[200px] w-full rounded-xl" />
<Skeleton className="h-[200px] w-full rounded-xl" />
</div>
) : documentData?.length > 0 ? (
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
{documentData?.map((document: any) => (
<Card
key={document?.id}
className="hover:scale-105 transition-transform duration-300"
>
<CardContent
key={document?.id}
className="md:basis-1/2 lg:basis-1/3"
>
<Link
href={`${prefixPath}/document/detail/${document?.slug
?.split("/")
.pop()}`}
// href={`${prefixPath}/document/detail/${text?.slug}`}
// href={prefixPath + `/document/detail/${text?.slug}`}
// onClick={() =>
// router.push(prefixPath + `/document/detail/${text?.slug}`)
// }
className="cursor-pointer rounded-lg shadow-md overflow-hidden bg-white dark:bg-black dark:border dark:border-gray-500"
>
{/* Ikon di tengah dengan latar kuning */}
<div className="bg-[#e0c350] flex items-center justify-center h-[170px] text-white">
<svg
xmlns="http://www.w3.org/2000/svg"
width="150"
height="150"
viewBox="0 0 16 16"
>
<path
fill="currentColor"
d="M5 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V5.414a1.5 1.5 0 0 0-.44-1.06L9.647 1.439A1.5 1.5 0 0 0 8.586 1zM4 3a1 1 0 0 1 1-1h3v2.5A1.5 1.5 0 0 0 9.5 6H12v7a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1zm7.793 2H9.5a.5.5 0 0 1-.5-.5V2.207zM7 7.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5M7.5 9a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1zM7 11.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5M5.5 8a.5.5 0 1 0 0-1a.5.5 0 0 0 0 1M6 9.5a.5.5 0 1 1-1 0a.5.5 0 0 1 1 0M5.5 12a.5.5 0 1 0 0-1a.5.5 0 0 0 0 1"
/>
</svg>
</div>
{/* Konten bawah */}
<div className="p-4 flex flex-col gap-2">
{/* Kategori merah */}
<div className="text-[12px] font-bold text-red-600 uppercase">
{document?.categoryName?.toUpperCase() ?? "Text"}
</div>
{/* Judul */}
<div className="font-semibold text-gray-900 dark:text-white text-xl leading-snug line-clamp-4">
{document?.title}
</div>
</div>
</Link>
</CardContent>
</Card>
))}
</div>
) : (
<div className="flex justify-center items-center py-10">
<Image
src="/assets/empty-data.png"
alt="empty"
width={200}
height={200}
/>
</div>
)}
{totalPage > 1 && (
<LandingPagination
table={table}
totalData={totalData}
totalPage={totalPage}
/>
)}
</Reveal>
</div>
</div>
</div>
);
}
// import AllContentPage from "@/components/landing-page/all-content-page";
// const regions = [
// { name: "Polda Aceh", slug: "aceh", logo: "/logo/polda/polda-aceh.png" },
// { name: "Polda Bali", slug: "bali", logo: "/logo/polda/polda-bali.png" },
// {
// name: "Polda Bangka Belitung",
// slug: "bangka-belitung",
// logo: "/logo/polda/polda-bangka-belitung.png",
// },
// {
// name: "Polda Banten",
// slug: "banten",
// logo: "/logo/polda/polda-banten.png",
// },
// {
// name: "Polda Bengkulu",
// slug: "bengkulu",
// logo: "/logo/polda/polda-bengkulu.png",
// },
// {
// name: "Polda DIY",
// slug: "jogja",
// logo: "/logo/polda/polda-jogja.png",
// },
// {
// name: "Polda Gorontalo",
// slug: "gorontalo",
// logo: "/logo/polda/polda-gorontalo.png",
// },
// { name: "Polda Jambi", slug: "jambi", logo: "/logo/polda/polda-jambi.png" },
// {
// name: "Polda Jawa Barat",
// slug: "jawa-barat",
// logo: "/logo/polda/polda-jawa-barat.png",
// },
// {
// name: "Polda Jawa Tengah",
// slug: "jawa-tengah",
// logo: "/logo/polda/polda-jawa-tengah.png",
// },
// {
// name: "Polda Jawa Timur",
// slug: "jawa-timur",
// logo: "/logo/polda/polda-jawa-timur.png",
// },
// {
// name: "Polda Kalimantan Barat",
// slug: "kalimantan-barat",
// logo: "/logo/polda/polda-kalimantan-barat.png",
// },
// {
// name: "Polda Kalimantan Selatan",
// slug: "kalimantan-selatan",
// logo: "/logo/polda/polda-kalimantan-selatan.png",
// },
// {
// name: "Polda Kalimantan Tengah",
// slug: "kalimantan-tengah",
// logo: "/logo/polda/polda-kalimantan-tengah.png",
// },
// {
// name: "Polda Kalimantan Timur",
// slug: "kalimantan-timur",
// logo: "/logo/polda/polda-kalimantan-timur.png",
// },
// {
// name: "Polda Kalimantan Utara",
// slug: "kalimantan-utara",
// logo: "/logo/polda/polda-kalimantan-utara.png",
// },
// {
// name: "Polda Kepulauan Riau",
// slug: "kepulauan-riau",
// logo: "/logo/polda/polda-kepulauan-riau.png",
// },
// {
// name: "Polda Lampung",
// slug: "lampung",
// logo: "/logo/polda/polda-lampung.png",
// },
// {
// name: "Polda Maluku",
// slug: "maluku",
// logo: "/logo/polda/polda-maluku.png",
// },
// {
// name: "Polda Maluku Utara",
// slug: "maluku-utara",
// logo: "/logo/polda/polda-maluku-utara.png",
// },
// {
// name: "Polda Metro Jaya",
// slug: "metro-jaya",
// logo: "/logo/polda/polda-metro-jaya.png",
// },
// {
// name: "Polda NTB",
// slug: "ntb",
// logo: "/logo/polda/polda-ntb.png",
// },
// {
// name: "Polda NTT",
// slug: "ntt",
// logo: "/logo/polda/polda-ntt.png",
// },
// { name: "Polda Papua", slug: "papua", logo: "/logo/polda/polda-papua.png" },
// {
// name: "Polda Papua Barat",
// slug: "papua-barat",
// logo: "/logo/polda/polda-papua-barat.png",
// },
// {
// name: "Polda Papua Barat Daya",
// slug: "papua-barat-daya",
// logo: "/logo/polda/polda-papua-barat-daya.png",
// },
// {
// name: "Polda Papua Tengah",
// slug: "papua-tengah",
// logo: "/logo/polda/polda-papua-tengah.png",
// },
// { name: "Polda Riau", slug: "riau", logo: "/logo/polda/polda-riau.png" },
// {
// name: "Polda Sulawesi Barat",
// slug: "sulawesi-barat",
// logo: "/logo/polda/polda-sulawesi-barat.png",
// },
// {
// name: "Polda Sulawesi Selatan",
// slug: "sulawesi-selatan",
// logo: "/logo/polda/polda-sulawesi-selatan.png",
// },
// {
// name: "Polda Sulawesi Tengah",
// slug: "sulawesi-tengah",
// logo: "/logo/polda/polda-sulawesi-tengah.png",
// },
// {
// name: "Polda Sulawesi Tenggara",
// slug: "sulawesi-tenggara",
// logo: "/logo/polda/polda-sulawesi-tenggara.png",
// },
// {
// name: "Polda Sulawesi Utara",
// slug: "sulawesi-utara",
// logo: "/logo/polda/polda-sulawesi-utara.png",
// },
// {
// name: "Polda Sumatera Barat",
// slug: "sumatera-barat",
// logo: "/logo/polda/polda-sumatera-barat.png",
// },
// {
// name: "Polda Sumatera Selatan",
// slug: "sumatera-selatan",
// logo: "/logo/polda/polda-sumatera-selatan.png",
// },
// {
// name: "Polda Sumatera Utara",
// slug: "sumatera-utara",
// logo: "/logo/polda/polda-sumatera-utara.png",
// },
// // {
// // name: "Satuan Kerja POLRI",
// // slug: "satker-polri",
// // logo: "/logo/satker/SATUAN-KERJA-POLRI.png",
// // },
// // {
// // name: "Internasional",
// // slug: "internasional",
// // logo: "/assets/polda/internasional.png",
// // },
// ];
// export default function PoldaAllDocumentPage() {
// return (
// <AllContentPage
// typeId="3"
// title="Semua Konten Teks per Polda"
// basePath="document"
// mode="polda"
// dataList={regions}
// />
// );
// }

895
app/[locale]/(public)/regional/all-polda/image/regional/page.tsx
View File

@ -1,895 +0,0 @@
"use client";
import React, { useEffect, useState } from "react";
import { Card, CardContent } from "@/components/ui/card";
import { Checkbox } from "@/components/ui/checkbox";
import { Icon } from "@iconify/react/dist/iconify.js";
import {
formatDateToIndonesian,
getOnlyDate,
getOnlyMonthAndYear,
} from "@/utils/globals";
import { useParams, usePathname, useSearchParams } from "next/navigation";
import {
getPublicCategoryData,
getUserLevelListByParent,
listData,
listDataRegional,
} from "@/service/landing/landing";
import {
ColumnDef,
ColumnFiltersState,
PaginationState,
SortingState,
VisibilityState,
getCoreRowModel,
getFilteredRowModel,
getPaginationRowModel,
getSortedRowModel,
useReactTable,
} from "@tanstack/react-table";
import LandingPagination from "@/components/landing-page/pagination";
import { Reveal } from "@/components/landing-page/Reveal";
import { Link, useRouter } from "@/i18n/routing";
import { Input } from "@/components/ui/input";
import ReactDatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
import { close, loading } from "@/config/swal";
import { useTranslations } from "next-intl";
import ImageBlurry from "@/components/ui/image-blurry";
import { Skeleton } from "@/components/ui/skeleton";
import Image from "next/image";
const columns: ColumnDef<any>[] = [
{
accessorKey: "no",
header: "No",
cell: ({ row }) => <span>{row.getValue("no")}</span>,
},
];
export default function FilterPage() {
const router = useRouter();
const asPath = usePathname();
const params = useParams();
const searchParams = useSearchParams();
const locale = params?.locale;
const t = useTranslations("FilterPage");
const [isLoading, setIsLoading] = useState(true);
const [imageData, setImageData] = useState<any[]>([]);
const [totalData, setTotalData] = useState<number>(1);
const [totalPage, setTotalPage] = useState<number>(1);
const [sorting, setSorting] = useState<SortingState>([]);
const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({});
const [rowSelection, setRowSelection] = useState({});
const [pagination, setPagination] = useState<PaginationState>({
pageIndex: 0,
pageSize: 10,
});
const [page, setPage] = useState(1);
const [totalContent, setTotalContent] = useState(0);
const [change, setChange] = useState(false);
const sortBy = searchParams?.get("sortBy");
const title = searchParams?.get("title");
const categorie = searchParams?.get("category");
const group = searchParams?.get("group");
const [categoryFilter, setCategoryFilter] = useState<any[]>([]);
const [monthYearFilter, setMonthYearFilter] = useState<any>();
const [searchTitle, setSearchTitle] = useState<string>("");
const [sortByOpt, setSortByOpt] = useState<any>(
sortBy === "popular" ? "favorite" : "createdAt"
);
const [formatFilter, setFormatFilter] = useState<any[]>([]);
const pages = page ? page - 1 : 0;
const [startDateString, setStartDateString] = useState<any>();
const [endDateString, setEndDateString] = useState<any>();
const [dateRange, setDateRange] = useState<any>([null, null]);
const [handleClose, setHandleClose] = useState(false);
const [categories, setCategories] = useState<any[]>([]);
const [isFilterOpen, setIsFilterOpen] = useState(true);
const poldaName = params?.polda_name;
const satkerName = params?.satker_name;
let prefixPath = poldaName
? `/polda/${poldaName}`
: satkerName
? `/satker/${satkerName}`
: "";
// === INIT ===
useEffect(() => {
const timer = setTimeout(() => setIsLoading(false), 1200);
return () => clearTimeout(timer);
}, []);
useEffect(() => {
const pageFromUrl = searchParams?.get("page");
if (pageFromUrl) setPage(Number(pageFromUrl));
}, [searchParams]);
useEffect(() => {
if (categorie) {
setCategoryFilter(
categorie?.split("&")?.length > 1 ? categorie?.split("&") : [categorie]
);
}
}, [categorie]);
useEffect(() => {
fetchCategories(categoryPage);
}, []);
const fetchCategories = async (pageNumber: number) => {
const groupParam =
poldaName && poldaName.length > 1
? poldaName
: satkerName && satkerName.length > 1
? "satker-" + satkerName
: "";
const isInt = locale === "en";
const response = await getPublicCategoryData(
groupParam,
"",
isInt,
pageNumber
); // halaman 1-based
const content = response?.data?.data?.content || [];
const total = response?.data?.data?.totalPages || 1;
setCategories(content);
setCategoryTotalPages(total);
};
// async function fetchCategories() {
// const response = await getPublicCategoryData("", "", locale === "en");
// setCategories(response?.data?.data?.content || []);
// }
useEffect(() => {
if (asPath?.includes("/regional")) getDataRegional();
else getDataAll();
}, [
asPath,
monthYearFilter,
page,
sortBy,
sortByOpt,
title,
startDateString,
endDateString,
categorie,
formatFilter,
]);
async function getDataAll() {
const filter =
categoryFilter?.length > 0
? categoryFilter?.sort().join(",")
: categorie || "";
const name = title || "";
const format = formatFilter?.length > 0 ? formatFilter.join(",") : "";
loading();
const response = await listData(
"1",
name,
filter,
12,
pages,
sortByOpt,
format,
"",
"",
startDateString,
endDateString,
monthYearFilter
? getOnlyMonthAndYear(monthYearFilter)?.split("/")[0]?.replace("", "")
: "",
monthYearFilter
? getOnlyMonthAndYear(monthYearFilter)?.split("/")[1]
: "",
locale == "en" ? true : false
);
close();
const data = response?.data?.data;
setImageData(data?.content || []);
setTotalData(data?.totalElements || 0);
setTotalPage(data?.totalPages || 1);
setTotalContent(data?.totalElements || 0);
}
async function getDataRegional() {
const filter =
categoryFilter?.length > 0
? categoryFilter?.sort().join(",")
: categorie || "";
const name = title || "";
const format = formatFilter?.length > 0 ? formatFilter.join(",") : "";
loading();
const response = await listDataRegional(
"1",
name,
filter,
format,
"",
startDateString,
endDateString,
monthYearFilter
? getOnlyMonthAndYear(monthYearFilter)?.split("/")[0]?.replace("", "")
: "",
monthYearFilter
? getOnlyMonthAndYear(monthYearFilter)?.split("/")[1]
: "",
12,
pages,
sortByOpt
);
close();
const data = response?.data?.data;
setImageData(data?.content || []);
setTotalData(data?.totalElements || 0);
setTotalPage(data?.totalPages || 1);
setTotalContent(data?.totalElements || 0);
}
const handleCategoryFilter = (e: boolean, id: string) => {
let filter = [...categoryFilter];
if (e) filter.push(String(id));
else filter = filter.filter((item) => item !== String(id));
router.push(`?category=${filter.join("&")}`);
};
const handleFormatFilter = (e: boolean, id: string) => {
let filter = [...formatFilter];
if (e) filter.push(id);
else filter = filter.filter((item) => item !== id);
setFormatFilter(filter);
};
const handleSorting = (e: any) => {
const value = e.target.value;
setSortByOpt(value === "latest" ? "createdAt" : "favorite");
};
const handleDeleteDate = () => {
setDateRange([null, null]);
setStartDateString("");
setEndDateString("");
setHandleClose(false);
};
const handleKeyUp = () => {
if (!searchTitle) router.push("?title=");
else router.push(`?title=${searchTitle.toLowerCase()}`);
};
// === REACT TABLE ===
const table = useReactTable({
data: imageData,
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,
},
});
const [calenderState, setCalenderState] = useState(false);
const [categoryPage, setCategoryPage] = useState(1);
const [categoryTotalPages, setCategoryTotalPages] = useState(1);
let typingTimer: any;
const cleanCheckbox = () => {
setCategoryFilter([]);
setFormatFilter([]);
router.push(`?category=&title=`);
setDateRange([null, null]);
setMonthYearFilter(null);
setChange(!change);
};
const handleKeyDown = () => {
clearTimeout(typingTimer);
};
return (
<div className="flex flex-col">
{/* Header */}
<div className="flex flex-row items-start gap-3 py-10 px-4 lg:px-20 bg-[#f7f7f7] dark:bg-black">
<p>{t("image", { defaultValue: "Image" })}</p> {">"}
<p>
<span className="font-bold">
{t("allImage", { defaultValue: "All Image" })}
</span>
</p>
<p className="font-bold">|</p>
{!title ? (
<p>
{`${t("thereIs", { defaultValue: "Terdapat" })} ${totalContent} ${t(
"downloadableImage",
{ defaultValue: "artikel berisi Foto yang dapat diunduh" }
)}`}
</p>
) : (
<p>
{t("search-results", { defaultValue: "Hasil pencarian untuk" })}{" "}
<span className="font-bold">"{title}"</span>
</p>
)}
</div>
<div className="flex flex-col lg:flex-row gap-6 pl-4 lg:pl-20 py-4">
{/* Left */}
<div className="lg:hidden flex justify-end mb-2">
<button
onClick={() => setIsFilterOpen(!isFilterOpen)}
className="text-sm text-white bg-[#bb3523] px-4 py-1 rounded-md shadow"
>
{isFilterOpen ? "Hide Filter" : "Show Filter"}
</button>
</div>
{isFilterOpen && (
<div className="h-fit min-w-full lg:min-w-[280px] max-w-full lg:max-w-[300px] bg-[#f7f7f7] dark:bg-black p-4 rounded-lg shadow-md">
<h2 className="text-lg font-semibold mb-4 flex items-center gap-1">
<Icon icon="stash:filter-light" fontSize={30} />
Filter
</h2>
<div className="border-t border-black my-4 dark:border-white"></div>
<div className="space-y-6">
<div>
<label
htmlFor="search"
className="block text-sm font-medium text-gray-700 dark:text-white"
>
{t("search", { defaultValue: "Search" })}
</label>
<Input
value={searchTitle}
onChange={(e) => setSearchTitle(e.target.value)}
onKeyUp={handleKeyUp}
onKeyDown={handleKeyDown}
type="text"
id="search"
placeholder={t("searchTitle", {
defaultValue: "Search Title",
})}
className="mt-1 w-full border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 dark:text-white">
{t("monthYear", { defaultValue: "Month Year" })}
</label>
<ReactDatePicker
selected={monthYearFilter}
className="mt-1 w-full text-xs border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
onChange={(date) => setMonthYearFilter(date)}
dateFormat="MM | yyyy"
placeholderText={t("selectYear", {
defaultValue: "Select Year",
})}
showMonthYearPicker
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 dark:text-white">
{t("date", { defaultValue: "Date" })}
</label>
<div className="flex flex-row justify justify-between gap-2">
<ReactDatePicker
selectsRange
className="mt-1 w-full border text-sm rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
startDate={dateRange[0]}
endDate={dateRange[1]}
onChange={(update) => {
setDateRange(update);
}}
placeholderText={t("selectDate", {
defaultValue: "Select Date",
})}
onCalendarClose={() => setCalenderState(!calenderState)}
/>
<div className="flex items-center">
{handleClose ? (
<Icon
icon="carbon:close-filled"
onClick={handleDeleteDate}
width="20"
inline
color="#216ba5"
/>
) : (
""
)}
</div>
</div>
</div>
<div>
<h3 className="text-sm font-medium text-gray-700 dark:text-white">
{t("categories", { defaultValue: "Categories" })}
</h3>
<ul className="mt-2 space-y-2">
{categories.map((category: any) => (
<li key={category?.id}>
<label
className="inline-flex items-center"
htmlFor={`${category.id}`}
>
<Checkbox
id={`${category.id}`}
value={category.id}
checked={categoryFilter.includes(String(category.id))}
onCheckedChange={(e) =>
handleCategoryFilter(Boolean(e), category.id)
}
/>
<span className="ml-2 text-gray-700 dark:text-white">
{category?.name}
</span>
</label>
</li>
))}
</ul>
{/* ⬇️ Pagination kategori (rata sejajar) */}
<div className="mt-4 flex justify-center items-center gap-2 flex-wrap">
{/* Tombol Prev */}
<button
onClick={() =>
setCategoryPage((prev) => Math.max(prev - 1, 1))
}
disabled={categoryPage === 1}
className="px-2 py-1 border rounded disabled:opacity-50 flex items-center justify-center"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="m13.15 16.15l-3.625-3.625q-.125-.125-.175-.25T9.3 12t.05-.275t.175-.25L13.15 7.85q.075-.075.163-.112T13.5 7.7q.2 0 .35.138T14 8.2v7.6q0 .225-.15.363t-.35.137q-.05 0-.35-.15"
/>
</svg>
</button>
{(() => {
const maxVisible = 4;
let startPage = Math.max(
1,
Math.min(
categoryPage - Math.floor(maxVisible / 2),
categoryTotalPages - maxVisible + 1
)
);
const endPage = Math.min(
categoryTotalPages,
startPage + maxVisible - 1
);
const visiblePages = [];
for (let i = startPage; i <= endPage; i++) {
visiblePages.push(i);
}
return visiblePages.map((pageNum) => (
<button
key={pageNum}
onClick={() => setCategoryPage(pageNum)}
className={`px-3 py-1 border rounded text-sm transition-colors ${
categoryPage === pageNum
? "bg-[#bb3523] text-white"
: "bg-white dark:bg-gray-800"
}`}
>
{pageNum}
</button>
));
})()}
{/* Tombol Next */}
<button
onClick={() =>
setCategoryPage((prev) =>
Math.min(prev + 1, categoryTotalPages)
)
}
disabled={categoryPage === categoryTotalPages}
className="px-2 py-1 border rounded disabled:opacity-50 flex items-center justify-center"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="M10.5 16.3q-.2 0-.35-.137T10 15.8V8.2q0-.225.15-.362t.35-.138q.05 0 .35.15l3.625 3.625q.125.125.175.25t.05.275t-.05.275t-.175.25L10.85 16.15q-.075.075-.162.113t-.188.037"
/>
</svg>
</button>
</div>
</div>
{/* Garis */}
<div className="border-t border-black my-4 dark:border-white"></div>
{/* Garis */}
<div>
<h3 className="text-sm font-medium text-gray-700 dark:text-white">
Format
</h3>
<ul className="mt-2 space-y-2">
<li>
<label className="inline-flex items-center">
<Checkbox
id="png"
value="png"
checked={formatFilter.includes("png")}
onCheckedChange={(e) =>
handleFormatFilter(Boolean(e), "png")
}
/>
<span className="ml-2 text-gray-700 dark:text-white">
PNG
</span>
</label>
</li>
<li>
<label className="inline-flex items-center">
<Checkbox
id="jpeg"
value="jpeg"
checked={formatFilter.includes("jpeg")}
onCheckedChange={(e) =>
handleFormatFilter(Boolean(e), "jpeg")
}
/>
<span className="ml-2 text-gray-700 dark:text-white">
JPEG
</span>
</label>
</li>
<li>
<label className="inline-flex items-center">
<Checkbox
id="jpg"
value="jpg"
checked={formatFilter.includes("jpg")}
onCheckedChange={(e) =>
handleFormatFilter(Boolean(e), "jpg")
}
/>
<span className="ml-2 text-gray-700 dark:text-white">
JPG
</span>
</label>
</li>
</ul>
</div>
<div className="border-t border-black dark:border-white my-4"></div>
<div className="text-center">
<a
onClick={cleanCheckbox}
className="text-[#bb3523] cursor-pointer"
>
<b>Reset Filter</b>
</a>
</div>
</div>
</div>
)}
{/* CONTENT */}
<div className="w-full pr-4 lg:pr-16 pb-4">
<Reveal>
<div className="flex flex-col items-end mb-4">
<h2 className="text-lg font-semibold">Sort By</h2>
<select
defaultValue={sortBy == "popular" ? "popular" : "latest"}
onChange={handleSorting}
className="border rounded-md py-2 px-3"
>
<option value="latest">Latest</option>
<option value="popular">Most Popular</option>
</select>
</div>
{isLoading ? (
<div className="flex flex-col gap-4">
<Skeleton className="h-[200px] w-full rounded-xl" />
<Skeleton className="h-[200px] w-full rounded-xl" />
</div>
) : imageData?.length > 0 ? (
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
{imageData.map((image: any) => (
<Card
key={image?.id}
className="hover:scale-105 transition-transform duration-300"
>
<CardContent className="flex flex-col p-0">
<Link
href={`${prefixPath}/image/detail/${image?.slug
?.split("/")
.pop()}`}
// href={`/image/detail/${image?.slug}`}
>
<div className="h-60 bg-[#e9e9e9]">
<ImageBlurry
src={
image?.smallThumbnailLink || image?.thumbnailLink
}
alt={image?.title}
style={{
objectFit: "cover",
width: "100%",
height: "100%",
}}
/>
</div>
<div className="p-4">
<div className="flex flex-row justify-between mb-1">
<p className="text-[9px] font-bold text-[#bb3523]">
{image?.categoryName?.toUpperCase() ??
"Giat Pimpinan"}
</p>
<p className="flex flex-row items-center text-[9px] gap-1 text-gray-600">
{formatDateToIndonesian(
new Date(image?.createdAt)
)}{" "}
{image?.timezone ?? "WIB"} |
<Icon
icon="formkit:eye"
width="15"
height="15"
/>{" "}
{image.clickCount}
</p>
</div>
<p className="text-sm lg:text-base font-semibold text-black dark:text-white line-clamp-3">
{image?.title}
</p>
</div>
</Link>
</CardContent>
</Card>
))}
</div>
) : (
<div className="flex justify-center items-center py-10">
<Image
src="/assets/empty-data.png"
alt="empty"
width={200}
height={200}
/>
</div>
)}
{totalPage > 1 && (
<LandingPagination
table={table}
totalData={totalData}
totalPage={totalPage}
/>
)}
</Reveal>
</div>
</div>
</div>
);
}
// import AllContentPage from "@/components/landing-page/all-content-page";
// const regions = [
// { name: "Polda Aceh", slug: "aceh", logo: "/logo/polda/polda-aceh.png" },
// { name: "Polda Bali", slug: "bali", logo: "/logo/polda/polda-bali.png" },
// {
// name: "Polda Bangka Belitung",
// slug: "bangka-belitung",
// logo: "/logo/polda/polda-bangka-belitung.png",
// },
// {
// name: "Polda Banten",
// slug: "banten",
// logo: "/logo/polda/polda-banten.png",
// },
// {
// name: "Polda Bengkulu",
// slug: "bengkulu",
// logo: "/logo/polda/polda-bengkulu.png",
// },
// {
// name: "Polda DIY",
// slug: "jogja",
// logo: "/logo/polda/polda-jogja.png",
// },
// {
// name: "Polda Gorontalo",
// slug: "gorontalo",
// logo: "/logo/polda/polda-gorontalo.png",
// },
// { name: "Polda Jambi", slug: "jambi", logo: "/logo/polda/polda-jambi.png" },
// {
// name: "Polda Jawa Barat",
// slug: "jawa-barat",
// logo: "/logo/polda/polda-jawa-barat.png",
// },
// {
// name: "Polda Jawa Tengah",
// slug: "jawa-tengah",
// logo: "/logo/polda/polda-jawa-tengah.png",
// },
// {
// name: "Polda Jawa Timur",
// slug: "jawa-timur",
// logo: "/logo/polda/polda-jawa-timur.png",
// },
// {
// name: "Polda Kalimantan Barat",
// slug: "kalimantan-barat",
// logo: "/logo/polda/polda-kalimantan-barat.png",
// },
// {
// name: "Polda Kalimantan Selatan",
// slug: "kalimantan-selatan",
// logo: "/logo/polda/polda-kalimantan-selatan.png",
// },
// {
// name: "Polda Kalimantan Tengah",
// slug: "kalimantan-tengah",
// logo: "/logo/polda/polda-kalimantan-tengah.png",
// },
// {
// name: "Polda Kalimantan Timur",
// slug: "kalimantan-timur",
// logo: "/logo/polda/polda-kalimantan-timur.png",
// },
// {
// name: "Polda Kalimantan Utara",
// slug: "kalimantan-utara",
// logo: "/logo/polda/polda-kalimantan-utara.png",
// },
// {
// name: "Polda Kepulauan Riau",
// slug: "kepulauan-riau",
// logo: "/logo/polda/polda-kepulauan-riau.png",
// },
// {
// name: "Polda Lampung",
// slug: "lampung",
// logo: "/logo/polda/polda-lampung.png",
// },
// {
// name: "Polda Maluku",
// slug: "maluku",
// logo: "/logo/polda/polda-maluku.png",
// },
// {
// name: "Polda Maluku Utara",
// slug: "maluku-utara",
// logo: "/logo/polda/polda-maluku-utara.png",
// },
// {
// name: "Polda Metro Jaya",
// slug: "metro-jaya",
// logo: "/logo/polda/polda-metro-jaya.png",
// },
// {
// name: "Polda NTB",
// slug: "ntb",
// logo: "/logo/polda/polda-ntb.png",
// },
// {
// name: "Polda NTT",
// slug: "ntt",
// logo: "/logo/polda/polda-ntt.png",
// },
// { name: "Polda Papua", slug: "papua", logo: "/logo/polda/polda-papua.png" },
// {
// name: "Polda Papua Barat",
// slug: "papua-barat",
// logo: "/logo/polda/polda-papua-barat.png",
// },
// {
// name: "Polda Papua Barat Daya",
// slug: "papua-barat-daya",
// logo: "/logo/polda/polda-papua-barat-daya.png",
// },
// {
// name: "Polda Papua Tengah",
// slug: "papua-tengah",
// logo: "/logo/polda/polda-papua-tengah.png",
// },
// { name: "Polda Riau", slug: "riau", logo: "/logo/polda/polda-riau.png" },
// {
// name: "Polda Sulawesi Barat",
// slug: "sulawesi-barat",
// logo: "/logo/polda/polda-sulawesi-barat.png",
// },
// {
// name: "Polda Sulawesi Selatan",
// slug: "sulawesi-selatan",
// logo: "/logo/polda/polda-sulawesi-selatan.png",
// },
// {
// name: "Polda Sulawesi Tengah",
// slug: "sulawesi-tengah",
// logo: "/logo/polda/polda-sulawesi-tengah.png",
// },
// {
// name: "Polda Sulawesi Tenggara",
// slug: "sulawesi-tenggara",
// logo: "/logo/polda/polda-sulawesi-tenggara.png",
// },
// {
// name: "Polda Sulawesi Utara",
// slug: "sulawesi-utara",
// logo: "/logo/polda/polda-sulawesi-utara.png",
// },
// {
// name: "Polda Sumatera Barat",
// slug: "sumatera-barat",
// logo: "/logo/polda/polda-sumatera-barat.png",
// },
// {
// name: "Polda Sumatera Selatan",
// slug: "sumatera-selatan",
// logo: "/logo/polda/polda-sumatera-selatan.png",
// },
// {
// name: "Polda Sumatera Utara",
// slug: "sumatera-utara",
// logo: "/logo/polda/polda-sumatera-utara.png",
// },
// // {
// // name: "Satuan Kerja POLRI",
// // slug: "satker-polri",
// // logo: "/logo/satker/SATUAN-KERJA-POLRI.png",
// // },
// // {
// // name: "Internasional",
// // slug: "internasional",
// // logo: "/assets/polda/internasional.png",
// // },
// ];
// export default function PoldaAllImagePage() {
// return (
// <AllContentPage
// typeId="1"
// title="Semua Foto per Polda"
// basePath="image"
// mode="polda"
// dataList={regions}
// />
// );
// }

987
app/[locale]/(public)/regional/all-polda/video/regional/page.tsx
View File

@ -1,987 +0,0 @@
"use client";
import React, { useEffect, useState } from "react";
import { Card, CardContent } from "@/components/ui/card";
import { Checkbox } from "@/components/ui/checkbox";
import { Icon } from "@iconify/react/dist/iconify.js";
import {
formatDateToIndonesian,
getOnlyDate,
getOnlyMonthAndYear,
} from "@/utils/globals";
import { useParams, usePathname, useSearchParams } from "next/navigation";
import {
getPublicCategoryData,
getUserLevelListByParent,
listData,
listDataRegional,
} from "@/service/landing/landing";
import {
ColumnDef,
ColumnFiltersState,
PaginationState,
SortingState,
VisibilityState,
getCoreRowModel,
getFilteredRowModel,
getPaginationRowModel,
getSortedRowModel,
useReactTable,
} from "@tanstack/react-table";
import LandingPagination from "@/components/landing-page/pagination";
import { Reveal } from "@/components/landing-page/Reveal";
import { Link, useRouter } from "@/i18n/routing";
import { Input } from "@/components/ui/input";
import ReactDatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
import { close, loading } from "@/config/swal";
import { useTranslations } from "next-intl";
import ImageBlurry from "@/components/ui/image-blurry";
import { Skeleton } from "@/components/ui/skeleton";
import Image from "next/image";
const columns: ColumnDef<any>[] = [
{
accessorKey: "no",
header: "No",
cell: ({ row }) => <span>{row.getValue("no")}</span>,
},
];
export default function FilterPage() {
const router = useRouter();
const asPath = usePathname();
const params = useParams();
const searchParams = useSearchParams();
const locale = params?.locale;
const t = useTranslations("FilterPage");
const [isLoading, setIsLoading] = useState(true);
const [videoData, setVideoData] = useState<any[]>([]);
const [totalData, setTotalData] = useState<number>(1);
const [totalPage, setTotalPage] = useState<number>(1);
const [sorting, setSorting] = useState<SortingState>([]);
const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({});
const [rowSelection, setRowSelection] = useState({});
const [pagination, setPagination] = useState<PaginationState>({
pageIndex: 0,
pageSize: 10,
});
const [page, setPage] = useState(1);
const [totalContent, setTotalContent] = useState(0);
const [change, setChange] = useState(false);
const sortBy = searchParams?.get("sortBy");
const title = searchParams?.get("title");
const categorie = searchParams?.get("category");
const group = searchParams?.get("group");
const [categoryFilter, setCategoryFilter] = useState<any[]>([]);
const [monthYearFilter, setMonthYearFilter] = useState<any>();
const [searchTitle, setSearchTitle] = useState<string>("");
const [sortByOpt, setSortByOpt] = useState<any>(
sortBy === "popular" ? "favorite" : "createdAt"
);
const [formatFilter, setFormatFilter] = useState<any[]>([]);
const pages = page ? page - 1 : 0;
const [startDateString, setStartDateString] = useState<any>();
const [endDateString, setEndDateString] = useState<any>();
const [dateRange, setDateRange] = useState<any>([null, null]);
const [handleClose, setHandleClose] = useState(false);
const [categories, setCategories] = useState<any[]>([]);
const [isFilterOpen, setIsFilterOpen] = useState(true);
const poldaName = params?.polda_name;
const satkerName = params?.satker_name;
let prefixPath = poldaName
? `/polda/${poldaName}`
: satkerName
? `/satker/${satkerName}`
: "";
// === INIT ===
useEffect(() => {
const timer = setTimeout(() => setIsLoading(false), 1200);
return () => clearTimeout(timer);
}, []);
useEffect(() => {
const pageFromUrl = searchParams?.get("page");
if (pageFromUrl) setPage(Number(pageFromUrl));
}, [searchParams]);
useEffect(() => {
if (categorie) {
setCategoryFilter(
categorie?.split("&")?.length > 1 ? categorie?.split("&") : [categorie]
);
}
}, [categorie]);
useEffect(() => {
fetchCategories(categoryPage);
}, []);
const fetchCategories = async (pageNumber: number) => {
const groupParam =
poldaName && poldaName.length > 1
? poldaName
: satkerName && satkerName.length > 1
? "satker-" + satkerName
: "";
const isInt = locale === "en";
const response = await getPublicCategoryData(
groupParam,
"",
isInt,
pageNumber
); // halaman 1-based
const content = response?.data?.data?.content || [];
const total = response?.data?.data?.totalPages || 1;
setCategories(content);
setCategoryTotalPages(total);
};
useEffect(() => {
if (asPath?.includes("/regional")) getDataRegional();
else getDataAll();
}, [
asPath,
monthYearFilter,
page,
sortBy,
sortByOpt,
title,
startDateString,
endDateString,
categorie,
formatFilter,
]);
async function getDataAll() {
const filter =
categoryFilter?.length > 0
? categoryFilter?.sort().join(",")
: categorie || "";
const name = title || "";
const format = formatFilter?.length > 0 ? formatFilter.join(",") : "";
loading();
const response = await listData(
"2",
name,
filter,
12,
pages,
sortByOpt,
format,
"",
"",
startDateString,
endDateString,
monthYearFilter
? getOnlyMonthAndYear(monthYearFilter)?.split("/")[0]?.replace("", "")
: "",
monthYearFilter
? getOnlyMonthAndYear(monthYearFilter)?.split("/")[1]
: "",
locale == "en" ? true : false
);
close();
const data = response?.data?.data;
setVideoData(data?.content || []);
setTotalData(data?.totalElements || 0);
setTotalPage(data?.totalPages || 1);
setTotalContent(data?.totalElements || 0);
}
async function getDataRegional() {
const filter =
categoryFilter?.length > 0
? categoryFilter?.sort().join(",")
: categorie || "";
const name = title || "";
const format = formatFilter?.length > 0 ? formatFilter.join(",") : "";
loading();
const response = await listDataRegional(
"2",
name,
filter,
format,
"",
startDateString,
endDateString,
monthYearFilter
? getOnlyMonthAndYear(monthYearFilter)?.split("/")[0]?.replace("", "")
: "",
monthYearFilter
? getOnlyMonthAndYear(monthYearFilter)?.split("/")[1]
: "",
12,
pages,
sortByOpt
);
close();
const data = response?.data?.data;
setVideoData(data?.content || []);
setTotalData(data?.totalElements || 0);
setTotalPage(data?.totalPages || 1);
setTotalContent(data?.totalElements || 0);
}
const handleCategoryFilter = (e: boolean, id: string) => {
let filter = [...categoryFilter];
if (e) filter.push(String(id));
else filter = filter.filter((item) => item !== String(id));
router.push(`?category=${filter.join("&")}`);
};
const handleFormatFilter = (e: boolean, id: string) => {
let filter = [...formatFilter];
if (e) filter.push(id);
else filter = filter.filter((item) => item !== id);
setFormatFilter(filter);
};
const handleSorting = (e: any) => {
const value = e.target.value;
setSortByOpt(value === "latest" ? "createdAt" : "favorite");
};
const handleDeleteDate = () => {
setDateRange([null, null]);
setStartDateString("");
setEndDateString("");
setHandleClose(false);
};
const handleKeyUp = () => {
if (!searchTitle) router.push("?title=");
else router.push(`?title=${searchTitle.toLowerCase()}`);
};
// === REACT TABLE ===
const table = useReactTable({
data: videoData,
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,
},
});
const [calenderState, setCalenderState] = useState(false);
const [categoryPage, setCategoryPage] = useState(1);
const [categoryTotalPages, setCategoryTotalPages] = useState(1);
let typingTimer: any;
const cleanCheckbox = () => {
setCategoryFilter([]);
setFormatFilter([]);
router.push(`?category=&title=`);
setDateRange([null, null]);
setMonthYearFilter(null);
setChange(!change);
};
const handleKeyDown = () => {
clearTimeout(typingTimer);
};
return (
<div className="flex flex-col">
{/* Header */}
<div className="flex flex-row items-start gap-3 py-10 px-4 lg:px-20 bg-[#f7f7f7] dark:bg-black">
<p>{t("video", { defaultValue: "Video" })}</p> {">"}
<p>
<span className="font-bold">
{t("allVideo", { defaultValue: "All Video" })}
</span>
</p>
<p className="font-bold">|</p>
{!title ? (
<p>
{`${t("thereIs", { defaultValue: "Terdapat" })} ${totalContent} ${t(
"downloadablevideo",
{ defaultValue: "artikel berisi Foto yang dapat diunduh" }
)}`}
</p>
) : (
<p>
{t("search-results", { defaultValue: "Hasil pencarian untuk" })}{" "}
<span className="font-bold">"{title}"</span>
</p>
)}
</div>
<div className="flex flex-col lg:flex-row gap-6 pl-4 lg:pl-20 py-4">
<div className="h-fit min-w-full lg:min-w-[280px] max-w-full lg:max-w-[300px] bg-[#f7f7f7] dark:bg-black p-4 rounded-lg shadow-md">
<h2 className="text-lg font-semibold mb-4 flex items-center gap-1">
<Icon icon="stash:filter-light" fontSize={30} />
Filter
</h2>
<div className="border-t border-black my-4 dark:border-white"></div>
<div className="space-y-6">
<div>
<label
htmlFor="search"
className="block text-sm font-medium text-gray-700 dark:text-white"
>
{t("search", { defaultValue: "Search" })}
</label>
<Input
value={searchTitle}
onChange={(e) => setSearchTitle(e.target.value)}
onKeyUp={handleKeyUp}
onKeyDown={handleKeyDown}
type="text"
id="search"
placeholder={t("searchTitle", { defaultValue: "Search Title" })}
className="mt-1 w-full border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 dark:text-white">
{t("monthYear", { defaultValue: "Month Year" })}
</label>
<ReactDatePicker
selected={monthYearFilter}
className="mt-1 w-full text-xs border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
onChange={(date) => setMonthYearFilter(date)}
dateFormat="MM | yyyy"
placeholderText={t("selectYear", {
defaultValue: "Select Year",
})}
showMonthYearPicker
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 dark:text-white">
{t("date", { defaultValue: "Date" })}
</label>
<div className="flex flex-row justify justify-between gap-2">
<ReactDatePicker
selectsRange
className="mt-1 w-full text-sm border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
startDate={dateRange[0]}
endDate={dateRange[1]}
onChange={(update) => {
setDateRange(update);
}}
placeholderText={t("selectDate", {
defaultValue: "Select Date",
})}
onCalendarClose={() => setCalenderState(!calenderState)}
/>
<div className="flex items-center">
{handleClose ? (
<Icon
icon="carbon:close-filled"
onClick={handleDeleteDate}
width="20"
inline
color="#216ba5"
/>
) : (
""
)}
</div>
</div>
</div>
<div>
<h3 className="text-sm font-medium text-gray-700 dark:text-white">
{t("categories", { defaultValue: "Categories" })}
</h3>
<ul className="mt-2 space-y-2">
{categories.map((category: any) => (
<li key={category?.id}>
<label
className="inline-flex items-center"
htmlFor={`${category.id}`}
>
<Checkbox
id={`${category.id}`}
value={category.id}
checked={categoryFilter.includes(String(category.id))}
onCheckedChange={(e) =>
handleCategoryFilter(Boolean(e), category.id)
}
/>
<span className="ml-2 text-gray-700 dark:text-white">
{category?.name}
</span>
</label>
</li>
))}
</ul>
{/* ⬇️ Pagination kategori (rata sejajar) */}
<div className="mt-4 flex justify-center items-center gap-2 flex-wrap">
{/* Tombol Prev */}
<button
onClick={() =>
setCategoryPage((prev) => Math.max(prev - 1, 1))
}
disabled={categoryPage === 1}
className="px-2 py-1 border rounded disabled:opacity-50 flex items-center justify-center"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="m13.15 16.15l-3.625-3.625q-.125-.125-.175-.25T9.3 12t.05-.275t.175-.25L13.15 7.85q.075-.075.163-.112T13.5 7.7q.2 0 .35.138T14 8.2v7.6q0 .225-.15.363t-.35.137q-.05 0-.35-.15"
/>
</svg>
</button>
{(() => {
const maxVisible = 4;
let startPage = Math.max(
1,
Math.min(
categoryPage - Math.floor(maxVisible / 2),
categoryTotalPages - maxVisible + 1
)
);
const endPage = Math.min(
categoryTotalPages,
startPage + maxVisible - 1
);
const visiblePages = [];
for (let i = startPage; i <= endPage; i++) {
visiblePages.push(i);
}
return visiblePages.map((pageNum) => (
<button
key={pageNum}
onClick={() => setCategoryPage(pageNum)}
className={`px-3 py-1 border rounded text-sm transition-colors ${
categoryPage === pageNum
? "bg-[#bb3523] text-white"
: "bg-white dark:bg-gray-800"
}`}
>
{pageNum}
</button>
));
})()}
{/* Tombol Next */}
<button
onClick={() =>
setCategoryPage((prev) =>
Math.min(prev + 1, categoryTotalPages)
)
}
disabled={categoryPage === categoryTotalPages}
className="px-2 py-1 border rounded disabled:opacity-50 flex items-center justify-center"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="M10.5 16.3q-.2 0-.35-.137T10 15.8V8.2q0-.225.15-.362t.35-.138q.05 0 .35.15l3.625 3.625q.125.125.175.25t.05.275t-.05.275t-.175.25L10.85 16.15q-.075.075-.162.113t-.188.037"
/>
</svg>
</button>
</div>
</div>
{/* <div>
<h3 className="text-sm font-medium text-gray-700 dark:text-white">
{t("categories", { defaultValue: "Categories" })}
</h3>
<ul className="mt-2 space-y-2">
{categories.map((category: any) => (
<li key={category?.id}>
<label
className="inline-flex items-center"
htmlFor={`${category.id}`}
>
<Checkbox
id={`${category.id}`}
value={category.id}
checked={categoryFilter.includes(String(category.id))}
onCheckedChange={(e) =>
handleCategoryFilter(Boolean(e), category.id)
}
/>
<span className="ml-2 text-gray-700 dark:text-white">
{category?.name}
</span>
</label>
</li>
))}
<div className="mt-4 flex gap-2 justify-center items-center">
<button
onClick={() =>
setCategoryPage((prev) => Math.max(prev - 1, 1))
}
disabled={categoryPage === 1}
className="px-3 py-1 border rounded disabled:opacity-50"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="m13.15 16.15l-3.625-3.625q-.125-.125-.175-.25T9.3 12t.05-.275t.175-.25L13.15 7.85q.075-.075.163-.112T13.5 7.7q.2 0 .35.138T14 8.2v7.6q0 .225-.15.363t-.35.137q-.05 0-.35-.15"
/>
</svg>
</button>
{Array.from({ length: categoryTotalPages }, (_, i) => (
<button
key={i}
onClick={() => setCategoryPage(i + 1)}
className={`px-3 py-1 border rounded ${
categoryPage === i + 1 ? "bg-[#bb3523] text-white" : ""
}`}
>
{i + 1}
</button>
))}
<button
onClick={() =>
setCategoryPage((prev) =>
Math.min(prev + 1, categoryTotalPages)
)
}
disabled={categoryPage === categoryTotalPages}
className="px-3 py-1 border rounded disabled:opacity-50"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="M10.5 16.3q-.2 0-.35-.137T10 15.8V8.2q0-.225.15-.362t.35-.138q.05 0 .35.15l3.625 3.625q.125.125.175.25t.05.275t-.05.275t-.175.25L10.85 16.15q-.075.075-.162.113t-.188.037"
/>
</svg>
</button>
</div>
</ul>
</div> */}
{/* Garis */}
<div className="border-t border-black my-4 dark:border-white"></div>
{/* Garis */}
<div>
<h3 className="text-sm font-medium text-gray-700 dark:text-white">
Format
</h3>
<ul className="mt-2 space-y-2">
<li>
<label className="inline-flex items-center">
<Checkbox
id="mk4"
value="mk4"
checked={formatFilter.includes("mk4")}
onCheckedChange={(e) =>
handleFormatFilter(Boolean(e), "mk4")
}
/>
<span className="ml-2 text-gray-700 dark:text-white">
MK4
</span>
</label>
</li>
<li>
<label className="inline-flex items-center">
<Checkbox
id="mov"
value="mov"
checked={formatFilter.includes("mov")}
onCheckedChange={(e) =>
handleFormatFilter(Boolean(e), "mov")
}
/>
<span className="ml-2 text-gray-700 dark:text-white">
MOV
</span>
</label>
</li>
<li>
<label className="inline-flex items-center">
<Checkbox
id="mp4"
value="mp4"
checked={formatFilter.includes("mp4")}
onCheckedChange={(e) =>
handleFormatFilter(Boolean(e), "mp4")
}
/>
<span className="ml-2 text-gray-700 dark:text-white">
MP4
</span>
</label>
</li>
<li>
<label className="inline-flex items-center">
<Checkbox
id="avi"
value="avi"
checked={formatFilter.includes("avi")}
onCheckedChange={(e) =>
handleFormatFilter(Boolean(e), "avi")
}
/>
<span className="ml-2 text-gray-700 dark:text-white">
AVI
</span>
</label>
</li>
<li>
<label className="inline-flex items-center">
<Checkbox
id="wmv"
value="wmv"
checked={formatFilter.includes("wmv")}
onCheckedChange={(e) =>
handleFormatFilter(Boolean(e), "wmv")
}
/>
<span className="ml-2 text-gray-700 dark:text-white">
WMV
</span>
</label>
</li>
</ul>
</div>
<div className="border-t border-black dark:border-white my-4"></div>
<div className="text-center">
<a
onClick={cleanCheckbox}
className="text-[#bb3523] cursor-pointer"
>
<b>Reset Filter</b>
</a>
</div>
</div>
</div>
{/* CONTENT */}
<div className="w-full pr-4 lg:pr-16 pb-4">
<Reveal>
<div className="flex flex-col items-end mb-4">
<h2 className="text-lg font-semibold">Sort By</h2>
<select
defaultValue={sortBy == "popular" ? "popular" : "latest"}
onChange={handleSorting}
className="border rounded-md py-2 px-3"
>
<option value="latest">Latest</option>
<option value="popular">Most Popular</option>
</select>
</div>
{isLoading ? (
<div className="flex flex-col gap-4">
<Skeleton className="h-[200px] w-full rounded-xl" />
<Skeleton className="h-[200px] w-full rounded-xl" />
</div>
) : videoData?.length > 0 ? (
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
{videoData.map((video: any) => (
<Card
key={video?.id}
className="hover:scale-105 transition-transform duration-300"
>
<CardContent className="flex flex-col p-0">
<Link
href={`${prefixPath}/video/detail/${video?.slug
?.split("/")
.pop()}`}
// href={`/video/detail/${video?.slug}`}
>
<div className="h-60 bg-[#e9e9e9]">
<ImageBlurry
src={
video?.smallThumbnailLink || video?.thumbnailLink
}
alt={video?.title}
style={{
objectFit: "cover",
width: "100%",
height: "100%",
}}
/>
</div>
<div className="p-4">
<div className="flex flex-row justify-between mb-1">
<p className="text-[9px] font-bold text-[#bb3523]">
{video?.categoryName?.toUpperCase() ??
"Giat Pimpinan"}
</p>
<p className="flex flex-row items-center text-[9px] gap-1 text-gray-600">
{formatDateToIndonesian(
new Date(video?.createdAt)
)}{" "}
{video?.timezone ?? "WIB"} |
<Icon
icon="formkit:eye"
width="15"
height="15"
/>{" "}
{video.clickCount}
</p>
</div>
<p className="text-sm lg:text-base font-semibold text-black dark:text-white line-clamp-3">
{video?.title}
</p>
</div>
</Link>
</CardContent>
</Card>
))}
</div>
) : (
<div className="flex justify-center items-center py-10">
<Image
src="/assets/empty-data.png"
alt="empty"
width={200}
height={200}
/>
</div>
)}
{totalPage > 1 && (
<LandingPagination
table={table}
totalData={totalData}
totalPage={totalPage}
/>
)}
</Reveal>
</div>
</div>
</div>
);
}
// import AllContentPage from "@/components/landing-page/all-content-page";
// const regions = [
// { name: "Polda Aceh", slug: "aceh", logo: "/logo/polda/polda-aceh.png" },
// { name: "Polda Bali", slug: "bali", logo: "/logo/polda/polda-bali.png" },
// {
// name: "Polda Bangka Belitung",
// slug: "bangka-belitung",
// logo: "/logo/polda/polda-bangka-belitung.png",
// },
// {
// name: "Polda Banten",
// slug: "banten",
// logo: "/logo/polda/polda-banten.png",
// },
// {
// name: "Polda Bengkulu",
// slug: "bengkulu",
// logo: "/logo/polda/polda-bengkulu.png",
// },
// {
// name: "Polda DIY",
// slug: "jogja",
// logo: "/logo/polda/polda-jogja.png",
// },
// {
// name: "Polda Gorontalo",
// slug: "gorontalo",
// logo: "/logo/polda/polda-gorontalo.png",
// },
// { name: "Polda Jambi", slug: "jambi", logo: "/logo/polda/polda-jambi.png" },
// {
// name: "Polda Jawa Barat",
// slug: "jawa-barat",
// logo: "/logo/polda/polda-jawa-barat.png",
// },
// {
// name: "Polda Jawa Tengah",
// slug: "jawa-tengah",
// logo: "/logo/polda/polda-jawa-tengah.png",
// },
// {
// name: "Polda Jawa Timur",
// slug: "jawa-timur",
// logo: "/logo/polda/polda-jawa-timur.png",
// },
// {
// name: "Polda Kalimantan Barat",
// slug: "kalimantan-barat",
// logo: "/logo/polda/polda-kalimantan-barat.png",
// },
// {
// name: "Polda Kalimantan Selatan",
// slug: "kalimantan-selatan",
// logo: "/logo/polda/polda-kalimantan-selatan.png",
// },
// {
// name: "Polda Kalimantan Tengah",
// slug: "kalimantan-tengah",
// logo: "/logo/polda/polda-kalimantan-tengah.png",
// },
// {
// name: "Polda Kalimantan Timur",
// slug: "kalimantan-timur",
// logo: "/logo/polda/polda-kalimantan-timur.png",
// },
// {
// name: "Polda Kalimantan Utara",
// slug: "kalimantan-utara",
// logo: "/logo/polda/polda-kalimantan-utara.png",
// },
// {
// name: "Polda Kepulauan Riau",
// slug: "kepulauan-riau",
// logo: "/logo/polda/polda-kepulauan-riau.png",
// },
// {
// name: "Polda Lampung",
// slug: "lampung",
// logo: "/logo/polda/polda-lampung.png",
// },
// {
// name: "Polda Maluku",
// slug: "maluku",
// logo: "/logo/polda/polda-maluku.png",
// },
// {
// name: "Polda Maluku Utara",
// slug: "maluku-utara",
// logo: "/logo/polda/polda-maluku-utara.png",
// },
// {
// name: "Polda Metro Jaya",
// slug: "metro-jaya",
// logo: "/logo/polda/polda-metro-jaya.png",
// },
// {
// name: "Polda NTB",
// slug: "ntb",
// logo: "/logo/polda/polda-ntb.png",
// },
// {
// name: "Polda NTT",
// slug: "ntt",
// logo: "/logo/polda/polda-ntt.png",
// },
// { name: "Polda Papua", slug: "papua", logo: "/logo/polda/polda-papua.png" },
// {
// name: "Polda Papua Barat",
// slug: "papua-barat",
// logo: "/logo/polda/polda-papua-barat.png",
// },
// {
// name: "Polda Papua Barat Daya",
// slug: "papua-barat-daya",
// logo: "/logo/polda/polda-papua-barat-daya.png",
// },
// {
// name: "Polda Papua Tengah",
// slug: "papua-tengah",
// logo: "/logo/polda/polda-papua-tengah.png",
// },
// { name: "Polda Riau", slug: "riau", logo: "/logo/polda/polda-riau.png" },
// {
// name: "Polda Sulawesi Barat",
// slug: "sulawesi-barat",
// logo: "/logo/polda/polda-sulawesi-barat.png",
// },
// {
// name: "Polda Sulawesi Selatan",
// slug: "sulawesi-selatan",
// logo: "/logo/polda/polda-sulawesi-selatan.png",
// },
// {
// name: "Polda Sulawesi Tengah",
// slug: "sulawesi-tengah",
// logo: "/logo/polda/polda-sulawesi-tengah.png",
// },
// {
// name: "Polda Sulawesi Tenggara",
// slug: "sulawesi-tenggara",
// logo: "/logo/polda/polda-sulawesi-tenggara.png",
// },
// {
// name: "Polda Sulawesi Utara",
// slug: "sulawesi-utara",
// logo: "/logo/polda/polda-sulawesi-utara.png",
// },
// {
// name: "Polda Sumatera Barat",
// slug: "sumatera-barat",
// logo: "/logo/polda/polda-sumatera-barat.png",
// },
// {
// name: "Polda Sumatera Selatan",
// slug: "sumatera-selatan",
// logo: "/logo/polda/polda-sumatera-selatan.png",
// },
// {
// name: "Polda Sumatera Utara",
// slug: "sumatera-utara",
// logo: "/logo/polda/polda-sumatera-utara.png",
// },
// // {
// // name: "Satuan Kerja POLRI",
// // slug: "satker-polri",
// // logo: "/logo/satker/SATUAN-KERJA-POLRI.png",
// // },
// // {
// // name: "Internasional",
// // slug: "internasional",
// // logo: "/assets/polda/internasional.png",
// // },
// ];
// export default function PoldaAllVideoPage() {
// return (
// <AllContentPage
// typeId="2"
// title="Semua Konten Audio Visual per Polda"
// basePath="video"
// mode="polda"
// dataList={regions}
// />
// );
// }

95
app/[locale]/(public)/regional/filter/page.tsx
View File

@ -69,7 +69,7 @@ export default function FilterPage() {
const [monthYearFilter, setMonthYearFilter] = useState<any>();
const [searchTitle, setSearchTitle] = useState<string>("");
const [sortByOpt, setSortByOpt] = useState<any>(
sortBy === "popular" ? "favorite" : "createdAt"
sortBy === "popular" ? "clickCount" : "createdAt"
);
const isRegional = asPath?.includes("regional");
const isSatker = asPath?.includes("satker");
@ -371,7 +371,7 @@ export default function FilterPage() {
if (e.target.value == "terbaru") {
setSortByOpt("createdAt");
} else {
setSortByOpt("favorite");
setSortByOpt("clickCount");
}
setChange(!change);
@ -559,88 +559,7 @@ export default function FilterPage() {
</label>
</li>
))}
<div className="mt-4 flex justify-center items-center gap-2 flex-wrap">
{/* Tombol Prev */}
<button
onClick={() =>
setCategoryPage((prev) => Math.max(prev - 1, 1))
}
disabled={categoryPage === 1}
className="px-2 py-1 border rounded disabled:opacity-50 flex items-center justify-center"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="m13.15 16.15l-3.625-3.625q-.125-.125-.175-.25T9.3 12t.05-.275t.175-.25L13.15 7.85q.075-.075.163-.112T13.5 7.7q.2 0 .35.138T14 8.2v7.6q0 .225-.15.363t-.35.137q-.05 0-.35-.15"
/>
</svg>
</button>
{(() => {
const maxVisible = 4;
let startPage = Math.max(
1,
Math.min(
categoryPage - Math.floor(maxVisible / 2),
categoryTotalPages - maxVisible + 1
)
);
const endPage = Math.min(
categoryTotalPages,
startPage + maxVisible - 1
);
const visiblePages = [];
for (let i = startPage; i <= endPage; i++) {
visiblePages.push(i);
}
return visiblePages.map((pageNum) => (
<button
key={pageNum}
onClick={() => setCategoryPage(pageNum)}
className={`px-3 py-1 border rounded text-sm transition-colors ${
categoryPage === pageNum
? "bg-[#bb3523] text-white"
: "bg-white dark:bg-gray-800"
}`}
>
{pageNum}
</button>
));
})()}
{/* Tombol Next */}
<button
onClick={() =>
setCategoryPage((prev) =>
Math.min(prev + 1, categoryTotalPages)
)
}
disabled={categoryPage === categoryTotalPages}
className="px-2 py-1 border rounded disabled:opacity-50 flex items-center justify-center"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="M10.5 16.3q-.2 0-.35-.137T10 15.8V8.2q0-.225.15-.362t.35-.138q.05 0 .35.15l3.625 3.625q.125.125.175.25t.05.275t-.05.275t-.175.25L10.85 16.15q-.075.075-.162.113t-.188.037"
/>
</svg>
</button>
</div>
{/* <div className="mt-4 flex gap-2 justify-center items-center">
<div className="mt-4 flex gap-2 justify-center items-center">
<button
onClick={() =>
setCategoryPage((prev) => Math.max(prev - 1, 1))
@ -696,13 +615,13 @@ export default function FilterPage() {
/>
</svg>
</button>
</div> */}
</div>
</ul>
</div>
{/* Garis */}
<div className="border-t border-black my-4 dark:border-white"></div>
{/* Garis */}
{/* <div>
<div>
<h3 className="text-sm font-medium text-gray-700 dark:text-white">
Format
</h3>
@ -753,8 +672,8 @@ export default function FilterPage() {
</label>
</li>
</ul>
</div> */}
{/* <div className="border-t border-black dark:border-white my-4"></div> */}
</div>
<div className="border-t border-black dark:border-white my-4"></div>
<div className="text-center">
<a
onClick={cleanCheckbox}

24
app/[locale]/(public)/video/detail/[slug]/page.tsx
View File

@ -35,32 +35,10 @@ export async function generateMetadata({ params }: any): Promise<Metadata> {
return {
title: video.title,
description: video.description,
// openGraph: {
// title: video?.title,
// description: video?.description,
// videos: [`${video?.smallThumbnailLink}`],
// },
openGraph: {
title: video?.title,
description: video?.description,
url: `https://new.netidhub.com/in/video/detail/${slug}`,
type: "video.other",
images: [
{
url: video?.thumbnailLink,
width: 1280,
height: 720,
alt: video?.title || "Thumbnail Mediahub Polri",
},
],
},
twitter: {
card: "summary_large_image",
title: video?.title,
description: video?.description,
images: [
video?.thumbnailLink,
],
videos: [`${video?.smallThumbnailLink}`],
},
};
}

116
app/[locale]/(public)/video/filter/page.tsx
View File

@ -82,7 +82,7 @@ const FilterPage = () => {
const [monthYearFilter, setMonthYearFilter] = useState<any>();
const [searchTitle, setSearchTitle] = useState<string>("");
const [sortByOpt, setSortByOpt] = useState<any>(
sortBy === "popular" ? "favorite" : "createdAt"
sortBy === "popular" ? "clickCount" : "createdAt"
);
const poldaName = params?.polda_name;
const satkerName = params?.satker_name;
@ -451,7 +451,7 @@ const FilterPage = () => {
if (e.target.value == "terbaru") {
setSortByOpt("createdAt");
} else {
setSortByOpt("favorite");
setSortByOpt("clickCount");
}
setChange(!change);
@ -610,116 +610,6 @@ const FilterPage = () => {
<h3 className="text-sm font-medium text-gray-700 dark:text-white">
{t("categories", { defaultValue: "Categories" })}
</h3>
<ul className="mt-2 space-y-2">
{categories.map((category: any) => (
<li key={category?.id}>
<label
className="inline-flex items-center"
htmlFor={`${category.id}`}
>
<Checkbox
id={`${category.id}`}
value={category.id}
checked={categoryFilter.includes(String(category.id))}
onCheckedChange={(e) =>
handleCategoryFilter(Boolean(e), category.id)
}
/>
<span className="ml-2 text-gray-700 dark:text-white">
{category?.name}
</span>
</label>
</li>
))}
</ul>
{/* ⬇️ Pagination kategori (rata sejajar) */}
<div className="mt-4 flex justify-center items-center gap-2 flex-wrap">
{/* Tombol Prev */}
<button
onClick={() =>
setCategoryPage((prev) => Math.max(prev - 1, 1))
}
disabled={categoryPage === 1}
className="px-2 py-1 border rounded disabled:opacity-50 flex items-center justify-center"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="m13.15 16.15l-3.625-3.625q-.125-.125-.175-.25T9.3 12t.05-.275t.175-.25L13.15 7.85q.075-.075.163-.112T13.5 7.7q.2 0 .35.138T14 8.2v7.6q0 .225-.15.363t-.35.137q-.05 0-.35-.15"
/>
</svg>
</button>
{(() => {
const maxVisible = 4;
let startPage = Math.max(
1,
Math.min(
categoryPage - Math.floor(maxVisible / 2),
categoryTotalPages - maxVisible + 1
)
);
const endPage = Math.min(
categoryTotalPages,
startPage + maxVisible - 1
);
const visiblePages = [];
for (let i = startPage; i <= endPage; i++) {
visiblePages.push(i);
}
return visiblePages.map((pageNum) => (
<button
key={pageNum}
onClick={() => setCategoryPage(pageNum)}
className={`px-3 py-1 border rounded text-sm transition-colors ${
categoryPage === pageNum
? "bg-[#bb3523] text-white"
: "bg-white dark:bg-gray-800"
}`}
>
{pageNum}
</button>
));
})()}
{/* Tombol Next */}
<button
onClick={() =>
setCategoryPage((prev) =>
Math.min(prev + 1, categoryTotalPages)
)
}
disabled={categoryPage === categoryTotalPages}
className="px-2 py-1 border rounded disabled:opacity-50 flex items-center justify-center"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="M10.5 16.3q-.2 0-.35-.137T10 15.8V8.2q0-.225.15-.362t.35-.138q.05 0 .35.15l3.625 3.625q.125.125.175.25t.05.275t-.05.275t-.175.25L10.85 16.15q-.075.075-.162.113t-.188.037"
/>
</svg>
</button>
</div>
</div>
{/* <div>
<h3 className="text-sm font-medium text-gray-700 dark:text-white">
{t("categories", { defaultValue: "Categories" })}
</h3>
<ul className="mt-2 space-y-2">
{categories.map((category: any) => (
<li key={category?.id}>
@ -797,7 +687,7 @@ const FilterPage = () => {
</button>
</div>
</ul>
</div> */}
</div>
{/* Garis */}
<div className="border-t border-black my-4 dark:border-white"></div>
{/* Garis */}

2
app/[locale]/layout.tsx
View File

@ -23,7 +23,7 @@ import AuthProvider from "@/providers/auth.provider";
export const metadata: Metadata = {
title: "Media Hub | POLRI",
description: "Media Hub Platform for POLRI",
metadataBase: new URL(process.env.NEXT_PUBLIC_SITE_URL || 'https://new.netidhub.com'),
metadataBase: new URL(process.env.NEXT_PUBLIC_SITE_URL || 'https://mediahub.polri.go.id'),
openGraph: {
title: "Media Hub | POLRI",
description: "Media Hub Platform for POLRI",

2
app/[locale]/sitemap.xml/route.ts
View File

@ -4,7 +4,7 @@ import { NextResponse } from "next/server";
export async function GET() {
try {
const baseUrl = "https://new.netidhub.com/in";
const baseUrl = "https://mediahub.polri.go.id/in";
const response = await getListContent({
page: 1,

4
components/editor/custom-editor.js
View File

@ -5,7 +5,7 @@ import { CKEditor } from "@ckeditor/ckeditor5-react";
import Editor from "ckeditor5-custom-build";
function CustomEditor(props) {
const maxHeight = props.maxHeight || 600;
const maxHeight = props.maxHeight || 600;
return (
<div className="ckeditor-wrapper">
@ -168,4 +168,4 @@ function CustomEditor(props) {
);
}
export default CustomEditor;
export default CustomEditor;

2
components/form/broadcast/content-blast--detail-form.tsx
View File

@ -35,7 +35,7 @@ export default function DetailContentBlast() {
const detailData = res?.data?.data;
let updatedUrl = detailData.contentUrl;
const domainsToUpdate = ["new.netidhub.com", "netidhub.com"];
const domainsToUpdate = ["mediahub.polri.go.id", "netidhub.com"];
domainsToUpdate.forEach((domain) => {
if (

688
components/form/broadcast/content-blast-form.tsx
View File

@ -14,7 +14,6 @@ import Swal from "sweetalert2";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Checkbox } from "@/components/ui/checkbox";
import {
getLocaleTime,
@ -25,6 +24,7 @@ import {
detailMediaSummary,
getMediaBlastCampaignList,
saveMediaBlastBroadcast,
saveMediaBlastCampaign,
} from "@/service/broadcast/broadcast";
import { error } from "@/config/swal";
import { Link, useRouter } from "@/i18n/routing";
@ -44,13 +44,27 @@ import {
import dynamic from "next/dynamic";
const CustomEditor = dynamic(
() => import("@/components/editor/custom-editor"),
() => {
return import("@/components/editor/custom-editor");
},
{ ssr: false }
);
const animatedComponent = makeAnimated();
const FormSchema = z.object({
title: z.string({
required_error: "Required",
}),
url: z.string({
required_error: "Required",
}),
thumbnail: z.string({
required_error: "Required",
}),
detail: z.string({
required_error: "Required",
}),
selected: z
.array(
z.object({
@ -59,16 +73,9 @@ const FormSchema = z.object({
value: z.string(),
})
)
.min(1, "Pilih minimal satu campaign"),
title: z.string().min(1, "Required"),
url: z.string().min(1, "Required"),
thumbnail: z.string().min(1, "Required"),
detail: z.string().min(1, "Required"),
messageType: z
.array(z.string())
.min(1, "Pilih minimal satu tipe pesan (WA / Email)"),
.refine((value) => value.length > 0, {
message: "Required",
}),
});
interface Campaign {
@ -76,134 +83,73 @@ interface Campaign {
name: string;
}
export default function ContentBlast() {
export default function ContentBlast(props: { type: string }) {
const editor = useRef(null);
const id = useParams()?.id;
const MySwal = withReactContent(Swal);
const router = useRouter();
const { type } = props;
const [dataSelectCampaign, setDataSelectCampaign] = useState<Campaign[]>([]);
const [openModal, setOpenModal] = useState(false);
const form = useForm<z.infer<typeof FormSchema>>({
resolver: zodResolver(FormSchema),
defaultValues: {
selected: [],
detail: "",
messageType: [],
},
defaultValues: { selected: [], detail: "" },
});
const selectedTypes = form.watch("messageType");
const onSubmit = async (data: z.infer<typeof FormSchema>) => {
MySwal.fire({
title: "Kirim Broadcast?",
text: "Pesan akan dikirim ke semua campaign yang dipilih",
icon: "warning",
showCancelButton: true,
cancelButtonColor: "#d33",
confirmButtonColor: "#3085d6",
confirmButtonText: "Kirim",
}).then((result) => {
if (result.isConfirmed) save(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);
}
});
}
};
function htmlToWaText(html: string) {
// Hilangkan link menjadi URL saja
html = html.replace(/<a [^>]*href="([^"]+)"[^>]*>(.*?)<\/a>/gi, "$1");
// Ambil gambar sebagai URL
html = html.replace(/<img [^>]*src="([^"]+)".*?>/gi, "$1");
// Hapus semua HTML tag
html = html.replace(/<\/?[^>]+>/gi, "");
// Decode HTML entities
html = html.replace(/&amp;/g, "&");
// Rapikan spasi
return html.replace(/\s+/g, " ").trim();
}
const save = async (data: z.infer<typeof FormSchema>) => {
const selectedCampaign = data.selected;
const mediaRes = await detailMediaSummary(String(id));
const details = mediaRes?.data?.data;
const selectedCampaign = form.getValues("selected");
for (let i = 0; i < selectedCampaign.length; i++) {
const campaignId = selectedCampaign[i].id;
const reqData = {
mediaUploadId: id,
mediaBlastCampaignId: selectedCampaign[i].id,
subject: type == "wa" ? `*${data.title}*` : data.title,
body: data.detail?.replace(/\n/g, ""),
type: type,
isScheduled: false,
thumbnail: data?.thumbnail,
sendDate: getLocaleTimestamp(new Date()),
sendTime: getLocaleTime(new Date()),
contentUrl: data.url,
};
for (let mt of data.messageType) {
let finalBody = data.detail;
if (mt === "wa") {
finalBody = textEllipsis(details?.description || "", 150);
}
const payload = {
mediaUploadId: id,
mediaBlastCampaignId: campaignId,
subject: mt === "wa" ? `*${data.title}*` : data.title,
body: mt === "wa" ? htmlToWaText(finalBody) : finalBody,
type: mt,
isScheduled: false,
thumbnail: data.thumbnail,
sendDate: getLocaleTimestamp(new Date()),
sendTime: getLocaleTime(new Date()),
contentUrl: data.url,
};
console.log("REQ =>", payload);
await saveMediaBlastBroadcast(payload);
}
console.log("req =>", reqData);
const response = await saveMediaBlastBroadcast(reqData);
}
setOpenModal(true);
};
// const save = async (data: z.infer<typeof FormSchema>) => {
// const selectedCampaign = data.selected;
// for (let i = 0; i < selectedCampaign.length; i++) {
// const campaignId = selectedCampaign[i].id;
// // Loop WA / Email
// for (let mt of data.messageType) {
// const payload = {
// mediaUploadId: id,
// mediaBlastCampaignId: campaignId,
// subject: mt === "wa" ? `*${data.title}*` : data.title,
// // body: data.detail.replace(/\n/g, ""),
// body: mt === "wa" ? htmlToWaText(data.detail) : data.detail,
// type: mt, // <-- WA / email
// isScheduled: false,
// thumbnail: data.thumbnail,
// sendDate: getLocaleTimestamp(new Date()),
// sendTime: getLocaleTime(new Date()),
// contentUrl: data.url,
// };
// console.log("REQ =>", payload);
// await saveMediaBlastBroadcast(payload);
// }
// }
// setOpenModal(true);
// };
useEffect(() => {
async function init() {
async function initState() {
const response = await detailMediaSummary(String(id));
const details = response?.data?.data;
if (!details) return;
form.setValue("thumbnail", details.smallThumbnailLink);
form.setValue("title", details.title);
form.setValue("url", details.pageUrl);
let pageUrl = details?.pageUrl || "";
if (pageUrl.includes("new.netidhub.com")) {
if (pageUrl.includes("mediahub.polri.go.id")) {
pageUrl = pageUrl.replace(
/(\.id)(\/|$)/,
(match: any, p1: any, p2: any) => {
@ -211,43 +157,59 @@ export default function ContentBlast() {
}
);
}
const body = `<div><p>Berita hari ini !!!</p>
<div style='margin-top:20px;border:1px solid;border-radius:10px;width:500px;background-color:#f7f7f7'>
<div>
<img style='width:500px;height:auto;border-radius:10px;object-fit:cover' src='${
details.smallThumbnailLink
}'>
</div>
<a style='padding:5px 20px;margin:0;text-decoration:none' href='${pageUrl}'>${pageUrl}</a>
<h3 style='padding:5px 20px;margin:0'>${details.title}</h3>
<p style='padding:0 20px;margin:0;margin-bottom:10px'>
${textEllipsis(details.description, 150)}
</p>
</div>
</div>`;
form.setValue("detail", body);
if (details != undefined) {
form.setValue("thumbnail", details.smallThumbnailLink);
let body = `<div><p>Berita hari ini !!!</p>
<div style='margin-top:20px;border:1px solid;border-radius:10px;width:500px;background-color:#f7f7f7'>
<div>
<img style='width:500px;height:auto;border-radius:10px;object-fit:cover' src='${
details?.smallThumbnailLink
}'>
</div>
<a style='padding:5px 20px;margin:0;text-decoration:none' href='${pageUrl}'>${pageUrl}</a>
<h3 style='padding:5px 20px;margin:0'>${details?.title}</h3>
<p style='padding:0 20px;margin:0;margin-bottom:10px'>
${textEllipsis(details?.description, 150)}
</p>
</div>
</div>`;
form.setValue("title", `${details?.title}`);
form.setValue(
"url",
details?.pageUrl || "https://mediahub.polri.go.id"
);
if (type == "wa") {
body = `${textEllipsis(details?.description, 150)}`;
form.setValue("detail", body);
} else {
form.setValue("detail", body);
}
}
}
async function loadCampaign() {
async function getCampaign() {
const response = await getMediaBlastCampaignList();
const campaign = response?.data?.data?.content;
handleLabelCampaign(campaign);
console.log(campaign);
}
init();
loadCampaign();
initState();
getCampaign();
}, [id]);
function handleLabelCampaign(data: any) {
const arr = data.map((item: any) => ({
id: item.id,
label: item.title,
value: item.title,
}));
setDataSelectCampaign(arr);
const optionArr: any = [];
data.map((option: any) => {
optionArr.push({
id: option.id,
label: option.title,
value: option.title,
});
});
console.log("option arr", optionArr);
setDataSelectCampaign(optionArr);
}
return (
@ -256,127 +218,104 @@ export default function ContentBlast() {
onSubmit={form.handleSubmit(onSubmit)}
className="space-y-3 bg-white rounded-sm p-4"
>
<p className="font-semibold">Broadcast</p>
{/* SELECT CAMPAIGN */}
<p className="fonnt-semibold">Broadcast</p>
<FormField
control={form.control}
name="selected"
render={({ field }) => (
<FormItem>
<FormLabel>Pilih Campaign</FormLabel>
<FormLabel>Subject</FormLabel>
<Select
className="z-50"
options={dataSelectCampaign}
closeMenuOnSelect={false}
components={animatedComponent}
isMulti
onChange={field.onChange}
isMulti
/>
<FormMessage />
</FormItem>
)}
/>
{/* CHECKBOX MESSAGE TYPE */}
<FormField
control={form.control}
name="messageType"
render={({ field }) => (
<FormItem>
<FormLabel>Kirim sebagai:</FormLabel>
<div className="flex gap-6">
<label className="flex items-center gap-2">
<Checkbox
checked={field.value.includes("wa")}
onCheckedChange={(checked) => {
checked
? field.onChange([...field.value, "wa"])
: field.onChange(field.value.filter((v) => v !== "wa"));
}}
/>
WhatsApp
</label>
<label className="flex items-center gap-2">
<Checkbox
checked={field.value.includes("email")}
onCheckedChange={(checked) => {
checked
? field.onChange([...field.value, "email"])
: field.onChange(
field.value.filter((v) => v !== "email")
);
}}
/>
Email
</label>
</div>
<FormMessage />
</FormItem>
)}
/>
{/* TITLE */}
<FormField
control={form.control}
name="title"
render={({ field }) => (
<FormItem>
<FormLabel>Judul</FormLabel>
<Input {...field} placeholder="Masukkan judul" />
<FormLabel>Subject</FormLabel>
<Input
value={field.value}
placeholder="Masukkan Judul"
onChange={field.onChange}
/>
<FormMessage />
</FormItem>
)}
/>
{/* DETAIL */}
<FormField
control={form.control}
name="detail"
render={({ field }) => (
<FormItem>
<FormLabel>Isi Pesan</FormLabel>
<CustomEditor
onChange={field.onChange}
initialData={field.value}
/>
<FormLabel>Detail Perencanaan</FormLabel>
{type === "wa" ? (
<Textarea value={field.value} onChange={field.onChange} />
) : (
<CustomEditor
onChange={field.onChange}
initialData={field.value}
/>
)}
<FormMessage />
</FormItem>
)}
/>
{/* BUTTONS */}
<div className="flex gap-2 mt-4">
<Button variant="outline" type="button">
<div className="flex flex-row gap-2 mt-4 pt-4">
<Button
size="md"
type="button"
variant="outline"
color="destructive"
className="text-xs"
>
Cancel
</Button>
<Button type="submit" color="primary">
<Button size="md" type="submit" color="primary" className="text-xs">
Submit
</Button>
</div>
{/* MODAL SENT */}
<Dialog open={openModal}>
<DialogContent>
<DialogHeader>
<DialogTitle>Terkirim!</DialogTitle>
<DialogTitle>Terkirim !!</DialogTitle>
</DialogHeader>
<div className="flex flex-col items-center gap-3">
<div className="flex flex-col justify-center items-center gap-3 mb-3 text-sm">
<img
src="/assets/img/illust-for-broadcast-sent.png"
className="w-[70%]"
/>
Pesan telah dikirim sesuai pilihan Anda.
Untuk melihat Email Terkirim silahkan cek menu “Sent”!
</div>
<DialogFooter className="flex justify-center">
<Button onClick={() => router.push("/admin/broadcast")}>
OK
{/* <Link
href={`/admin/broadcast/campaign-list/detail/${
form.getValues("selected")[0]?.id
}`}
>
<Button type="button" color="success">
Menu "Sent"
</Button>
</Link> */}
<Button
type="button"
onClick={() => router.push("/admin/broadcast")}
color="primary"
>
Okay
</Button>
</DialogFooter>
</DialogContent>
@ -385,330 +324,3 @@ export default function ContentBlast() {
</Form>
);
}
// "use client";
// import { z } from "zod";
// import { useForm } from "react-hook-form";
// import { zodResolver } from "@hookform/resolvers/zod";
// import {
// Form,
// FormField,
// FormItem,
// FormLabel,
// FormMessage,
// } from "@/components/ui/form";
// import withReactContent from "sweetalert2-react-content";
// import Swal from "sweetalert2";
// import { Input } from "@/components/ui/input";
// import { Button } from "@/components/ui/button";
// import {
// getLocaleTime,
// getLocaleTimestamp,
// textEllipsis,
// } from "@/utils/globals";
// import {
// detailMediaSummary,
// getMediaBlastCampaignList,
// saveMediaBlastBroadcast,
// saveMediaBlastCampaign,
// } from "@/service/broadcast/broadcast";
// import { error } from "@/config/swal";
// import { Link, useRouter } from "@/i18n/routing";
// import { useEffect, useRef, useState } from "react";
// import { useParams } from "next/navigation";
// import Select from "react-select";
// import makeAnimated from "react-select/animated";
// import { Textarea } from "@/components/ui/textarea";
// import {
// Dialog,
// DialogContent,
// DialogFooter,
// DialogHeader,
// DialogTitle,
// } from "@/components/ui/dialog";
// import dynamic from "next/dynamic";
// const CustomEditor = dynamic(
// () => {
// return import("@/components/editor/custom-editor");
// },
// { ssr: false }
// );
// const animatedComponent = makeAnimated();
// const FormSchema = z.object({
// title: z.string({
// required_error: "Required",
// }),
// url: z.string({
// required_error: "Required",
// }),
// thumbnail: z.string({
// required_error: "Required",
// }),
// detail: z.string({
// required_error: "Required",
// }),
// selected: z
// .array(
// z.object({
// id: z.number(),
// label: z.string(),
// value: z.string(),
// })
// )
// .refine((value) => value.length > 0, {
// message: "Required",
// }),
// });
// interface Campaign {
// id: string;
// name: string;
// }
// export default function ContentBlast(props: { type: string }) {
// const editor = useRef(null);
// const id = useParams()?.id;
// const MySwal = withReactContent(Swal);
// const router = useRouter();
// const { type } = props;
// const [dataSelectCampaign, setDataSelectCampaign] = useState<Campaign[]>([]);
// const [openModal, setOpenModal] = useState(false);
// const form = useForm<z.infer<typeof FormSchema>>({
// resolver: zodResolver(FormSchema),
// defaultValues: { selected: [], detail: "" },
// });
// 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 selectedCampaign = form.getValues("selected");
// for (let i = 0; i < selectedCampaign.length; i++) {
// const reqData = {
// mediaUploadId: id,
// mediaBlastCampaignId: selectedCampaign[i].id,
// subject: type == "wa" ? `*${data.title}*` : data.title,
// body: data.detail?.replace(/\n/g, ""),
// type: type,
// isScheduled: false,
// thumbnail: data?.thumbnail,
// sendDate: getLocaleTimestamp(new Date()),
// sendTime: getLocaleTime(new Date()),
// contentUrl: data.url,
// };
// console.log("req =>", reqData);
// const response = await saveMediaBlastBroadcast(reqData);
// }
// setOpenModal(true);
// };
// useEffect(() => {
// async function initState() {
// const response = await detailMediaSummary(String(id));
// const details = response?.data?.data;
// let pageUrl = details?.pageUrl || "";
// if (pageUrl.includes("new.netidhub.com")) {
// pageUrl = pageUrl.replace(
// /(\.id)(\/|$)/,
// (match: any, p1: any, p2: any) => {
// return p2.startsWith("/in") ? match : `${p1}/in${p2}`;
// }
// );
// }
// if (details != undefined) {
// form.setValue("thumbnail", details.smallThumbnailLink);
// let body = `<div><p>Berita hari ini !!!</p>
// <div style='margin-top:20px;border:1px solid;border-radius:10px;width:500px;background-color:#f7f7f7'>
// <div>
// <img style='width:500px;height:auto;border-radius:10px;object-fit:cover' src='${
// details?.smallThumbnailLink
// }'>
// </div>
// <a style='padding:5px 20px;margin:0;text-decoration:none' href='${pageUrl}'>${pageUrl}</a>
// <h3 style='padding:5px 20px;margin:0'>${details?.title}</h3>
// <p style='padding:0 20px;margin:0;margin-bottom:10px'>
// ${textEllipsis(details?.description, 150)}
// </p>
// </div>
// </div>`;
// form.setValue("title", `${details?.title}`);
// form.setValue(
// "url",
// details?.pageUrl || "https://new.netidhub.com"
// );
// if (type == "wa") {
// body = `${textEllipsis(details?.description, 150)}`;
// form.setValue("detail", body);
// } else {
// form.setValue("detail", body);
// }
// }
// }
// async function getCampaign() {
// const response = await getMediaBlastCampaignList();
// const campaign = response?.data?.data?.content;
// handleLabelCampaign(campaign);
// console.log(campaign);
// }
// initState();
// getCampaign();
// }, [id]);
// function handleLabelCampaign(data: any) {
// const optionArr: any = [];
// data.map((option: any) => {
// optionArr.push({
// id: option.id,
// label: option.title,
// value: option.title,
// });
// });
// console.log("option arr", optionArr);
// setDataSelectCampaign(optionArr);
// }
// return (
// <Form {...form}>
// <form
// onSubmit={form.handleSubmit(onSubmit)}
// className="space-y-3 bg-white rounded-sm p-4"
// >
// <p className="fonnt-semibold">Broadcast</p>
// <FormField
// control={form.control}
// name="selected"
// render={({ field }) => (
// <FormItem>
// <FormLabel>Subject</FormLabel>
// <Select
// className="z-50"
// options={dataSelectCampaign}
// closeMenuOnSelect={false}
// components={animatedComponent}
// onChange={field.onChange}
// isMulti
// />
// <FormMessage />
// </FormItem>
// )}
// />
// <FormField
// control={form.control}
// name="title"
// render={({ field }) => (
// <FormItem>
// <FormLabel>Subject</FormLabel>
// <Input
// value={field.value}
// placeholder="Masukkan Judul"
// onChange={field.onChange}
// />
// <FormMessage />
// </FormItem>
// )}
// />
// <FormField
// control={form.control}
// name="detail"
// render={({ field }) => (
// <FormItem>
// <FormLabel>Detail Perencanaan</FormLabel>
// {type === "wa" ? (
// <Textarea value={field.value} onChange={field.onChange} />
// ) : (
// <CustomEditor
// onChange={field.onChange}
// initialData={field.value}
// />
// )}
// <FormMessage />
// </FormItem>
// )}
// />
// <div className="flex flex-row gap-2 mt-4 pt-4">
// <Button
// size="md"
// type="button"
// variant="outline"
// color="destructive"
// className="text-xs"
// >
// Cancel
// </Button>
// <Button size="md" type="submit" color="primary" className="text-xs">
// Submit
// </Button>
// </div>
// <Dialog open={openModal}>
// <DialogContent>
// <DialogHeader>
// <DialogTitle>Terkirim !!</DialogTitle>
// </DialogHeader>
// <div className="flex flex-col justify-center items-center gap-3 mb-3 text-sm">
// <img
// src="/assets/img/illust-for-broadcast-sent.png"
// className="w-[70%]"
// />
// Untuk melihat Email Terkirim silahkan cek menu “Sent”!
// </div>
// <DialogFooter className="flex justify-center">
// {/* <Link
// href={`/admin/broadcast/campaign-list/detail/${
// form.getValues("selected")[0]?.id
// }`}
// >
// <Button type="button" color="success">
// Menu "Sent"
// </Button>
// </Link> */}
// <Button
// type="button"
// onClick={() => router.push("/admin/broadcast")}
// color="primary"
// >
// Okay
// </Button>
// </DialogFooter>
// </DialogContent>
// </Dialog>
// </form>
// </Form>
// );
// }

1
components/form/communication/escalation-detail-form.tsx
View File

@ -1,4 +1,5 @@
"use client";
"use client";
import React, { useEffect, useState } from "react";
import { useForm, Controller } from "react-hook-form";
import { Input } from "@/components/ui/input";

47
components/form/communication/escalation-forward-form.tsx
View File

@ -139,27 +139,17 @@ export default function FormQuestionsForward() {
formState: { errors },
} = useForm({
resolver: zodResolver(taskSchema),
defaultValues: {
title: "",
description: "",
},
});
useEffect(() => {
async function initState() {
const response = await getQuestionTicket(id);
const data = response?.data?.data;
setDetail(data);
setDetail(response?.data?.data);
if (data) {
reset({
title: data.message ?? "",
description: data.emergencyIssue?.description ?? "",
});
if (response?.data !== null) {
setDetailTickets(response?.data?.data);
}
setDetailTickets(data);
if (detailTickets?.emergencyIssue) {
reset({
title: detailTickets.emergencyIssue.title || "",
@ -311,15 +301,14 @@ export default function FormQuestionsForward() {
{` `}
mengirimkan pesan untuk{` `}
<Link
// href={
// detail?.feed
// ? detail?.feed?.permalink_url == undefined
// ? detail?.feedUrl
// : detail?.feed?.permalink_url
// : ""
// }
// target="_blank"
href={detail?.feedUrl}
href={
detail?.feed
? detail?.feed?.permalink_url == undefined
? detail?.feedUrl
: detail?.feed?.permalink_url
: ""
}
target="_blank"
className="font-bold"
>
{detail?.message}
@ -345,25 +334,13 @@ export default function FormQuestionsForward() {
<p className="mx-3 mt-3">Properties</p>
<div className="space-y-2 px-3">
<Label>Judul</Label>
{/* <Controller
control={control}
name="title"
render={({ field }) => (
<Input
size="md"
defaultValue={detailTickets?.message}
type="text"
{...field}
placeholder="Masukkan judul"
/>
)}
/> */}
<Controller
control={control}
name="title"
render={({ field }) => (
<Input
size="md"
defaultValue={detailTickets?.message}
type="text"
{...field}
placeholder="Masukkan judul"

647
components/form/content/audio-detail-form.tsx
View File

@ -26,7 +26,6 @@ import {
createMedia,
getTagsBySubCategoryId,
listEnableCategory,
listEnableCategoryNew,
rejectFiles,
submitApproval,
} from "@/service/content/content";
@ -115,7 +114,7 @@ const ViewEditor = dynamic(
() => {
return import("@/components/editor/view-editor");
},
{ ssr: false },
{ ssr: false }
);
interface Destination {
@ -198,12 +197,6 @@ export default function FormAudioDetail() {
satker: boolean;
}>
>([]);
const [creatorLevelNumber, setCreatorLevelNumber] = useState<number | null>(
null,
);
const isContentFromSatker = creatorLevelNumber === 3;
const isContentFromMabesOrPolda =
creatorLevelNumber === 1 || creatorLevelNumber === 2;
useEffect(() => {
if (Number(userLevelId) === 216 && Number(roleId) === 3) {
@ -215,7 +208,7 @@ export default function FormAudioDetail() {
const handleFileUnitChange = (
fileIndex: number,
key: keyof typeof unitSelection,
value: boolean,
value: boolean
) => {
setFileUnitSelections((prev) => {
const newSelections = [...prev];
@ -235,7 +228,7 @@ export default function FormAudioDetail() {
setFileCheckedLevels((prevLevels) => {
const newArray = [...prevLevels];
const currentFileLevels = new Set<number>(
newArray[fileIndex] || new Set(),
newArray[fileIndex] || new Set()
);
if (value) {
@ -266,12 +259,12 @@ export default function FormAudioDetail() {
(item: any) =>
item.levelNumber === 2 &&
item.name !== "SATKER POLRI" &&
currentFileCheckedLevels.has(Number(item.id)),
currentFileCheckedLevels.has(Number(item.id))
);
if (!hasSelectedPolda) {
alert(
"Harap pilih POLDA di Modal terlebih dahulu sebelum mengaktifkan checkbox POLRES.",
"Harap pilih POLDA di Modal terlebih dahulu sebelum mengaktifkan checkbox POLRES."
);
return prev; // Batalkan perubahan
}
@ -308,7 +301,7 @@ export default function FormAudioDetail() {
useEffect(() => {
if (detail?.assignedToTopLevel) {
const outputSet = new Set(
detail.assignedToTopLevel.split(",").map(Number),
detail.assignedToTopLevel.split(",").map(Number)
);
setUnitSelection({
semua: outputSet.has(0),
@ -333,7 +326,7 @@ export default function FormAudioDetail() {
acc[polda.id] = false;
return acc;
},
{},
{}
);
setExpandedPolda(initialExpandedState);
console.log("polres", initialExpandedState);
@ -368,7 +361,7 @@ export default function FormAudioDetail() {
const handleUnitChange = (
key: keyof typeof unitSelection,
value: boolean,
value: boolean
) => {
if (key === "semua") {
const newState = {
@ -478,7 +471,7 @@ export default function FormAudioDetail() {
const handleCheckboxChange = (id: number) => {
setSelectedPublishers((prev) =>
prev.includes(id) ? prev.filter((item) => item !== id) : [...prev, id],
prev.includes(id) ? prev.filter((item) => item !== id) : [...prev, id]
);
};
@ -492,7 +485,7 @@ export default function FormAudioDetail() {
const getCategories = async () => {
try {
const category = await listEnableCategoryNew(fileTypeId);
const category = await listEnableCategory(fileTypeId);
const resCategory: Category[] = category?.data.data.content;
setCategories(resCategory);
@ -500,7 +493,7 @@ export default function FormAudioDetail() {
if (scheduleId && scheduleType === "3") {
const findCategory = resCategory.find((o) =>
o.name.toLowerCase().includes("pers rilis"),
o.name.toLowerCase().includes("pers rilis")
);
if (findCategory) {
@ -548,9 +541,6 @@ export default function FormAudioDetail() {
const details = response?.data?.data;
setFiles(details?.files);
setDetail(details);
if (details?.uploadedBy?.userLevel?.levelNumber) {
setCreatorLevelNumber(details.uploadedBy.userLevel.levelNumber);
}
setMain({
type: details?.fileType.name,
url: details?.files[0]?.url,
@ -561,14 +551,14 @@ export default function FormAudioDetail() {
if (details?.assignedToLevel) {
const levels = new Set(
details.assignedToLevel.split(",").map(Number),
details.assignedToLevel.split(",").map(Number)
);
setCheckedLevels(levels);
}
if (details?.publishedForObject) {
const publisherIds = details?.publishedForObject.map(
(obj: any) => obj.id,
(obj: any) => obj.id
);
setSelectedPublishers(publisherIds);
}
@ -718,7 +708,7 @@ export default function FormAudioDetail() {
const setupPlacement = (
index: number,
placement: string,
checked: boolean,
checked: boolean
) => {
let temp = [...filePlacements];
if (checked) {
@ -729,7 +719,7 @@ export default function FormAudioDetail() {
setFileCheckedLevels((prevLevels) => {
const newArray = [...prevLevels];
const currentFileLevels = new Set<number>(
newArray[index] || new Set(),
newArray[index] || new Set()
);
// Checklist semua item di modal
@ -779,7 +769,7 @@ export default function FormAudioDetail() {
// Hanya auto-checklist "all" jika polda, polres, dan mabes ter-checklist
// JANGAN include satker dalam perhitungan auto "all"
const nonSatkerItems = now.filter(
(item) => item !== "satker" && item !== "all",
(item) => item !== "satker" && item !== "all"
);
if (nonSatkerItems.length === 3 && !now.includes("all")) {
now.push("all");
@ -794,7 +784,7 @@ export default function FormAudioDetail() {
setFileCheckedLevels((prevLevels) => {
const newArray = [...prevLevels];
const currentFileLevels = new Set<number>(
newArray[index] || new Set(),
newArray[index] || new Set()
);
// Unchecklist semua item di modal
@ -828,7 +818,7 @@ export default function FormAudioDetail() {
// Hapus "all" jika tidak semua item ter-checklist
if (now.includes("all")) {
const nonSatkerItems = now.filter(
(item) => item !== "satker" && item !== "all",
(item) => item !== "satker" && item !== "all"
);
if (nonSatkerItems.length < 3) {
const newData = now.filter((b) => b !== "all");
@ -847,7 +837,7 @@ export default function FormAudioDetail() {
type: string,
url: string,
names: string,
format: string,
format: string
) => {
console.log("Test 3 :", type, url, names, format);
setMain({
@ -882,7 +872,7 @@ export default function FormAudioDetail() {
const updateModalChecklistLevels = (
fileIndex: number,
placement: string,
checked: boolean,
checked: boolean
) => {
if (!listDest || listDest.length === 0) return;
@ -915,7 +905,7 @@ export default function FormAudioDetail() {
} else if (placement === "satker") {
// Checklist SATKER POLRI dan semua sub-item di bawahnya
const satkerItem: any = listDest.find(
(item: any) => item.name === "SATKER POLRI",
(item: any) => item.name === "SATKER POLRI"
);
if (satkerItem) {
currentFileLevels.add(Number(satkerItem.id));
@ -951,7 +941,7 @@ export default function FormAudioDetail() {
} else if (placement === "satker") {
// Unchecklist SATKER POLRI dan semua sub-item di bawahnya
const satkerItem: any = listDest.find(
(item: any) => item.name === "SATKER POLRI",
(item: any) => item.name === "SATKER POLRI"
);
if (satkerItem) {
currentFileLevels.delete(Number(satkerItem.id));
@ -984,7 +974,7 @@ export default function FormAudioDetail() {
// Fungsi untuk mengupdate checklist levels untuk file tertentu
const handleFileCheckboxChangePlacement = (
fileIndex: number,
levelId: number,
levelId: number
) => {
setFileCheckedLevels((prev) => {
const newArray = [...prev];
@ -996,7 +986,7 @@ export default function FormAudioDetail() {
// Jika ini adalah POLDA yang di-unchecklist, unchecklist juga semua polres di bawahnya
const poldaItem = listDest.find(
(item: any) => Number(item.id) === levelId,
(item: any) => Number(item.id) === levelId
) as any;
if (
poldaItem &&
@ -1019,7 +1009,7 @@ export default function FormAudioDetail() {
// Jika ini adalah SATKER POLRI yang di-checklist, checklist juga semua sub-item di bawahnya
const satkerItem = listDest.find(
(item: any) => Number(item.id) === levelId,
(item: any) => Number(item.id) === levelId
) as any;
if (satkerItem && satkerItem.name === "SATKER POLRI") {
// Checklist semua sub-item di bawah SATKER POLRI (bukan POLRES)
@ -1050,7 +1040,7 @@ export default function FormAudioDetail() {
// Hitung total POLDA yang ada (bukan SATKER POLRI)
const totalPoldaCount = listDest.filter(
(item: any) => item.levelNumber === 2 && item.name !== "SATKER POLRI",
(item: any) => item.levelNumber === 2 && item.name !== "SATKER POLRI"
).length;
// Hitung berapa banyak POLDA yang ter-checklist (bukan SATKER POLRI)
@ -1077,7 +1067,7 @@ export default function FormAudioDetail() {
}
return total;
},
0,
0
);
// Hitung berapa banyak POLRES yang ter-checklist
@ -1087,7 +1077,7 @@ export default function FormAudioDetail() {
return (
total +
item.subDestination.filter((sub: any) =>
currentFileLevels.has(Number(sub.id)),
currentFileLevels.has(Number(sub.id))
).length
);
}
@ -1096,7 +1086,7 @@ export default function FormAudioDetail() {
// Cek apakah SATKER POLRI ter-checklist
const satkerItem = listDest.find(
(item: any) => item.name === "SATKER POLRI",
(item: any) => item.name === "SATKER POLRI"
);
const isSatkerChecked =
satkerItem && currentFileLevels.has(Number(satkerItem.id));
@ -1130,7 +1120,7 @@ export default function FormAudioDetail() {
// Cek apakah semua sub-items sudah ter-checklist
const allSubItemsChecked = polda.subDestination?.every((sub: any) =>
currentFileLevels.has(Number(sub.id)),
currentFileLevels.has(Number(sub.id))
);
if (allSubItemsChecked) {
@ -1213,7 +1203,7 @@ export default function FormAudioDetail() {
{detail &&
!categories.find(
(cat) =>
String(cat.id) === String(detail.category.id),
String(cat.id) === String(detail.category.id)
) && (
<SelectItem
key={String(detail.category.id)}
@ -1473,7 +1463,7 @@ export default function FormAudioDetail() {
Tingkat Distribusi:
</p>
<div className="grid grid-cols-2 md:grid-cols-4 gap-3">
{/* {[
{[
{ key: "semua", label: "Semua" },
{ key: "nasional", label: "Nasional" },
{ key: "wilayah", label: "Wilayah" },
@ -1481,39 +1471,6 @@ export default function FormAudioDetail() {
key: "international",
label: "Internasional",
},
] */}
{[
{ key: "semua", label: "Semua" },
...(isContentFromMabesOrPolda
? [
{
key: "nasional",
label: "Nasional",
},
{
key: "international",
label: "Internasional",
},
{
key: "wilayah",
label: "Wilayah",
},
]
: []),
...(isContentFromSatker
? [
{
key: "nasional",
label: "Nasional",
},
{
key: "international",
label: "Internasional",
},
]
: []),
].map((item, idx) => (
<div
key={item.key}
@ -1530,12 +1487,12 @@ export default function FormAudioDetail() {
handleFileUnitChange(
index,
item.key as keyof typeof unitSelection,
value as boolean,
value as boolean
);
setupPlacement(
index,
item.key,
Boolean(value),
Boolean(value)
);
}}
/>
@ -1551,262 +1508,251 @@ export default function FormAudioDetail() {
</div>
{/* Detail Wilayah */}
{/* {fileUnitSelections[index]?.wilayah && ( */}
{!isContentFromSatker &&
fileUnitSelections[index]?.wilayah && (
<div className="border-t border-gray-200 pt-2">
<p className="text-sm font-medium text-gray-700 mb-2">
Detail Wilayah:
</p>
{fileUnitSelections[index]?.wilayah && (
<div className="border-t border-gray-200 pt-2">
<p className="text-sm font-medium text-gray-700 mb-2">
Detail Wilayah:
</p>
{/* Checkbox Sub-kategori dengan tombol Kustom sejajar */}
<div className="grid grid-cols-1 md:grid-cols-4 gap-3">
{[
{ key: "polda", label: "POLDA" },
{ key: "polres", label: "POLRES" },
{ key: "satker", label: "SATKER" },
].map((item, idx) => (
<div
key={item.key}
className="flex items-center gap-2 p-3 border border-gray-200 rounded-md hover:bg-gray-50"
{/* Checkbox Sub-kategori dengan tombol Kustom sejajar */}
<div className="grid grid-cols-1 md:grid-cols-4 gap-3">
{[
{ key: "polda", label: "POLDA" },
{ key: "polres", label: "POLRES" },
{ key: "satker", label: "SATKER" },
].map((item, idx) => (
<div
key={item.key}
className="flex items-center gap-2 p-3 border border-gray-200 rounded-md hover:bg-gray-50"
>
<Checkbox
id={`${item.key}-${index}`}
checked={
fileUnitSelections[index]?.[
item.key as keyof typeof unitSelection
] || false
}
onCheckedChange={(value) => {
handleFileUnitChange(
index,
item.key as keyof typeof unitSelection,
value as boolean
);
setupPlacement(
index,
item.key,
Boolean(value)
);
}}
/>
<Label
htmlFor={`${item.key}-${index}`}
className="text-sm font-medium cursor-pointer"
>
<Checkbox
id={`${item.key}-${index}`}
checked={
fileUnitSelections[index]?.[
item.key as keyof typeof unitSelection
] || false
}
onCheckedChange={(value) => {
handleFileUnitChange(
index,
item.key as keyof typeof unitSelection,
value as boolean,
);
setupPlacement(
index,
item.key,
Boolean(value),
);
}}
/>
<Label
htmlFor={`${item.key}-${index}`}
className="text-sm font-medium cursor-pointer"
{item.label}
</Label>
</div>
))}
{/* Tombol Kustom sejajar dengan checkbox */}
<div className="flex items-center justify-center p-3">
<Dialog>
<DialogTrigger asChild>
<Button
variant="outline"
size="sm"
className="gap-2"
>
{item.label}
</Label>
</div>
))}
{/* Tombol Kustom sejajar dengan checkbox */}
<div className="flex items-center justify-center p-3">
<Dialog>
<DialogTrigger asChild>
<Button
variant="outline"
size="sm"
className="gap-2"
>
<Icon
icon="material-symbols:tune"
width={16}
height={16}
/>
{t("custom", {
defaultValue: "Kustom",
})}
</Button>
</DialogTrigger>
<DialogContent className="max-w-[95vw] lg:max-w-[1400px] max-h-[90vh]">
<DialogHeader className="border-b border-gray-200 pb-4">
<DialogTitle className="text-lg font-semibold">
Daftar Wilayah POLDA dan
POLRES
</DialogTitle>
</DialogHeader>
<div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-4 max-h-[70vh] overflow-y-auto p-1">
{listDest.map((polda: any) => (
<div
key={polda.id}
className="border border-gray-200 rounded-lg p-2 bg-white hover:shadow-sm transition-shadow"
>
{/* Header POLDA */}
<div className="flex items-center justify-between">
<Label className="flex items-center gap-3 flex-1 cursor-pointer">
<Checkbox
checked={
fileCheckedLevels[
index
]?.has(
Number(polda.id),
) || false
}
onCheckedChange={() =>
handleFileCheckboxChangePlacement(
index,
Number(polda.id),
)
<Icon
icon="material-symbols:tune"
width={16}
height={16}
/>
{t("custom", {
defaultValue: "Kustom",
})}
</Button>
</DialogTrigger>
<DialogContent className="max-w-[95vw] lg:max-w-[1400px] max-h-[90vh]">
<DialogHeader className="border-b border-gray-200 pb-4">
<DialogTitle className="text-lg font-semibold">
Daftar Wilayah POLDA dan POLRES
</DialogTitle>
</DialogHeader>
<div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-4 max-h-[70vh] overflow-y-auto p-1">
{listDest.map((polda: any) => (
<div
key={polda.id}
className="border border-gray-200 rounded-lg p-2 bg-white hover:shadow-sm transition-shadow"
>
{/* Header POLDA */}
<div className="flex items-center justify-between">
<Label className="flex items-center gap-3 flex-1 cursor-pointer">
<Checkbox
checked={
fileCheckedLevels[
index
]?.has(
Number(polda.id)
) || false
}
onCheckedChange={() =>
handleFileCheckboxChangePlacement(
index,
Number(polda.id)
)
}
/>
<span className="font-semibold text-gray-900 text-sm">
{polda.name}
</span>
</Label>
{polda.subDestination && (
<button
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
toggleExpand(
polda.id
);
}}
className="p-1 hover:bg-gray-100 rounded-md transition-colors"
>
<Icon
icon={
expandedPolda[
polda.id
]
? "mdi:chevron-up"
: "mdi:chevron-down"
}
width={16}
height={16}
/>
<span className="font-semibold text-gray-900 text-sm">
{polda.name}
</span>
</Label>
{polda.subDestination && (
<button
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
toggleExpand(
polda.id,
);
}}
className="p-1 hover:bg-gray-100 rounded-md transition-colors"
>
<Icon
icon={
expandedPolda[
polda.id
]
? "mdi:chevron-up"
: "mdi:chevron-down"
}
width={16}
height={16}
/>
</button>
)}
</div>
</button>
)}
</div>
{/* Sub-items */}
{polda.subDestination &&
expandedPolda[
polda.id
] && (
<div className="max-h-[200px] overflow-y-auto border-t border-gray-100 pt-2">
{/* Tombol Pilih Semua untuk sub-items */}
<div className="mb-2 flex justify-start">
{(() => {
const allSubItemsChecked =
polda.subDestination?.every(
(sub: any) =>
{/* Sub-items */}
{polda.subDestination &&
expandedPolda[polda.id] && (
<div className="max-h-[200px] overflow-y-auto border-t border-gray-100 pt-2">
{/* Tombol Pilih Semua untuk sub-items */}
<div className="mb-2 flex justify-start">
{(() => {
const allSubItemsChecked =
polda.subDestination?.every(
(sub: any) =>
fileCheckedLevels[
index
]?.has(
Number(
sub.id
)
)
);
return (
<Button
size="sm"
variant="outline"
className="text-xs h-6 px-2"
onClick={() =>
handleSelectAllSubItems(
index,
polda
)
}
>
{allSubItemsChecked ? (
<>
<Icon
icon="material-symbols:check-indeterminate-small"
width={12}
height={
12
}
className="mr-1"
/>
Batal Semua
</>
) : (
<>
<Icon
icon="material-symbols:check-all"
width={12}
height={
12
}
className="mr-1"
/>
Pilih Semua
</>
)}
</Button>
);
})()}
</div>
<div className="space-y-1">
{polda.subDestination.map(
(sub: any) => (
<Label
key={sub.id}
className="flex items-center gap-2 p-2 rounded-md hover:bg-gray-50 transition-colors cursor-pointer text-xs"
>
<Checkbox
checked={
fileCheckedLevels[
index
]?.has(
Number(
sub.id,
),
),
);
return (
<Button
size="sm"
variant="outline"
className="text-xs h-6 px-2"
onClick={() =>
handleSelectAllSubItems(
sub.id
)
) || false
}
onCheckedChange={() =>
handleFileCheckboxChangePlacement(
index,
polda,
Number(
sub.id
)
)
}
>
{allSubItemsChecked ? (
<>
<Icon
icon="material-symbols:check-indeterminate-small"
width={
12
}
height={
12
}
className="mr-1"
/>
Batal
Semua
</>
) : (
<>
<Icon
icon="material-symbols:check-all"
width={
12
}
height={
12
}
className="mr-1"
/>
Pilih
Semua
</>
)}
</Button>
);
})()}
</div>
<div className="space-y-1">
{polda.subDestination.map(
(sub: any) => (
<Label
key={sub.id}
className="flex items-center gap-2 p-2 rounded-md hover:bg-gray-50 transition-colors cursor-pointer text-xs"
>
<Checkbox
checked={
fileCheckedLevels[
index
]?.has(
Number(
sub.id,
),
) || false
}
onCheckedChange={() =>
handleFileCheckboxChangePlacement(
index,
Number(
sub.id,
),
)
}
/>
<span className="text-gray-700">
{sub.name}
</span>
</Label>
),
)}
</div>
/>
<span className="text-gray-700">
{sub.name}
</span>
</Label>
)
)}
</div>
)}
</div>
))}
</div>
<div className="flex justify-end gap-3 border-t border-gray-200 pt-4">
<DialogClose asChild>
<Button variant="outline">
{t("cancel", {
defaultValue: "Batal",
})}
</Button>
</DialogClose>
<DialogClose asChild>
<Button>
{/* {t("save", {
</div>
)}
</div>
))}
</div>
<div className="flex justify-end gap-3 border-t border-gray-200 pt-4">
<DialogClose asChild>
<Button variant="outline">
{t("cancel", {
defaultValue: "Batal",
})}
</Button>
</DialogClose>
<DialogClose asChild>
<Button>
{/* {t("save", {
defaultValue: "Simpan",
})} */}
Simpan
</Button>
</DialogClose>
</div>
</DialogContent>
</Dialog>
</div>
Simpan
</Button>
</DialogClose>
</div>
</DialogContent>
</Dialog>
</div>
</div>
)}
</div>
)}
</div>
</div>
) : (
@ -1885,7 +1831,7 @@ export default function FormAudioDetail() {
>
{template}
</Button>
),
)
)}
</div>
</div>
@ -1916,72 +1862,7 @@ export default function FormAudioDetail() {
</DialogContent>
</Dialog>
</Card>
{Number(roleId) === 14 ? (
<div className="flex flex-col gap-2 p-3">
<Button
onClick={() => actionApproval("2")}
color="primary"
type="button"
>
<Icon icon="fa:check" className="mr-3" />
{t("accept", { defaultValue: "Accept" })}
</Button>
<Button
onClick={() => actionApproval("3")}
className="bg-orange-400 hover:bg-orange-300"
type="button"
>
<Icon icon="fa:comment-o" className="mr-3" />{" "}
{t("revision", { defaultValue: "Revision" })}
</Button>
<Button
onClick={() => actionApproval("4")}
color="destructive"
type="button"
>
<Icon icon="fa:times" className="mr-3" />
{t("reject", { defaultValue: "Reject" })}
</Button>
</div>
) : (Number(detail?.needApprovalFromLevel) ===
Number(userLevelId) ||
(detail?.isInternationalMedia === true &&
detail?.isForwardFromNational === true &&
Number(detail?.statusId) === 1)) &&
(Number(detail?.uploadedById) === Number(userId) ||
Number(detail?.needApprovalFromLevel) ===
Number(userLevelId)) ? (
<div className="flex flex-col gap-2 p-3">
<Button
onClick={() => actionApproval("2")}
color="primary"
type="button"
>
<Icon icon="fa:check" className="mr-3" />
{t("accept", { defaultValue: "Accept" })}
</Button>
<Button
onClick={() => actionApproval("3")}
className="bg-orange-400 hover:bg-orange-300"
type="button"
>
<Icon icon="fa:comment-o" className="mr-3" />{" "}
{t("revision", { defaultValue: "Revision" })}
</Button>
<Button
onClick={() => actionApproval("4")}
color="destructive"
type="button"
>
<Icon icon="fa:times" className="mr-3" />
{t("reject", { defaultValue: "Reject" })}
</Button>
</div>
) : (
""
)}
{/* {Number(detail?.needApprovalFromLevel) == Number(userLevelId) ? (
{Number(detail?.needApprovalFromLevel) == Number(userLevelId) ? (
Number(detail?.uploadedById) == Number(userId) ? (
""
) : (
@ -2014,7 +1895,7 @@ export default function FormAudioDetail() {
)
) : (
""
)} */}
)}
</div>
</div>
) : (

219
components/form/content/audio-form.tsx
View File

@ -34,7 +34,6 @@ import {
createMedia,
getTagsBySubCategoryId,
listEnableCategory,
listEnableCategoryNew,
uploadThumbnail,
} from "@/service/content/content";
import { uploadThumbnailBlog } from "@/service/blog/blog";
@ -146,10 +145,10 @@ export default function FormAudio() {
const [publishedFor, setPublishedFor] = useState<string[]>([]);
const [fileError, setFileError] = useState<string | null>(null);
type FileWithPreview = File & { preview: string };
const [isLoadingTranslate, setIsLoadingTranslate] = useState(false);
const [translatedContent, setTranslatedContent] = React.useState("");
const [selectedLang, setSelectedLang] = React.useState<"id" | "en">("id");
const [translatedTitle, setTranslatedTitle] = useState("");
const options: Option[] = [
{ id: "all", label: "SEMUA" },
@ -466,7 +465,7 @@ export default function FormAudio() {
const getCategories = async () => {
try {
const category = await listEnableCategoryNew(fileTypeId);
const category = await listEnableCategory(fileTypeId);
const resCategory: Category[] = category?.data?.data?.content;
setCategories(resCategory);
@ -524,145 +523,20 @@ export default function FormAudio() {
}
}, [articleBody, setValue]);
// const save = async (data: AudioSchema) => {
// loading();
// const finalTags = tags.join(", ");
// const finalTitle = isSwitchOn ? title : data.title;
// const finalDescription = isSwitchOn
// ? data.description
// : selectedFileType === "rewrite"
// ? data.rewriteDescription
// : data.descriptionOri;
// if (!finalDescription?.trim()) {
// MySwal.fire("Error", "Deskripsi tidak boleh kosong.", "error");
// return;
// }
// let requestData: {
// title: string;
// description: string;
// htmlDescription: string;
// fileTypeId: string;
// categoryId: any;
// subCategoryId: any;
// uploadedBy: string;
// statusId: string;
// publishedFor: string;
// creatorName: string;
// tags: string;
// isYoutube: boolean;
// isInternationalMedia: boolean;
// attachFromScheduleId?: number;
// } = {
// ...data,
// title: finalTitle,
// description: htmlToString(finalDescription),
// htmlDescription: finalDescription,
// fileTypeId,
// categoryId: selectedCategory,
// subCategoryId: selectedCategory,
// uploadedBy: "2b7c8d83-d298-4b19-9f74-b07924506b58",
// statusId: "1",
// publishedFor: publishedFor.join(","),
// creatorName: data.creatorName,
// tags: finalTags,
// isYoutube: false,
// isInternationalMedia: false,
// };
// let id = Cookies.get("idCreate");
// if (scheduleId !== undefined) {
// requestData.attachFromScheduleId = Number(scheduleId);
// }
// if (id == undefined) {
// const response = await createMedia(requestData);
// console.log("Form Data Submitted:", requestData);
// if (response?.error) {
// MySwal.fire("Error", response?.message, "error");
// return;
// }
// Cookies.set("idCreate", response?.data?.data, { expires: 1 });
// id = response?.data?.data;
// const formMedia = new FormData();
// console.log("Thumbnail : ", files[0]);
// formMedia.append("file", files[0]);
// const responseThumbnail = await uploadThumbnail(id, formMedia);
// if (responseThumbnail?.error == true) {
// error(responseThumbnail?.message);
// return false;
// }
// }
// const progressInfoArr = [];
// for (const item of files) {
// progressInfoArr.push({ percentage: 0, fileName: item.name });
// }
// progressInfo = progressInfoArr;
// setIsStartUpload(true);
// setProgressList(progressInfoArr);
// close();
// // showProgress();
// files.map(async (item: any, index: number) => {
// await uploadResumableFile(index, String(id), item, "0");
// });
// Cookies.remove("idCreate");
// // MySwal.fire("Sukses", "Data berhasil disimpan.", "success");
// };
const save = async (data: AudioSchema) => {
loading();
const finalTags = tags.join(", ");
// const finalTitle = isSwitchOn ? title : data.title;
// // pilih description dasar
// let finalDescription = isSwitchOn
// ? data.description
// : selectedFileType === "rewrite"
// ? data.rewriteDescription
// : data.descriptionOri;
const finalTitle =
translatedTitle && translatedTitle.trim() !== ""
? translatedTitle
: isSwitchOn
? title
: data.title;
const finalDescription =
translatedContent && translatedContent.trim() !== ""
? translatedContent
: isSwitchOn
? data.description
: selectedFileType === "rewrite"
? data.rewriteDescription
: data.descriptionOri;
const finalTitle = isSwitchOn ? title : data.title;
const finalDescription = isSwitchOn
? data.description
: selectedFileType === "rewrite"
? data.rewriteDescription
: data.descriptionOri;
if (!finalDescription?.trim()) {
MySwal.fire("Error", "Deskripsi tidak boleh kosong.", "error");
return;
}
// 👉 tempelkan hasil translate ke field form & pakai sebagai description
if (translatedContent) {
data.descriptionOri = translatedContent;
console.log(
"🌍 Translate dimasukkan ke descriptionOri:",
translatedContent
);
}
// if (!finalDescription?.trim()) {
// MySwal.fire("Error", "Deskripsi tidak boleh kosong.", "error");
// return;
// }
let requestData: {
title: string;
description: string;
@ -681,8 +555,8 @@ export default function FormAudio() {
} = {
...data,
title: finalTitle,
description: htmlToString(finalDescription), // ✅ plain text versi translate
htmlDescription: finalDescription, // ✅ html versi translate
description: htmlToString(finalDescription),
htmlDescription: finalDescription,
fileTypeId,
categoryId: selectedCategory,
subCategoryId: selectedCategory,
@ -709,7 +583,6 @@ export default function FormAudio() {
MySwal.fire("Error", response?.message, "error");
return;
}
Cookies.set("idCreate", response?.data?.data, { expires: 1 });
id = response?.data?.data;
@ -723,15 +596,15 @@ export default function FormAudio() {
}
}
const progressInfoArr = files.map((item) => ({
percentage: 0,
fileName: item.name,
}));
const progressInfoArr = [];
for (const item of files) {
progressInfoArr.push({ percentage: 0, fileName: item.name });
}
progressInfo = progressInfoArr;
setIsStartUpload(true);
setProgressList(progressInfoArr);
// close();
close();
// showProgress();
files.map(async (item: any, index: number) => {
await uploadResumableFile(index, String(id), item, "0");
@ -841,8 +714,6 @@ export default function FormAudio() {
}
if (counter == progressInfo.length) {
setIsStartUpload(false);
close();
// hideProgress();
Cookies.remove("idCreate");
successSubmit("/in/contributor/content/audio");
@ -986,44 +857,7 @@ export default function FormAudio() {
<div className="gap-5 mb-5">
{/* Input Title */}
<div className="space-y-2 py-3">
<div className="flex justify-between items-center">
<Label>{t("title", { defaultValue: "Title" })}</Label>
{roleId === "14" && (
<button
type="button"
onClick={async () => {
try {
loading();
setIsLoadingTranslate(true);
const res = await translateText({
text: getValues("title"),
sourceLang: "ID",
targetLang: "EN",
});
if (!res.error) {
const resultText =
res?.data?.data?.translations?.[0]?.text || "";
setTranslatedTitle(resultText);
}
} catch (err) {
close();
console.error("Translate title gagal:", err);
} finally {
close();
setIsLoadingTranslate(false);
}
}}
className="px-3 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600"
>
{isLoadingTranslate
? "Translating..."
: "Translate Title"}
</button>
)}
</div>
{/* Title Bahasa Indonesia */}
<Label>{t("title", { defaultValue: "Title" })}</Label>
<Controller
control={control}
name="title"
@ -1033,27 +867,10 @@ export default function FormAudio() {
type="text"
value={field.value}
onChange={field.onChange}
placeholder="Masukkan Judul Bahasa Indonesia"
placeholder="Enter Title"
/>
)}
/>
{/* Versi English (muncul setelah translate) */}
{translatedTitle && (
<div className="mt-3">
<Label className="text-sm font-semibold">
English Title
</Label>
<Input
size="md"
type="text"
value={translatedTitle}
onChange={(e) => setTranslatedTitle(e.target.value)}
placeholder="Translated Title"
/>
</div>
)}
{errors.title?.message && (
<p className="text-red-400 text-sm">{errors.title.message}</p>
)}
@ -1806,7 +1623,7 @@ export default function FormAudio() {
</Card>
<div className="flex flex-row justify-end gap-3">
<div className="mt-4">
{levelNumber !== "2" && (
{levelNumber !== "2" && levelNumber !== "3" && (
<Button type="submit" color="primary">
{t("submit", { defaultValue: "Submit" })}
</Button>

766
components/form/content/audio-update-form.tsx
View File

@ -24,13 +24,16 @@ import {
SelectValue,
} from "@/components/ui/select";
import { Checkbox } from "@/components/ui/checkbox";
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
import { register } from "module";
import { Switch } from "@/components/ui/switch";
import Cookies from "js-cookie";
import {
createMedia,
deleteFile,
getTagsBySubCategoryId,
listEnableCategory,
listEnableCategoryNew,
updateFilePlacements,
uploadThumbnail,
} from "@/service/content/content";
@ -59,9 +62,6 @@ import {
DialogTrigger,
} from "@/components/ui/dialog";
import { v4 as uuidv4 } from "uuid";
import { getCookiesDecrypt } from "@/lib/utils";
import { close, loading } from "@/config/swal";
import { translateText } from "@/service/content/ai";
const audioSchema = z.object({
title: z.string().min(1, { message: "Judul diperlukan" }),
@ -135,20 +135,24 @@ const CustomEditor = dynamic(
export default function FormAudioUpdate() {
const MySwal = withReactContent(Swal);
const router = useRouter();
const { id } = useParams() as { id: string };
console.log(id);
const editor = useRef(null);
type AudioSchema = z.infer<typeof audioSchema>;
let progressInfo: any = [];
let counterUpdateProgress = 0;
const [progressList, setProgressList] = useState<any>([]);
let uploadPersen = 0;
const [isStartUpload, setIsStartUpload] = useState(false);
const [counterProgress, setCounterProgress] = useState(0);
const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
const taskId = Cookies.get("taskId");
const scheduleId = Cookies.get("scheduleId");
const scheduleType = Cookies.get("scheduleType");
const t = useTranslations("Form");
const [categories, setCategories] = useState<Category[]>([]);
const [selectedCategory, setSelectedCategory] = useState<any>();
@ -193,11 +197,6 @@ export default function FormAudioUpdate() {
useState(false);
const [mainCheckboxChangeType, setMainCheckboxChangeType] =
useState<string>("");
const [isLoadingTranslate, setIsLoadingTranslate] = useState(false);
const [translatedContent, setTranslatedContent] = React.useState("");
const [selectedLang, setSelectedLang] = React.useState<"id" | "en">("id");
const roleId = getCookiesDecrypt("urie");
const [translatedTitle, setTranslatedTitle] = useState("");
const options: Option[] = [
{ id: "all", name: "SEMUA" },
@ -213,8 +212,7 @@ export default function FormAudioUpdate() {
const [tempFile, setTempFile] = useState<TempFileItem[]>([]);
let fileTypeId = "4";
// const isDetailOfRegionShowed = false;
const [isDetailOfRegionShowed, setIsDetailOfRegionShowed] = useState(false);
const isDetailOfRegionShowed = false;
const { getRootProps, getInputProps } = useDropzone({
onDrop: (acceptedFiles) => {
@ -236,7 +234,6 @@ export default function FormAudioUpdate() {
control,
handleSubmit,
setValue,
getValues,
formState: { errors },
} = useForm<AudioSchema>({
resolver: zodResolver(audioSchema),
@ -306,7 +303,7 @@ export default function FormAudioUpdate() {
const getCategories = async () => {
try {
const category = await listEnableCategoryNew(fileTypeId);
const category = await listEnableCategory(fileTypeId);
const resCategory: Category[] = category?.data.data.content;
setCategories(resCategory);
@ -517,8 +514,7 @@ export default function FormAudioUpdate() {
// Jika wilayah dicentang, auto centang POLDA, SATKER
if (key === "wilayah") {
currentSelection.wilayah = value;
setIsDetailOfRegionShowed(value);
if (value) {
// Ketika wilayah dicentang, auto centang POLDA, SATKER
currentSelection.polda = true;
@ -539,9 +535,7 @@ export default function FormAudioUpdate() {
});
// Checklist SATKER POLRI dan semua sub-itemsnya
const satkerItem = listDest.find(
(item: any) => item.name === "SATKER POLRI"
);
const satkerItem = listDest.find((item: any) => item.name === "SATKER POLRI");
if (satkerItem) {
currentFileLevels.add(Number(satkerItem.id));
// Checklist semua sub-items di bawah SATKER POLRI
@ -575,9 +569,7 @@ export default function FormAudioUpdate() {
});
// Hapus SATKER POLRI dan semua sub-itemsnya
const satkerItem = listDest.find(
(item: any) => item.name === "SATKER POLRI"
);
const satkerItem = listDest.find((item: any) => item.name === "SATKER POLRI");
if (satkerItem) {
currentFileLevels.delete(Number(satkerItem.id));
// Hapus semua sub-items di bawah SATKER POLRI
@ -771,11 +763,7 @@ export default function FormAudioUpdate() {
const temp = [];
for (let i = 0; i < filePlacements?.length; i++) {
const file = files[i] as any;
if (
file.id &&
filePlacements[file.id] &&
filePlacements[file.id].length > 0
) {
if (file.id && filePlacements[file.id] && filePlacements[file.id].length > 0) {
const now = filePlacements[file.id];
const normalizedNow = now.map((item): PlacementType => {
const value = String(item);
@ -885,16 +873,14 @@ export default function FormAudioUpdate() {
} else if (placement === "semua") {
placementToAdd = "all";
}
const now = temp[index] || [];
if (!now.includes(placementToAdd)) {
now.push(placementToAdd);
}
// Auto-checklist "all" jika nasional, wilayah, dan international ter-checklist
const requiredItems = ["mabes", "wilayah", "international"];
const hasAllRequired = requiredItems.every((item) =>
now.includes(item)
);
const hasAllRequired = requiredItems.every(item => now.includes(item));
if (hasAllRequired && !now.includes("all")) {
now.push("all");
}
@ -937,8 +923,8 @@ export default function FormAudioUpdate() {
} else {
if (placement === "wilayah") {
// Ketika wilayah di-uncheck, hapus wilayah, polda, dan satker
const now = temp[index]?.filter(
(a) => a !== "wilayah" && a !== "polda" && a !== "satker"
const now = temp[index]?.filter((a) =>
a !== "wilayah" && a !== "polda" && a !== "satker"
);
temp[index] = now;
} else if (placement === "polda") {
@ -957,18 +943,16 @@ export default function FormAudioUpdate() {
} else if (placement === "semua") {
placementToRemove = "all";
}
const now = temp[index]?.filter((a) => a !== placementToRemove);
temp[index] = now;
}
// Hapus "all" jika tidak semua item ter-checklist
const currentNow = temp[index] || [];
if (currentNow.includes("all")) {
const requiredItems = ["mabes", "wilayah", "international"];
const hasAllRequired = requiredItems.every((item) =>
currentNow.includes(item)
);
const hasAllRequired = requiredItems.every(item => currentNow.includes(item));
if (!hasAllRequired) {
const newData = currentNow.filter((b) => b !== "all");
temp[index] = newData;
@ -1089,18 +1073,12 @@ export default function FormAudioUpdate() {
.map((p: string) => {
const trimmed = p.trim();
switch (trimmed) {
case "all":
return "all";
case "mabes":
return "nasional";
case "polda":
return "wilayah";
case "satker":
return "satker";
case "international":
return "international";
default:
return trimmed;
case "all": return "all";
case "mabes": return "nasional";
case "polda": return "wilayah";
case "satker": return "satker";
case "international": return "international";
default: return trimmed;
}
});
return mappedPlacements;
@ -1134,10 +1112,8 @@ export default function FormAudioUpdate() {
};
if (file.placements) {
const placements = file.placements
.split(",")
.map((p: string) => p.trim());
const placements = file.placements.split(",").map((p: string) => p.trim());
// Map dari format backend ke checkbox
if (placements.includes("all")) {
selection.semua = true;
@ -1201,6 +1177,7 @@ export default function FormAudioUpdate() {
initState();
}, [refresh, setValue]);
const handleCheckboxChange = (id: string) => {
if (id === "all") {
// Select all options except "all"
@ -1220,22 +1197,12 @@ export default function FormAudioUpdate() {
const save = async (data: AudioSchema) => {
const finalTags = tags.join(", ");
// ✅ tentukan isi description sesuai pilihan bahasa
// const descFinal =
// selectedLang === "en" && translatedContent
// ? translatedContent
// : data.description;
const descFinal = translatedContent || data.description;
const finalTitle = translatedTitle || data.title;
const requestData = {
...data,
id: detail?.id,
title: finalTitle,
description: htmlToString(descFinal),
htmlDescription: descFinal,
title: data.title,
description: htmlToString(data.description),
htmlDescription: data.description,
fileTypeId,
categoryId: selectedTarget,
subCategoryId: selectedTarget,
@ -1474,6 +1441,7 @@ export default function FormAudioUpdate() {
</div>
));
function success() {
MySwal.fire({
title: "Sukses",
@ -1535,43 +1503,7 @@ export default function FormAudioUpdate() {
<div className="gap-5 mb-5">
{/* Input Title */}
<div className="space-y-2 py-3">
<div className="flex justify-between items-center">
<Label>{t("title", { defaultValue: "Title" })}</Label>
{roleId === "14" && (
<button
type="button"
onClick={async () => {
try {
loading();
setIsLoadingTranslate(true);
const res = await translateText({
text: getValues("title"),
sourceLang: "ID",
targetLang: "EN",
});
if (!res.error) {
const resultText =
res?.data?.data?.translations?.[0]?.text || "";
setTranslatedTitle(resultText);
}
} catch (err) {
close();
console.error("Translate title gagal:", err);
} finally {
close();
setIsLoadingTranslate(false);
}
}}
className="px-3 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600"
>
{isLoadingTranslate
? "Translating..."
: "Translate Title"}
</button>
)}
</div>
<Label>{t("title", { defaultValue: "Title" })}</Label>
<Controller
control={control}
name="title"
@ -1579,36 +1511,18 @@ export default function FormAudioUpdate() {
<Input
size="md"
type="text"
value={field.value}
value={field?.value}
onChange={field.onChange}
placeholder="Enter Title"
/>
)}
/>
{/* English translated title appears below when available */}
{translatedTitle && (
<div className="mt-3">
<Label className="text-sm font-semibold">
English Version
</Label>
<Input
size="md"
type="text"
value={translatedTitle}
onChange={(e) => setTranslatedTitle(e.target.value)}
placeholder="Translated Title"
/>
</div>
)}
{errors.title?.message && (
<p className="text-red-400 text-sm">
{errors.title.message}
</p>
)}
</div>
<div className="flex items-center">
<div className="py-3 w-full space-y-2">
<Label>{t("category", { defaultValue: "Category" })}</Label>
@ -1651,84 +1565,6 @@ export default function FormAudioUpdate() {
</div>
<div className="py-3 space-y-2">
<div className="flex justify-between items-center">
<Label>
{t("description", { defaultValue: "Description" })}
</Label>
{roleId === "14" && (
<button
type="button"
onClick={async () => {
try {
loading();
setIsLoadingTranslate(true);
const res = await translateText({
text: getValues("description"),
sourceLang: "ID",
targetLang: "EN",
});
if (!res.error) {
const resultText =
res?.data?.data?.translations?.[0]?.text || "";
// Overwrite data.description but still show both
setTranslatedContent(resultText);
}
} catch (err) {
close();
console.error("Translate gagal:", err);
} finally {
close();
setIsLoadingTranslate(false);
}
}}
className="px-3 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600"
>
{isLoadingTranslate
? "Translating..."
: "Translate Description"}
</button>
)}
</div>
{/* Editor Bahasa Indonesia */}
<div className="mt-3">
<Label className="text-sm font-semibold">
Indonesian Version
</Label>
<Controller
control={control}
name="description"
render={({ field }) => (
<CustomEditor
onChange={field.onChange}
initialData={field.value}
/>
)}
/>
</div>
{/* English translated version muncul setelah translate */}
{translatedContent && (
<div className="mt-5">
<Label className="text-sm font-semibold">
English Version
</Label>
<CustomEditor
onChange={(val: any) => setTranslatedContent(val)}
initialData={translatedContent}
/>
</div>
)}
{errors.description?.message && (
<p className="text-red-400 text-sm">
{errors.description.message}
</p>
)}
</div>
{/* <div className="py-3 space-y-2">
<Label>
{t("description", { defaultValue: "Description" })}
</Label>
@ -1744,7 +1580,7 @@ export default function FormAudioUpdate() {
{errors.description.message}
</p>
)}
</div> */}
</div>
<div className="py-3 space-y-2">
<Label>
{t("select-file", { defaultValue: "Select File" })}
@ -1805,19 +1641,17 @@ export default function FormAudioUpdate() {
<div className="flex-grow">
<div>
<svg
xmlns="http://www.w3.org/2000/svg"
width="80"
height="80"
viewBox="0 0 20 20"
>
<path
fill="currentColor"
d="M14.702 2.226A1 1 0 0 1 16 3.18v6.027a5.5 5.5 0 0 0-1-.184V6.18L8 8.368V15.5a2.5 2.5 0 1 1-1-2V5.368a1 1 0 0 1 .702-.955zM8 7.32l7-2.187V3.18L8 5.368zM5.5 14a1.5 1.5 0 1 0 0 3a1.5 1.5 0 0 0 0-3m13.5.5a4.5 4.5 0 1 1-9 0a4.5 4.5 0 0 1 9 0m-2.265-.436l-2.994-1.65a.5.5 0 0 0-.741.438v3.3a.5.5 0 0 0 .741.438l2.994-1.65a.5.5 0 0 0 0-.876"
/>
</svg>{" "}
<p className="font-medium">
{file.fileName}
</p>
xmlns="http://www.w3.org/2000/svg"
width="80"
height="80"
viewBox="0 0 20 20"
>
<path
fill="currentColor"
d="M14.702 2.226A1 1 0 0 1 16 3.18v6.027a5.5 5.5 0 0 0-1-.184V6.18L8 8.368V15.5a2.5 2.5 0 1 1-1-2V5.368a1 1 0 0 1 .702-.955zM8 7.32l7-2.187V3.18L8 5.368zM5.5 14a1.5 1.5 0 1 0 0 3a1.5 1.5 0 0 0 0-3m13.5.5a4.5 4.5 0 1 1-9 0a4.5 4.5 0 0 1 9 0m-2.265-.436l-2.994-1.65a.5.5 0 0 0-.741.438v3.3a.5.5 0 0 0 .741.438l2.994-1.65a.5.5 0 0 0 0-.876"
/>
</svg>{" "}
<p className="font-medium">{file.fileName}</p>
</div>
<a
href={file.url}
@ -1829,7 +1663,7 @@ export default function FormAudioUpdate() {
defaultValue: "View File",
})}
</a>
</div>
</div>
<div className="bg-white rounded-md p-4 border">
{/* Checkbox Tingkat Utama */}
<div className="space-y-4">
@ -1875,290 +1709,276 @@ export default function FormAudioUpdate() {
>
{item.label}
</Label>
</div>
</div>
))}
</div>
{/* Detail Wilayah */}
{fileUnitSelections[index]?.wilayah &&
isDetailOfRegionShowed && (
<div className="border-t border-gray-200 pt-2">
<p className="text-sm font-medium text-gray-700 mb-2">
Detail Wilayah:
</p>
{fileUnitSelections[index]?.wilayah && isDetailOfRegionShowed && (
<div className="border-t border-gray-200 pt-2">
<p className="text-sm font-medium text-gray-700 mb-2">
Detail Wilayah:
</p>
{/* Checkbox Sub-kategori dengan tombol Kustom sejajar */}
<div className="grid grid-cols-1 md:grid-cols-4 gap-3">
{[
{ key: "polda", label: "POLDA" },
{
key: "satker",
label: "SATKER",
},
].map((item, idx) => (
<div
key={item.key}
className="flex items-center gap-2 p-3 border border-gray-200 rounded-md hover:bg-gray-50"
{/* Checkbox Sub-kategori dengan tombol Kustom sejajar */}
<div className="grid grid-cols-1 md:grid-cols-4 gap-3">
{[
{ key: "polda", label: "POLDA" },
{ key: "satker", label: "SATKER" },
].map((item, idx) => (
<div
key={item.key}
className="flex items-center gap-2 p-3 border border-gray-200 rounded-md hover:bg-gray-50"
>
<Checkbox
id={`${item.key}-${index}`}
checked={
fileUnitSelections[index]?.[
item.key as keyof typeof unitSelection
] || false
}
onCheckedChange={(value) => {
handleFileUnitChange(
index,
item.key as keyof typeof unitSelection,
value as boolean
);
setupPlacement(
index,
item.key,
Boolean(value)
);
}}
/>
<Label
htmlFor={`${item.key}-${index}`}
className="text-sm font-medium cursor-pointer"
>
<Checkbox
id={`${item.key}-${index}`}
checked={
fileUnitSelections[index]?.[
item.key as keyof typeof unitSelection
] || false
}
onCheckedChange={(value) => {
handleFileUnitChange(
index,
item.key as keyof typeof unitSelection,
value as boolean
);
setupPlacement(
index,
item.key,
Boolean(value)
);
}}
/>
<Label
htmlFor={`${item.key}-${index}`}
className="text-sm font-medium cursor-pointer"
{item.label}
</Label>
</div>
))}
{/* Tombol Kustom sejajar dengan checkbox */}
<div className="flex items-center justify-center p-3">
<Dialog>
<DialogTrigger asChild>
<Button
variant="outline"
size="sm"
className="gap-2"
>
{item.label}
</Label>
</div>
))}
{/* Tombol Kustom sejajar dengan checkbox */}
<div className="flex items-center justify-center p-3">
<Dialog>
<DialogTrigger asChild>
<Button
variant="outline"
size="sm"
className="gap-2"
>
<Icon
icon="material-symbols:tune"
width={16}
height={16}
/>
{t("custom", {
defaultValue: "Kustom",
})}
</Button>
</DialogTrigger>
<DialogContent className="max-w-[95vw] lg:max-w-[1400px] max-h-[90vh]">
<DialogHeader className="border-b border-gray-200 pb-4">
<DialogTitle className="text-lg font-semibold">
Daftar Wilayah POLDA dan
SATKER
</DialogTitle>
</DialogHeader>
<div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-4 max-h-[70vh] overflow-y-auto p-1">
{listDest.map(
(polda: any) => (
<div
key={polda.id}
className="border border-gray-200 rounded-lg p-2 bg-white hover:shadow-sm transition-shadow"
>
{/* Header POLDA */}
<div className="flex items-center justify-between">
<Label className="flex items-center gap-3 flex-1 cursor-pointer">
<Checkbox
checked={
fileCheckedLevels[
index
]?.has(
Number(
polda.id
)
) || false
}
onCheckedChange={() =>
handleFileCheckboxChangePlacement(
index,
Number(
polda.id
)
<Icon
icon="material-symbols:tune"
width={16}
height={16}
/>
{t("custom", {
defaultValue: "Kustom",
})}
</Button>
</DialogTrigger>
<DialogContent className="max-w-[95vw] lg:max-w-[1400px] max-h-[90vh]">
<DialogHeader className="border-b border-gray-200 pb-4">
<DialogTitle className="text-lg font-semibold">
Daftar Wilayah POLDA dan SATKER
</DialogTitle>
</DialogHeader>
<div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-4 max-h-[70vh] overflow-y-auto p-1">
{listDest.map(
(polda: any) => (
<div
key={polda.id}
className="border border-gray-200 rounded-lg p-2 bg-white hover:shadow-sm transition-shadow"
>
{/* Header POLDA */}
<div className="flex items-center justify-between">
<Label className="flex items-center gap-3 flex-1 cursor-pointer">
<Checkbox
checked={
fileCheckedLevels[
index
]?.has(
Number(
polda.id
)
) || false
}
onCheckedChange={() =>
handleFileCheckboxChangePlacement(
index,
Number(polda.id)
)
}
/>
<span className="font-semibold text-gray-900 text-sm">
{polda.name}
</span>
</Label>
{/* Tombol expand hanya untuk SATKER POLRI */}
{polda.name === "SATKER POLRI" && polda.subDestination && (
<button
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
toggleExpand(
polda.id
);
}}
className="p-1 hover:bg-gray-100 rounded-md transition-colors"
>
<Icon
icon={
expandedPolda[
polda.id
]
? "mdi:chevron-up"
: "mdi:chevron-down"
}
width={16}
height={16}
/>
<span className="font-semibold text-gray-900 text-sm">
{polda.name}
</span>
</Label>
{/* Tombol expand hanya untuk SATKER POLRI */}
{polda.name ===
"SATKER POLRI" &&
polda.subDestination && (
<button
onClick={(
e
) => {
e.preventDefault();
e.stopPropagation();
toggleExpand(
polda.id
);
}}
className="p-1 hover:bg-gray-100 rounded-md transition-colors"
>
<Icon
icon={
expandedPolda[
polda.id
]
? "mdi:chevron-up"
: "mdi:chevron-down"
}
width={16}
height={16}
/>
</button>
)}
</div>
</button>
)}
</div>
{/* Sub-items hanya untuk SATKER POLRI */}
{polda.name ===
"SATKER POLRI" &&
polda.subDestination &&
expandedPolda[
polda.id
] && (
<div className="max-h-[200px] overflow-y-auto border-t border-gray-100 pt-2">
{/* Tombol Pilih Semua untuk sub-items */}
<div className="mb-2 flex justify-start">
{(() => {
const allSubItemsChecked =
polda.subDestination?.every(
(
sub: any
) =>
{/* Sub-items hanya untuk SATKER POLRI */}
{polda.name === "SATKER POLRI" && polda.subDestination &&
expandedPolda[
polda.id
] && (
<div className="max-h-[200px] overflow-y-auto border-t border-gray-100 pt-2">
{/* Tombol Pilih Semua untuk sub-items */}
<div className="mb-2 flex justify-start">
{(() => {
const allSubItemsChecked =
polda.subDestination?.every(
(
sub: any
) =>
fileCheckedLevels[
index
]?.has(
Number(
sub.id
)
)
);
return (
<Button
size="sm"
variant="outline"
className="text-xs h-6 px-2"
onClick={() =>
handleSelectAllSubItems(
index,
polda
)
}
>
{allSubItemsChecked ? (
<>
<Icon
icon="material-symbols:check-indeterminate-small"
width={
12
}
height={
12
}
className="mr-1"
/>
Batal
Semua
</>
) : (
<>
<Icon
icon="material-symbols:check-all"
width={
12
}
height={
12
}
className="mr-1"
/>
Pilih
Semua
</>
)}
</Button>
);
})()}
</div>
<div className="space-y-1">
{polda.subDestination.map(
(
sub: any
) => (
<Label
key={
sub.id
}
className="flex items-center gap-2 p-2 rounded-md hover:bg-gray-50 transition-colors cursor-pointer text-xs"
>
<Checkbox
checked={
fileCheckedLevels[
index
]?.has(
Number(
sub.id
)
)
);
return (
<Button
size="sm"
variant="outline"
className="text-xs h-6 px-2"
onClick={() =>
handleSelectAllSubItems(
) ||
false
}
onCheckedChange={() =>
handleFileCheckboxChangePlacement(
index,
polda
Number(sub.id)
)
}
>
{allSubItemsChecked ? (
<>
<Icon
icon="material-symbols:check-indeterminate-small"
width={
12
}
height={
12
}
className="mr-1"
/>
Batal
Semua
</>
) : (
<>
<Icon
icon="material-symbols:check-all"
width={
12
}
height={
12
}
className="mr-1"
/>
Pilih
Semua
</>
)}
</Button>
);
})()}
</div>
<div className="space-y-1">
{polda.subDestination.map(
(
sub: any
) => (
<Label
key={
sub.id
/>
<span className="text-gray-700">
{
sub.name
}
className="flex items-center gap-2 p-2 rounded-md hover:bg-gray-50 transition-colors cursor-pointer text-xs"
>
<Checkbox
checked={
fileCheckedLevels[
index
]?.has(
Number(
sub.id
)
) ||
false
}
onCheckedChange={() =>
handleFileCheckboxChangePlacement(
index,
Number(
sub.id
)
)
}
/>
<span className="text-gray-700">
{
sub.name
}
</span>
</Label>
)
)}
</div>
</div>
)}
</div>
)
)}
</div>
<div className="flex justify-end gap-3 border-t border-gray-200 pt-4">
<DialogClose asChild>
<Button variant="outline">
{t("cancel", {
defaultValue: "Batal",
})}
</Button>
</DialogClose>
<DialogClose asChild>
<Button>Simpan</Button>
</DialogClose>
</div>
</DialogContent>
</Dialog>
</div>
</span>
</Label>
)
)}
</div>
</div>
)}
</div>
)
)}
</div>
<div className="flex justify-end gap-3 border-t border-gray-200 pt-4">
<DialogClose asChild>
<Button variant="outline">
{t("cancel", {
defaultValue: "Batal",
})}
</Button>
</DialogClose>
<DialogClose asChild>
<Button>Simpan</Button>
</DialogClose>
</div>
</DialogContent>
</Dialog>
</div>
</div>
)}
</div>
)}
</div>
</div>
</div>
</div>
))}
</div>
))}
</div>
</div>
)}

737
components/form/content/image-detail-form.tsx
View File

File diff suppressed because it is too large Load Diff

423
components/form/content/image-form.tsx
View File

@ -34,7 +34,6 @@ import {
createMedia,
getTagsBySubCategoryId,
listEnableCategory,
listEnableCategoryNew,
uploadThumbnail,
} from "@/service/content/content";
import { uploadThumbnailBlog } from "@/service/blog/blog";
@ -82,7 +81,7 @@ const CustomEditor = dynamic(
() => {
return import("@/components/editor/custom-editor");
},
{ ssr: false },
{ ssr: false }
);
export default function FormImage() {
@ -113,11 +112,12 @@ export default function FormImage() {
const [isLoading, setIsLoading] = useState<boolean>(false);
const [isLoadingData, setIsLoadingData] = useState<boolean>(false);
const [localContent, setLocalContent] = useState("");
const [isLoadingTranslate, setIsLoadingTranslate] = useState(false);
const [articleIds, setArticleIds] = useState<string[]>([]);
const [isGeneratedArticle, setIsGeneratedArticle] = useState(false);
const [articleBody, setArticleBody] = useState<string>("");
const [selectedArticleId, setSelectedArticleId] = useState<string | null>(
null,
null
);
const [selectedMainKeyword, setSelectedMainKeyword] = useState("");
const [selectedWritingStyle, setSelectedWritingStyle] =
@ -149,14 +149,9 @@ export default function FormImage() {
const [files, setFiles] = useState<FileWithPreview[]>([]);
const [filesTemp, setFilesTemp] = useState<File[]>([]);
const [publishedFor, setPublishedFor] = useState<string[]>([]);
const [isLoadingTranslate, setIsLoadingTranslate] = useState(false);
const [translatedContent, setTranslatedContent] = React.useState("");
const [selectedLang, setSelectedLang] = React.useState<"id" | "en">("id");
// 🔹 state untuk translate judul
const [translatedTitle, setTranslatedTitle] = useState("");
const [isLoadingTranslateTitle, setIsLoadingTranslateTitle] = useState(false);
const options: Option[] = [
{ id: "all", label: "SEMUA" },
{ id: "5", label: "UMUM" },
@ -183,17 +178,17 @@ export default function FormImage() {
.filter(
(file) =>
["image/jpeg", "image/png", "image/jpg"].includes(file.type) &&
file.size <= MAX_FILE_SIZE,
file.size <= MAX_FILE_SIZE
)
.map((file) =>
Object.assign(file, {
preview: URL.createObjectURL(file),
}),
})
);
if (validFiles.length === 0) {
toast.error(
"File tidak valid. Hanya .jpg, .jpeg, .png maksimal 100MB yang diperbolehkan.",
"File tidak valid. Hanya .jpg, .jpeg, .png maksimal 100MB yang diperbolehkan."
);
return;
}
@ -216,7 +211,6 @@ export default function FormImage() {
title: z.string().min(1, { message: t("titleRequired") }),
description: z.string().optional(),
descriptionOri: z.string().optional(),
htmlDescription: z.string().optional(),
rewriteDescription: z.string().optional(),
creatorName: z.string().min(1, { message: t("creatorRequired") }),
files: z
@ -227,12 +221,12 @@ export default function FormImage() {
files.every(
(file: File) =>
["image/jpeg", "image/png", "image/jpg"].includes(file.type) &&
file.size <= 100 * 1024 * 1024,
file.size <= 100 * 1024 * 1024
),
{
message:
"Hanya file .jpg, .jpeg, .png, maksimal 100MB yang diperbolehkan.",
},
}
),
categoryId: z.string().min(1, { message: "Kategori wajib dipilih." }),
tags: z
@ -454,10 +448,9 @@ export default function FormImage() {
const articleData = await waitForStatusUpdate();
const cleanArticleBody = articleData?.articleBody?.replace(
/<img[^>]*>/g,
"",
""
);
const articleImagesData = articleData?.imagesUrl?.split(",");
setArticleBody(cleanArticleBody || "");
setValue("description", cleanArticleBody || "");
setDetailData(articleData);
setSelectedArticleId(id);
@ -499,7 +492,7 @@ export default function FormImage() {
const getCategories = async () => {
try {
const category = await listEnableCategoryNew(fileTypeId);
const category = await listEnableCategory(fileTypeId);
const resCategory: Category[] = category?.data.data.content;
setCategories(resCategory);
@ -507,7 +500,7 @@ export default function FormImage() {
if (scheduleId && scheduleType === "3") {
const findCategory = resCategory.find((o) =>
o.name.toLowerCase().includes("pers rilis"),
o.name.toLowerCase().includes("pers rilis")
);
if (findCategory) {
@ -530,7 +523,7 @@ export default function FormImage() {
setPublishedFor(
options
.filter((opt: any) => opt.id !== "all")
.map((opt: any) => opt.id),
.map((opt: any) => opt.id)
);
}
} else {
@ -561,59 +554,39 @@ export default function FormImage() {
}
const finalTags = tags.join(", ");
// const finalTitle = isSwitchOn ? title : data.title;
let finalTitle = isSwitchOn ? title : data.title;
// ✅ Jika sudah translate judul → kirim versi English
if (translatedTitle && translatedTitle.trim() !== "") {
finalTitle = translatedTitle;
console.log("📤 Upload Title versi Inggris (translate)");
}
// pilih description dasar
// let finalDescription = isSwitchOn
// ? data.description
// : selectedFileType === "rewrite"
// ? data.rewriteDescription
// : data.descriptionOri;
// 👉 tempelkan hasil translate ke field form agar ikut terkirim
// if (translatedContent) {
// data.descriptionOri = translatedContent; // versi Inggris yang dikirim
// } else {
// data.descriptionOri = getValues("descriptionOri"); // fallback IDN
// }
// ✅ Tentukan deskripsi final yang akan dikirim
let finalDescription = "";
if (translatedContent && translatedContent.trim() !== "") {
// jika user sudah translate → kirim versi Inggris
finalDescription = translatedContent;
console.log("📤 Upload versi Inggris (translate)");
} else if (data.rewriteDescription && selectedFileType === "rewrite") {
finalDescription = data.rewriteDescription;
console.log("📤 Upload versi rewrite");
} else if (data.description?.trim()) {
finalDescription = data.description;
} else if (data.descriptionOri?.trim()) {
finalDescription = data.descriptionOri;
}
// else {
// // fallback: gunakan versi Indonesia original
// finalDescription = data.descriptionOri ?? "";
// console.log("📤 Upload versi Indonesia (original)");
// }
const finalTitle = isSwitchOn ? title : data.title;
// const finalDescription = articleBody || data.description;
const finalDescription = isSwitchOn
? data.description
: selectedFileType === "rewrite"
? data.rewriteDescription
: data.descriptionOri;
if (!finalDescription?.trim()) {
MySwal.fire("Error", "Deskripsi tidak boleh kosong.", "error");
return;
}
let requestData: any = {
let requestData: {
title: string;
description: string;
htmlDescription: string;
fileTypeId: string;
categoryId: any;
subCategoryId: any;
uploadedBy: string;
statusId: string;
publishedFor: string;
creatorName: string;
tags: string;
isYoutube: boolean;
isInternationalMedia: boolean;
attachFromScheduleId?: number;
} = {
...data,
title: finalTitle,
description: htmlToString(finalDescription), // versi plain text
htmlDescription: finalDescription, // versi HTML
description: htmlToString(finalDescription),
htmlDescription: finalDescription,
fileTypeId,
categoryId: selectedCategory,
subCategoryId: selectedCategory,
@ -621,43 +594,11 @@ export default function FormImage() {
statusId: "1",
publishedFor: publishedFor.join(","),
creatorName: data.creatorName,
tags: tags.join(", "),
tags: finalTags,
isYoutube: false,
isInternationalMedia: false,
};
// let requestData: {
// title: string;
// description: string;
// htmlDescription: string;
// fileTypeId: string;
// categoryId: any;
// subCategoryId: any;
// uploadedBy: string;
// statusId: string;
// publishedFor: string;
// creatorName: string;
// tags: string;
// isYoutube: boolean;
// isInternationalMedia: boolean;
// attachFromScheduleId?: number;
// } = {
// ...data,
// title: finalTitle,
// description: htmlToString(finalDescription), // plain text
// htmlDescription: finalDescription, // versi HTML
// fileTypeId,
// categoryId: selectedCategory,
// subCategoryId: selectedCategory,
// uploadedBy: "2b7c8d83-d298-4b19-9f74-b07924506b58",
// statusId: "1",
// publishedFor: publishedFor.join(","),
// creatorName: data.creatorName,
// tags: finalTags,
// isYoutube: false,
// isInternationalMedia: false,
// };
let id = Cookies.get("idCreate");
if (scheduleId !== undefined) {
@ -670,7 +611,6 @@ export default function FormImage() {
Cookies.set("idCreate", response?.data?.data, { expires: 1 });
id = response?.data?.data;
const formMedia = new FormData();
const thumbnail = files[0];
formMedia.append("file", thumbnail);
@ -680,7 +620,6 @@ export default function FormImage() {
return false;
}
}
const progressInfoArr = files.map((item) => ({
percentage: 0,
fileName: item.name,
@ -689,13 +628,13 @@ export default function FormImage() {
setIsStartUpload(true);
setProgressList(progressInfoArr);
// close();
close();
files.map(async (item: any, index: number) => {
await uploadResumableFile(
index,
String(id),
item,
fileTypeId == "2" || fileTypeId == "4" ? item.duration : "0",
fileTypeId == "2" || fileTypeId == "4" ? item.duration : "0"
);
});
@ -722,7 +661,7 @@ export default function FormImage() {
idx: number,
id: string,
file: any,
duration: string,
duration: string
) {
console.log(idx, id, file, duration);
@ -758,7 +697,7 @@ export default function FormImage() {
onChunkComplete: (
chunkSize: any,
bytesAccepted: any,
bytesTotal: any,
bytesTotal: any
) => {
const uploadPersen = Math.floor((bytesAccepted / bytesTotal) * 100);
progressInfo[idx].percentage = uploadPersen;
@ -800,7 +739,6 @@ export default function FormImage() {
}
if (counter == progressInfo.length) {
setIsStartUpload(false);
close();
// hideProgress();
Cookies.remove("idCreate");
successSubmit("/in/contributor/content/image");
@ -930,84 +868,8 @@ export default function FormImage() {
{t("form-image", { defaultValue: "Form Image" })}
</p>
<div className="gap-5 mb-5">
<div className="py-3 space-y-2">
<div className="flex justify-between items-center">
<Label>{t("title", { defaultValue: "Title" })}</Label>
{roleId === "14" && (
<button
type="button"
onClick={async () => {
try {
loading();
setIsLoadingTranslateTitle(true);
const res = await translateText({
text: getValues("title"),
sourceLang: "ID",
targetLang: "EN",
});
if (!res.error) {
const resultText =
res?.data?.data?.translations?.[0]?.text || "";
setTranslatedTitle(resultText);
}
} catch (err) {
console.error("Translate title gagal:", err);
} finally {
close();
setIsLoadingTranslateTitle(false);
}
}}
className="px-3 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600"
>
{isLoadingTranslateTitle
? "Translating..."
: "Translate to English"}
</button>
)}
</div>
{/* Title Indonesia */}
<div className="mt-3">
<Label className="text-sm font-semibold">
Indonesian Title
</Label>
<Controller
control={control}
name="title"
render={({ field }) => (
<Input
size="md"
type="text"
value={field.value}
onChange={field.onChange}
placeholder="Masukkan Judul Bahasa Indonesia"
/>
)}
/>
</div>
{/* Title English (hanya muncul setelah translate) */}
{translatedTitle && (
<div className="mt-4">
<Label className="text-sm font-semibold">
English Title
</Label>
<Input
size="md"
type="text"
value={translatedTitle}
onChange={(e) => setTranslatedTitle(e.target.value)}
placeholder="English version"
/>
</div>
)}
{errors.title?.message && (
<p className="text-red-400 text-sm">{errors.title.message}</p>
)}
</div>
{/* <div className="space-y-2 py-3">
{/* Input Title */}
<div className="space-y-2 py-3">
<Label>{t("title", { defaultValue: "Title" })}</Label>
<Controller
control={control}
@ -1027,7 +889,7 @@ export default function FormImage() {
{errors.title?.message && (
<p className="text-red-400 text-sm">{errors.title.message}</p>
)}
</div> */}
</div>
{/* <div className="flex items-center">
<div className="py-3 space-y-2 w-full">
@ -1358,11 +1220,18 @@ export default function FormImage() {
<RadioGroup
onValueChange={(value) => setSelectedFileType(value)}
value={selectedFileType}
className="grid-cols-1"
className=" grid-cols-1"
>
<div className="">
<RadioGroupItem value="original" id="original-file" />
<Label htmlFor="original-file">
Select Original Description
</Label>
</div>
<div className="py-3 space-y-2">
<div className="flex justify-between items-center">
<Label className="text-[15px]">
<Label>
{t("description", { defaultValue: "Description" })}
</Label>
@ -1383,6 +1252,7 @@ export default function FormImage() {
const resultText =
res?.data?.data?.translations?.[0]?.text ||
"";
setTranslatedContent(resultText);
}
} catch (err) {
@ -1401,45 +1271,156 @@ export default function FormImage() {
</button>
)}
</div>
{/* Editor side-by-side */}
<div className="flex flex-col gap-3 mt-3">
<div className="mt-3">
<Label className="text-sm font-semibold">
Indonesian Version
</Label>
<Controller
control={control}
name="descriptionOri"
render={({ field: { onChange, value } }) => (
<CustomEditor
onChange={onChange}
initialData={value}
{/* Pilihan bahasa untuk posting */}
{roleId === "14" && (
<div className="flex items-center gap-4 mb-2">
<label className="flex items-center gap-2">
<input
type="radio"
value="id"
checked={selectedLang === "id"}
onChange={() => setSelectedLang("id")}
/>
<span>Gunakan Bahasa Indonesia</span>
</label>
</div>
)}
{/* Editor Bahasa Indonesia */}
<Controller
control={control}
name="descriptionOri"
render={({ field: { onChange, value } }) => (
<CustomEditor
onChange={onChange}
initialData={value}
/>
)}
/>
{/* Editor Bahasa Inggris */}
{translatedContent && (
<div className="mt-4">
<div className="flex flex-col">
<Label className="text-[15px]">
English Version
</Label>{" "}
<label className="flex items-center gap-2">
<input
type="radio"
value="en"
checked={selectedLang === "en"}
onChange={() => setSelectedLang("en")}
disabled={!translatedContent} // kalau belum translate, disable
/>
)}
<span>Gunakan Bahasa Inggris</span>
</label>
</div>
<CustomEditor
onChange={(val: any) => setTranslatedContent(val)}
initialData={translatedContent}
/>
</div>
{translatedContent && (
<div className="mt-5">
<Label className="text-sm font-semibold">
English Version
</Label>
<CustomEditor
onChange={(val: any) => setTranslatedContent(val)}
initialData={translatedContent}
/>
</div>
)}
</div>
)}
{errors.description?.message && (
<p className="text-red-400 text-sm">
{errors.description.message}
</p>
)}
</div>
{/* <div className="py-3 space-y-2">
<div className="flex justify-between items-center">
<Label>
{t("description", { defaultValue: "Description" })}
</Label>
<p className="text-sm font-semibold mt-3">
Content Rewrite
</p>
{roleId === "14" && (
<button
type="button"
onClick={async () => {
try {
loading();
setIsLoadingTranslate(true);
const res = await translateText({
text: getValues("descriptionOri"),
sourceLang: "ID",
targetLang: "EN",
});
console.log("RRRR", res);
if (!res.error) {
// setLocalContent(res.data.translatedText);
setValue(
"descriptionOri",
res?.data?.data?.translations[0]?.text || ""
);
// setEditorContent(res.data.translatedText);
}
} catch (err) {
close();
console.error("Translate gagal:", err);
} finally {
close();
setIsLoadingTranslate(false);
}
}}
className="px-3 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600"
>
{isLoadingTranslate
? "Translating..."
: "Translate to English"}
</button>
)}
</div>
<Controller
control={control}
name="descriptionOri"
render={({ field: { onChange, value } }) => (
<CustomEditor
onChange={(val: any) => {
onChange(val);
// setLocalContent(val);
// setEditorContent(val);
}}
initialData={value}
/>
)}
/>
{errors.description?.message && (
<p className="text-red-400 text-sm">
{errors.description.message}
</p>
)}
</div> */}
{/* <div className="py-3 space-y-2">
<Label>
{t("description", { defaultValue: "Description" })}
</Label>
<Controller
control={control}
name="descriptionOri"
render={({ field: { onChange, value } }) => (
<CustomEditor
onChange={(value: any) => {
onChange(value);
setEditorContent(value);
}}
initialData={value}
/>
)}
/>
{errors.description?.message && (
<p className="text-red-400 text-sm">
{errors.description.message}
</p>
)}
</div> */}
<p className="text-sm font-semibold">Content Rewrite</p>
<div className="my-2">
<Button
size="sm"
@ -1450,7 +1431,6 @@ export default function FormImage() {
Content Rewrite
</Button>
</div>
{showRewriteEditor && (
<div>
{isGeneratedArticle && (
@ -1462,7 +1442,7 @@ export default function FormImage() {
className={`mr-3 px-3 py-2 rounded-md ${
selectedArticleId === id
? "bg-green-500 text-white"
: "border-2 border-green-500 bg-white text-green-500 hover:bg-green-500 hover:text-white hover:border-green-500"
: "border-2 border-green-500 bg-white text-green-500 hover:bg-green-500 hover:text-white hover:border-green-500"
}`}
onClick={() => handleArticleIdClick(id)}
>
@ -1471,6 +1451,12 @@ export default function FormImage() {
))}
</div>
)}
<div className="flex items-center space-x-2 mt-3">
<RadioGroupItem value="rewrite" id="rewrite-file" />
<Label htmlFor="rewrite-file">
Select Description Rewrite
</Label>
</div>
<div className="py-3 space-y-2">
<Label>
{t("file-rewrite", {
@ -1504,7 +1490,6 @@ export default function FormImage() {
</RadioGroup>
</>
)}
<div className="py-3 space-y-2">
<Label>
{t("select-file", { defaultValue: "Select File" })}
@ -1741,7 +1726,7 @@ export default function FormImage() {
{/* <Button type="submit" color="primary">
{t("submit", { defaultValue: "Submit" })}
</Button> */}
{levelNumber !== "2" && (
{levelNumber !== "2" && levelNumber !== "3" && (
<Button type="submit" color="primary">
{t("submit", { defaultValue: "Submit" })}
</Button>

Some files were not shown because too many files have changed in this diff Show More