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:dev-sabda-v2
mediahub:prod
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-noProd
Branches Tags
mediahub:main
mediahub:dev-sabda-v2
mediahub:prod
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

No commits in common. "main" and "dev-noProd" have entirely different histories.
main ... dev-noProd

110 changed files with 4687 additions and 7558 deletions
Show Stats Expand all files Collapse all files

45
.drone.yml
View File

@ -1,45 +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
- 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:
- prod
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

16
.gitlab-ci.yml
View File

@ -1,23 +1,23 @@
stages:
- build
- deploy
build-dev:
stage: build
when: on_success
only:
- main
- dev-landing-v2
image:
image:
name: docker:25.0.3-cli
services:
- name: docker:25.0.3-dind
command: ["--insecure-registry=38.47.185.86:8900"]
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 +26,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

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>

98
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, getUserListAll } 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();
@ -252,7 +247,7 @@ const AccountListTable = () => {
try {
loading();
const response = await getUserListAll();
if (response?.data?.data?.content) {
setUsersList(response.data.data.content);
}
@ -270,15 +265,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 +291,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 +350,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 +369,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 +403,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 +412,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 +423,7 @@ const AccountListTable = () => {
onClick={saveCampaignAccount}
disabled={
!accountCategory ||
(accountCategory === "custom" &&
selectedAccount.length < 1) ||
(accountCategory === "custom" && selectedAccount.length < 1) ||
(accountCategory === "kategori" && !selectedCategory)
}
>
@ -457,47 +441,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>
// );
// }

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

@ -152,12 +152,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} />

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

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 {

110
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,82 +45,32 @@ 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: "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",
accessorKey: "status",
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";
const raw = row.getValue("status");
return (
<div className="text-center">
<span
className={`px-2 py-1 rounded text-xs font-medium inline-block ${colorClass}`}
>
{statusText}
</span>
</div>
);
let value: string | number = "-";
if (typeof raw === "string" || typeof raw === "number") {
value = raw;
} else if (raw && typeof raw === "object") {
value = JSON.stringify(raw);
}
return <div className="text-center">{value}</div>;
},
},
{
accessorKey: "createdAt",
header: () => <div className="text-center">Tanggal Penarikan</div>,
@ -168,31 +110,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 items-center rounded-none">
<Eye className="w-4 h-4 me-1.5" />
View&nbsp;
{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>
);

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

@ -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

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

16
app/[locale]/(protected)/contributor/content/satker/audio/detail/[id]/page.tsx Normal file
View File

@ -0,0 +1,16 @@
import SiteBreadcrumb from "@/components/site-breadcrumb";
import FormImageDetail from "@/components/form/content/image-detail-form";
import FormAudioDetail from "@/components/form/content/audio-detail-form";
const AudioDetailPage = async () => {
return (
<div>
<SiteBreadcrumb />
<div className="space-y-4">
<FormAudioDetail />
</div>
</div>
);
};
export default AudioDetailPage;

17
app/[locale]/(protected)/contributor/content/satker/audio/update/[id]/page.tsx Normal file
View File

@ -0,0 +1,17 @@
import SiteBreadcrumb from "@/components/site-breadcrumb";
import FormImageDetail from "@/components/form/content/image-detail-form";
import FormImageUpdate from "@/components/form/content/image-update-form";
import FormAudioUpdate from "@/components/form/content/audio-update-form";
const AudioUpdatePage = async () => {
return (
<div>
<SiteBreadcrumb />
<div className="space-y-4">
<FormAudioUpdate />
</div>
</div>
);
};
export default AudioUpdatePage;

498
app/[locale]/(protected)/contributor/content/satker/components/columns.tsx Normal file
View File

@ -0,0 +1,498 @@
import * as React from "react";
import { ColumnDef } from "@tanstack/react-table";
import { Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react";
import { cn, getCookiesDecrypt } from "@/lib/utils";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuTrigger,
DropdownMenuItem,
} from "@/components/ui/dropdown-menu";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { format } from "date-fns";
import { Link } from "@/components/navigation";
import { deleteMedia } from "@/service/content/content";
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");
const MySwal = withReactContent(Swal);
const userLevelId = getCookiesDecrypt("ulie");
const columns: ColumnDef<any>[] = [
{
accessorKey: "no",
header: t("no", { defaultValue: "No" }),
cell: ({ row }) => (
<div className="flex items-center gap-5">
<div className="flex-1 text-start">
<h4 className="text-sm font-medium text-default-600 whitespace-nowrap mb-1">
{row.getValue("no")}
</h4>
</div>
</div>
),
},
{
accessorKey: "title",
header: t("title", { defaultValue: "Title" }),
cell: ({ row }: { row: { getValue: (key: string) => string } }) => {
const title: string = row.getValue("title");
return (
<span className="whitespace-nowrap">
{title.length > 50 ? `${title.slice(0, 30)}...` : title}
</span>
);
},
},
{
accessorKey: "categoryName",
header: t("category-name", { defaultValue: "Category Name" }),
cell: ({ row }) => (
<span className="whitespace-nowrap">
{row.getValue("categoryName")}
</span>
),
},
{
accessorKey: "createdAt",
header: t("upload-date", { defaultValue: "Upload Date" }),
cell: ({ row }) => {
const createdAt = row.getValue("createdAt") as
| string
| number
| undefined;
const formattedDate =
createdAt && !isNaN(new Date(createdAt).getTime())
? format(new Date(createdAt), "dd-MM-yyyy HH:mm:ss")
: "-";
return <span className="whitespace-nowrap">{formattedDate}</span>;
},
},
{
accessorKey: "creatorName",
header: t("creator-group", { defaultValue: "Creator Group" }),
cell: ({ row }) => (
<span className="whitespace-nowrap">{row.getValue("creatorName")}</span>
),
},
{
accessorKey: "fileTypeId",
header: "Jenis Konten",
cell: ({ row }) => {
const type = Number(row.getValue("fileTypeId"));
const name = row.original.fileTypeName;
const label =
type === 1
? "Image"
: type === 2
? "Audio Visual"
: type === 3
? "Text"
: type === 4
? "Audio"
: name || "-";
const color =
type === 1
? "bg-blue-100 text-blue-600"
: type === 2
? "bg-red-100 text-red-600"
: type === 3
? "bg-green-100 text-green-600"
: type === 4
? "bg-yellow-100 text-yellow-600"
: "bg-gray-200 text-gray-600";
return (
<Badge className={`${color} whitespace-nowrap rounded-full px-3`}>
{label}
</Badge>
);
},
},
{
accessorKey: "creatorGroupLevelName",
header: t("source", { defaultValue: "Source" }),
cell: ({ row }) => (
<span className="whitespace-nowrap">
{row.getValue("creatorGroupLevelName")}
</span>
),
},
{
accessorKey: "publishedOn",
header: t("published", { defaultValue: "Published" }),
cell: ({ row }) => {
const isPublish = row.original.isPublish;
const isPublishOnPolda = row.original.isPublishOnPolda;
const creatorGroupParentLevelId =
row.original.creatorGroupParentLevelId;
let displayText = "-";
if (isPublish && !isPublishOnPolda) {
displayText = "Mabes";
} else if (isPublish && isPublishOnPolda) {
if (Number(creatorGroupParentLevelId) == 761) {
displayText = "Mabes & Satker";
} else {
displayText = "Mabes & Polda";
}
} else if (!isPublish && isPublishOnPolda) {
if (Number(creatorGroupParentLevelId) == 761) {
displayText = "Satker";
} else {
displayText = "Polda";
}
}
return (
<div className="text-center whitespace-nowrap" title={displayText}>
{displayText}
</div>
);
},
},
{
accessorKey: "statusName",
header: "Status",
cell: ({ row }) => {
const statusColors: Record<string, string> = {
diterima: "bg-green-100 text-green-600",
"menunggu review": "bg-orange-100 text-orange-600",
};
const colors = [
"bg-orange-100 text-orange-600",
"bg-orange-100 text-orange-600",
"bg-green-100 text-green-600",
"bg-blue-100 text-blue-600",
"bg-red-200 text-red-600",
];
const status =
Number(row.original?.statusId) == 2 &&
row.original?.reviewedAtLevel !== null &&
!row.original?.reviewedAtLevel?.includes(`:${userLevelId}:`) &&
Number(row.original?.creatorGroupLevelId) != Number(userLevelId)
? "1"
: row.original?.statusId;
const statusStyles =
colors[Number(status)] || "bg-red-200 text-red-600";
// const statusStyles = statusColors[status] || "bg-red-200 text-red-600";
return (
<Badge
className={cn(
"rounded-full px-5 w-full whitespace-nowrap",
statusStyles
)}
>
{(Number(row.original?.statusId) == 2 &&
!row.original?.reviewedAtLevel !== null &&
!row.original?.reviewedAtLevel?.includes(
`:${Number(userLevelId)}:`
) &&
Number(row.original?.creatorGroupLevelId) !=
Number(userLevelId)) ||
(Number(row.original?.statusId) == 1 &&
Number(row.original?.needApprovalFromLevel) ==
Number(userLevelId))
? "Menunggu Review"
: row.original?.statusName}{" "}
</Badge>
);
},
},
{
id: "actions",
accessorKey: "action",
header: t("action", { defaultValue: "Action" }),
enableHiding: false,
cell: ({ row }) => {
const router = useRouter();
const MySwal = withReactContent(Swal);
const typeId = Number(row.original.fileTypeId);
// mapping route detail
const detailRoute =
typeId === 1
? `/contributor/content/satker/image/detail/${row.original.id}`
: typeId === 2
? `/contributor/content/satker/video/detail/${row.original.id}`
: typeId === 3
? `/contributor/content/satker/text/detail/${row.original.id}`
: typeId === 4
? `/contributor/content/satker/audio/detail/${row.original.id}`
: `/contributor/content/satker/detail/${row.original.id}`;
// mapping route update
const updateRoute =
typeId === 1
? `/contributor/content/satker/image/update/${row.original.id}`
: typeId === 2
? `/contributor/content/satker/video/update/${row.original.id}`
: typeId === 3
? `/contributor/content/satker/text/update/${row.original.id}`
: typeId === 4
? `/contributor/content/satker/audio/update/${row.original.id}`
: `/contributor/content/satker/update/${row.original.id}`;
async function doDelete(id: any) {
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 = Number(getCookiesDecrypt("urie")); // pastikan jadi number
React.useEffect(() => {
if (userLevelId !== undefined && roleId !== undefined) {
setIsMabesApprover(
Number(userLevelId) === 216 && Number(roleId) === 3
);
}
}, [userLevelId, roleId]);
const canEdit =
Number(row.original.uploadedById) === Number(userId) ||
isMabesApprover ||
roleId === 14;
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/satker/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={detailRoute}>
<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>
{/* {canEdit && (
<Link
href={`/contributor/content/satker/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>
)} */}
{canEdit && (
<Link href={updateRoute}>
<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>
</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;
};
export default useTableColumns;

572
app/[locale]/(protected)/contributor/content/satker/components/table-satker.tsx Normal file
View File

@ -0,0 +1,572 @@
"use client";
import * as React from "react";
import {
ColumnFiltersState,
PaginationState,
SortingState,
VisibilityState,
flexRender,
getCoreRowModel,
getFilteredRowModel,
getPaginationRowModel,
getSortedRowModel,
useReactTable,
} from "@tanstack/react-table";
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "@/components/ui/table";
import { Button } from "@/components/ui/button";
import {
DropdownMenu,
DropdownMenuCheckboxItem,
DropdownMenuContent,
DropdownMenuRadioGroup,
DropdownMenuRadioItem,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { ChevronDown, Search } from "lucide-react";
import { getCookiesDecrypt } from "@/lib/utils";
import { Input } from "@/components/ui/input";
import { InputGroup, InputGroupText } from "@/components/ui/input-group";
import TablePagination from "@/components/table/table-pagination";
import { listDataAll, listDataSatker, listEnableCategory } from "@/service/content/content";
import Swal from "sweetalert2";
import withReactContent from "sweetalert2-react-content";
import { format } from "date-fns";
import useTableColumns from "./columns";
import { Label } from "@/components/ui/label";
import { useRouter } from "@/i18n/routing";
import { useSearchParams } from "next/navigation";
const TableSatker = () => {
const router = useRouter();
const searchParams = useSearchParams();
const MySwal = withReactContent(Swal);
const [dataTable, setDataTable] = React.useState<any[]>([]);
const [totalData, setTotalData] = React.useState<number>(1);
const [totalPage, setTotalPage] = React.useState(1);
const [sorting, setSorting] = React.useState<SortingState>([]);
const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
[]
);
const [columnVisibility, setColumnVisibility] =
React.useState<VisibilityState>({});
const [rowSelection, setRowSelection] = React.useState({});
const [showData, setShowData] = React.useState("10");
const [page, setPage] = React.useState(1);
const [search, setSearch] = React.useState("");
const searchTimeoutRef = React.useRef<NodeJS.Timeout | null>(null);
const [categories, setCategories] = React.useState<any[]>([]);
const [selectedCategories, setSelectedCategories] = React.useState<number[]>(
[]
);
const [categoryFilter, setCategoryFilter] = React.useState<string>("");
const [statusFilter, setStatusFilter] = React.useState<any[]>([]);
const [startDate, setStartDate] = React.useState("");
const [endDate, setEndDate] = React.useState("");
const [filterByCreator, setFilterByCreator] = React.useState("");
const [filterBySource, setFilterBySource] = React.useState("");
const [filterByCreatorGroup, setFilterByCreatorGroup] = React.useState("");
const [typeId, setTypeId] = React.useState<string>("");
const userLevelId = getCookiesDecrypt("ulie");
const roleId = getCookiesDecrypt("urie");
const columns = useTableColumns();
const [pagination, setPagination] = React.useState<PaginationState>({
pageIndex: 0,
pageSize: Number(showData),
});
const table = useReactTable({
data: dataTable,
columns,
onSortingChange: setSorting,
onColumnFiltersChange: setColumnFilters,
getCoreRowModel: getCoreRowModel(),
getPaginationRowModel: getPaginationRowModel(),
getSortedRowModel: getSortedRowModel(),
getFilteredRowModel: getFilteredRowModel(),
onColumnVisibilityChange: setColumnVisibility,
onRowSelectionChange: setRowSelection,
onPaginationChange: setPagination,
state: {
sorting,
columnFilters,
columnVisibility,
rowSelection,
pagination,
},
});
// Sync page dari URL (?page=)
React.useEffect(() => {
const pageFromUrl = searchParams?.get("page");
if (pageFromUrl) setPage(Number(pageFromUrl));
}, [searchParams]);
// Ambil kategori sekali di awal
React.useEffect(() => {
getCategories();
}, []);
// Fetch data ketika filter/pagination berubah
React.useEffect(() => {
fetchData();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [
categoryFilter,
statusFilter,
startDate,
endDate,
showData,
page,
typeId,
filterByCreatorGroup,
]);
async function getCategories() {
try {
// ini mengikuti kode awal, type "2" (misal: kategori video)
const category = await listEnableCategory("2");
const resCategory = category?.data?.data?.content;
setCategories(resCategory || []);
} catch (error) {
console.error("Error fetching categories:", error);
}
}
async function fetchData(showLoader = false, customSearch?: string) {
const formattedStartDate = startDate
? format(new Date(startDate), "yyyy-MM-dd")
: "";
const formattedEndDate = endDate
? format(new Date(endDate), "yyyy-MM-dd")
: "";
try {
if (showLoader) {
MySwal.fire({
title: "Memuat data...",
html: "Mohon tunggu sebentar",
allowOutsideClick: false,
didOpen: () => MySwal.showLoading(),
});
}
const isForSelf = Number(roleId) === 4;
const isApproval = !isForSelf;
const res = await listDataSatker(
isForSelf,
isApproval,
page - 1, // page (0-based)
parseInt(showData) || 10, // limit
search, // search (kalau diperlukan di backend)
typeId, // typeId: 1=image, 2=video, 3=text, 4=audio
statusFilter?.join(","), // statusId
statusFilter?.join(",")?.includes("1") ? userLevelId : "",
filterByCreator,
filterBySource,
formattedStartDate,
formattedEndDate,
customSearch ?? search // title
);
const data = res?.data?.data;
const contentData = data?.content || [];
const newData = contentData.map((item: any, index: number) => ({
...item,
no: (page - 1) * Number(showData) + index + 1,
}));
setDataTable([...newData]);
setTotalData(data?.totalElements || 0);
setTotalPage(data?.totalPages || 1);
} catch (error) {
console.error("Error fetching data:", error);
} finally {
MySwal.close();
}
}
// === HANDLERS ===
const handleCheckboxChange = (categoryId: number) => {
setSelectedCategories((prev) =>
prev.includes(categoryId)
? prev.filter((id) => id !== categoryId)
: [...prev, categoryId]
);
setCategoryFilter((prev) => {
const updated = prev.split(",").filter(Boolean).map(Number);
const newList = updated.includes(categoryId)
? updated.filter((id) => id !== categoryId)
: [...updated, categoryId];
return newList.join(",");
});
};
function handleStatusCheckboxChange(value: any) {
setStatusFilter((prev: any) =>
prev.includes(value)
? prev.filter((status: any) => status !== value)
: [...prev, value]
);
}
// Search dengan debounce 2 detik
const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
const value = e.target.value;
setSearch(value);
if (searchTimeoutRef.current) {
clearTimeout(searchTimeoutRef.current);
}
searchTimeoutRef.current = setTimeout(() => {
// setiap kali search, reset ke page 1
setPage(1);
fetchData(true, value);
}, 2000);
};
const handleSearchFilterByCreator = (
e: React.ChangeEvent<HTMLInputElement>
) => {
const value = e.target.value;
setFilterByCreator(value);
setPage(1);
fetchData(true);
};
const handleSearchFilterBySource = (
e: React.ChangeEvent<HTMLInputElement>
) => {
const value = e.target.value;
setFilterBySource(value);
setPage(1);
fetchData(true);
};
// 🧹 Reset semua filter
const handleResetFilters = () => {
setSelectedCategories([]);
setCategoryFilter("");
setStatusFilter([]);
setStartDate("");
setEndDate("");
setFilterByCreator("");
setFilterBySource("");
setFilterByCreatorGroup("");
setTypeId("");
setPage(1);
fetchData(true);
};
return (
<div className="w-full overflow-x-auto">
<div className="flex flex-col md:flex-row md:justify-between items-center md:px-5">
{/* 🔍 Search bar */}
<div className="w-full md:w-[200px] lg:w-[300px] px-2">
<InputGroup merged>
<InputGroupText className="bg-transparent dark:border-secondary dark:group-focus-within:border-secondary">
<Search className="h-6 w-6 dark:text-white" />
</InputGroupText>
<Input
type="text"
placeholder="Cari Judul..."
className="bg-transparent dark:border-secondary dark:placeholder-white/80 dark:focus:border-secondary dark:text-white text-[16px]"
value={search}
onChange={handleSearch}
/>
</InputGroup>
</div>
{/* Filter & Columns & ShowData */}
<div className="flex flex-wrap items-center gap-3 mt-2 md:mt-0">
{/* Show Data Dropdown */}
<div className="mx-3">
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button size="md" variant="outline">
{showData} Data
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="w-56 text-sm">
<DropdownMenuRadioGroup
value={showData}
onValueChange={(value) => {
setShowData(value);
setPagination((prev) => ({
...prev,
pageSize: Number(value),
pageIndex: 0,
}));
setPage(1);
}}
>
<DropdownMenuRadioItem value="10">
10 Data
</DropdownMenuRadioItem>
<DropdownMenuRadioItem value="50">
50 Data
</DropdownMenuRadioItem>
<DropdownMenuRadioItem value="100">
100 Data
</DropdownMenuRadioItem>
<DropdownMenuRadioItem value="250">
250 Data
</DropdownMenuRadioItem>
</DropdownMenuRadioGroup>
</DropdownMenuContent>
</DropdownMenu>
</div>
{/* Jenis Konten (typeId) */}
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="outline" size="md">
Jenis Konten <ChevronDown />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="w-56 text-sm">
<DropdownMenuRadioGroup
value={typeId}
onValueChange={(value) => {
setTypeId(value);
setPage(1);
fetchData(true);
}}
>
<DropdownMenuRadioItem value="">
Semua Jenis
</DropdownMenuRadioItem>
<DropdownMenuRadioItem value="1">
Gambar / Image
</DropdownMenuRadioItem>
<DropdownMenuRadioItem value="2">
Video
</DropdownMenuRadioItem>
<DropdownMenuRadioItem value="3">
Teks / Artikel
</DropdownMenuRadioItem>
<DropdownMenuRadioItem value="4">
Audio
</DropdownMenuRadioItem>
</DropdownMenuRadioGroup>
</DropdownMenuContent>
</DropdownMenu>
{/* Filter Dropdown */}
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="outline" size="md">
Filter <ChevronDown />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent
align="end"
className="w-64 h-[380px] overflow-y-auto"
>
{/* 🧹 Reset All Button */}
<div className="flex justify-end px-3 pt-2 pb-1">
<Button
variant="ghost"
size="sm"
className="text-xs text-gray-700 hover:bg-red-200 dark:text-white"
onClick={handleResetFilters}
>
Reset Semua Filter
</Button>
</div>
<Label className="ml-2">Kategori</Label>
{categories.length > 0 ? (
categories.map((category) => (
<div
key={category.id}
className="flex items-center px-4 py-1"
>
<input
type="checkbox"
id={`category-${category.id}`}
className="mr-2"
checked={selectedCategories.includes(category.id)}
onChange={() => handleCheckboxChange(category.id)}
/>
<label
htmlFor={`category-${category.id}`}
className="text-sm"
>
{category.name}
</label>
</div>
))
) : (
<p className="text-sm text-gray-500 px-4 py-2">
Tidak ada kategori.
</p>
)}
<div className="mx-2 my-1">
<Label>Tanggal Awal</Label>
<Input
type="date"
value={startDate}
onChange={(e) => {
setStartDate(e.target.value);
setPage(1);
}}
/>
</div>
<div className="mx-2 my-1">
<Label>Tanggal Akhir</Label>
<Input
type="date"
value={endDate}
onChange={(e) => {
setEndDate(e.target.value);
setPage(1);
}}
/>
</div>
<div className="mx-2 my-1">
<Label>Kreator</Label>
<Input
placeholder="Nama kreator..."
value={filterByCreator}
onChange={handleSearchFilterByCreator}
/>
</div>
<div className="mx-2 my-1">
<Label>Sumber</Label>
<Input
placeholder="Nama sumber..."
value={filterBySource}
onChange={handleSearchFilterBySource}
/>
</div>
<Label className="ml-2 mt-2">Status</Label>
{[1, 2, 3, 4].map((id) => {
const label =
id === 1
? "Menunggu Review"
: id === 2
? "Diterima"
: id === 3
? "Minta Update"
: "Ditolak";
return (
<div key={id} className="flex items-center px-4 py-1">
<input
type="checkbox"
id={`status-${id}`}
className="mr-2"
checked={statusFilter.includes(id)}
onChange={() => handleStatusCheckboxChange(id)}
/>
<label htmlFor={`status-${id}`} className="text-sm">
{label}
</label>
</div>
);
})}
</DropdownMenuContent>
</DropdownMenu>
{/* Columns Toggle */}
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="outline" size="md">
Columns <ChevronDown />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
{table
.getAllColumns()
.filter((column) => column.getCanHide())
.map((column) => (
<DropdownMenuCheckboxItem
key={column.id}
className="capitalize"
checked={column.getIsVisible()}
onCheckedChange={(value) =>
column.toggleVisibility(!!value)
}
>
{column.id}
</DropdownMenuCheckboxItem>
))}
</DropdownMenuContent>
</DropdownMenu>
</div>
</div>
{/* === TABLE === */}
<Table className="overflow-hidden mt-3">
<TableHeader>
{table.getHeaderGroups().map((headerGroup) => (
<TableRow key={headerGroup.id} className="bg-default-200">
{headerGroup.headers.map((header) => (
<TableHead key={header.id}>
{header.isPlaceholder
? null
: flexRender(
header.column.columnDef.header,
header.getContext()
)}
</TableHead>
))}
</TableRow>
))}
</TableHeader>
<TableBody>
{table.getRowModel().rows?.length ? (
table.getRowModel().rows.map((row) => (
<TableRow
key={row.id}
data-state={row.getIsSelected() && "selected"}
className="h-[75px]"
>
{row.getVisibleCells().map((cell) => (
<TableCell key={cell.id}>
{flexRender(
cell.column.columnDef.cell,
cell.getContext()
)}
</TableCell>
))}
</TableRow>
))
) : (
<TableRow>
<TableCell colSpan={columns.length} className="h-24 text-center">
Tidak ada hasil ditemukan.
</TableCell>
</TableRow>
)}
</TableBody>
</Table>
<TablePagination
table={table}
totalData={totalData}
totalPage={totalPage}
/>
</div>
);
};
export default TableSatker;

15
app/[locale]/(protected)/contributor/content/satker/create/page.tsx Normal file
View File

@ -0,0 +1,15 @@
import FormVideo from "@/components/form/content/video-form";
import SiteBreadcrumb from "@/components/site-breadcrumb";
const VideoCreatePage = async () => {
return (
<div>
<SiteBreadcrumb />
<div className="space-y-4">
<FormVideo />
</div>
</div>
);
};
export default VideoCreatePage;

15
app/[locale]/(protected)/contributor/content/satker/image/detail/[id]/page.tsx Normal file
View File

@ -0,0 +1,15 @@
import SiteBreadcrumb from "@/components/site-breadcrumb";
import FormImageDetail from "@/components/form/content/image-detail-form";
const ImageDetailPage = async () => {
return (
<div>
<SiteBreadcrumb />
<div className="space-y-4">
<FormImageDetail />
</div>
</div>
);
};
export default ImageDetailPage;

16
app/[locale]/(protected)/contributor/content/satker/image/update/[id]/page.tsx Normal file
View File

@ -0,0 +1,16 @@
import SiteBreadcrumb from "@/components/site-breadcrumb";
import FormImageDetail from "@/components/form/content/image-detail-form";
import FormImageUpdate from "@/components/form/content/image-update-form";
const ImageUpdatePage = async () => {
return (
<div>
<SiteBreadcrumb />
<div className="space-y-4">
<FormImageUpdate />
</div>
</div>
);
};
export default ImageUpdatePage;

11
app/[locale]/(protected)/contributor/content/satker/layout.tsx Normal file
View File

@ -0,0 +1,11 @@
import { Metadata } from "next";
export const metadata: Metadata = {
title: "Media Hub | POLRI",
description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
};
const Layout = ({ children }: { children: React.ReactNode }) => {
return <>{children}</>;
};
export default Layout;

88
app/[locale]/(protected)/contributor/content/satker/page.tsx Normal file
View File

@ -0,0 +1,88 @@
"use client";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import SiteBreadcrumb from "@/components/site-breadcrumb";
import TableImage from "./components/table-satker";
import { UploadIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Icon } from "@iconify/react/dist/iconify.js";
import TableVideo from "./components/table-satker";
import { Link } from "@/components/navigation";
import { useTranslations } from "next-intl";
const ReactTableVideoPage = () => {
const t = useTranslations("AnalyticsDashboard");
return (
<div>
<SiteBreadcrumb />
<div className="space-y-4">
<Card className="py-4 px-3">
<div className="flex flex-wrap justify-between items-center px-5">
<div className="flex flex-row items-center text-xl font-medium text-default-900 gap-2">
<div>
<Icon icon="icon-park-outline:check-one" />
</div>
<div>
<p>
<span className="text-red-500">{t("average", { defaultValue: "Average" })} :0</span>
</p>
<p className="text-sm">
{t("Hasil_unggah_disetujui_hari_ini", { defaultValue: "Hasil Unggah Disetujui Hari Ini" })}
</p>
</div>
</div>
<div className="flex flex-row items-center text-xl font-medium text-default-900 gap-2">
<div>
<Icon icon="material-symbols:settings-backup-restore-rounded" />
</div>
<div>
<p>
<span className="text-red-500">{t("average", { defaultValue: "Average" })} :0</span>
</p>
<p className="text-sm">{t("Hasil_unggah_direvisi_hari_ini", { defaultValue: "Hasil Unggah Direvisi Hari Ini" })}</p>
</div>
</div>
<div className="flex flex-row items-center text-xl font-medium text-default-900 gap-2">
<div>
<Icon icon="healthicons:no-outline" />
</div>
<div>
<p>
<span className="text-red-500">{t("average", { defaultValue: "Average" })} :0</span>
</p>
<p className="text-sm">{t("Hasil_unggah_ditolak_hari_ini", { defaultValue: "Hasil Unggah Ditolak Hari Ini" })}</p>
</div>
</div>
</div>
</Card>
<Card>
<CardHeader className="border-b border-solid border-default-200 mb-6">
<CardTitle>
<div className="flex items-center">
<div className="flex-1 text-xl font-medium text-default-900">
Satker
</div>
<div className="flex-none">
{/* <Link href={"/contributor/content/video/create"}>
<Button color="primary" className="text-white">
<UploadIcon size={18} className="mr-2" />
{t("create-video", { defaultValue: "Create Video" })}
</Button>
</Link> */}
{/* <Button color="primary" className="text-white ml-3">
<UploadIcon />
Unggah Video Dengan AI
</Button> */}
</div>
</div>
</CardTitle>
</CardHeader>
<CardContent className="p-0">
<TableVideo />
</CardContent>
</Card>
</div>
</div>
);
};
export default ReactTableVideoPage;

16
app/[locale]/(protected)/contributor/content/satker/teks/detail/[id]/page.tsx Normal file
View File

@ -0,0 +1,16 @@
import SiteBreadcrumb from "@/components/site-breadcrumb";
import FormImageDetail from "@/components/form/content/image-detail-form";
import FormTeksDetail from "@/components/form/content/teks-detail-form";
const TeksDetailPage = async () => {
return (
<div>
<SiteBreadcrumb />
<div className="space-y-4">
<FormTeksDetail />
</div>
</div>
);
};
export default TeksDetailPage;

17
app/[locale]/(protected)/contributor/content/satker/teks/update/[id]/page.tsx Normal file
View File

@ -0,0 +1,17 @@
import SiteBreadcrumb from "@/components/site-breadcrumb";
import FormImageDetail from "@/components/form/content/image-detail-form";
import FormImageUpdate from "@/components/form/content/image-update-form";
import FormTeksUpdate from "@/components/form/content/teks-update-form";
const TeksUpdatePage = async () => {
return (
<div>
<SiteBreadcrumb />
<div className="space-y-4">
<FormTeksUpdate />
</div>
</div>
);
};
export default TeksUpdatePage;

18
app/[locale]/(protected)/contributor/content/satker/update-seo/[id]/page.tsx Normal file
View File

@ -0,0 +1,18 @@
import SiteBreadcrumb from "@/components/site-breadcrumb";
import FormImageDetail from "@/components/form/content/image-detail-form";
import FormImageUpdate from "@/components/form/content/image-update-form";
import FormVideoUpdate from "@/components/form/content/video-update-form";
import FormVideoSeo from "@/components/form/content/video-update-seo";
const VideoUpdatePage = async () => {
return (
<div>
<SiteBreadcrumb />
<div className="space-y-4">
<FormVideoSeo />
</div>
</div>
);
};
export default VideoUpdatePage;

17
app/[locale]/(protected)/contributor/content/satker/update/[id]/page.tsx Normal file
View File

@ -0,0 +1,17 @@
import SiteBreadcrumb from "@/components/site-breadcrumb";
import FormImageDetail from "@/components/form/content/image-detail-form";
import FormImageUpdate from "@/components/form/content/image-update-form";
import FormVideoUpdate from "@/components/form/content/video-update-form";
const VideoUpdatePage = async () => {
return (
<div>
<SiteBreadcrumb />
<div className="space-y-4">
<FormVideoUpdate />
</div>
</div>
);
};
export default VideoUpdatePage;

16
app/[locale]/(protected)/contributor/content/satker/video/detail/[id]/page.tsx Normal file
View File

@ -0,0 +1,16 @@
import SiteBreadcrumb from "@/components/site-breadcrumb";
import FormImageDetail from "@/components/form/content/image-detail-form";
import FormVideoDetail from "@/components/form/content/video-detail-form";
const VideoDetailPage = async () => {
return (
<div>
<SiteBreadcrumb />
<div className="space-y-4">
<FormVideoDetail />
</div>
</div>
);
};
export default VideoDetailPage;

17
app/[locale]/(protected)/contributor/content/satker/video/update/[id]/page.tsx Normal file
View File

@ -0,0 +1,17 @@
import SiteBreadcrumb from "@/components/site-breadcrumb";
import FormImageDetail from "@/components/form/content/image-detail-form";
import FormImageUpdate from "@/components/form/content/image-update-form";
import FormVideoUpdate from "@/components/form/content/video-update-form";
const VideoUpdatePage = async () => {
return (
<div>
<SiteBreadcrumb />
<div className="space-y-4">
<FormVideoUpdate />
</div>
</div>
);
};
export default VideoUpdatePage;

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

@ -153,7 +153,7 @@ const useTableColumns = ({
// try {
// loading();
// const response = await axios.get(
// `https://new.netidhub.com/api/media/report/download?id=${id}`,
// `https://netidhub.com/api/media/report/download?id=${id}`,
// {
// responseType: "blob",
// }

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]/(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);

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

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

@ -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

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

@ -290,29 +290,25 @@ const Galery = (props: any) => {
// 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://mediahub.polri.go.id/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>

12
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();
@ -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>

686
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,132 +83,71 @@ 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("mediahub.polri.go.id")) {
pageUrl = pageUrl.replace(
@ -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("mediahub.polri.go.id")) {
// 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://mediahub.polri.go.id"
// );
// 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>
// );
// }

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

@ -311,15 +311,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}

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

@ -115,7 +115,7 @@ const ViewEditor = dynamic(
() => {
return import("@/components/editor/view-editor");
},
{ ssr: false },
{ ssr: false }
);
interface Destination {
@ -198,12 +198,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 +209,7 @@ export default function FormAudioDetail() {
const handleFileUnitChange = (
fileIndex: number,
key: keyof typeof unitSelection,
value: boolean,
value: boolean
) => {
setFileUnitSelections((prev) => {
const newSelections = [...prev];
@ -235,7 +229,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 +260,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 +302,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 +327,7 @@ export default function FormAudioDetail() {
acc[polda.id] = false;
return acc;
},
{},
{}
);
setExpandedPolda(initialExpandedState);
console.log("polres", initialExpandedState);
@ -368,7 +362,7 @@ export default function FormAudioDetail() {
const handleUnitChange = (
key: keyof typeof unitSelection,
value: boolean,
value: boolean
) => {
if (key === "semua") {
const newState = {
@ -478,7 +472,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]
);
};
@ -500,7 +494,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 +542,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 +552,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 +709,7 @@ export default function FormAudioDetail() {
const setupPlacement = (
index: number,
placement: string,
checked: boolean,
checked: boolean
) => {
let temp = [...filePlacements];
if (checked) {
@ -729,7 +720,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 +770,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 +785,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 +819,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 +838,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 +873,7 @@ export default function FormAudioDetail() {
const updateModalChecklistLevels = (
fileIndex: number,
placement: string,
checked: boolean,
checked: boolean
) => {
if (!listDest || listDest.length === 0) return;
@ -915,7 +906,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 +942,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 +975,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 +987,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 +1010,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 +1041,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 +1068,7 @@ export default function FormAudioDetail() {
}
return total;
},
0,
0
);
// Hitung berapa banyak POLRES yang ter-checklist
@ -1087,7 +1078,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 +1087,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 +1121,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 +1204,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 +1464,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 +1472,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 +1488,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 +1509,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 +1832,7 @@ export default function FormAudioDetail() {
>
{template}
</Button>
),
)
)}
</div>
</div>

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

@ -731,7 +731,7 @@ export default function FormAudio() {
setIsStartUpload(true);
setProgressList(progressInfoArr);
// close();
close();
// showProgress();
files.map(async (item: any, index: number) => {
await uploadResumableFile(index, String(id), item, "0");
@ -841,8 +841,6 @@ export default function FormAudio() {
}
if (counter == progressInfo.length) {
setIsStartUpload(false);
close();
// hideProgress();
Cookies.remove("idCreate");
successSubmit("/in/contributor/content/audio");
@ -1806,7 +1804,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>

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

@ -115,7 +115,7 @@ const ViewEditor = dynamic(
() => {
return import("@/components/editor/view-editor");
},
{ ssr: false },
{ ssr: false }
);
interface Destination {
@ -172,12 +172,6 @@ export default function FormImageDetail() {
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) {
@ -206,7 +200,7 @@ export default function FormImageDetail() {
const [files, setFiles] = useState<FileType[]>([]);
const [rejectedFiles, setRejectedFiles] = useState<number[]>([]);
const [expandedPolda, setExpandedPolda] = useState<Record<number, boolean>>(
{},
{}
);
// State untuk melacak apakah perubahan berasal dari checkbox utama
@ -237,7 +231,7 @@ export default function FormImageDetail() {
useEffect(() => {
if (detail?.assignedToTopLevel) {
const outputSet = new Set(
detail.assignedToTopLevel.split(",").map(Number),
detail.assignedToTopLevel.split(",").map(Number)
);
setUnitSelection({
semua: outputSet.has(0),
@ -266,7 +260,7 @@ export default function FormImageDetail() {
acc[polda.id] = false;
return acc;
},
{},
{}
);
setExpandedPolda(initialExpandedState);
console.log("polres", initialExpandedState);
@ -305,7 +299,7 @@ export default function FormImageDetail() {
(item: any) =>
item.levelNumber === 2 &&
item.name !== "SATKER POLRI" &&
checkedLevels.has(Number(item.id)),
checkedLevels.has(Number(item.id))
).length;
const checkedPolresCount = listDest.reduce((total: number, item: any) => {
@ -314,7 +308,7 @@ export default function FormImageDetail() {
return (
total +
item.subDestination.filter((sub: any) =>
checkedLevels.has(Number(sub.id)),
checkedLevels.has(Number(sub.id))
).length
);
}
@ -322,12 +316,12 @@ export default function FormImageDetail() {
}, 0);
const satkerItem: any = listDest.find(
(item: any) => item.name === "SATKER POLRI",
(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)),
checkedLevels.has(Number(sub.id))
).length || 0)
: 0;
@ -397,7 +391,7 @@ export default function FormImageDetail() {
} else if (mainCheckboxChangeType === "satker_checked") {
// Checklist satker
const satkerItem: any = listDest.find(
(item: any) => item.name === "SATKER POLRI",
(item: any) => item.name === "SATKER POLRI"
);
if (satkerItem) {
newCheckedLevels.add(Number(satkerItem.id));
@ -445,7 +439,7 @@ export default function FormImageDetail() {
} else if (mainCheckboxChangeType === "satker_unchecked") {
// Clear satker dan semua sub-item di bawahnya dari checkedLevels
const satkerItem: any = listDest.find(
(item: any) => item.name === "SATKER POLRI",
(item: any) => item.name === "SATKER POLRI"
);
if (satkerItem) {
newCheckedLevels.delete(Number(satkerItem.id));
@ -472,7 +466,7 @@ export default function FormImageDetail() {
const handleFileUnitChange = (
fileIndex: number,
key: keyof typeof unitSelection,
value: boolean,
value: boolean
) => {
setFileUnitSelections((prev) => {
const newSelections = [...prev];
@ -492,7 +486,7 @@ export default function FormImageDetail() {
setFileCheckedLevels((prevLevels) => {
const newArray = [...prevLevels];
const currentFileLevels = new Set<number>(
newArray[fileIndex] || new Set(),
newArray[fileIndex] || new Set()
);
if (value) {
@ -523,12 +517,12 @@ export default function FormImageDetail() {
(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
}
@ -558,7 +552,7 @@ export default function FormImageDetail() {
// Fungsi lama untuk kompatibilitas (akan dihapus nanti)
const handleUnitChange = (
key: keyof typeof unitSelection,
value: boolean,
value: boolean
) => {
// Set flag bahwa perubahan berasal dari checkbox utama
setIsUpdatingFromMainCheckbox(true);
@ -584,13 +578,13 @@ export default function FormImageDetail() {
(item: any) =>
item.levelNumber === 2 &&
item.name !== "SATKER POLRI" &&
checkedLevels.has(Number(item.id)),
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.",
"Harap pilih POLDA di Modal terlebih dahulu sebelum mengaktifkan checkbox POLRES."
);
// Reset flag karena perubahan dibatalkan
setIsUpdatingFromMainCheckbox(false);
@ -646,14 +640,14 @@ export default function FormImageDetail() {
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]
);
};
// Fungsi untuk mengupdate checklist levels untuk file tertentu
const handleFileCheckboxChangePlacement = (
fileIndex: number,
levelId: number,
levelId: number
) => {
setFileCheckedLevels((prev) => {
const newArray = [...prev];
@ -665,7 +659,7 @@ export default function FormImageDetail() {
// 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 &&
@ -688,7 +682,7 @@ export default function FormImageDetail() {
// 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)
@ -716,7 +710,7 @@ export default function FormImageDetail() {
// 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) {
@ -756,7 +750,7 @@ export default function FormImageDetail() {
// 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)
@ -783,7 +777,7 @@ export default function FormImageDetail() {
}
return total;
},
0,
0
);
// Hitung berapa banyak POLRES yang ter-checklist
@ -793,7 +787,7 @@ export default function FormImageDetail() {
return (
total +
item.subDestination.filter((sub: any) =>
currentFileLevels.has(Number(sub.id)),
currentFileLevels.has(Number(sub.id))
).length
);
}
@ -802,7 +796,7 @@ export default function FormImageDetail() {
// 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));
@ -839,7 +833,7 @@ export default function FormImageDetail() {
// 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 &&
@ -862,7 +856,7 @@ export default function FormImageDetail() {
// 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)
@ -893,7 +887,7 @@ export default function FormImageDetail() {
if (scheduleId && scheduleType === "3") {
const findCategory = resCategory.find((o) =>
o.name.toLowerCase().includes("pers rilis"),
o.name.toLowerCase().includes("pers rilis")
);
if (findCategory) {
@ -942,11 +936,6 @@ export default function FormImageDetail() {
console.log("detail", details);
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,
@ -957,14 +946,14 @@ export default function FormImageDetail() {
if (details?.assignedToLevel) {
const levels = new Set<number>(
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);
}
@ -974,7 +963,7 @@ export default function FormImageDetail() {
const filesData = details.files || [];
const fileUrls = filesData.map((file: { thumbnailFileUrl: string }) =>
file.thumbnailFileUrl ? file.thumbnailFileUrl : "default-image.jpg",
file.thumbnailFileUrl ? file.thumbnailFileUrl : "default-image.jpg"
);
setDetailThumb(fileUrls);
@ -1094,7 +1083,7 @@ export default function FormImageDetail() {
const setupPlacement = (
index: number,
placement: string,
checked: boolean,
checked: boolean
) => {
let temp = [...filePlacements];
if (checked) {
@ -1105,7 +1094,7 @@ export default function FormImageDetail() {
setFileCheckedLevels((prevLevels) => {
const newArray = [...prevLevels];
const currentFileLevels = new Set<number>(
newArray[index] || new Set(),
newArray[index] || new Set()
);
// Checklist semua item di modal
@ -1155,7 +1144,7 @@ export default function FormImageDetail() {
// 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");
@ -1170,7 +1159,7 @@ export default function FormImageDetail() {
setFileCheckedLevels((prevLevels) => {
const newArray = [...prevLevels];
const currentFileLevels = new Set<number>(
newArray[index] || new Set(),
newArray[index] || new Set()
);
// Unchecklist semua item di modal
@ -1204,7 +1193,7 @@ export default function FormImageDetail() {
// 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");
@ -1223,7 +1212,7 @@ export default function FormImageDetail() {
const updateModalChecklistLevels = (
fileIndex: number,
placement: string,
checked: boolean,
checked: boolean
) => {
if (!listDest || listDest.length === 0) return;
@ -1256,7 +1245,7 @@ export default function FormImageDetail() {
} 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));
@ -1292,7 +1281,7 @@ export default function FormImageDetail() {
} 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));
@ -1322,7 +1311,7 @@ export default function FormImageDetail() {
type: string,
url: string,
names: string,
format: string,
format: string
) => {
console.log("Test 3 :", type, url, names, format);
setMain({
@ -1422,7 +1411,7 @@ export default function FormImageDetail() {
{detail &&
!categories.find(
(cat) =>
String(cat.id) === String(detail.category.id),
String(cat.id) === String(detail.category.id)
) && (
<SelectItem
key={String(detail.category.id)}
@ -1743,7 +1732,7 @@ export default function FormImageDetail() {
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" },
@ -1751,39 +1740,6 @@ export default function FormImageDetail() {
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}
@ -1800,12 +1756,12 @@ export default function FormImageDetail() {
handleFileUnitChange(
index,
item.key as keyof typeof unitSelection,
value as boolean,
value as boolean
);
setupPlacement(
index,
item.key,
Boolean(value),
Boolean(value)
);
}}
/>
@ -1821,257 +1777,246 @@ export default function FormImageDetail() {
</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>Simpan</Button>
</DialogClose>
</div>
</DialogContent>
</Dialog>
</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>
) : (
@ -2150,7 +2095,7 @@ export default function FormImageDetail() {
>
{template}
</Button>
),
)
)}
</div>
</div>

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

@ -82,7 +82,7 @@ const CustomEditor = dynamic(
() => {
return import("@/components/editor/custom-editor");
},
{ ssr: false },
{ ssr: false }
);
export default function FormImage() {
@ -117,7 +117,7 @@ export default function FormImage() {
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] =
@ -183,17 +183,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;
}
@ -227,12 +227,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,7 +454,7 @@ export default function FormImage() {
const articleData = await waitForStatusUpdate();
const cleanArticleBody = articleData?.articleBody?.replace(
/<img[^>]*>/g,
"",
""
);
const articleImagesData = articleData?.imagesUrl?.split(",");
setArticleBody(cleanArticleBody || "");
@ -507,7 +507,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 +530,7 @@ export default function FormImage() {
setPublishedFor(
options
.filter((opt: any) => opt.id !== "all")
.map((opt: any) => opt.id),
.map((opt: any) => opt.id)
);
}
} else {
@ -594,16 +594,11 @@ export default function FormImage() {
} 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)");
}
// else {
// // fallback: gunakan versi Indonesia original
// finalDescription = data.descriptionOri ?? "";
// console.log("📤 Upload versi Indonesia (original)");
// }
if (!finalDescription?.trim()) {
MySwal.fire("Error", "Deskripsi tidak boleh kosong.", "error");
@ -689,13 +684,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 +717,7 @@ export default function FormImage() {
idx: number,
id: string,
file: any,
duration: string,
duration: string
) {
console.log(idx, id, file, duration);
@ -758,7 +753,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 +795,6 @@ export default function FormImage() {
}
if (counter == progressInfo.length) {
setIsStartUpload(false);
close();
// hideProgress();
Cookies.remove("idCreate");
successSubmit("/in/contributor/content/image");

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

@ -1372,7 +1372,6 @@ export default function FormConvertSPIT() {
);
}
// {spit with new layout file placements}
// "use client";
// import React, { ChangeEvent, useEffect, useRef, useState } from "react";

575
components/form/content/teks-detail-form.tsx
View File

@ -114,7 +114,7 @@ const ViewEditor = dynamic(
() => {
return import("@/components/editor/view-editor");
},
{ ssr: false },
{ ssr: false }
);
interface Destination {
@ -191,12 +191,6 @@ export default function FormTeksDetail() {
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) {
@ -208,7 +202,7 @@ export default function FormTeksDetail() {
const handleFileUnitChange = (
fileIndex: number,
key: keyof typeof unitSelection,
value: boolean,
value: boolean
) => {
setFileUnitSelections((prev) => {
const newSelections = [...prev];
@ -228,7 +222,7 @@ export default function FormTeksDetail() {
setFileCheckedLevels((prevLevels) => {
const newArray = [...prevLevels];
const currentFileLevels = new Set<number>(
newArray[fileIndex] || new Set(),
newArray[fileIndex] || new Set()
);
if (value) {
@ -259,12 +253,12 @@ export default function FormTeksDetail() {
(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
}
@ -303,7 +297,7 @@ export default function FormTeksDetail() {
useEffect(() => {
if (detail?.assignedToTopLevel) {
const outputSet = new Set(
detail.assignedToTopLevel.split(",").map(Number),
detail.assignedToTopLevel.split(",").map(Number)
);
setUnitSelection({
semua: outputSet.has(0),
@ -328,7 +322,7 @@ export default function FormTeksDetail() {
acc[polda.id] = false;
return acc;
},
{},
{}
);
setExpandedPolda(initialExpandedState);
console.log("polres", initialExpandedState);
@ -363,7 +357,7 @@ export default function FormTeksDetail() {
const handleUnitChange = (
key: keyof typeof unitSelection,
value: boolean,
value: boolean
) => {
if (key === "semua") {
const newState = {
@ -442,7 +436,7 @@ export default function FormTeksDetail() {
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]
);
};
@ -464,7 +458,7 @@ export default function FormTeksDetail() {
if (scheduleId && scheduleType === "3") {
const findCategory = resCategory.find((o) =>
o.name.toLowerCase().includes("pers rilis"),
o.name.toLowerCase().includes("pers rilis")
);
if (findCategory) {
@ -513,9 +507,6 @@ export default function FormTeksDetail() {
console.log("detail", details);
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,
@ -526,14 +517,14 @@ export default function FormTeksDetail() {
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);
}
@ -705,7 +696,7 @@ export default function FormTeksDetail() {
type: string,
url: string,
names: string,
format: string,
format: string
) => {
console.log("Test 3 :", type, url, names, format);
setMain({
@ -732,7 +723,7 @@ export default function FormTeksDetail() {
const setupPlacement = (
index: number,
placement: string,
checked: boolean,
checked: boolean
) => {
let temp = [...filePlacements];
if (checked) {
@ -743,7 +734,7 @@ export default function FormTeksDetail() {
setFileCheckedLevels((prevLevels) => {
const newArray = [...prevLevels];
const currentFileLevels = new Set<number>(
newArray[index] || new Set(),
newArray[index] || new Set()
);
// Checklist semua item di modal
@ -793,7 +784,7 @@ export default function FormTeksDetail() {
// 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");
@ -808,7 +799,7 @@ export default function FormTeksDetail() {
setFileCheckedLevels((prevLevels) => {
const newArray = [...prevLevels];
const currentFileLevels = new Set<number>(
newArray[index] || new Set(),
newArray[index] || new Set()
);
// Unchecklist semua item di modal
@ -842,7 +833,7 @@ export default function FormTeksDetail() {
// 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");
@ -860,7 +851,7 @@ export default function FormTeksDetail() {
const updateModalChecklistLevels = (
fileIndex: number,
placement: string,
checked: boolean,
checked: boolean
) => {
if (!listDest || listDest.length === 0) return;
@ -893,7 +884,7 @@ export default function FormTeksDetail() {
} 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));
@ -929,7 +920,7 @@ export default function FormTeksDetail() {
} 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));
@ -962,7 +953,7 @@ export default function FormTeksDetail() {
// Fungsi untuk mengupdate checklist levels untuk file tertentu
const handleFileCheckboxChangePlacement = (
fileIndex: number,
levelId: number,
levelId: number
) => {
setFileCheckedLevels((prev) => {
const newArray = [...prev];
@ -974,7 +965,7 @@ export default function FormTeksDetail() {
// 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 &&
@ -997,7 +988,7 @@ export default function FormTeksDetail() {
// 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)
@ -1028,7 +1019,7 @@ export default function FormTeksDetail() {
// 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)
@ -1055,7 +1046,7 @@ export default function FormTeksDetail() {
}
return total;
},
0,
0
);
// Hitung berapa banyak POLRES yang ter-checklist
@ -1065,7 +1056,7 @@ export default function FormTeksDetail() {
return (
total +
item.subDestination.filter((sub: any) =>
currentFileLevels.has(Number(sub.id)),
currentFileLevels.has(Number(sub.id))
).length
);
}
@ -1074,7 +1065,7 @@ export default function FormTeksDetail() {
// 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));
@ -1108,7 +1099,7 @@ export default function FormTeksDetail() {
// 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) {
@ -1191,7 +1182,7 @@ export default function FormTeksDetail() {
{detail &&
!categories.find(
(cat) =>
String(cat.id) === String(detail.category.id),
String(cat.id) === String(detail.category.id)
) && (
<SelectItem
key={String(detail.category.id)}
@ -1474,7 +1465,7 @@ export default function FormTeksDetail() {
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" },
@ -1482,39 +1473,6 @@ export default function FormTeksDetail() {
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}
@ -1531,12 +1489,12 @@ export default function FormTeksDetail() {
handleFileUnitChange(
index,
item.key as keyof typeof unitSelection,
value as boolean,
value as boolean
);
setupPlacement(
index,
item.key,
Boolean(value),
Boolean(value)
);
}}
/>
@ -1552,262 +1510,251 @@ export default function FormTeksDetail() {
</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>
) : (
@ -1886,7 +1833,7 @@ export default function FormTeksDetail() {
>
{template}
</Button>
),
)
)}
</div>
</div>

5
components/form/content/teks-form.tsx
View File

@ -749,7 +749,7 @@ export default function FormTeks() {
setIsStartUpload(true);
setProgressList(progressInfoArr);
// close();
close();
files.map(async (item: any, index: number) => {
await uploadResumableFile(
index,
@ -861,7 +861,6 @@ export default function FormTeks() {
}
if (counter == progressInfo.length) {
setIsStartUpload(false);
close();
// hideProgress();
Cookies.remove("idCreate");
successSubmit("/in/contributor/content/teks");
@ -1776,7 +1775,7 @@ export default function FormTeks() {
{/* <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>

578
components/form/content/video-detail-form.tsx
View File

@ -115,7 +115,7 @@ const ViewEditor = dynamic(
() => {
return import("@/components/editor/view-editor");
},
{ ssr: false },
{ ssr: false }
);
interface Destination {
@ -190,12 +190,6 @@ export default function FormVideoDetail() {
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) {
@ -207,7 +201,7 @@ export default function FormVideoDetail() {
const handleFileUnitChange = (
fileIndex: number,
key: keyof typeof unitSelection,
value: boolean,
value: boolean
) => {
setFileUnitSelections((prev) => {
const newSelections = [...prev];
@ -227,7 +221,7 @@ export default function FormVideoDetail() {
setFileCheckedLevels((prevLevels) => {
const newArray = [...prevLevels];
const currentFileLevels = new Set<number>(
newArray[fileIndex] || new Set(),
newArray[fileIndex] || new Set()
);
if (value) {
@ -258,12 +252,12 @@ export default function FormVideoDetail() {
(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
}
@ -302,7 +296,7 @@ export default function FormVideoDetail() {
useEffect(() => {
if (detail?.assignedToTopLevel) {
const outputSet = new Set(
detail.assignedToTopLevel.split(",").map(Number),
detail.assignedToTopLevel.split(",").map(Number)
);
setUnitSelection({
semua: outputSet.has(0),
@ -327,7 +321,7 @@ export default function FormVideoDetail() {
acc[polda.id] = false;
return acc;
},
{},
{}
);
setExpandedPolda(initialExpandedState);
console.log("polres", initialExpandedState);
@ -362,7 +356,7 @@ export default function FormVideoDetail() {
const handleUnitChange = (
key: keyof typeof unitSelection,
value: boolean,
value: boolean
) => {
if (key === "semua") {
const newState = {
@ -441,7 +435,7 @@ export default function FormVideoDetail() {
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]
);
};
@ -463,7 +457,7 @@ export default function FormVideoDetail() {
if (scheduleId && scheduleType === "3") {
const findCategory = resCategory.find((o) =>
o.name.toLowerCase().includes("pers rilis"),
o.name.toLowerCase().includes("pers rilis")
);
if (findCategory) {
@ -486,10 +480,6 @@ export default function FormVideoDetail() {
console.log("detail", details);
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,
@ -499,14 +489,14 @@ export default function FormVideoDetail() {
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);
}
@ -516,7 +506,7 @@ export default function FormVideoDetail() {
const filesData = details?.files || [];
const fileUrls = filesData.map((files: { url: string }) =>
files.url ? files.url : "default-image.jpg",
files.url ? files.url : "default-image.jpg"
);
setDetailVideo(fileUrls);
@ -694,7 +684,7 @@ export default function FormVideoDetail() {
const setupPlacement = (
index: number,
placement: string,
checked: boolean,
checked: boolean
) => {
let temp = [...filePlacements];
if (checked) {
@ -705,7 +695,7 @@ export default function FormVideoDetail() {
setFileCheckedLevels((prevLevels) => {
const newArray = [...prevLevels];
const currentFileLevels = new Set<number>(
newArray[index] || new Set(),
newArray[index] || new Set()
);
// Checklist semua item di modal
@ -755,7 +745,7 @@ export default function FormVideoDetail() {
// 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");
@ -770,7 +760,7 @@ export default function FormVideoDetail() {
setFileCheckedLevels((prevLevels) => {
const newArray = [...prevLevels];
const currentFileLevels = new Set<number>(
newArray[index] || new Set(),
newArray[index] || new Set()
);
// Unchecklist semua item di modal
@ -804,7 +794,7 @@ export default function FormVideoDetail() {
// 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");
@ -822,7 +812,7 @@ export default function FormVideoDetail() {
const updateModalChecklistLevels = (
fileIndex: number,
placement: string,
checked: boolean,
checked: boolean
) => {
if (!listDest || listDest.length === 0) return;
@ -855,7 +845,7 @@ export default function FormVideoDetail() {
} 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));
@ -891,7 +881,7 @@ export default function FormVideoDetail() {
} 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));
@ -920,7 +910,7 @@ export default function FormVideoDetail() {
type: string,
url: string,
names: string,
format: string,
format: string
) => {
console.log("Test 3 :", type, url, names, format);
setMain({
@ -961,7 +951,7 @@ export default function FormVideoDetail() {
// Fungsi untuk mengupdate checklist levels untuk file tertentu
const handleFileCheckboxChangePlacement = (
fileIndex: number,
levelId: number,
levelId: number
) => {
setFileCheckedLevels((prev) => {
const newArray = [...prev];
@ -973,7 +963,7 @@ export default function FormVideoDetail() {
// 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 &&
@ -996,7 +986,7 @@ export default function FormVideoDetail() {
// 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)
@ -1027,7 +1017,7 @@ export default function FormVideoDetail() {
// 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)
@ -1054,7 +1044,7 @@ export default function FormVideoDetail() {
}
return total;
},
0,
0
);
// Hitung berapa banyak POLRES yang ter-checklist
@ -1064,7 +1054,7 @@ export default function FormVideoDetail() {
return (
total +
item.subDestination.filter((sub: any) =>
currentFileLevels.has(Number(sub.id)),
currentFileLevels.has(Number(sub.id))
).length
);
}
@ -1073,7 +1063,7 @@ export default function FormVideoDetail() {
// 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));
@ -1107,7 +1097,7 @@ export default function FormVideoDetail() {
// 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) {
@ -1190,7 +1180,7 @@ export default function FormVideoDetail() {
{detail &&
!categories.find(
(cat) =>
String(cat.id) === String(detail.category.id),
String(cat.id) === String(detail.category.id)
) && (
<SelectItem
key={String(detail.category.id)}
@ -1475,7 +1465,7 @@ export default function FormVideoDetail() {
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" },
@ -1483,39 +1473,6 @@ export default function FormVideoDetail() {
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}
@ -1532,12 +1489,12 @@ export default function FormVideoDetail() {
handleFileUnitChange(
index,
item.key as keyof typeof unitSelection,
value as boolean,
value as boolean
);
setupPlacement(
index,
item.key,
Boolean(value),
Boolean(value)
);
}}
/>
@ -1553,262 +1510,251 @@ export default function FormVideoDetail() {
</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>
) : (
@ -1887,7 +1833,7 @@ export default function FormVideoDetail() {
>
{template}
</Button>
),
)
)}
</div>
</div>

44
components/form/content/video-form.tsx
View File

@ -59,7 +59,7 @@ const CustomEditor = dynamic(
() => {
return import("@/components/editor/custom-editor");
},
{ ssr: false },
{ ssr: false }
);
interface FileWithPreview extends File {
@ -111,11 +111,11 @@ export default function FormVideo() {
const [isGeneratedArticle, setIsGeneratedArticle] = useState(false);
const [articleBody, setArticleBody] = useState<string>("");
const [selectedArticleId, setSelectedArticleId] = useState<string | null>(
null,
null
);
const [selectedMainKeyword, setSelectedMainKeyword] = useState("");
const [publishedForError, setPublishedForError] = useState<string | null>(
null,
null
);
const [selectedSize, setSelectedSize] = useState("");
const [detailData, setDetailData] = useState<any>(null);
@ -184,7 +184,7 @@ export default function FormVideo() {
}
const filesWithPreview = acceptedFiles.map((file) =>
Object.assign(file, { preview: URL.createObjectURL(file) }),
Object.assign(file, { preview: URL.createObjectURL(file) })
);
setFiles((prev) => {
@ -211,11 +211,11 @@ export default function FormVideo() {
.refine(
(files) =>
files.every((file: File) => ACCEPTED_FILE_TYPES.includes(file.type)),
{ message: "File harus berformat mp4 atau mov" },
{ message: "File harus berformat mp4 atau mov" }
)
.refine(
(files) => files.every((file: File) => file.size <= MAX_FILE_SIZE),
{ message: "Ukuran file maksimal 100 MB" },
{ message: "Ukuran file maksimal 100 MB" }
),
publishedFor: z
.array(z.string())
@ -423,7 +423,7 @@ export default function FormVideo() {
const articleData = await waitForStatusUpdate();
const cleanArticleBody = articleData?.articleBody?.replace(
/<img[^>]*>/g,
"",
""
);
const articleImagesData = articleData?.imagesUrl?.split(",");
setValue("description", cleanArticleBody || "");
@ -479,7 +479,7 @@ export default function FormVideo() {
if (scheduleId && scheduleType === "3") {
const findCategory = resCategory.find((o) =>
o.name.toLowerCase().includes("pers rilis"),
o.name.toLowerCase().includes("pers rilis")
);
if (findCategory) {
@ -502,7 +502,7 @@ export default function FormVideo() {
setPublishedFor(
options
.filter((opt: any) => opt.id !== "all")
.map((opt: any) => opt.id),
.map((opt: any) => opt.id)
);
}
} else {
@ -561,8 +561,8 @@ export default function FormVideo() {
translatedTitle && translatedTitle.trim() !== ""
? translatedTitle
: isSwitchOn
? title
: data.title;
? title
: data.title;
// Tentukan deskripsi final:
// Jika ada hasil translate, kirim itu ke backend
@ -570,10 +570,10 @@ export default function FormVideo() {
translatedContent && translatedContent.trim() !== ""
? translatedContent
: isSwitchOn
? data.description
: selectedFileType === "rewrite"
? data.rewriteDescription
: data.descriptionOri;
? data.description
: selectedFileType === "rewrite"
? data.rewriteDescription
: data.descriptionOri;
if (!finalDescription?.trim()) {
MySwal.fire("Error", "Deskripsi tidak boleh kosong.", "error");
@ -695,7 +695,7 @@ export default function FormVideo() {
idx: number,
id: string,
file: any,
duration: string,
duration: string
) {
console.log(idx, id, file, duration);
@ -731,7 +731,7 @@ export default function FormVideo() {
onChunkComplete: (
chunkSize: any,
bytesAccepted: any,
bytesTotal: any,
bytesTotal: any
) => {
const uploadPersen = Math.floor((bytesAccepted / bytesTotal) * 100);
progressInfo[idx].percentage = uploadPersen;
@ -791,8 +791,8 @@ export default function FormVideo() {
const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const file = e.target.files?.[0];
if (file) {
setThumbnail(file);
setPreview(URL.createObjectURL(file));
setThumbnail(file);
setPreview(URL.createObjectURL(file));
console.log("Selected Thumbnail:", file);
}
};
@ -823,7 +823,7 @@ export default function FormVideo() {
<div
key={file.name}
className=" flex justify-between border px-3.5 py-3 my-6 rounded-md"
>
>
<div className="flex gap-3 items-center">
{/* <div className="file-preview">{renderFilePreview(file)}</div> */}
<svg
@ -1732,7 +1732,7 @@ export default function FormVideo() {
type="button"
onClick={() => {
const updatedTags = field.value.filter(
(_, i) => i !== index,
(_, i) => i !== index
);
field.onChange(updatedTags);
}}
@ -1825,7 +1825,7 @@ export default function FormVideo() {
{/* <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>

140
components/form/schedule/live-report-detail-form.tsx
View File

@ -75,7 +75,6 @@ interface Detail {
youtubeUrl: string;
needApprovalFrom: number;
uploadedById: number;
statusId?: number;
}
export default function FormDetailLiveReport() {
@ -102,11 +101,6 @@ export default function FormDetailLiveReport() {
const [status, setStatus] = useState("");
const [description, setDescription] = useState("");
const [modalOpen, setModalOpen] = useState(false);
const [uploaderLevelNumber, setUploaderLevelNumber] = useState<number | null>(
null,
);
const isScheduleFromSatker = uploaderLevelNumber === 3;
const {
control,
@ -139,11 +133,6 @@ export default function FormDetailLiveReport() {
const details = response?.data?.data;
setDetail(details);
if (details?.uploaderLevelNumber !== undefined) {
setUploaderLevelNumber(details.uploaderLevelNumber);
}
if (details) {
setDate({
from: parseISO(details.startDate),
@ -187,71 +176,21 @@ export default function FormDetailLiveReport() {
statusId: Number(status),
message: description,
isPublish: status === "2",
// placements: schedulePlacements?.filter((val) => val !== "all")?.join(","),
placements: isScheduleFromSatker
? "satker"
: schedulePlacements?.filter((val) => val !== "all")?.join(","),
placements: schedulePlacements?.filter((val) => val != "all")?.join(","),
};
loading();
const response = await postApprovalSchedule(data);
close();
setModalOpen(false);
if (response?.error) {
error(response?.message || "Gagal menyimpan data");
return;
error(response?.message);
return false;
}
// ✅ update UI lokal (optimistic)
setDetail((prev) =>
prev
? {
...prev,
statusId: Number(status),
}
: prev,
);
Swal.fire({
icon: "success",
title: "Berhasil",
text:
status === "2"
? "Jadwal berhasil disetujui"
: status === "3"
? "Jadwal dikembalikan untuk revisi"
: "Jadwal berhasil ditolak",
confirmButtonText: "OK",
}).then((result) => {
if (result.isConfirmed) {
router.push("/contributor/schedule/live-report");
}
});
initState();
return false;
}
// async function save() {
// const data = {
// scheduleId: Number(id),
// statusId: Number(status),
// message: description,
// isPublish: status === "2",
// placements: schedulePlacements?.filter((val) => val != "all")?.join(","),
// };
// loading();
// const response = await postApprovalSchedule(data);
// close();
// setModalOpen(false);
// if (response?.error) {
// error(response?.message);
// return false;
// }
// initState();
// return false;
// }
const [schedulePlacements, setSchedulePlacements] = useState<string[]>([]);
const setupPlacement = (placement: string, checked: boolean) => {
@ -285,15 +224,6 @@ export default function FormDetailLiveReport() {
setSchedulePlacements(temp);
};
const isCreator = Number(detail?.uploadedById) === Number(userId);
const isApprover =
Number(detail?.needApprovalFrom) === Number(userLevelId) &&
Number(userLevelNumber) < 2;
const isAlreadyProcessed =
detail?.statusId === 2 || detail?.statusId === 3 || detail?.statusId === 4;
return (
<div className="flex flex-col lg:flex-row gap-2">
<Card className="w-full lg:w-9/12">
@ -354,7 +284,7 @@ export default function FormDetailLiveReport() {
variant={"outline"}
className={cn(
"w-[280px] lg:w-[250px] justify-start text-left font-normal px-0 md:px-0 lg:px-4",
!date && "text-muted-foreground",
!date && "text-muted-foreground"
)}
>
<CalendarIcon size={15} className="mr-3" />
@ -564,38 +494,7 @@ export default function FormDetailLiveReport() {
</AccordionItem>
</Accordion>
{(isApprover || isCreator) && !isAlreadyProcessed && (
<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?.needApprovalFrom) == Number(userLevelId) &&
{Number(detail?.needApprovalFrom) == Number(userLevelId) &&
Number(userLevelNumber) < 2 ? (
Number(detail?.uploadedById) == Number(userId) ? (
""
@ -628,15 +527,13 @@ export default function FormDetailLiveReport() {
)
) : (
""
)} */}
)}
</Card>
<Dialog open={modalOpen} onOpenChange={setModalOpen}>
<DialogContent className="overflow-y-auto">
<DialogHeader>
<DialogTitle>
{t("leave-comment", { defaultValue: "Leave Comment" })}
</DialogTitle>
<DialogTitle>{t("leave-comment", { defaultValue: "Leave Comment" })}</DialogTitle>
</DialogHeader>
<div className="flex flex-col gap-1 text-sm">
<p>
@ -647,19 +544,18 @@ export default function FormDetailLiveReport() {
status === "2"
? "text-primary"
: status === "3"
? "text-warning"
: "text-destructive"
? "text-warning"
: "text-destructive"
}
>
{status === "2"
? "Disetujui"
: status === "3"
? "Revisi"
: "Ditolak"}
? "Revisi"
: "Ditolak"}
</span>
</p>
{/* {status === "2" && ( */}
{status === "2" && !isScheduleFromSatker && (
{status === "2" && (
<div className="flex flex-row gap-2">
<div className="flex items-center space-x-2">
<Checkbox
@ -734,15 +630,9 @@ export default function FormDetailLiveReport() {
type="button"
color="primary"
onClick={() => submit()}
// disabled={
// description.length < 1 ||
// (schedulePlacements.length < 1 && status === "2")
// }
disabled={
description.length < 1 ||
(!isScheduleFromSatker &&
schedulePlacements.length < 1 &&
status === "2")
(schedulePlacements.length < 1 && status === "2")
}
>
{t("submit", { defaultValue: "Submit" })}

2
components/form/setting/form-add-iklan-detail.tsx
View File

@ -530,7 +530,7 @@ export function TambahIklanDetail() {
</p>
<Image
src={`https://new.netidhub.com/api/advertisements/viewer/${id}`}
src={`https://netidhub.com/api/advertisements/viewer/${id}`}
alt="Thumbnail Gambar Utama"
className=" rounded-md my-3"
width={300}

4
components/form/setting/form-add-iklan-update.tsx
View File

@ -296,7 +296,7 @@ export function TambahIklanUpdate() {
formMedia.append("file", imageFiles[0]);
} else if (detail?.id) {
const existingFile = await fetchExistingImageAsFile(
`https://new.netidhub.com/api/advertisements/viewer/${detail.id}`,
`https://netidhub.com/api/advertisements/viewer/${detail.id}`,
"existing-image.jpg"
);
formMedia.append("file", existingFile);
@ -631,7 +631,7 @@ export function TambahIklanUpdate() {
))}
<Image
src={`https://new.netidhub.com/api/advertisements/viewer/${id}`}
src={`https://netidhub.com/api/advertisements/viewer/${id}`}
alt="Thumbnail Gambar Utama"
className=" rounded-md my-3"
width={300}

228
components/form/task-ta/task-ta-detail-form.tsx
View File

@ -19,7 +19,6 @@ import {
finishTaskTa,
getAcceptance,
getAcceptanceAssignmentStatus,
getAcceptanceTa,
getAssignmentResponseList,
getMediaUpload,
getMediaUploadTa,
@ -103,7 +102,6 @@ export type taskDetail = {
is_active: string;
isAssignmentAccepted: boolean;
isDone: any;
isAccept?: boolean;
};
interface ListData {
@ -174,16 +172,9 @@ interface UploadResult {
creatorGroup: string;
}
// interface FileUploaded {
// id: number;
// url: string;
// }
interface FileUploaded {
id: number;
url: string;
fileName: string;
fileTypeId: number;
}
export default function FormTaskTaDetail() {
@ -253,6 +244,18 @@ export default function FormTaskTaDetail() {
const [selectedCompetencies, setSelectedCompetencies] = useState<Set<number>>(
new Set()
);
const [totalPage, setTotalPage] = React.useState(1);
const [dataTable, setDataTable] = React.useState<any[]>([]);
const [totalData, setTotalData] = React.useState<number>(1);
const [imageFiles, setImageFiles] = useState<FileWithPreview[]>([]);
const [videoFiles, setVideoFiles] = useState<FileWithPreview[]>([]);
const [textFiles, setTextFiles] = useState<FileWithPreview[]>([]);
const [audioFiles, setAudioFiles] = useState<FileWithPreview[]>([]);
const [isImageUploadFinish, setIsImageUploadFinish] = useState(false);
const [isVideoUploadFinish, setIsVideoUploadFinish] = useState(false);
const [isTextUploadFinish, setIsTextUploadFinish] = useState(false);
const [isAudioUploadFinish, setIsAudioUploadFinish] = useState(false);
const [voiceNoteLink, setVoiceNoteLink] = useState("");
const [statusAcceptance, setStatusAcceptance] = useState();
const [modalType, setModalType] = useState<"terkirim" | "diterima" | "">("");
const [Isloading, setLoading] = useState<boolean>(false);
@ -262,8 +265,10 @@ export default function FormTaskTaDetail() {
const [isRecording, setIsRecording] = useState(false);
const [timer, setTimer] = useState<number>(120);
const [search, setSearch] = React.useState<string>("");
const [wavesurfer, setWavesurfer] = useState<WaveSurfer>();
const [isPlaying, setIsPlaying] = useState(false);
const [imageUploadedFiles, setImageUploadedFiles] = useState<FileUploaded[]>(
[]
);
@ -288,8 +293,6 @@ export default function FormTaskTaDetail() {
const [selectedAudio, setSelectedAudio] = useState<string | null>(
audioUploadedFiles?.[0]?.url || null
);
const [acceptLoading, setAcceptLoading] = useState(false);
const [isAccepted, setIsAccepted] = useState(false);
const [platformTypeVisible, setPlatformTypeVisible] = useState(false);
const [unitSelection, setUnitSelection] = useState({
@ -397,31 +400,6 @@ export default function FormTaskTaDetail() {
fetchListExpert();
}, []);
useEffect(() => {
async function fetchAcceptanceStatus() {
const res = await getAcceptanceAssignmentStatus(id);
// API: /assignment/acceptance?id=103&isAccept=true
const status = res?.data?.data?.isAccept === true;
setIsAccepted(status);
}
fetchAcceptanceStatus();
}, [id]);
const getViewerUrl = (url: string) => {
const ext = url.split(".").pop()?.toLowerCase();
if (ext === "pdf") {
return url; // langsung tampilkan PDF
}
// doc / docx → pakai Google Viewer, lebih compatible
return `https://docs.google.com/viewer?url=${encodeURIComponent(
url
)}&embedded=true`;
};
useEffect(() => {
const fetchExpertsForCompetencies = async () => {
const allExperts: any[] = [];
@ -523,7 +501,7 @@ export default function FormTaskTaDetail() {
const urls = details.urls.map(
(urlObj: any) => urlObj.attachmentUrl || ""
);
setUrlInputs(urls);
setUrlInputs(urls); // Save the URLs to state
}
if (details?.assignedToLevel) {
@ -765,36 +743,28 @@ export default function FormTaskTaDetail() {
}
const handleAcceptAcceptance = async () => {
if (acceptLoading || isAccepted) return;
setAcceptLoading(true);
loading();
console.log("Id user :", userId);
const response = await acceptAssignmentTa(id);
const res = await acceptAssignmentTa(id);
close();
setAcceptLoading(false);
if (res?.error) {
error(res?.message || "Gagal menerima tugas");
return;
if (response?.error) {
error(response?.message);
return false;
}
// ini penting!
setIsAccepted(true);
successCallback();
getDataAcceptance();
return false;
};
async function getListAcceptance(): Promise<void> {
const isAccept = true;
try {
const resSent = await getAcceptanceTa(id, !isAccept);
setSentAcceptance(resSent?.data?.data || []);
const resSent = await getAcceptance(id, !isAccept);
setSentAcceptance(resSent?.data?.data);
const resAccept = await getAcceptanceTa(id, isAccept);
const resAccept = await getAcceptance(id, isAccept);
const acceptanceSort = resAccept?.data?.data?.sort(
(a: AcceptanceData, b: AcceptanceData) =>
@ -802,7 +772,7 @@ export default function FormTaskTaDetail() {
);
console.log("Data sort:", acceptanceSort);
setAcceptAcceptance(acceptanceSort || []);
setAcceptAcceptance(acceptanceSort);
} catch (error) {
console.error("Error fetching acceptance data:", error);
}
@ -981,27 +951,14 @@ export default function FormTaskTaDetail() {
const onReady = (ws: any) => {
setWavesurfer(ws);
ws.on("play", () => setIsPlaying(true));
ws.on("pause", () => setIsPlaying(false));
setIsPlaying(false);
};
// const onReady = (ws: any) => {
// setWavesurfer(ws);
// setIsPlaying(false);
// };
const onPlayPause = () => {
wavesurfer && wavesurfer.playPause();
};
// const handleRemoveFile = (id: number) => {};
const handleRemoveFile = (file: FileUploaded) => {
console.log(file);
// contoh kalau kamu mau hapus dari state:
setVideoUploadedFiles((prev) => prev.filter((f) => f.id !== file.id));
};
const handleRemoveFile = (id: number) => {};
const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
setSearch(e.target.value); // Perbarui state search
@ -1013,10 +970,8 @@ export default function FormTaskTaDetail() {
{detail !== undefined ? (
<div className="px-6 py-6">
<div className="flex flex-col sm:flex-row lg:flex-row justify-between">
<p className="text-lg font-semibold mb-3">
{t("detail-task", { defaultValue: "Detail Task" })}
</p>
<div
<p className="text-lg font-semibold mb-3">{t("detail-task", { defaultValue: "Detail Task" })}</p>
{/* <div
className="flex gap-3"
style={
detail?.createdBy?.id === Number(userId)
@ -1033,8 +988,7 @@ export default function FormTaskTaDetail() {
color="primary"
onClick={() => setModalType("terkirim")}
>
{sentAcceptance?.length}{" "}
{t("sent", { defaultValue: "Sent" })}
{sentAcceptance?.length} {t("sent", { defaultValue: "Sent" })}
</Button>
</DialogTrigger>
@ -1044,17 +998,14 @@ export default function FormTaskTaDetail() {
onClick={() => setModalType("diterima")}
className="ml-3"
>
{acceptAcceptance?.length}{" "}
{t("accepted", { defaultValue: "Accepted" })}
{acceptAcceptance?.length} {t("accepted", { defaultValue: "Accepted" })}
</Button>
</DialogTrigger>
<DialogContent className="sm:max-w-[425px] md:max-w-[500px] lg:max-w-[1500px] overflow-y-auto max-h-[500px]">
<DialogHeader>
<DialogTitle>
{t("assignment-status-details", {
defaultValue: "Assignment Status Details",
})}
{t("assignment-status-details", { defaultValue: "Assignment Status Details" })}
</DialogTitle>
</DialogHeader>
@ -1063,15 +1014,13 @@ export default function FormTaskTaDetail() {
</DialogContent>
</Dialog>
</div>
</div>
</div> */}
</div>
<form>
<div className="gap-5 mb-5">
<div className="space-y-2">
<Label>
{t("unique-code", { defaultValue: "Unique Code" })}
</Label>
<Label>{t("unique-code", { defaultValue: "Unique Code" })}</Label>
<Controller
control={control}
name="uniqueCode"
@ -1123,9 +1072,7 @@ export default function FormTaskTaDetail() {
</RadioGroup>
</div> */}
<div className="mt-5 space-y-2">
<Label>
{t("areas-expertise", { defaultValue: "Areas Expertise" })}
</Label>
<Label>{t("areas-expertise", { defaultValue: "Areas Expertise" })}</Label>
<div className="flex flex-wrap gap-4">
{userCompetencies?.map((item: any) => (
<div className="flex items-center gap-2" key={item.id}>
@ -1224,9 +1171,7 @@ export default function FormTaskTaDetail() {
<div></div>
<div className="mt-6 space-y-2">
<Label>
{t("description", { defaultValue: "Description" })}
</Label>
<Label>{t("description", { defaultValue: "Description" })}</Label>
<Controller
control={control}
name="naration"
@ -1241,15 +1186,11 @@ export default function FormTaskTaDetail() {
)} */}
</div>
<div className=" mt-5 space-y-2">
<Label htmlFor="attachment">
{t("attachment", { defaultValue: "Attachment" })}
</Label>
<Label htmlFor="attachment">{t("attachment", { defaultValue: "Attachment" })}</Label>
<div className="space-y-3">
<div>
{videoUploadedFiles?.length > 0 && (
<Label>
{t("audio-visual", { defaultValue: "Audio Visual" })}
</Label>
<Label>{t("audio-visual", { defaultValue: "Audio Visual" })}</Label>
)}
<div>
{selectedVideo && (
@ -1293,38 +1234,6 @@ export default function FormTaskTaDetail() {
</Button>
</div>
))}
{/* {videoUploadedFiles?.map((file, index) => (
<div
key={index}
className="flex justify-between border px-3.5 py-3 my-6 rounded-md"
>
<div
className="flex gap-3 items-center cursor-pointer"
onClick={() =>
setSelectedVideo(
`https://mediahub.polri.go.id/api/v2/assignment-expert/file/viewer?id=${file.id}`
)
}
>
<VideoIcon />
<div>
<div className="text-sm text-card-foreground">
{file.fileName}
</div>
</div>
</div>
<Button
size="icon"
color="destructive"
variant="outline"
className="border-none rounded-full"
onClick={() => handleRemoveFile(file)}
>
<Icon icon="tabler:x" className="h-5 w-5" />
</Button>
</div>
))} */}
</div>
</div>
<div>
@ -1382,16 +1291,12 @@ export default function FormTaskTaDetail() {
<div>
{selectedText && (
<Card className="mt-2">
{/* <iframe
<iframe
className="w-full h-96 rounded-md"
src={`https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(
selectedText
)}`}
title={"Document"}
/> */}
<iframe
className="w-full h-96"
src={getViewerUrl(selectedText)}
/>
</Card>
)}
@ -1445,7 +1350,7 @@ export default function FormTaskTaDetail() {
onPause={() => setIsPlaying(false)}
/>
</div>
{/* <Button
<Button
size="sm"
type="button"
onClick={onPlayPause}
@ -1465,22 +1370,6 @@ export default function FormTaskTaDetail() {
}
className="h-5 w-5"
/>
</Button> */}
<Button
size="sm"
type="button"
onClick={onPlayPause}
className="flex items-center gap-2 bg-primary text-white p-2 rounded"
>
{isPlaying ? "Pause" : "Play"}
<Icon
icon={
isPlaying
? "carbon:pause-outline"
: "famicons:play-sharp"
}
className="h-5 w-5"
/>
</Button>
</Card>
)}
@ -1544,24 +1433,6 @@ export default function FormTaskTaDetail() {
)}
{isRecording && <p>Recording... {timer} seconds remaining</p>}{" "}
{/* Display remaining time */}
<div className="mt-4">
<Label>Link Url</Label>
{urlInputs.map((url: any, index: any) => (
<Link
key={index}
href={url}
target="_blank"
className="flex items-center gap-2 mt-2"
>
<input
type="url"
className="border rounded p-2 w-full cursor-pointer"
value={url}
placeholder={`Masukkan link berita ${index + 1}`}
/>
</Link>
))}
</div>
</div>
</div>
</div>
@ -1595,7 +1466,7 @@ export default function FormTaskTaDetail() {
</Button>
</div> */}
<div className="">
{/* <Button
<Button
type="button"
className="btn btn-primary lg:mx-3"
style={
@ -1610,21 +1481,6 @@ export default function FormTaskTaDetail() {
onClick={() => handleAcceptAcceptance()}
>
Terima Tugas
</Button> */}
<Button
type="button"
onClick={handleAcceptAcceptance}
disabled={isAccepted || acceptLoading}
className="
btn btn-primary lg:mx-3
disabled:opacity-50 disabled:cursor-not-allowed
"
>
{isAccepted
? "Tugas Sudah Diterima"
: acceptLoading
? "Memproses..."
: "Terima Tugas"}
</Button>
</div>
<div

93
components/form/task-ta/task-ta-edit-form.tsx
View File

@ -58,8 +58,10 @@ import { getListCompetencies } from "@/service/management-user/management-user";
const taskSchema = z.object({
// uniqueCode: z.string().min(1, { message: "Judul diperlukan" }),
title: z.string().optional(),
naration: z.string().optional(),
title: z.string().min(1, { message: "Judul diperlukan" }),
naration: z.string().min(2, {
message: "Narasi Penugasan harus lebih dari 2 karakter.",
}),
});
export type taskDetail = {
@ -583,14 +585,10 @@ export default function FormTaskTaEdit() {
assignedToRole: selectedTarget,
assignmentType: taskType,
assignmentTypeId: type,
// narration: data.naration,
narration: data.naration ?? detail?.narration ?? "",
narration: data.naration,
expertCompetencies: Array.from(selectedCompetencies).join(","),
// title: data.title,
title: data.title ?? detail?.title ?? "",
attachmentUrl: urlInputs
.map((url: any) => url.attachmentUrl || "")
.filter((url: string) => url.trim() !== ""),
title: data.title,
attachmentUrl: links,
};
const response = await createTaskTa(requestData);
@ -804,7 +802,7 @@ export default function FormTaskTaEdit() {
isAudioUploadFinish &&
isTextUploadFinish
) {
successSubmit("/in/contributor/task-ta");
successSubmit("/in/contributor/task");
}
}
@ -843,11 +841,9 @@ export default function FormTaskTaEdit() {
};
const handleLinkChange = (index: number, value: string) => {
setUrlInputs((prev: any) =>
prev.map((url: any, idx: any) =>
idx === index ? { ...url, attachmentUrl: value } : url
)
);
const updatedLinks = [...links];
updatedLinks[index] = value;
setLinks(updatedLinks);
};
const handleAddLink = () => {
@ -886,9 +882,7 @@ export default function FormTaskTaEdit() {
)}
</div>
<div className="mt-5 space-y-2">
<Label>
{t("areas-expertise", { defaultValue: "Areas Expertise" })}
</Label>
<Label>{t("areas-expertise", { defaultValue: "Areas Expertise" })}</Label>
<div className="flex flex-wrap gap-4">
{userCompetencies?.map((item: any) => (
<div className="flex items-center gap-2" key={item.id}>
@ -903,9 +897,7 @@ export default function FormTaskTaEdit() {
</div>
</div>
<div className="mt-5 space-y-2">
<Label>
{t("choose-expert", { defaultValue: "Choose Expert" })}
</Label>
<Label>{t("choose-expert", { defaultValue: "Choose Expert" })}</Label>
<div className="flex flex-wrap gap-4">
<Dialog>
<DialogTrigger asChild>
@ -986,9 +978,7 @@ export default function FormTaskTaEdit() {
</div>
<div className="mt-5 space-y-2">
<Label>
{t("description", { defaultValue: "Description" })}
</Label>
<Label>{t("description", { defaultValue: "Description" })}</Label>
<Controller
control={control}
name="naration"
@ -1006,14 +996,10 @@ export default function FormTaskTaEdit() {
)}
</div>
<div className="space-y-2.5 mt-5">
<Label htmlFor="attachments">
{t("attachment", { defaultValue: "Attachment" })}
</Label>
<Label htmlFor="attachments">{t("attachment", { defaultValue: "Attachment" })}</Label>
<div className="space-y-3">
<div className="space-y-2">
<Label>
{t("audio-visual", { defaultValue: "Audio Visual" })}
</Label>
<Label>{t("audio-visual", { defaultValue: "Audio Visual" })}</Label>
<FileUploader
accept={{
"mp4/*": [],
@ -1202,9 +1188,7 @@ export default function FormTaskTaEdit() {
{isRecording && <p>Recording... {timer} seconds remaining</p>}{" "}
{/* Display remaining time */}
<div className="mt-4 space-y-2">
<h2 className="text-lg font-bold">
{t("news-links", { defaultValue: "News Links" })}
</h2>
<h2 className="text-lg font-bold">{t("news-links", { defaultValue: "News Links" })}</h2>
{urlInputs.map((url: any, index: any) => (
<div
key={url.id}
@ -1221,13 +1205,42 @@ export default function FormTaskTaEdit() {
/>
</div>
))}
<button
type="button"
className="mt-4 bg-green-500 text-white px-4 py-2 rounded"
onClick={handleAddLink}
>
{t("add-links", { defaultValue: "Add Links" })}
</button>
<div className="mt-4 space-y-2">
<Label className="">{t("news-links", { defaultValue: "News Links" })}</Label>
{links.map((link, index) => (
<div
key={index}
className="flex items-center gap-2 mt-2"
>
<Input
type="url"
className="border rounded p-2 w-full"
placeholder={`Masukkan link berita ${index + 1}`}
value={link}
onChange={(e) =>
handleLinkChange(index, e.target.value)
}
/>
{links.length > 1 && (
<button
type="button"
className="bg-red-500 text-white px-3 py-1 rounded"
onClick={() => handleRemoveRow(index)}
>
<Trash2 className="h-4 w-4" />
</button>
)}
</div>
))}
<Button
type="button"
className="mt-2 bg-blue-500 text-white px-4 py-2 rounded"
onClick={handleAddRow}
size="sm"
>
{t("add-links", { defaultValue: "Add Links" })}
</Button>
</div>
</div>
</div>
</div>

787
components/form/task-ta/task-ta-form.tsx
View File

@ -43,7 +43,7 @@ import { getCsrfToken } from "@/service/auth";
import { loading } from "@/lib/swal";
import { useTranslations } from "next-intl";
import dynamic from "next/dynamic";
import { cn, getCookiesDecrypt } from "@/lib/utils";
import { cn } from "@/lib/utils";
import {
Popover,
PopoverContent,
@ -98,7 +98,7 @@ const CustomEditor = dynamic(
() => {
return import("@/components/editor/custom-editor");
},
{ ssr: false },
{ ssr: false }
);
export default function FormTaskTa() {
@ -136,7 +136,7 @@ export default function FormTaskTa() {
const [userLevels, setUserLevels] = useState<any>();
const [userCompetencies, setUserCompetencies] = useState<any[]>([]);
const [selectedCompetencies, setSelectedCompetencies] = useState<Set<number>>(
new Set(),
new Set()
);
const [listExpert, setListExpert] = useState<any[]>([]);
const [checkedLevels, setCheckedLevels] = useState<Set<number>>(new Set());
@ -181,33 +181,6 @@ export default function FormTaskTa() {
mode: "all",
});
const [profile, setProfile] = useState<any>(null);
const userLevelId = Number(getCookiesDecrypt("ulie"));
const roleId = Number(getCookiesDecrypt("urie"));
const userId = Number(getCookiesDecrypt("uie"));
const MABES_LEVEL_ID = 216; // userLevelId Mabes Polri
const APPROVER_ROLE_ID = 3; // roleId Approver
const isMabes = userLevelId === MABES_LEVEL_ID;
const isApprover = roleId === APPROVER_ROLE_ID;
const isMabesApprover =
userLevelId === MABES_LEVEL_ID && roleId === APPROVER_ROLE_ID;
const shouldHideExpert = isMabes && isApprover;
useEffect(() => {
async function fetchUserLevel() {
try {
const res = await getUserLevelForAssignments();
setProfile(res?.data?.data);
} catch (e) {
console.error("Failed fetch user level", e);
}
}
fetchUserLevel();
}, []);
useEffect(() => {
getDataAdditional();
}, []);
@ -245,7 +218,7 @@ export default function FormTaskTa() {
}
const uniqueExperts = Array.from(
new Map(allExperts.map((e) => [e.id, e])).values(),
new Map(allExperts.map((e) => [e.id, e])).values()
);
setListExpert(uniqueExperts);
@ -287,216 +260,67 @@ export default function FormTaskTa() {
});
};
// const save = async (data: TaskSchema) => {
// const cleanedLinks = links
// .map((link) => link.trim())
// .filter((link) => link !== "" && link.startsWith("http"));
// const requestData: {
// id?: number;
// title: string;
// assignedToUsers: any;
// assignmentTypeId: string;
// narration: string;
// assignmentType: string;
// expertCompetencies: string;
// attachmentUrl: string[];
// } = {
// ...data,
// assignedToUsers: handleExpertChange(),
// assignmentType: taskType,
// assignmentTypeId: type,
// narration: data.narration,
// expertCompetencies: Array.from(selectedCompetencies).join(","),
// title: data.title,
// attachmentUrl: cleanedLinks,
// };
// const response = await createTaskTa(requestData);
// localStorage.setItem("TA_UPLOAD_IN_PROGRESS", "true");
// console.log("Form Data Submitted:", requestData);
// console.log("response", response);
// const id = response?.data?.data.id;
// loading();
// if (imageFiles?.length == 0) {
// setIsImageUploadFinish(true);
// }
// const allUploads: Promise<any>[] = [];
// imageFiles.forEach((item, index) => {
// allUploads.push(uploadResumableFile(index, String(id), item, "1", "0"));
// });
// videoFiles.forEach((item, index) => {
// allUploads.push(uploadResumableFile(index, String(id), item, "2", "0"));
// });
// textFiles.forEach((item, index) => {
// allUploads.push(uploadResumableFile(index, String(id), item, "3", "0"));
// });
// audioFiles.forEach((item, index) => {
// allUploads.push(uploadResumableFile(index, String(id), item, "4", "0"));
// });
// // ⬅ WAJIB
// await Promise.all(allUploads);
// localStorage.removeItem("TA_UPLOAD_IN_PROGRESS");
// // imageFiles?.map(async (item: any, index: number) => {
// // await uploadResumableFile(index, String(id), item, "1", "0");
// // });
// // if (videoFiles?.length == 0) {
// // setIsVideoUploadFinish(true);
// // }
// // videoFiles?.map(async (item: any, index: number) => {
// // await uploadResumableFile(index, String(id), item, "2", "0");
// // });
// // if (textFiles?.length == 0) {
// // setIsTextUploadFinish(true);
// // }
// // textFiles?.map(async (item: any, index: number) => {
// // await uploadResumableFile(index, String(id), item, "3", "0");
// // });
// // if (audioFiles?.length == 0) {
// // setIsAudioUploadFinish(true);
// // }
// // audioFiles.map(async (item: FileWithPreview, index: number) => {
// // await uploadResumableFile(
// // index,
// // String(id),
// // item, // Use .file to access the actual File object
// // "4",
// // "0" // Optional: Replace with actual duration if available
// // );
// // });
// };
// const save = async (data: TaskSchema) => {
// const cleanedLinks = links
// .map((link) => link.trim())
// .filter((link) => link.startsWith("http"));
// const requestData = {
// ...data,
// // assignedToUsers: handleExpertChange(),
// assignedToUsers: isMabesApprover ? "464" : handleExpertChange(),
// assignmentType: taskType,
// assignmentTypeId: type,
// expertCompetencies: Array.from(selectedCompetencies).join(","),
// attachmentUrl: cleanedLinks,
// };
// console.log("FINAL ASSIGNED TO:", {
// isMabesApprover,
// assignedToUsers: isMabesApprover
// ? String(roleId)
// : handleExpertChange(),
// });
// const response = await createTaskTa(requestData);
// const id = String(response?.data?.data.id);
// // Set block table TA
// localStorage.setItem("TA_UPLOAD_IN_PROGRESS", "true");
// loading(); // SHOW SWAL LOADING
// // Kumpulkan semua upload
// const allUploads: Promise<any>[] = [];
// imageFiles.forEach((item, idx) =>
// allUploads.push(uploadResumableFile(idx, id, item, "1", "0"))
// );
// videoFiles.forEach((item, idx) =>
// allUploads.push(uploadResumableFile(idx, id, item, "2", "0"))
// );
// textFiles.forEach((item, idx) =>
// allUploads.push(uploadResumableFile(idx, id, item, "3", "0"))
// );
// audioFiles.forEach((item, idx) =>
// allUploads.push(uploadResumableFile(idx, id, item, "4", "0"))
// );
// // Tunggu upload selesai
// await Promise.all(allUploads);
// // Hapus flag
// localStorage.removeItem("TA_UPLOAD_IN_PROGRESS");
// // Close loading + redirect
// successSubmit("/in/contributor/task-ta");
// };
const save = async (data: TaskSchema) => {
try {
loading();
const requestData: {
id?: number;
title: string;
assignedToUsers: any;
assignmentTypeId: string;
narration: string;
assignmentType: string;
expertCompetencies: string;
// attachmentUrl: string[];
} = {
...data,
assignedToUsers: handleExpertChange(),
assignmentType: taskType,
assignmentTypeId: type,
narration: data.narration,
expertCompetencies: Array.from(selectedCompetencies).join(","),
title: data.title,
// attachmentUrl: links,
};
const cleanedLinks = links
.map((link) => link.trim())
.filter((link) => link.startsWith("http"));
const response = await createTaskTa(requestData);
const requestData = {
...data,
// assignedToUsers: isMabesApprover ? "464" : handleExpertChange(),
assignedToUsers: isMabesApprover ? "464,8258" : handleExpertChange(),
assignmentType: taskType,
assignmentTypeId: type,
expertCompetencies: Array.from(selectedCompetencies).join(","),
attachmentUrl: cleanedLinks,
};
console.log("Form Data Submitted:", requestData);
console.log("response", response);
const response = await createTaskTa(requestData);
if (!response?.data?.data?.id) {
throw new Error("Gagal membuat task");
}
const assignmentId = String(response.data.data.id);
const uploads: Promise<any>[] = [];
imageFiles.forEach((file, i) =>
uploads.push(uploadResumableFile(i, assignmentId, file, "1", "0")),
);
videoFiles.forEach((file, i) =>
uploads.push(uploadResumableFile(i, assignmentId, file, "2", "0")),
);
textFiles.forEach((file, i) =>
uploads.push(uploadResumableFile(i, assignmentId, file, "3", "0")),
);
audioFiles.forEach((file, i) =>
uploads.push(uploadResumableFile(i, assignmentId, file, "4", "0")),
);
await Promise.all(uploads);
successSubmit("/in/contributor/task-ta");
} catch (err: any) {
console.error("SUBMIT ERROR:", err);
Swal.fire({
icon: "error",
title: "Gagal",
text:
err?.response?.data?.message ||
err?.message ||
"Terjadi kesalahan, data tidak tersimpan",
});
const id = response?.data?.data.id;
loading();
if (imageFiles?.length == 0) {
setIsImageUploadFinish(true);
}
imageFiles?.map(async (item: any, index: number) => {
await uploadResumableFile(index, String(id), item, "1", "0");
});
if (videoFiles?.length == 0) {
setIsVideoUploadFinish(true);
}
videoFiles?.map(async (item: any, index: number) => {
await uploadResumableFile(index, String(id), item, "2", "0");
});
if (textFiles?.length == 0) {
setIsTextUploadFinish(true);
}
textFiles?.map(async (item: any, index: number) => {
await uploadResumableFile(index, String(id), item, "3", "0");
});
if (audioFiles?.length == 0) {
setIsAudioUploadFinish(true);
}
audioFiles.map(async (item: FileWithPreview, index: number) => {
await uploadResumableFile(
index,
String(id),
item, // Use .file to access the actual File object
"4",
"0" // Optional: Replace with actual duration if available
);
});
};
const onSubmit = (data: TaskSchema) => {
@ -557,7 +381,7 @@ export default function FormTaskTa() {
// Convert Blob to File and add preview
const fileWithPreview: FileWithPreview = Object.assign(
new File([blob], "voiceNote.webm", { type: "audio/webm" }),
{ preview: url },
{ preview: url }
);
// Add to state
@ -569,162 +393,75 @@ export default function FormTaskTa() {
setAudioFiles((prev) => prev.filter((_, idx) => idx !== index));
};
// async function uploadResumableFile(
// idx: number,
// id: string,
// file: any,
// fileTypeId: string,
// duration: string
// ) {
// console.log("Tus Upload : ", idx, id, file, fileTypeId, duration);
// const resCsrf = await getCsrfToken();
// const csrfToken = resCsrf?.data?.token;
// console.log("CSRF TOKEN : ", csrfToken);
// const headers = {
// "X-XSRF-TOKEN": csrfToken,
// };
// const upload = new Upload(file, {
// endpoint: `${process.env.NEXT_PUBLIC_API}/assignment-expert/file/upload`,
// headers: headers,
// retryDelays: [0, 3000, 6000, 12_000, 24_000],
// chunkSize: 20_000,
// metadata: {
// assignmentId: id,
// filename: file.name,
// contentType: file.type,
// fileTypeId: fileTypeId,
// duration,
// },
// onBeforeRequest: function (req) {
// var xhr = req.getUnderlyingObject();
// xhr.withCredentials = true;
// },
// onError: async (e: any) => {
// console.log("Error upload :", e);
// error(e);
// },
// onChunkComplete: (
// chunkSize: any,
// bytesAccepted: any,
// bytesTotal: any
// ) => {
// // const uploadPersen = Math.floor((bytesAccepted / bytesTotal) * 100);
// // progressInfo[idx].percentage = uploadPersen;
// // counterUpdateProgress++;
// // console.log(counterUpdateProgress);
// // setProgressList(progressInfo);
// // setCounterProgress(counterUpdateProgress);
// },
// onSuccess: async () => {
// // uploadPersen = 100;
// // progressInfo[idx].percentage = 100;
// // counterUpdateProgress++;
// // setCounterProgress(counterUpdateProgress);
// successTodo();
// if (fileTypeId == "1") {
// setIsImageUploadFinish(true);
// } else if (fileTypeId == "2") {
// setIsVideoUploadFinish(true);
// }
// if (fileTypeId == "3") {
// setIsTextUploadFinish(true);
// }
// if (fileTypeId == "4") {
// setIsAudioUploadFinish(true);
// }
// },
// });
// upload.start();
// }
// function uploadResumableFile(
// idx: number,
// id: string,
// file: any,
// fileTypeId: string,
// duration: string
// ) {
// return new Promise(async (resolve, reject) => {
// const resCsrf = await getCsrfToken();
// const csrfToken = resCsrf?.data?.token;
// const upload = new Upload(file, {
// endpoint: `${process.env.NEXT_PUBLIC_API}/assignment-expert/file/upload`,
// headers: { "X-XSRF-TOKEN": csrfToken },
// retryDelays: [0, 3000, 6000, 12000],
// chunkSize: 20000,
// metadata: {
// assignmentId: id,
// filename: file.name,
// contentType: file.type,
// fileTypeId,
// duration,
// },
// onBeforeRequest(req) {
// req.getUnderlyingObject().withCredentials = true;
// },
// onError(err) {
// console.error("Upload error:", err);
// reject(err);
// },
// onSuccess() {
// console.log("Upload selesai:", file.name);
// resolve(true);
// },
// });
// upload.start();
// });
// }
function uploadResumableFile(
async function uploadResumableFile(
idx: number,
id: string,
file: File,
file: any,
fileTypeId: string,
duration: string,
duration: string
) {
return new Promise(async (resolve, reject) => {
try {
const resCsrf = await getCsrfToken();
const csrfToken = resCsrf?.data?.token;
console.log("Tus Upload : ", idx, id, file, fileTypeId, duration);
const upload = new Upload(file, {
endpoint: `${process.env.NEXT_PUBLIC_API}/assignment-expert/file/upload`,
headers: { "X-XSRF-TOKEN": csrfToken },
retryDelays: [0, 3000, 6000],
chunkSize: 20000,
metadata: {
assignmentId: id,
filename: file.name,
contentType: file.type,
fileTypeId,
duration,
},
const resCsrf = await getCsrfToken();
const csrfToken = resCsrf?.data?.token;
console.log("CSRF TOKEN : ", csrfToken);
const headers = {
"X-XSRF-TOKEN": csrfToken,
};
onBeforeRequest(req) {
req.getUnderlyingObject().withCredentials = true;
},
onError(error) {
reject(error);
},
onSuccess() {
resolve(true);
},
});
upload.start();
} catch (err) {
reject(err);
}
const upload = new Upload(file, {
endpoint: `${process.env.NEXT_PUBLIC_API}/assignment-expert/file/upload`,
headers: headers,
retryDelays: [0, 3000, 6000, 12_000, 24_000],
chunkSize: 20_000,
metadata: {
assignmentId: id,
filename: file.name,
contentType: file.type,
fileTypeId: fileTypeId,
duration,
},
onBeforeRequest: function (req) {
var xhr = req.getUnderlyingObject();
xhr.withCredentials = true;
},
onError: async (e: any) => {
console.log("Error upload :", e);
error(e);
},
onChunkComplete: (
chunkSize: any,
bytesAccepted: any,
bytesTotal: any
) => {
// const uploadPersen = Math.floor((bytesAccepted / bytesTotal) * 100);
// progressInfo[idx].percentage = uploadPersen;
// counterUpdateProgress++;
// console.log(counterUpdateProgress);
// setProgressList(progressInfo);
// setCounterProgress(counterUpdateProgress);
},
onSuccess: async () => {
// uploadPersen = 100;
// progressInfo[idx].percentage = 100;
// counterUpdateProgress++;
// setCounterProgress(counterUpdateProgress);
successTodo();
if (fileTypeId == "1") {
setIsImageUploadFinish(true);
} else if (fileTypeId == "2") {
setIsVideoUploadFinish(true);
}
if (fileTypeId == "3") {
setIsTextUploadFinish(true);
}
if (fileTypeId == "4") {
setIsAudioUploadFinish(true);
}
},
});
upload.start();
}
useEffect(() => {
@ -777,9 +514,7 @@ export default function FormTaskTa() {
return (
<Card>
<div className="px-6 py-6">
<p className="text-lg font-semibold mb-3">
{t("form-task", { defaultValue: "Form Task" })}
</p>
<p className="text-lg font-semibold mb-3">{t("form-task", { defaultValue: "Form Task" })}</p>
<form onSubmit={handleSubmit(onSubmit)}>
<div className="gap-5 mb-5">
@ -805,36 +540,17 @@ export default function FormTaskTa() {
</div>
<div className="mt-5 space-y-2">
<Label>
{t("assigment-type", { defaultValue: "Assigment Type" })}{" "}
</Label>
<Label>{t("assigment-type", { defaultValue: "Assigment Type" })} </Label>
<RadioGroup
value={taskType}
onValueChange={(value) => setTaskType(String(value))}
className="flex flex-wrap gap-3"
>
<div className="flex items-center gap-2">
<RadioGroupItem value="atensi-khusus" id="khusus" />
<Label htmlFor="khusus">Atensi Khusus</Label>
</div>
{!isMabes && (
<div className="flex items-center gap-2">
<RadioGroupItem value="tugas-harian" id="harian" />
<Label htmlFor="harian">Tugas Harian</Label>
</div>
)}
</RadioGroup>
{/* <RadioGroup
value={taskType}
onValueChange={(value) => setTaskType(String(value))}
className="flex flex-wrap gap-3"
>
<RadioGroupItem value="atensi-khusus" id="khusus" />
<Label htmlFor="atensi-khusus">Atensi Khusus</Label>
<RadioGroupItem value="tugas-harian" id="harian" />
<Label htmlFor="tugas-harian">Tugas Harian</Label>
</RadioGroup> */}
{/* <RadioGroupItem value="tugas-harian" id="harian" />
<Label htmlFor="tugas-harian">Tugas Harian</Label> */}
</RadioGroup>
</div>
<div className="flex flex-col space-y-2 mt-5">
<Label className="mr-3 mb-1">Tanggal</Label>
@ -846,7 +562,7 @@ export default function FormTaskTa() {
variant={"outline"}
className={cn(
"w-[280px] lg:w-[250px] justify-start text-left font-normal border border-slate-300 px-0 md:px-0 lg:px-4",
!date && "text-muted-foreground",
!date && "text-muted-foreground"
)}
>
<CalendarIcon size={15} className="mr-3" />
@ -876,109 +592,97 @@ export default function FormTaskTa() {
</PopoverContent>
</Popover>
</div>
{!isMabesApprover && (
<div className="mt-5 space-y-2">
<Label>
{t("areas-expertise", { defaultValue: "Areas Expertise" })}
</Label>
<div className="flex flex-wrap gap-4">
{userCompetencies?.map((item: any) => (
<div className="flex items-center gap-2" key={item.id}>
<Checkbox
id={`comp-${item.id}`}
checked={selectedCompetencies.has(item.id)}
onCheckedChange={() => handleCompetencyChange(item.id)}
/>
<Label htmlFor={`comp-${item.id}`}>{item.name}</Label>
</div>
))}
</div>
</div>
)}
{!isMabesApprover && (
<div className="mt-5 space-y-2">
<Label>
{t("choose-expert", { defaultValue: "Choose Expert" })}
</Label>
<div className="flex flex-wrap gap-4">
<Dialog>
<DialogTrigger asChild>
<Button variant="soft" size="sm" color="primary">
[{"Pilih Tenaga Ahli"}]
</Button>
</DialogTrigger>
<DialogContent className="sm:max-w-[425px] md:max-w-[500px] lg:max-w-[1500px]">
<DialogHeader>
<DialogTitle>Daftar Tenaga Ahli</DialogTitle>
</DialogHeader>
<div className="grid grid-cols-2 gap-2 max-h-[400px] overflow-y-auto">
{listExpert?.map((expert: any) => (
<div key={expert.id} className="border p-2">
<Label className="flex items-center">
<Checkbox
checked={checkedLevels.has(expert.id)}
onCheckedChange={() =>
handleCheckboxChange(expert.id)
}
className="mr-3"
/>
<div className="flex flex-col gap-2">
<div className="font-bold">
{expert.fullname}
</div>
<div className="italic">
({expert.username})
</div>
</div>
</Label>
</div>
))}
</div>
</DialogContent>
</Dialog>
</div>
{checkedLevels.size > 0 && (
<div className="mt-3">
<Label className="text-sm text-gray-600 mb-2 block">
Tenaga Ahli Terpilih ({checkedLevels.size})
</Label>
<div className="flex flex-wrap gap-2">
{Array.from(checkedLevels).map((expertId) => {
const expert = listExpert?.find(
(exp: any) => exp.id === expertId,
);
return expert ? (
<div
key={expert.id}
className="inline-flex items-center gap-2 bg-blue-100 text-blue-800 text-sm font-medium px-3 py-1.5 rounded-full border border-blue-200"
>
<span>{expert.fullname}</span>
<button
type="button"
onClick={() => handleCheckboxChange(expert.id)}
className="ml-1 text-blue-600 hover:text-blue-800 hover:bg-blue-200 rounded-full p-0.5 transition-colors"
title="Remove expert"
>
<svg
className="w-3 h-3"
fill="currentColor"
viewBox="0 0 20 20"
>
<path
fillRule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clipRule="evenodd"
/>
</svg>
</button>
</div>
) : null;
})}
</div>
<div className="mt-5 space-y-2">
<Label>{t("areas-expertise", { defaultValue: "Areas Expertise" })}</Label>
<div className="flex flex-wrap gap-4">
{userCompetencies?.map((item: any) => (
<div className="flex items-center gap-2" key={item.id}>
<Checkbox
id={`comp-${item.id}`}
checked={selectedCompetencies.has(item.id)}
onCheckedChange={() => handleCompetencyChange(item.id)}
/>
<Label htmlFor={`comp-${item.id}`}>{item.name}</Label>
</div>
)}
))}
</div>
)}
</div>
<div className="mt-5 space-y-2">
<Label>{t("choose-expert", { defaultValue: "Choose Expert" })}</Label>
<div className="flex flex-wrap gap-4">
<Dialog>
<DialogTrigger asChild>
<Button variant="soft" size="sm" color="primary">
[{"Pilih Tenaga Ahli"}]
</Button>
</DialogTrigger>
<DialogContent className="sm:max-w-[425px] md:max-w-[500px] lg:max-w-[1500px]">
<DialogHeader>
<DialogTitle>Daftar Tenaga Ahli</DialogTitle>
</DialogHeader>
<div className="grid grid-cols-2 gap-2 max-h-[400px] overflow-y-auto">
{listExpert?.map((expert: any) => (
<div key={expert.id} className="border p-2">
<Label className="flex items-center">
<Checkbox
checked={checkedLevels.has(expert.id)}
onCheckedChange={() =>
handleCheckboxChange(expert.id)
}
className="mr-3"
/>
<div className="flex flex-col gap-2">
<div className="font-bold">{expert.fullname}</div>
<div className="italic">({expert.username})</div>
</div>
</Label>
</div>
))}
</div>
</DialogContent>
</Dialog>
</div>
{checkedLevels.size > 0 && (
<div className="mt-3">
<Label className="text-sm text-gray-600 mb-2 block">
Tenaga Ahli Terpilih ({checkedLevels.size})
</Label>
<div className="flex flex-wrap gap-2">
{Array.from(checkedLevels).map((expertId) => {
const expert = listExpert?.find(
(exp: any) => exp.id === expertId
);
return expert ? (
<div
key={expert.id}
className="inline-flex items-center gap-2 bg-blue-100 text-blue-800 text-sm font-medium px-3 py-1.5 rounded-full border border-blue-200"
>
<span>{expert.fullname}</span>
<button
type="button"
onClick={() => handleCheckboxChange(expert.id)}
className="ml-1 text-blue-600 hover:text-blue-800 hover:bg-blue-200 rounded-full p-0.5 transition-colors"
title="Remove expert"
>
<svg
className="w-3 h-3"
fill="currentColor"
viewBox="0 0 20 20"
>
<path
fillRule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clipRule="evenodd"
/>
</svg>
</button>
</div>
) : null;
})}
</div>
</div>
)}
</div>
<div className="mt-5 space-y-2">
<Label>{t("description", { defaultValue: "Description" })}</Label>
<Controller
@ -995,23 +699,11 @@ export default function FormTaskTa() {
)}
</div>
<div className="space-y-2.5 mt-5">
<Label htmlFor="attachments">
{t("attachment", { defaultValue: "Attachment" })}
</Label>
<Label htmlFor="attachments">{t("attachment", { defaultValue: "Attachment" })}</Label>
<div className="space-y-3">
<div>
<Label>
{t("audio-visual", { defaultValue: "Audio Visual" })}
</Label>
<Label>{t("audio-visual", { defaultValue: "Audio Visual" })}</Label>
<FileUploader
accept={{
"video/*": [],
}}
maxSize={100}
label="Upload file dengan format video."
onDrop={(files) => setVideoFiles(files)}
/>
{/* <FileUploader
accept={{
"mp4/*": [],
"mov/*": [],
@ -1019,7 +711,7 @@ export default function FormTaskTa() {
maxSize={100}
label="Upload file dengan format .mp4 atau .mov."
onDrop={(files) => setVideoFiles(files)}
/> */}
/>
</div>
<div className="space-y-2">
<Label>{t("image", { defaultValue: "Image" })}</Label>
@ -1035,21 +727,13 @@ export default function FormTaskTa() {
<div className="space-y-2">
<Label>{t("text", { defaultValue: "Text" })}</Label>
<FileUploader
accept={{
"application/pdf": [],
}}
maxSize={100}
label="Upload file PDF."
onDrop={(files) => setTextFiles(files)}
/>
{/* <FileUploader
accept={{
"pdf/*": [],
}}
maxSize={100}
label="Upload file dengan format .pdf."
onDrop={(files) => setTextFiles(files)}
/> */}
/>
</div>
<div className="space-y-2">
<Label>{t("audio", { defaultValue: "Audio" })}</Label>
@ -1060,20 +744,9 @@ export default function FormTaskTa() {
echoCancellation: true,
}}
downloadOnSavePress={true}
downloadFileExtension="mp3"
downloadFileExtension="webm"
/>
<FileUploader
accept={{
"audio/*": [],
}}
maxSize={100}
label="Upload file audio (mp3, wav, webm)."
onDrop={(files) =>
setAudioFiles((prev) => [...prev, ...files])
}
className="mt-2"
/>
{/* <FileUploader
accept={{
"mp3/*": [],
"wav/*": [],
@ -1084,7 +757,7 @@ export default function FormTaskTa() {
setAudioFiles((prev) => [...prev, ...files])
}
className="mt-2"
/> */}
/>
</div>
{audioFiles?.map((audio: any, idx: any) => (
<div
@ -1102,19 +775,15 @@ export default function FormTaskTa() {
</Button>
</div>
))}
{isRecording && <p>Recording... {timer} seconds remaining</p>}{" "}
{/* {isRecording && <p>Recording... {timer} seconds remaining</p>}{" "}
<div className="mt-4 space-y-2">
<Label className="">
{t("news-links", { defaultValue: "News Links" })}
</Label>
<Label className="">{t("news-links", { defaultValue: "News Links" })}</Label>
{links.map((link, index) => (
<div key={index} className="flex items-center gap-2 mt-2">
<Input
type="url"
className="border rounded p-2 w-full"
placeholder={`Masukkan link berita ${
index + 1
} | Contoh: https://www.detik.com`}
placeholder={`Masukkan link berita ${index + 1}`}
value={link}
onChange={(e) =>
handleLinkChange(index, e.target.value)
@ -1139,7 +808,7 @@ export default function FormTaskTa() {
>
{t("add-links", { defaultValue: "Add Links" })}
</Button>
</div>
</div> */}
</div>
</div>
</div>

421
components/form/task-ta/task-ta-upload-form.tsx
View File

@ -87,7 +87,9 @@ const CustomEditor = dynamic(
export default function FormTaskTaNew() {
const MySwal = withReactContent(Swal);
const router = useRouter();
const editor = useRef(null);
type ImageSchema = z.infer<typeof imageSchema>;
const t = useTranslations("Form");
const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
const taskId = Cookies.get("taskId");
@ -95,14 +97,33 @@ export default function FormTaskTaNew() {
const scheduleType = Cookies.get("scheduleType");
const roleId = getCookiesDecrypt("urie");
const { id } = useParams() as { id: string };
console.log(id);
const [categories, setCategories] = useState<Category[]>([]);
const [selectedCategory, setSelectedCategory] = useState<any>();
const [tags, setTags] = useState<any[]>([]);
const [thumbnail, setThumbnail] = useState<File | null>(null);
const [preview, setPreview] = useState<string | null>(null);
const [selectedLanguage, setSelectedLanguage] = useState("");
const [selectedSEO, setSelectedSEO] = useState<string>("");
const [title, setTitle] = useState<string>("");
const [selectedAdvConfig, setSelectedAdvConfig] = useState<string>("");
const [editingArticleId, setEditingArticleId] = useState<string | null>(null);
const [isLoading, setIsLoading] = useState<boolean>(false);
const [isLoadingData, setIsLoadingData] = useState<boolean>(false);
const [articleIds, setArticleIds] = useState<string[]>([]);
const [isGeneratedArticle, setIsGeneratedArticle] = useState(false);
const [articleBody, setArticleBody] = useState<string>("");
const [selectedArticleId, setSelectedArticleId] = useState<string | null>(
null
);
const [selectedMainKeyword, setSelectedMainKeyword] = useState("");
const [selectedWritingStyle, setSelectedWritingStyle] = useState("");
const [selectedSize, setSelectedSize] = useState("");
const [detailData, setDetailData] = useState<any>(null);
const [articleImages, setArticleImages] = useState<string[]>([]);
const [isSwitchOn, setIsSwitchOn] = useState<boolean>(false);
const inputRef = useRef<HTMLInputElement>(null);
const [imageFiles, setImageFiles] = useState<FileWithPreview[]>([]);
@ -118,7 +139,26 @@ export default function FormTaskTaNew() {
const [links, setLinks] = useState<string[]>([""]);
const [timer, setTimer] = useState<number>(120);
const [fileTypeId, setFileTypeId] = useState<string>("");
const [content, setContent] = useState("");
const [selectedTarget, setSelectedTarget] = useState("");
const [unitSelection, setUnitSelection] = useState({
allUnit: false,
mabes: false,
polda: false,
polres: false,
});
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 [files, setFiles] = useState<FileWithPreview[]>([]);
const [filesTemp, setFilesTemp] = useState<File[]>([]);
const [publishedFor, setPublishedFor] = useState<string[]>([]);
const [detail, setDetail] = useState<taskDetail>();
const [refresh] = useState(false);
@ -138,7 +178,7 @@ export default function FormTaskTaNew() {
});
const imageSchema = z.object({
title: z.string().optional(),
title: z.string().min(1, { message: "Judul diperlukan" }),
description: z
.string()
.min(2, { message: "Narasi Penugasan harus lebih dari 2 karakter." })
@ -296,109 +336,17 @@ export default function FormTaskTaNew() {
initState();
}, [id, refresh]);
// const save = async (data: ImageSchema) => {
// loading();
// const finalTags = tags.join(", ");
// const finalTitle = data.title || detail?.title || "";
// const finalDescription = articleBody || data.description;
// if (!finalDescription.trim()) {
// MySwal.fire("Error", "Deskripsi tidak boleh kosong.", "error");
// return;
// }
// let requestData: {
// assignmentExpertId: any;
// 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; // ✅ Tambahkan properti ini
// } = {
// ...data,
// assignmentExpertId: detail?.id || null,
// title: finalTitle,
// description: finalDescription,
// htmlDescription: finalDescription,
// fileTypeId: fileTypeId,
// categoryId: "235",
// subCategoryId: "171",
// uploadedBy: "2b7c8d83-d298-4b19-9f74-b07924506b58",
// statusId: "1",
// publishedFor: "7",
// creatorName: "Penugasan-Ta",
// tags: "penugasan-Ta",
// isYoutube: false,
// isInternationalMedia: false,
// };
// let id = Cookies.get("idCreate");
// if (scheduleId !== undefined) {
// requestData.attachFromScheduleId = Number(scheduleId); // ✅ Tambahkan nilai ini
// }
// if (id == undefined) {
// const response = await createMedia(requestData);
// console.log("Form Data Submitted:", requestData);
// Cookies.set("idCreate", response?.data?.data, { expires: 1 });
// id = response?.data?.data;
// // Upload Thumbnail
// loading();
// if (imageFiles?.length == 0) {
// setIsImageUploadFinish(true);
// }
// imageFiles?.map(async (item: any, index: number) => {
// await uploadResumableFile(index, String(id), item, "1", "0");
// });
// if (videoFiles?.length == 0) {
// setIsVideoUploadFinish(true);
// }
// videoFiles?.map(async (item: any, index: number) => {
// await uploadResumableFile(index, String(id), item, "2", "0");
// });
// if (textFiles?.length == 0) {
// setIsTextUploadFinish(true);
// }
// textFiles?.map(async (item: any, index: number) => {
// await uploadResumableFile(index, String(id), item, "3", "0");
// });
// if (audioFiles?.length == 0) {
// setIsAudioUploadFinish(true);
// }
// audioFiles.map(async (item: FileWithPreview, index: number) => {
// await uploadResumableFile(
// index,
// String(id),
// item, // Use .file to access the actual File object
// "4",
// "0" // Optional: Replace with actual duration if available
// );
// });
// }
// };
const save = async (data: ImageSchema) => {
loading();
const finalTags = tags.join(", ");
const finalTitle = data.title || detail?.title || "";
const finalTitle = isSwitchOn ? title : data.title;
const finalDescription = articleBody || data.description;
if (!finalDescription.trim()) {
MySwal.fire("Error", "Deskripsi tidak boleh kosong.", "error");
return;
}
let requestData: {
assignmentExpertId: any;
title: string;
@ -414,53 +362,74 @@ export default function FormTaskTaNew() {
tags: string;
isYoutube: boolean;
isInternationalMedia: boolean;
attachFromScheduleId?: number;
attachFromScheduleId?: number; // ✅ Tambahkan properti ini
} = {
...data,
assignmentExpertId: detail?.id || null,
title: finalTitle,
description: finalDescription,
htmlDescription: finalDescription,
fileTypeId: fileTypeId,
categoryId: "171",
subCategoryId: "171",
categoryId: "235",
subCategoryId: selectedCategory,
uploadedBy: "2b7c8d83-d298-4b19-9f74-b07924506b58",
statusId: "1",
publishedFor: "7",
publishedFor: publishedFor.join(","),
creatorName: "Penugasan-Ta",
tags: "penugasan-Ta",
isYoutube: false,
isInternationalMedia: false,
};
let id = Cookies.get("idCreate");
if (scheduleId !== undefined) {
requestData.attachFromScheduleId = Number(scheduleId);
requestData.attachFromScheduleId = Number(scheduleId); // ✅ Tambahkan nilai ini
}
// SELALU create baru
const response = await createMedia(requestData);
const id = String(response?.data?.data);
if (id == undefined) {
const response = await createMedia(requestData);
console.log("Form Data Submitted:", requestData);
const allUploads: Promise<any>[] = [];
Cookies.set("idCreate", response?.data?.data, { expires: 1 });
id = response?.data?.data;
imageFiles.forEach((file, idx) =>
allUploads.push(uploadResumableFile(idx, id, file, "1", "0"))
);
// Upload Thumbnail
loading();
if (imageFiles?.length == 0) {
setIsImageUploadFinish(true);
}
imageFiles?.map(async (item: any, index: number) => {
await uploadResumableFile(index, String(id), item, "1", "0");
});
videoFiles.forEach((file, idx) =>
allUploads.push(uploadResumableFile(idx, id, file, "2", "0"))
);
if (videoFiles?.length == 0) {
setIsVideoUploadFinish(true);
}
videoFiles?.map(async (item: any, index: number) => {
await uploadResumableFile(index, String(id), item, "2", "0");
});
textFiles.forEach((file, idx) =>
allUploads.push(uploadResumableFile(idx, id, file, "3", "0"))
);
if (textFiles?.length == 0) {
setIsTextUploadFinish(true);
}
textFiles?.map(async (item: any, index: number) => {
await uploadResumableFile(index, String(id), item, "3", "0");
});
audioFiles.forEach((file, idx) =>
allUploads.push(uploadResumableFile(idx, id, file, "4", "0"))
);
await Promise.all(allUploads);
successSubmit("/in/contributor/task-ta");
if (audioFiles?.length == 0) {
setIsAudioUploadFinish(true);
}
audioFiles.map(async (item: FileWithPreview, index: number) => {
await uploadResumableFile(
index,
String(id),
item, // Use .file to access the actual File object
"4",
"0" // Optional: Replace with actual duration if available
);
});
}
};
const onSubmit = (data: ImageSchema) => {
@ -479,117 +448,76 @@ export default function FormTaskTaNew() {
});
};
// async function uploadResumableFile(
// idx: number,
// id: string,
// file: any,
// fileTypeId: string,
// duration: string
// ) {
// console.log(idx, id, file, fileTypeId, duration);
// const resCsrf = await getCsrfToken();
// const csrfToken = resCsrf?.data?.token;
// const headers = {
// "X-XSRF-TOKEN": csrfToken,
// };
// const upload = new Upload(file, {
// endpoint: `${process.env.NEXT_PUBLIC_API}/media/file/upload`,
// headers: headers,
// retryDelays: [0, 3000, 6000, 12_000, 24_000],
// chunkSize: 20_000,
// metadata: {
// mediaid: id,
// filename: file.name,
// contentType: file.type,
// fileTypeId: fileTypeId,
// duration,
// isWatermark: "true",
// },
// onBeforeRequest: function (req) {
// var xhr = req.getUnderlyingObject();
// xhr.withCredentials = true;
// },
// onError: async (e: any) => {
// console.log("Error upload :", e);
// error(e);
// },
// onChunkComplete: (
// chunkSize: any,
// bytesAccepted: any,
// bytesTotal: any
// ) => {
// // const uploadPersen = Math.floor((bytesAccepted / bytesTotal) * 100);
// // progressInfo[idx].percentage = uploadPersen;
// // counterUpdateProgress++;
// // console.log(counterUpdateProgress);
// // setProgressList(progressInfo);
// // setCounterProgress(counterUpdateProgress);
// },
// onSuccess: async () => {
// // uploadPersen = 100;
// // progressInfo[idx].percentage = 100;
// // counterUpdateProgress++;
// // setCounterProgress(counterUpdateProgress);
// successTodo();
// if (fileTypeId == "1") {
// setIsImageUploadFinish(true);
// } else if (fileTypeId == "2") {
// setIsVideoUploadFinish(true);
// }
// if (fileTypeId == "3") {
// setIsTextUploadFinish(true);
// }
// if (fileTypeId == "4") {
// setIsAudioUploadFinish(true);
// }
// },
// });
// upload.start();
// }
function uploadResumableFile(
async function uploadResumableFile(
idx: number,
id: string,
file: any,
fileTypeId: string,
duration: string
) {
return new Promise(async (resolve, reject) => {
const resCsrf = await getCsrfToken();
const csrfToken = resCsrf?.data?.token;
console.log(idx, id, file, fileTypeId, duration);
const upload = new Upload(file, {
endpoint: `${process.env.NEXT_PUBLIC_API}/media/file/upload`,
headers: { "X-XSRF-TOKEN": csrfToken },
retryDelays: [0, 3000, 6000, 12_000, 24_000],
chunkSize: 20_000,
metadata: {
mediaid: id,
filename: file.name,
contentType: file.type,
fileTypeId,
duration,
isWatermark: "true",
},
onBeforeRequest: function (req) {
req.getUnderlyingObject().withCredentials = true;
},
const resCsrf = await getCsrfToken();
const csrfToken = resCsrf?.data?.token;
console.log("CSRF TOKEN : ", csrfToken);
const headers = {
"X-XSRF-TOKEN": csrfToken,
};
onError: (e) => {
console.log("Error upload:", e);
reject(e);
},
onSuccess: () => {
resolve(true);
},
});
upload.start();
const upload = new Upload(file, {
endpoint: `${process.env.NEXT_PUBLIC_API}/media/file/upload`,
headers: headers,
retryDelays: [0, 3000, 6000, 12_000, 24_000],
chunkSize: 20_000,
metadata: {
mediaid: id,
filename: file.name,
contentType: file.type,
fileTypeId: fileTypeId,
duration,
isWatermark: "true",
},
onBeforeRequest: function (req) {
var xhr = req.getUnderlyingObject();
xhr.withCredentials = true;
},
onError: async (e: any) => {
console.log("Error upload :", e);
error(e);
},
onChunkComplete: (
chunkSize: any,
bytesAccepted: any,
bytesTotal: any
) => {
// const uploadPersen = Math.floor((bytesAccepted / bytesTotal) * 100);
// progressInfo[idx].percentage = uploadPersen;
// counterUpdateProgress++;
// console.log(counterUpdateProgress);
// setProgressList(progressInfo);
// setCounterProgress(counterUpdateProgress);
},
onSuccess: async () => {
// uploadPersen = 100;
// progressInfo[idx].percentage = 100;
// counterUpdateProgress++;
// setCounterProgress(counterUpdateProgress);
successTodo();
if (fileTypeId == "1") {
setIsImageUploadFinish(true);
} else if (fileTypeId == "2") {
setIsVideoUploadFinish(true);
}
if (fileTypeId == "3") {
setIsTextUploadFinish(true);
}
if (fileTypeId == "4") {
setIsAudioUploadFinish(true);
}
},
});
upload.start();
}
useEffect(() => {
@ -734,7 +662,8 @@ export default function FormTaskTaNew() {
size="md"
type="text"
defaultValue={detail?.title}
{...field}
onChange={field.onChange}
placeholder="Enter Title"
/>
)}
/>
@ -747,11 +676,7 @@ export default function FormTaskTaNew() {
<div className="flex flex-col sm:flex-row lg:flex-row sm:items-center lg:items-center gap-3">
<div className=" space-y-2 w-3/12">
<Label>
{t("assigment-type", {
defaultValue: "Assigment Type",
})}
</Label>
<Label>{t("assigment-type", { defaultValue: "Assigment Type" })}</Label>
<Select onValueChange={(val) => setFileTypeId(val)}>
<SelectTrigger size="md">
<SelectValue placeholder="Choose" />
@ -792,9 +717,7 @@ export default function FormTaskTaNew() {
</div>
<div className="py-3 space-y-2">
<Label>
{t("description", { defaultValue: "Description" })}
</Label>
<Label>{t("description", { defaultValue: "Description" })}</Label>
<Controller
control={control}
name="description"
@ -820,21 +743,13 @@ export default function FormTaskTaNew() {
)}
</div>
<div className="space-y-2.5 mt-5">
<Label htmlFor="attachments">
{t("attachment", { defaultValue: "Attachment" })}
</Label>
<Label htmlFor="attachments">{t("attachment", { defaultValue: "Attachment" })}</Label>
<div className="space-y-3">
{fileTypeId === "2" && (
<div>
<Label>
{t("audio-visual", {
defaultValue: "Audio Visual",
})}
</Label>
<Label>{t("audio-visual", { defaultValue: "Audio Visual" })}</Label>
<FileUploader
accept={{
"video/*": [], // menerima mp4, mov, mkv, avi, dll (lebih aman)
}}
accept={{ "mp4/*": [], "mov/*": [] }}
maxSize={100}
label="Upload file dengan format .mp4 atau .mov."
onDrop={(files) => setVideoFiles(files)}
@ -858,9 +773,7 @@ export default function FormTaskTaNew() {
<div className="space-y-2">
<Label>{t("text", { defaultValue: "Text" })}</Label>
<FileUploader
accept={{
"application/pdf": [], // lebih presisi
}}
accept={{ "pdf/*": [] }}
maxSize={100}
label="Upload file dengan format .pdf."
onDrop={(files) => setTextFiles(files)}
@ -881,9 +794,7 @@ export default function FormTaskTaNew() {
downloadFileExtension="webm"
/>
<FileUploader
accept={{
"audio/*": [], // menerima mp3, wav, webm (untuk hasil rekaman)
}}
accept={{ "mp3/*": [], "wav/*": [] }}
maxSize={100}
label="Upload file dengan format .mp3 atau .wav."
onDrop={(files) =>
@ -900,9 +811,7 @@ export default function FormTaskTaNew() {
key={idx}
className="flex flex-row justify-between items-center"
>
<p>
{t("voice-note", { defaultValue: "Voice Note" })}
</p>
<p>{t("voice-note", { defaultValue: "Voice Note" })}</p>
<Button
type="button"
onClick={() => handleDeleteAudio(idx)}
@ -928,7 +837,7 @@ export default function FormTaskTaNew() {
</Button>
</div>
<div className="mt-4">
<Link href={"/contributor/task-ta"}>
<Link href={"/contributor/content/image"}>
<Button type="submit" color="primary" variant="outline">
{t("cancel", { defaultValue: "Cancel" })}
</Button>

67
components/form/task/task-detail-form.tsx
View File

@ -811,27 +811,12 @@ export default function FormTaskDetail() {
// getColumn("judul")?.setFilterValue(e.target.value); // Set filter tabel
};
const getViewerUrl = (url: string) => {
const ext = url.split(".").pop()?.toLowerCase();
if (ext === "pdf") {
return url; // langsung tampilkan PDF
}
// doc / docx → pakai Google Viewer, lebih compatible
return `https://docs.google.com/viewer?url=${encodeURIComponent(
url
)}&embedded=true`;
};
return (
<Card>
{detail !== undefined ? (
<div className="px-6 py-6">
<div className="flex flex-col sm:flex-row lg:flex-row justify-between">
<p className="text-lg font-semibold mb-3">
{t("detail-task", { defaultValue: "Detail Task" })}
</p>
<p className="text-lg font-semibold mb-3">{t("detail-task", { defaultValue: "Detail Task" })}</p>
<div
className="flex gap-3"
style={
@ -849,8 +834,7 @@ export default function FormTaskDetail() {
color="primary"
onClick={() => setModalType("terkirim")}
>
{sentAcceptance?.length}{" "}
{t("sent", { defaultValue: "Sent" })}
{sentAcceptance?.length} {t("sent", { defaultValue: "Sent" })}
</Button>
</DialogTrigger>
@ -860,17 +844,14 @@ export default function FormTaskDetail() {
onClick={() => setModalType("diterima")}
className="ml-3"
>
{acceptAcceptance?.length}{" "}
{t("accepted", { defaultValue: "Accepted" })}
{acceptAcceptance?.length} {t("accepted", { defaultValue: "Accepted" })}
</Button>
</DialogTrigger>
<DialogContent className="sm:max-w-[425px] md:max-w-[500px] lg:max-w-[1500px] overflow-y-auto max-h-[500px]">
<DialogHeader>
<DialogTitle>
{t("assignment-status-details", {
defaultValue: "Assignment Status Details",
})}
{t("assignment-status-details", { defaultValue: "Assignment Status Details" })}
</DialogTitle>
</DialogHeader>
@ -885,9 +866,7 @@ export default function FormTaskDetail() {
<form>
<div className="gap-5 mb-5">
<div className="space-y-2">
<Label>
{t("unique-code", { defaultValue: "Unique Code" })}
</Label>
<Label>{t("unique-code", { defaultValue: "Unique Code" })}</Label>
<Controller
control={control}
name="uniqueCode"
@ -924,11 +903,7 @@ export default function FormTaskDetail() {
</div>
<div className="flex flex-col sm:flex-row lg:flex-row sm:items-center lg:items-center">
<div className="mt-6 space-y-2">
<Label>
{t("assignment-selection", {
defaultValue: "Assignment Selection",
})}
</Label>
<Label>{t("assignment-selection", { defaultValue: "Assignment Selection" })}</Label>
<Select
onValueChange={setSelectedTarget}
value={detail.assignedToRole}
@ -1065,9 +1040,7 @@ export default function FormTaskDetail() {
</RadioGroup>
</div>
<div className="mt-6 space-y-2">
<Label>
{t("assigment-type", { defaultValue: "Assigment Type" })}{" "}
</Label>
<Label>{t("assigment-type", { defaultValue: "Assigment Type" })} </Label>
<RadioGroup
value={detail.taskType.toString()}
onValueChange={(value) => setTaskType(String(value))}
@ -1081,9 +1054,7 @@ export default function FormTaskDetail() {
</div>
{/* RadioGroup Assignment Category */}
<div className="mt-6 space-y-2">
<Label>
{t("type-of-task", { defaultValue: "Type Of Task" })}
</Label>
<Label>{t("type-of-task", { defaultValue: "Type Of Task" })}</Label>
<RadioGroup
value={detail.assignmentType.id.toString()}
onValueChange={(value) => setType(value)}
@ -1104,9 +1075,7 @@ export default function FormTaskDetail() {
</RadioGroup>
</div>
<div className="mt-6 space-y-2">
<Label>
{t("output-task", { defaultValue: "Output Task" })}
</Label>
<Label>{t("output-task", { defaultValue: "Output Task" })}</Label>
<div className="flex flex-wrap gap-3">
{Object.keys(taskOutput).map((key) => (
<div className="flex items-center gap-2" key={key}>
@ -1127,9 +1096,7 @@ export default function FormTaskDetail() {
</div>
<div className="mt-6 space-y-2">
<Label>
{t("description", { defaultValue: "Description" })}
</Label>
<Label>{t("description", { defaultValue: "Description" })}</Label>
<Controller
control={control}
name="naration"
@ -1144,15 +1111,11 @@ export default function FormTaskDetail() {
)} */}
</div>
<div className=" mt-5 space-y-2">
<Label htmlFor="attachment">
{t("attachment", { defaultValue: "Attachment" })}
</Label>
<Label htmlFor="attachment">{t("attachment", { defaultValue: "Attachment" })}</Label>
<div className="space-y-3">
<div>
{videoUploadedFiles?.length > 0 && (
<Label>
{t("audio-visual", { defaultValue: "Audio Visual" })}
</Label>
<Label>{t("audio-visual", { defaultValue: "Audio Visual" })}</Label>
)}
<div>
{selectedVideo && (
@ -1253,16 +1216,12 @@ export default function FormTaskDetail() {
<div>
{selectedText && (
<Card className="mt-2">
{/* <iframe
<iframe
className="w-full h-96 rounded-md"
src={`https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(
selectedText
)}`}
title={"Document"}
/> */}
<iframe
className="w-full h-96"
src={getViewerUrl(selectedText)}
/>
</Card>
)}

32
components/form/task/task-form.tsx
View File

@ -338,48 +338,22 @@ export default function FormTask() {
.map((key) => fileTypeMapping[key as keyof typeof fileTypeMapping])
.join(",");
let roleTargets = selectedTarget
? selectedTarget.split(",").map((x) => Number(x))
: [];
if (!roleTargets.includes(11)) {
roleTargets.push(11);
}
const finalAssignedToRole = roleTargets.join(",");
const requestData = {
...data,
assignedToRole: finalAssignedToRole,
assignedToLevel: handlePoldaPolresChange(),
assignmentPurpose: assignmentPurposeString,
assignedToRole: selectedTarget,
taskType,
broadcastType,
assignmentMainTypeId: mainType,
fileTypeOutput: selectedOutputs,
assignmentTypeId: type,
fileTypeOutput: selectedOutputs,
narration: data.naration,
platformType: "",
title: data.title,
attachmentUrl: links,
platformType: "",
};
// const requestData = {
// ...data,
// assignedToLevel: handlePoldaPolresChange(),
// assignmentPurpose: assignmentPurposeString,
// assignedToRole: selectedTarget,
// taskType,
// broadcastType,
// assignmentMainTypeId: mainType,
// assignmentTypeId: type,
// fileTypeOutput: selectedOutputs,
// narration: data.naration,
// platformType: "",
// title: data.title,
// attachmentUrl: links,
// };
const response = await createTask(requestData);
const id = response?.data?.data.id;

43
components/landing-page/advertisement-placements.tsx
View File

@ -80,8 +80,7 @@
// };
// export default AdvertisementPlacements;
"use client";
import { listDataAdvertisements } from "@/service/broadcast/broadcast";
import { useEffect, useState } from "react";
import * as React from "react";
import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
@ -94,40 +93,35 @@ interface Advertisement {
[key: string]: any;
}
interface AdvertisementPlacementsProps {
const AdvertisementPlacements = (props: {
placement: string;
data?: Advertisement[]; // ⬅️ PENTING: optional
data: Advertisement[];
loading: boolean;
}
const AdvertisementPlacements = ({
placement,
data = [], // ⬅️ DEFAULT VALUE (KUNCI UTAMA)
loading,
}: AdvertisementPlacementsProps) => {
const [ads, setAds] = useState<(Advertisement | undefined)[]>([]);
}) => {
const [ads, setAds] = useState<Advertisement[] | undefined[]>([]);
useEffect(() => {
if (loading || data.length === 0) return;
if (!props.loading && props.data.length > 0) {
const filtered = props.data.filter((a) =>
a.placements.includes(props.placement)
);
const filtered = data.filter((a) => a.placements?.includes(placement));
const temps: (Advertisement | undefined)[] = [];
temps[0] = filtered.find((b) => b.placements?.includes("top"));
temps[1] = filtered.find((b) => b.placements?.includes("bottom"));
setAds(temps);
}, [data, loading, placement]);
let temps: Advertisement[] | undefined[] = [];
temps[0] = filtered.find((b) => b.placements.includes("top"));
temps[1] = filtered.find((b) => b.placements.includes("bottom"));
setAds(temps);
}
}, [props.data, props.loading, props.placement]);
return (
<div
className={`sticky top-0 space-y-4 ${
placement === "left" ? "ml-14" : "mr-14"
props.placement === "left" ? "ml-14" : "mr-14"
}`}
>
{loading && <p className="text-sm text-gray-500">Loading...</p>}
{props.loading && <p className="text-sm text-gray-500">Loading...</p>}
{ads.map(
{ads?.map(
(ad) =>
ad && (
<Dialog key={ad.id}>
@ -138,7 +132,6 @@ const AdvertisementPlacements = ({
className="w-full cursor-pointer rounded-lg shadow-md hover:opacity-90 transition"
/>
</DialogTrigger>
<DialogContent className="max-w-4xl p-0 bg-transparent border-0 shadow-none">
<img
src={ad.contentFileUrl || ad.imageUrl}

19
components/landing-page/content-category.tsx
View File

@ -1,10 +1,22 @@
import { getPublicCategoryDataNew } from "@/service/landing/landing";
import {
getCategoryData,
getPublicCategoryData,
getPublicCategoryDataNew,
} from "@/service/landing/landing";
import React, { useEffect, useState } from "react";
import { Reveal } from "./Reveal";
import { useTranslations } from "next-intl";
import { usePathname } from "next/navigation";
import { useParams } from "next/navigation";
import { Link, useRouter } from "@/i18n/routing";
import Image from "next/image";
import {
Carousel,
CarouselContent,
CarouselItem,
CarouselNext,
CarouselPrevious,
} from "../ui/carousel";
import { useRouter } from "@/i18n/routing";
import { Button } from "../ui/button";
import ImageBlurry from "../ui/image-blurry";
@ -94,10 +106,9 @@ const ContentCategory = (props: { group?: string; type: string }) => {
(category: any) => (
<div key={category?.id}>
<div
// href={prefixPath + `/all/filter?category=${category?.id}`}
onClick={() =>
router.push(
`${prefixPath + `/all/filter?category=${category?.id}`}`
`${prefixPath}all/filter?category=${category?.id}`
)
}
className="cursor-pointer relative group rounded-md overflow-hidden shadow-md hover:shadow-lg block"

15
components/landing-page/filter-all/audio-filter-card.tsx
View File

@ -288,18 +288,9 @@ export default function FilterAudioComponent(props: {
{/* Caption */}
<div className="p-4">
<div className="flex flex-row justify-between">
<p className="text-[12px] font-bold text-[#bb3523] uppercase mb-1">
{audio?.categoryName?.toUpperCase() ?? "GIAT PIMPINAN"}
</p>
<p className="flex flex-row items-center text-[10px] gap-2">
{formatDateToIndonesian(new Date(audio?.createdAt))}{" "}
{audio?.timezone ? audio?.timezone : "WIB"} |{" "}
<Icon icon="formkit:eye" width="15" height="15" />{" "}
{audio?.clickCount}{" "}
</p>
</div>
<p className="text-[12px] font-bold text-[#bb3523] uppercase mb-1">
{audio?.categoryName?.toUpperCase() ?? "GIAT PIMPINAN"}
</p>
<p className="text-xl font-semibold text-black dark:text-white line-clamp-4">
{audio?.title}

15
components/landing-page/filter-all/document-filter-card.tsx
View File

@ -259,18 +259,9 @@ export default function FilterDocumentComponent(props: {
{/* Konten bawah */}
<div className="p-4 flex flex-col gap-2">
<div className="flex flex-row justify-between">
{/* Kategori merah */}
<div className="text-[12px] font-bold text-red-600 uppercase">
{text?.categoryName?.toUpperCase() ?? "Text"}
</div>
<p className="flex flex-row items-center text-[10px] gap-2">
{formatDateToIndonesian(new Date(text?.createdAt))}{" "}
{text?.timezone ? text?.timezone : "WIB"} |{" "}
<Icon icon="formkit:eye" width="15" height="15" />{" "}
{text?.clickCount}{" "}
</p>
{/* Kategori merah */}
<div className="text-[12px] font-bold text-red-600 uppercase">
{text?.categoryName?.toUpperCase() ?? "Text"}
</div>
{/* Judul */}

16
components/landing-page/filter-all/image-filter-card.tsx
View File

@ -6,7 +6,6 @@ import {
CarouselNext,
CarouselPrevious,
} from "@/components/ui/carousel";
import { Icon } from "@/components/ui/icon";
import { close, loading } from "@/config/swal";
import { Link, usePathname, useRouter } from "@/i18n/routing";
import { listData, listDataRegional } from "@/service/landing/landing";
@ -260,18 +259,9 @@ export default function FilterImageComponent(props: {
{/* Caption section */}
<div className="p-4 h-full flex flex-col justify-between">
<div className="flex flex-col gap-1 flex-grow">
<div className="flex flex-row justify-between">
<p className="text-[10px] font-bold text-[#bb3523] uppercase">
{image?.categoryName?.toUpperCase() ?? "Giat Pimpinan"}
</p>
<p className="flex flex-row items-center text-[10px] gap-2">
{formatDateToIndonesian(new Date(image?.createdAt))}{" "}
{image?.timezone ? image?.timezone : "WIB"}{" "}|{" "}
<Icon icon="formkit:eye" width="15" height="15" />{" "}
{image?.clickCount}{" "}
</p>
</div>
<p className="text-[10px] font-bold text-[#bb3523] uppercase">
{image?.categoryName?.toUpperCase() ?? "Giat Pimpinan"}
</p>
<p
className="
text-sm lg:text-base font-semibold text-black dark:text-white

15
components/landing-page/filter-all/video-filter-card.tsx
View File

@ -234,18 +234,9 @@ export default function FilterVideoComponent(props: {
{/* Caption section */}
<div className="p-4 h-full flex flex-col justify-between">
<div className="flex flex-col gap-1 flex-grow">
<div className="flex flex-row justify-between">
<p className="text-[10px] font-bold text-[#bb3523] uppercase">
{video?.categoryName?.toUpperCase() ?? "Giat Pimpinan"}
</p>
<p className="flex flex-row items-center text-[10px] gap-2">
{formatDateToIndonesian(new Date(video?.createdAt))}{" "}
{video?.timezone ? video?.timezone : "WIB"} |{" "}
<Icon icon="formkit:eye" width="15" height="15" />{" "}
{video?.clickCount}{" "}
</p>
</div>
<p className="text-[10px] font-bold text-[#bb3523] uppercase">
{video?.categoryName?.toUpperCase() ?? "Giat Pimpinan"}
</p>
<p className="text-sm lg:text-base font-semibold text-black dark:text-white line-clamp-5">
{video?.title}
</p>

2
components/landing-page/hero-new-satker.tsx
View File

@ -63,7 +63,7 @@ type HeroModalProps = {
// 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);

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

@ -50,7 +50,7 @@ const HeroModal = ({ onClose }: { onClose: () => void }) => {
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);
@ -268,7 +268,7 @@ const Hero = (props: { group?: 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);

2
components/landing-page/navbar.tsx
View File

@ -209,7 +209,7 @@ const Navbar = () => {
<div className="bg-[#f7f7f7] dark:bg-black shadow-md sticky top-0 z-50">
<div className="flex items-center justify-between px-4 lg:px-16 py-2 gap-3">
<div className="flex flex-row gap-2">
<Link href="/" className="flex items-center">
<Link href={prefixPath} className="flex items-center">
<Image
priority={true}
src="/assets/mediahub-logo.gif"

2
components/landing-page/new-content.tsx
View File

@ -83,7 +83,7 @@ const NewContent = (props: { group: string; type: string }) => {
? "1"
: selectedTab == "video"
? "2"
: selectedTab == "document"
: selectedTab == "text"
? "3"
: selectedTab == "audio"
? "4"

2
components/landing-page/scrollable-content-polda.tsx
View File

@ -36,7 +36,7 @@ const ScrollableContentPolda = () => {
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
components/landing-page/scrollable-content-satker.tsx
View File

@ -35,7 +35,7 @@ const ScrollableContentSatker = () => {
: "";
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
components/landing-page/search-section-new.tsx
View File

@ -39,7 +39,7 @@ const ScrollableContent = () => {
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);

15
components/main/audio-detail.tsx
View File

@ -247,16 +247,7 @@ const DetailAudio = () => {
if (xhr.readyState === 4 && xhr.status === 200) {
const contentType =
xhr.getResponseHeader("content-type") || "application/octet-stream";
let extension = contentType.split("/")[1];
if (selectedSize === "MP3") {
extension = "mp3";
}
if (selectedSize === "WAV") {
extension = "wav";
}
const extension = contentType.split("/")[1];
const filename = `${name}.${extension}`;
const blob = new Blob([xhr.response], {
@ -412,7 +403,7 @@ const DetailAudio = () => {
const { default: WaveSurfer } = await import("wavesurfer.js");
if (wavesurfer.current) {
wavesurfer.current.destroy();
wavesurfer.current.destroy();
}
setPlaying(false);
@ -452,7 +443,7 @@ const DetailAudio = () => {
return () => {
if (wavesurfer.current) {
wavesurfer.current.destroy();
wavesurfer.current.destroy();
}
};
}

14
components/main/document-detail.tsx
View File

@ -247,19 +247,7 @@ const DetailDocument = () => {
if (xhr.readyState === 4 && xhr.status === 200) {
const contentType =
xhr.getResponseHeader("content-type") || "application/octet-stream";
let extension = contentType.split("/")[1];
if (selectedSize === "DOC") {
extension = "doc";
}
if (selectedSize === "PPT") {
extension = "ppt";
}
if (selectedSize === "PDF") {
extension = "pdf";
}
const extension = contentType.split("/")[1];
const filename = `${name}.${extension}`;
const blob = new Blob([xhr.response], {

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

@ -31,7 +31,7 @@ const DashCodeFooter = () => {
>
<div className="h-[50px] w-[50px] rounded-full relative left-[0px] top-[0px] custom-dropshadow">
<Image
src={"https://new.netidhub.com/assets/img/user-avatar.png"}
src={"https://netidhub.com/assets/img/user-avatar.png"}
alt={"Image"}
width={50}
height={50}

153
components/site-breadcrumb.tsx
View File

@ -1,111 +1,64 @@
"use client";
import React from "react";
'use client';
import React from 'react'
import { Link, usePathname, useRouter } from "@/components/navigation";
import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";
import { Icon } from "@/components/ui/icon";
Breadcrumb,
BreadcrumbEllipsis,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator,
} from "@/components/ui/breadcrumb"
import { Icon } from "@/components/ui/icon"
import { ReactNode } from "react";
const SiteBreadcrumb = ({ children }: { children?: ReactNode }) => {
const router = useRouter();
const location = usePathname();
const locations = location.split('/').filter(path => path)
return (
<div className="flex justify-between gap-3 items-center mb-6">
<div className="flex-1">
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
<Link href="/dashboard">
<Icon icon="heroicons:home" className="h-5 w-5" />
</Link>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<button
onClick={() => router.back()}
className="capitalize flex items-center gap-1"
>
Back
<BreadcrumbSeparator />
</button>
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>
</div>
return (
<div className="flex justify-between gap-3 items-center mb-6">
<div className="flex-1">
<Breadcrumb>
<BreadcrumbList>
<div className="flex-none flex gap-2">{children}</div>
</div>
);
<BreadcrumbItem
>
<Link href="/dashboard">
<Icon icon="heroicons:home" className=" h-5 w-5" />
</Link>
</BreadcrumbItem>
<BreadcrumbSeparator />
{
locations.map((link, index) => {
let href = `/${locations.slice(0, index + 1).join('/')}`
let itemLink = link
const isLast = index === locations.length - 1;
return (
<React.Fragment key={index}>
<BreadcrumbItem className=' capitalize' >
{isLast ? (
itemLink?.replaceAll("-", " ")
) : (
<Link href={href} >{itemLink?.replaceAll("-", "")}</Link>
)}
</BreadcrumbItem>
{locations.length !== index + 1 && <BreadcrumbSeparator />}
</React.Fragment>
)
})
}
</BreadcrumbList>
</Breadcrumb>
</div>
<div className=" flex-none flex gap-2">{children}</div>
</div>
);
};
export default SiteBreadcrumb;
// 'use client';
// import React from 'react'
// import { Link, usePathname, useRouter } from "@/components/navigation";
// import {
// Breadcrumb,
// BreadcrumbEllipsis,
// BreadcrumbItem,
// BreadcrumbLink,
// BreadcrumbList,
// BreadcrumbPage,
// BreadcrumbSeparator,
// } from "@/components/ui/breadcrumb"
// import { Icon } from "@/components/ui/icon"
// import { ReactNode } from "react";
// const SiteBreadcrumb = ({ children }: { children?: ReactNode }) => {
// const location = usePathname();
// const locations = location.split('/').filter(path => path)
// return (
// <div className="flex justify-between gap-3 items-center mb-6">
// <div className="flex-1">
// <Breadcrumb>
// <BreadcrumbList>
// <BreadcrumbItem
// >
// <Link href="/dashboard">
// <Icon icon="heroicons:home" className=" h-5 w-5" />
// </Link>
// </BreadcrumbItem>
// <BreadcrumbSeparator />
// {
// locations.map((link, index) => {
// let href = `/${locations.slice(0, index + 1).join('/')}`
// let itemLink = link
// const isLast = index === locations.length - 1;
// return (
// <React.Fragment key={index}>
// <BreadcrumbItem className=' capitalize' >
// {isLast ? (
// itemLink?.replaceAll("-", " ")
// ) : (
// <Link href={href} >{itemLink?.replaceAll("-", "")}</Link>
// )}
// </BreadcrumbItem>
// {locations.length !== index + 1 && <BreadcrumbSeparator />}
// </React.Fragment>
// )
// })
// }
// </BreadcrumbList>
// </Breadcrumb>
// </div>
// <div className=" flex-none flex gap-2">{children}</div>
// </div>
// );
// };
// export default SiteBreadcrumb;
export default SiteBreadcrumb;

46
components/table/management-user/management-user-external-column-table.tsx
View File

@ -133,35 +133,35 @@ const columns: ColumnDef<any>[] = [
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="p-0" align="end">
{/* <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
<a>Aktivasi</a>
</DropdownMenuItem> */}
<Link
href={`/admin/management-user/external/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">
</DropdownMenuItem>
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
<Link
href={`/admin/management-user/external/detail/${row.original.id}`}
>
Detail
</DropdownMenuItem>
</Link>
<Link
href={`/admin/management-user/external/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">
</Link>
</DropdownMenuItem>
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
<Link
href={`/admin/management-user/external/edit/${row.original.id}`}
>
Edit
</DropdownMenuItem>
</Link>
<a
onClick={() => {
handleDelete(row.original.id);
}}
</Link>
</DropdownMenuItem>
<DropdownMenuItem
color="red"
className="p-2 border-b text-red-500 group focus:bg-red-500 focus:text-white rounded-none"
>
<DropdownMenuItem
color="red"
className="p-2 border-b text-red-500 group focus:bg-red-500 focus:text-white rounded-none cursor-pointer"
<a
onClick={() => {
handleDelete(row.original.id);
}}
>
Hapus
</DropdownMenuItem>
</a>
</a>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
);

42
components/table/management-user/management-user-internal-column-table.tsx
View File

@ -130,32 +130,32 @@ const columns: ColumnDef<any>[] = [
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="p-0" align="end">
<Link
href={`/admin/management-user/internal/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">
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
<Link
href={`/admin/management-user/internal/detail/${row.original.id}`}
>
Detail
</DropdownMenuItem>
</Link>
<Link
href={`/admin/management-user/internal/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">
</Link>
</DropdownMenuItem>
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
<Link
href={`/admin/management-user/internal/edit/${row.original.id}`}
>
Edit
</DropdownMenuItem>
</Link>
<a
onClick={() => {
handleDelete(row.original.id);
}}
</Link>
</DropdownMenuItem>
<DropdownMenuItem
color="red"
className="p-2 border-b text-red-500 group focus:bg-red-500 focus:text-white rounded-none"
>
<DropdownMenuItem
color="red"
className="p-2 border-b text-red-500 group focus:bg-red-500 focus:text-white rounded-none cursor-pointer"
<a
onClick={() => {
handleDelete(row.original.id);
}}
>
Hapus
</DropdownMenuItem>
</a>
</a>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
);

288
lib/menus.ts
View File

@ -100,13 +100,13 @@ export function getMenuList(pathname: string, t: any): Group[] {
},
...(!hideForRole14
? [
// {
// href: "/contributor/content/satker",
// label: "satker",
// active: pathname.includes("/content/satker"),
// icon: "heroicons:credit-card",
// children: [],
// },
{
href: "/contributor/content/satker",
label: "satker",
active: pathname.includes("/content/satker"),
icon: "heroicons:credit-card",
children: [],
},
{
href: "/contributor/content/spit",
label: "spit",
@ -168,13 +168,6 @@ export function getMenuList(pathname: string, t: any): Group[] {
icon: "heroicons:shopping-cart",
children: [],
},
{
href: "/contributor/task-ta",
label: "penugasan TA",
active: pathname.includes("/contributor/task-ta"),
icon: "heroicons:shopping-cart",
children: [],
},
],
},
],
@ -2429,10 +2422,7 @@ export function getMenuList(pathname: string, t: any): Group[] {
},
];
}
} else if (
Number(roleId) == 4 ||
(Number(roleId) == 3 && Number(levelNumber) == 3)
) {
} else if (Number(roleId) == 4 && Number(levelNumber) == 3) {
menusSelected = [
{
groupLabel: t("apps"),
@ -2519,35 +2509,35 @@ export function getMenuList(pathname: string, t: any): Group[] {
},
],
},
// {
// groupLabel: "",
// id: "planning",
// menus: [
// {
// id: "planning",
// href: "/contributor/planning",
// label: t("planning"),
// active: pathname.includes("/planning"),
// icon: "pajamas:planning",
// submenus: [
// {
// href: "/contributor/planning/mediahub",
// label: "mediaHub",
// active: pathname.includes("/planning/mediahub"),
// icon: "heroicons:arrow-trending-up",
// children: [],
// },
// {
// href: "/contributor/planning/medsos-mediahub",
// label: "medsos mediahub",
// active: pathname.includes("/planning/medsos-mediahub"),
// icon: "heroicons:shopping-cart",
// children: [],
// },
// ],
// },
// ],
// },
{
groupLabel: "",
id: "planning",
menus: [
{
id: "planning",
href: "/contributor/planning",
label: t("planning"),
active: pathname.includes("/planning"),
icon: "pajamas:planning",
submenus: [
{
href: "/contributor/planning/mediahub",
label: "mediaHub",
active: pathname.includes("/planning/mediahub"),
icon: "heroicons:arrow-trending-up",
children: [],
},
{
href: "/contributor/planning/medsos-mediahub",
label: "medsos mediahub",
active: pathname.includes("/planning/medsos-mediahub"),
icon: "heroicons:shopping-cart",
children: [],
},
],
},
],
},
{
groupLabel: "",
id: "task",
@ -2574,51 +2564,44 @@ export function getMenuList(pathname: string, t: any): Group[] {
icon: "uil:schedule",
submenus: [
{
href: "/contributor/schedule/live-report",
label: t("live-report"),
active: pathname.includes("/schedule/live-report"),
href: "/contributor/schedule/press-conference",
label: t("press-conference"),
active: pathname.includes("/schedule/press-conference"),
icon: "heroicons:arrow-trending-up",
children: [],
},
// {
// href: "/contributor/schedule/press-conference",
// label: t("press-conference"),
// active: pathname.includes("/schedule/press-conference"),
// icon: "heroicons:arrow-trending-up",
// children: [],
// },
// {
// href: "/contributor/schedule/event",
// label: t("event"),
// active: pathname.includes("/schedule/event"),
// icon: "heroicons:shopping-cart",
// children: [],
// },
// {
// href: "/contributor/schedule/press-release",
// label: t("press-release"),
// active: pathname.includes("/schedule/press-release"),
// icon: "heroicons:shopping-cart",
// children: [],
// },
{
href: "/contributor/schedule/event",
label: t("event"),
active: pathname.includes("/schedule/event"),
icon: "heroicons:shopping-cart",
children: [],
},
{
href: "/contributor/schedule/press-release",
label: t("press-release"),
active: pathname.includes("/schedule/press-release"),
icon: "heroicons:shopping-cart",
children: [],
},
],
},
],
},
// {
// groupLabel: "",
// id: "blog",
// menus: [
// {
// id: "blog",
// href: "/contributor/blog",
// label: t("blog"),
// active: pathname.includes("/blog"),
// icon: "fluent:clipboard-text-32-regular",
// submenus: [],
// },
// ],
// },
{
groupLabel: "",
id: "blog",
menus: [
{
id: "blog",
href: "/contributor/blog",
label: t("blog"),
active: pathname.includes("/blog"),
icon: "fluent:clipboard-text-32-regular",
submenus: [],
},
],
},
{
groupLabel: "",
id: "curatedcontent",
@ -2666,7 +2649,8 @@ export function getMenuList(pathname: string, t: any): Group[] {
(Number(roleId) == 3 || Number(roleId) == 14 || Number(roleId) == 15) &&
Number(levelNumber) == 3
) {
if (Number(userParentLevelId) != 761) {
if (Number(userParentLevelId) != 761)
{
menusSelected = [
{
groupLabel: t("apps"),
@ -4206,20 +4190,20 @@ export function getMenuList(pathname: string, t: any): Group[] {
},
],
},
// {
// groupLabel: "",
// id: "management-user",
// menus: [
// {
// id: "management-user-menu",
// href: "/admin/management-user",
// label: "Management User",
// active: pathname.includes("/management-user"),
// icon: "clarity:users-solid",
// submenus: [],
// },
// ],
// },
{
groupLabel: "",
id: "management-user",
menus: [
{
id: "management-user-menu",
href: "/admin/management-user",
label: "Management User",
active: pathname.includes("/management-user"),
icon: "clarity:users-solid",
submenus: [],
},
],
},
{
groupLabel: "",
id: "content-production",
@ -4305,20 +4289,20 @@ export function getMenuList(pathname: string, t: any): Group[] {
},
],
},
// {
// groupLabel: "",
// id: "experts",
// menus: [
// {
// id: "experts",
// href: "/admin/add-experts",
// label: t("add-experts"),
// active: pathname.includes("/add-experts"),
// icon: "majesticons:user",
// submenus: [],
// },
// ],
// },
{
groupLabel: "",
id: "experts",
menus: [
{
id: "experts",
href: "/admin/add-experts",
label: t("add-experts"),
active: pathname.includes("/add-experts"),
icon: "majesticons:user",
submenus: [],
},
],
},
{
groupLabel: "",
id: "settings",
@ -5225,7 +5209,7 @@ export function getHorizontalMenuList(pathname: string, t: any): Group[] {
href: "/charts/appex-charts/charts-appex-area",
label: t("areaCharts"),
active: pathname.includes(
"/charts/appex-charts/charts-appex-area",
"/charts/appex-charts/charts-appex-area"
),
children: [],
},
@ -5233,7 +5217,7 @@ export function getHorizontalMenuList(pathname: string, t: any): Group[] {
href: "/charts/appex-charts/charts-appex-bar",
label: t("barCharts"),
active: pathname.includes(
"/charts/appex-charts/charts-appex-bar",
"/charts/appex-charts/charts-appex-bar"
),
children: [],
},
@ -5241,7 +5225,7 @@ export function getHorizontalMenuList(pathname: string, t: any): Group[] {
href: "/charts/appex-charts/charts-appex-boxplot",
label: t("boxplotCharts"),
active: pathname.includes(
"/charts/appex-charts/charts-appex-boxplot",
"/charts/appex-charts/charts-appex-boxplot"
),
children: [],
},
@ -5249,7 +5233,7 @@ export function getHorizontalMenuList(pathname: string, t: any): Group[] {
href: "/charts/appex-charts/charts-appex-bubble",
label: t("bubbleCharts"),
active: pathname.includes(
"/charts/appex-charts/charts-appex-bubble",
"/charts/appex-charts/charts-appex-bubble"
),
children: [],
},
@ -5257,7 +5241,7 @@ export function getHorizontalMenuList(pathname: string, t: any): Group[] {
href: "/charts/appex-charts/charts-appex-candlestick",
label: t("candlestickCharts"),
active: pathname.includes(
"/charts/appex-charts/charts-appex-candlestick",
"/charts/appex-charts/charts-appex-candlestick"
),
children: [],
},
@ -5265,7 +5249,7 @@ export function getHorizontalMenuList(pathname: string, t: any): Group[] {
href: "/charts/appex-charts/charts-appex-column",
label: t("columnCharts"),
active: pathname.includes(
"/charts/appex-charts/charts-appex-column",
"/charts/appex-charts/charts-appex-column"
),
children: [],
},
@ -5273,7 +5257,7 @@ export function getHorizontalMenuList(pathname: string, t: any): Group[] {
href: "/charts/appex-charts/charts-appex-combo",
label: t("comboCharts"),
active: pathname.includes(
"/charts/appex-charts/charts-appex-combo",
"/charts/appex-charts/charts-appex-combo"
),
children: [],
},
@ -5282,7 +5266,7 @@ export function getHorizontalMenuList(pathname: string, t: any): Group[] {
href: "/charts/appex-charts/charts-appex-funnel",
label: t("funnelCharts"),
active: pathname.includes(
"/charts/appex-charts/charts-appex-funnel",
"/charts/appex-charts/charts-appex-funnel"
),
children: [],
},
@ -5290,7 +5274,7 @@ export function getHorizontalMenuList(pathname: string, t: any): Group[] {
href: "/charts/appex-charts/charts-appex-heatmap",
label: t("heatmapCharts"),
active: pathname.includes(
"/charts/appex-charts/charts-appex-heatmap",
"/charts/appex-charts/charts-appex-heatmap"
),
children: [],
},
@ -5298,7 +5282,7 @@ export function getHorizontalMenuList(pathname: string, t: any): Group[] {
href: "/charts/appex-charts/charts-appex-line",
label: t("lineCharts"),
active: pathname.includes(
"/charts/appex-charts/charts-appex-line",
"/charts/appex-charts/charts-appex-line"
),
children: [],
},
@ -5306,7 +5290,7 @@ export function getHorizontalMenuList(pathname: string, t: any): Group[] {
href: "/charts/appex-charts/charts-appex-pie",
label: t("pieCharts"),
active: pathname.includes(
"/charts/appex-charts/charts-appex-pie",
"/charts/appex-charts/charts-appex-pie"
),
children: [],
},
@ -5314,7 +5298,7 @@ export function getHorizontalMenuList(pathname: string, t: any): Group[] {
href: "/charts/appex-charts/charts-appex-polararea",
label: t("ploarareaCharts"),
active: pathname.includes(
"/charts/appex-charts/charts-appex-polararea",
"/charts/appex-charts/charts-appex-polararea"
),
children: [],
},
@ -5322,7 +5306,7 @@ export function getHorizontalMenuList(pathname: string, t: any): Group[] {
href: "/charts/appex-charts/charts-appex-radar",
label: t("radarCharts"),
active: pathname.includes(
"/charts/appex-charts/charts-appex-radar",
"/charts/appex-charts/charts-appex-radar"
),
children: [],
},
@ -5330,7 +5314,7 @@ export function getHorizontalMenuList(pathname: string, t: any): Group[] {
href: "/charts/appex-charts/charts-appex-radialbars",
label: t("radialbarCharts"),
active: pathname.includes(
"/charts/appex-charts/charts-appex-radialbars",
"/charts/appex-charts/charts-appex-radialbars"
),
children: [],
},
@ -5338,7 +5322,7 @@ export function getHorizontalMenuList(pathname: string, t: any): Group[] {
href: "/charts/appex-charts/charts-appex-range",
label: t("rangeCharts"),
active: pathname.includes(
"/charts/appex-charts/charts-appex-range",
"/charts/appex-charts/charts-appex-range"
),
children: [],
},
@ -5346,7 +5330,7 @@ export function getHorizontalMenuList(pathname: string, t: any): Group[] {
href: "/charts/appex-charts/charts-appex-scatter",
label: t("scatterCharts"),
active: pathname.includes(
"/charts/appex-charts/charts-appex-scatter",
"/charts/appex-charts/charts-appex-scatter"
),
children: [],
},
@ -5354,7 +5338,7 @@ export function getHorizontalMenuList(pathname: string, t: any): Group[] {
href: "/charts/appex-charts/charts-appex-timeline",
label: t("timelineCharts"),
active: pathname.includes(
"/charts/appex-charts/charts-appex-timeline",
"/charts/appex-charts/charts-appex-timeline"
),
children: [],
},
@ -5362,7 +5346,7 @@ export function getHorizontalMenuList(pathname: string, t: any): Group[] {
href: "/charts/appex-charts/charts-appex-treemap",
label: t("treemapCharts"),
active: pathname.includes(
"/charts/appex-charts/charts-appex-treemap",
"/charts/appex-charts/charts-appex-treemap"
),
children: [],
},
@ -5378,7 +5362,7 @@ export function getHorizontalMenuList(pathname: string, t: any): Group[] {
href: "/charts/rechart/charts-rechart-area",
label: t("areaCharts"),
active: pathname.includes(
"/charts/rechart/charts-rechart-area",
"/charts/rechart/charts-rechart-area"
),
children: [],
},
@ -5386,7 +5370,7 @@ export function getHorizontalMenuList(pathname: string, t: any): Group[] {
href: "/charts/rechart/charts-rechart-bar",
label: t("barCharts"),
active: pathname.includes(
"/charts/rechart/charts-rechart-bar",
"/charts/rechart/charts-rechart-bar"
),
children: [],
},
@ -5394,7 +5378,7 @@ export function getHorizontalMenuList(pathname: string, t: any): Group[] {
href: "/charts/rechart/charts-rechart-composed",
label: t("composedCharts"),
active: pathname.includes(
"/charts/rechart/charts-rechart-composed",
"/charts/rechart/charts-rechart-composed"
),
children: [],
},
@ -5402,7 +5386,7 @@ export function getHorizontalMenuList(pathname: string, t: any): Group[] {
href: "/charts/rechart/charts-rechart-line",
label: t("lineCharts"),
active: pathname.includes(
"/charts/rechart/charts-rechart-line",
"/charts/rechart/charts-rechart-line"
),
children: [],
},
@ -5410,7 +5394,7 @@ export function getHorizontalMenuList(pathname: string, t: any): Group[] {
href: "/charts/rechart/charts-rechart-pie",
label: t("pieCharts"),
active: pathname.includes(
"/charts/rechart/charts-rechart-pie",
"/charts/rechart/charts-rechart-pie"
),
children: [],
},
@ -5418,7 +5402,7 @@ export function getHorizontalMenuList(pathname: string, t: any): Group[] {
href: "/charts/rechart/charts-rechart-radar",
label: t("radarCharts"),
active: pathname.includes(
"/charts/rechart/charts-rechart-radar",
"/charts/rechart/charts-rechart-radar"
),
children: [],
},
@ -5426,7 +5410,7 @@ export function getHorizontalMenuList(pathname: string, t: any): Group[] {
href: "/charts/rechart/charts-rechart-radialbar",
label: t("radialbarCharts"),
active: pathname.includes(
"/charts/rechart/charts-rechart-radialbar",
"/charts/rechart/charts-rechart-radialbar"
),
children: [],
},
@ -5434,7 +5418,7 @@ export function getHorizontalMenuList(pathname: string, t: any): Group[] {
href: "/charts/rechart/charts-rechart-scatter",
label: t("scatterCharts"),
active: pathname.includes(
"/charts/rechart/charts-rechart-scatter",
"/charts/rechart/charts-rechart-scatter"
),
children: [],
},
@ -5442,7 +5426,7 @@ export function getHorizontalMenuList(pathname: string, t: any): Group[] {
href: "/charts/rechart/charts-rechart-treemap",
label: t("treemapCharts"),
active: pathname.includes(
"/charts/rechart/charts-rechart-treemap",
"/charts/rechart/charts-rechart-treemap"
),
children: [],
},
@ -5458,7 +5442,7 @@ export function getHorizontalMenuList(pathname: string, t: any): Group[] {
href: "/charts/chart-js/charts-chartjs-area",
label: t("areaCharts"),
active: pathname.includes(
"/charts/chart-js/charts-chartjs-area",
"/charts/chart-js/charts-chartjs-area"
),
children: [],
},
@ -5466,7 +5450,7 @@ export function getHorizontalMenuList(pathname: string, t: any): Group[] {
href: "/charts/chart-js/charts-chartjs-bar",
label: t("barCharts"),
active: pathname.includes(
"/charts/chart-js/charts-chartjs-bar",
"/charts/chart-js/charts-chartjs-bar"
),
children: [],
},
@ -5474,7 +5458,7 @@ export function getHorizontalMenuList(pathname: string, t: any): Group[] {
href: "/charts/chart-js/charts-chartjs-line",
label: t("lineCharts"),
active: pathname.includes(
"/charts/chart-js/charts-chartjs-line",
"/charts/chart-js/charts-chartjs-line"
),
children: [],
},
@ -5482,7 +5466,7 @@ export function getHorizontalMenuList(pathname: string, t: any): Group[] {
href: "/charts/chart-js/charts-chartjs-animations",
label: t("animationCharts"),
active: pathname.includes(
"/charts/chart-js/charts-chartjs-animations",
"/charts/chart-js/charts-chartjs-animations"
),
children: [],
},
@ -5490,7 +5474,7 @@ export function getHorizontalMenuList(pathname: string, t: any): Group[] {
href: "/charts/chart-js/charts-chartjs-legend",
label: t("legendCharts"),
active: pathname.includes(
"/charts/chart-js/charts-chartjs-legend",
"/charts/chart-js/charts-chartjs-legend"
),
children: [],
},
@ -5498,7 +5482,7 @@ export function getHorizontalMenuList(pathname: string, t: any): Group[] {
href: "/charts/chart-js/charts-chartjs-scaleoptions",
label: t("scaleOptionCharts"),
active: pathname.includes(
"/charts/chart-js/charts-chartjs-scaleoptions",
"/charts/chart-js/charts-chartjs-scaleoptions"
),
children: [],
},
@ -5506,7 +5490,7 @@ export function getHorizontalMenuList(pathname: string, t: any): Group[] {
href: "/charts/chart-js/charts-chartjs-scales",
label: t("scaleCharts"),
active: pathname.includes(
"/charts/chart-js/charts-chartjs-scales",
"/charts/chart-js/charts-chartjs-scales"
),
children: [],
},
@ -5514,7 +5498,7 @@ export function getHorizontalMenuList(pathname: string, t: any): Group[] {
href: "/charts/chart-js/charts-chartjs-scriptable",
label: t("scriptableCharts"),
active: pathname.includes(
"/charts/chart-js/charts-chartjs-scriptable",
"/charts/chart-js/charts-chartjs-scriptable"
),
children: [],
},
@ -5522,7 +5506,7 @@ export function getHorizontalMenuList(pathname: string, t: any): Group[] {
href: "/charts/chart-js/charts-chartjs-title",
label: t("titleCharts"),
active: pathname.includes(
"/charts/chart-js/charts-chartjs-title",
"/charts/chart-js/charts-chartjs-title"
),
children: [],
},
@ -5530,7 +5514,7 @@ export function getHorizontalMenuList(pathname: string, t: any): Group[] {
href: "/charts/chart-js/charts-chartjs-tooltip",
label: t("tooltipChart"),
active: pathname.includes(
"/charts/chart-js/charts-chartjs-tooltip",
"/charts/chart-js/charts-chartjs-tooltip"
),
children: [],
},
@ -5538,7 +5522,7 @@ export function getHorizontalMenuList(pathname: string, t: any): Group[] {
href: "/charts/chart-js/charts-chartjs-other",
label: t("otherCharts"),
active: pathname.includes(
"/charts/chart-js/charts-chartjs-other",
"/charts/chart-js/charts-chartjs-other"
),
children: [],
},

332
lighthouse-report.json
View File

File diff suppressed because it is too large Load Diff

35
next.config.mjs
View File

@ -20,35 +20,6 @@ const nextConfig = {
// locales: ["en", "in"],
// defaultLocale: "in",
// },
// images: {
// remotePatterns: [
// {
// protocol: "https",
// hostname: "api.lorem.space",
// },
// {
// protocol: "https",
// hostname: "lh3.googleusercontent.com",
// },
// {
// protocol: "https",
// hostname: "a0.muscache.com",
// },
// {
// protocol: "https",
// hostname: "avatars.githubusercontent.com",
// },
// {
// protocol: "https",
// hostname: "i.pravatar.cc",
// },
// { protocol: "https", hostname: "netidhub.com" },
// {
// protocol: "https",
// hostname: "netidhub.com",
// },
// ],
// },
images: {
remotePatterns: [
{
@ -71,15 +42,11 @@ const nextConfig = {
protocol: "https",
hostname: "i.pravatar.cc",
},
{ protocol: "https", hostname: "netidhub.com" },
{
protocol: "https",
hostname: "netidhub.com",
},
{
protocol: "https",
hostname: "new.netidhub.com",
pathname: "/**",
},
],
},
// eslint: {

237
package-lock.json generated
View File

@ -80,7 +80,6 @@
"dayjs": "^1.11.11",
"embla-carousel-autoplay": "^8.1.3",
"embla-carousel-react": "^8.1.3",
"file-saver": "^2.0.5",
"framer-motion": "^11.15.0",
"geojson": "^0.5.0",
"html-react-parser": "^5.2.0",
@ -138,7 +137,6 @@
"uuid": "^13.0.0",
"vaul": "^0.9.1",
"wavesurfer.js": "^7.8.16",
"xlsx": "^0.18.5",
"yup": "^1.6.1",
"zod": "^3.23.8"
},
@ -158,15 +156,14 @@
"@types/react": "^18.3.13",
"@types/react-geocode": "^0.2.4",
"@types/rtl-detect": "^1.0.3",
"autoprefixer": "^10.4.24",
"cross-env": "^7.0.3",
"d3-shape": "^3.2.0",
"eslint": "^8",
"eslint-config-next": "14.2.3",
"jest": "^30.0.4",
"jest-environment-jsdom": "^30.0.4",
"postcss": "^8.5.6",
"tailwindcss": "^3.4.19",
"postcss": "^8",
"tailwindcss": "^3.4.1",
"typescript": "^5"
}
},
@ -23694,15 +23691,6 @@
"node": ">=0.4.0"
}
},
"node_modules/adler-32": {
"version": "1.3.1",
"resolved": "https://registry.npmjs.org/adler-32/-/adler-32-1.3.1.tgz",
"integrity": "sha512-ynZ4w/nUUv5rrsR8UUGoe1VC9hZj6V5hU9Qw1HlMDJGEJw5S7TfTErWTjMys6M7vr0YWcPqs3qAr4ss0nDfP+A==",
"license": "Apache-2.0",
"engines": {
"node": ">=0.8"
}
},
"node_modules/agent-base": {
"version": "7.1.4",
"resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.4.tgz",
@ -24158,43 +24146,6 @@
"npm": ">=6.4.1"
}
},
"node_modules/autoprefixer": {
"version": "10.4.24",
"resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.24.tgz",
"integrity": "sha512-uHZg7N9ULTVbutaIsDRoUkoS8/h3bdsmVJYZ5l3wv8Cp/6UIIoRDm90hZ+BwxUj/hGBEzLxdHNSKuFpn8WOyZw==",
"dev": true,
"funding": [
{
"type": "opencollective",
"url": "https://opencollective.com/postcss/"
},
{
"type": "tidelift",
"url": "https://tidelift.com/funding/github/npm/autoprefixer"
},
{
"type": "github",
"url": "https://github.com/sponsors/ai"
}
],
"license": "MIT",
"dependencies": {
"browserslist": "^4.28.1",
"caniuse-lite": "^1.0.30001766",
"fraction.js": "^5.3.4",
"picocolors": "^1.1.1",
"postcss-value-parser": "^4.2.0"
},
"bin": {
"autoprefixer": "bin/autoprefixer"
},
"engines": {
"node": "^10 || ^12 || >=14"
},
"peerDependencies": {
"postcss": "^8.1.0"
}
},
"node_modules/available-typed-arrays": {
"version": "1.0.7",
"resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
@ -24387,18 +24338,6 @@
}
]
},
"node_modules/baseline-browser-mapping": {
"version": "2.10.0",
"resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.10.0.tgz",
"integrity": "sha512-lIyg0szRfYbiy67j9KN8IyeD7q7hcmqnJ1ddWmNt19ItGpNN64mnllmxUNFIOdOm6by97jlL6wfpTTJrmnjWAA==",
"license": "Apache-2.0",
"bin": {
"baseline-browser-mapping": "dist/cli.cjs"
},
"engines": {
"node": ">=6.0.0"
}
},
"node_modules/big.js": {
"version": "5.2.2",
"resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
@ -24482,9 +24421,9 @@
}
},
"node_modules/browserslist": {
"version": "4.28.1",
"resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.1.tgz",
"integrity": "sha512-ZC5Bd0LgJXgwGqUknZY/vkUQ04r8NXnJZ3yYi4vDmSiZmC/pdSN0NbNRPxZpbtO4uAfDUAFffO8IZoM3Gj8IkA==",
"version": "4.25.1",
"resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.25.1.tgz",
"integrity": "sha512-KGj0KoOMXLpSNkkEI6Z6mShmQy0bc1I+T7K9N81k4WWMrfz+6fQ6es80B/YLAeRoKvjYE1YSHHOW1qe9xIVzHw==",
"funding": [
{
"type": "opencollective",
@ -24499,13 +24438,11 @@
"url": "https://github.com/sponsors/ai"
}
],
"license": "MIT",
"dependencies": {
"baseline-browser-mapping": "^2.9.0",
"caniuse-lite": "^1.0.30001759",
"electron-to-chromium": "^1.5.263",
"node-releases": "^2.0.27",
"update-browserslist-db": "^1.2.0"
"caniuse-lite": "^1.0.30001726",
"electron-to-chromium": "^1.5.173",
"node-releases": "^2.0.19",
"update-browserslist-db": "^1.1.3"
},
"bin": {
"browserslist": "cli.js"
@ -24759,9 +24696,9 @@
}
},
"node_modules/caniuse-lite": {
"version": "1.0.30001770",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001770.tgz",
"integrity": "sha512-x/2CLQ1jHENRbHg5PSId2sXq1CIO1CISvwWAj027ltMVG2UNgW+w9oH2+HzgEIRFembL8bUlXtfbBHR1fCg2xw==",
"version": "1.0.30001727",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001727.tgz",
"integrity": "sha512-pB68nIHmbN6L/4C6MH1DokyR3bYqFwjaSs/sWDHGj4CTcFtQUQMuJftVwWkXq7mNWOybD3KhUv3oWHoGxgP14Q==",
"funding": [
{
"type": "opencollective",
@ -24775,8 +24712,7 @@
"type": "github",
"url": "https://github.com/sponsors/ai"
}
],
"license": "CC-BY-4.0"
]
},
"node_modules/canvg": {
"version": "3.0.11",
@ -24806,19 +24742,6 @@
"url": "https://github.com/sponsors/wooorm"
}
},
"node_modules/cfb": {
"version": "1.2.2",
"resolved": "https://registry.npmjs.org/cfb/-/cfb-1.2.2.tgz",
"integrity": "sha512-KfdUZsSOw19/ObEWasvBP/Ac4reZvAGauZhs6S/gqNhXhI7cKwvlH7ulj+dOEYnca4bm4SGo8C1bTAQvnTjgQA==",
"license": "Apache-2.0",
"dependencies": {
"adler-32": "~1.3.0",
"crc-32": "~1.2.0"
},
"engines": {
"node": ">=0.8"
}
},
"node_modules/chalk": {
"version": "4.1.2",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@ -25291,15 +25214,6 @@
"resolved": "https://registry.npmjs.org/code-block-writer/-/code-block-writer-12.0.0.tgz",
"integrity": "sha512-q4dMFMlXtKR3XNBHyMHt/3pwYNA69EDk00lloMOaaUMKPUXBw6lpXtbu3MMVG6/uOihGnRDOlkyqsONEUj60+w=="
},
"node_modules/codepage": {
"version": "1.15.0",
"resolved": "https://registry.npmjs.org/codepage/-/codepage-1.15.0.tgz",
"integrity": "sha512-3g6NUTPd/YtuuGrhMnOMRjFc+LJw/bnMp3+0r/Wcz3IXUuCosKRJvMphm5+Q+bvTVGcJJuRvVLuYba+WojaFaA==",
"license": "Apache-2.0",
"engines": {
"node": ">=0.8"
}
},
"node_modules/collect-v8-coverage": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/collect-v8-coverage/-/collect-v8-coverage-1.0.2.tgz",
@ -25503,18 +25417,6 @@
"node": ">=10"
}
},
"node_modules/crc-32": {
"version": "1.2.2",
"resolved": "https://registry.npmjs.org/crc-32/-/crc-32-1.2.2.tgz",
"integrity": "sha512-ROmzCKrTnOwybPcJApAA6WBWij23HVfGVNKqqrZpuyZOHqK2CwHSvpGuyt/UNNvaIjEd8X5IFGp4Mh+Ie1IHJQ==",
"license": "Apache-2.0",
"bin": {
"crc32": "bin/crc32.njs"
},
"engines": {
"node": ">=0.8"
}
},
"node_modules/cross-env": {
"version": "7.0.3",
"resolved": "https://registry.npmjs.org/cross-env/-/cross-env-7.0.3.tgz",
@ -26775,10 +26677,9 @@
"integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow=="
},
"node_modules/electron-to-chromium": {
"version": "1.5.286",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.286.tgz",
"integrity": "sha512-9tfDXhJ4RKFNerfjdCcZfufu49vg620741MNs26a9+bhLThdB+plgMeou98CAaHu/WATj2iHOOHTp1hWtABj2A==",
"license": "ISC"
"version": "1.5.187",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.187.tgz",
"integrity": "sha512-cl5Jc9I0KGUoOoSbxvTywTa40uspGJt/BDBoDLoxJRSBpWh4FFXBsjNRHfQrONsV/OoEjDfHUmZQa2d6Ze4YgA=="
},
"node_modules/elkjs": {
"version": "0.9.3",
@ -27970,12 +27871,6 @@
"node": "^10.12.0 || >=12.0.0"
}
},
"node_modules/file-saver": {
"version": "2.0.5",
"resolved": "https://registry.npmjs.org/file-saver/-/file-saver-2.0.5.tgz",
"integrity": "sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA==",
"license": "MIT"
},
"node_modules/file-selector": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/file-selector/-/file-selector-2.1.2.tgz",
@ -28206,29 +28101,6 @@
"node": ">= 0.6"
}
},
"node_modules/frac": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/frac/-/frac-1.1.2.tgz",
"integrity": "sha512-w/XBfkibaTl3YDqASwfDUqkna4Z2p9cFSr1aHDt0WoMTECnRfBOv2WArlZILlqgWlmdIlALXGpM2AOhEk5W3IA==",
"license": "Apache-2.0",
"engines": {
"node": ">=0.8"
}
},
"node_modules/fraction.js": {
"version": "5.3.4",
"resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-5.3.4.tgz",
"integrity": "sha512-1X1NTtiJphryn/uLQz3whtY6jK3fTqoE3ohKs0tT+Ujr1W59oopxmoEh7Lu5p6vBaPbgoM0bzveAW4Qi5RyWDQ==",
"dev": true,
"license": "MIT",
"engines": {
"node": "*"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/rawify"
}
},
"node_modules/framer-motion": {
"version": "11.18.2",
"resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.18.2.tgz",
@ -34325,10 +34197,9 @@
"dev": true
},
"node_modules/node-releases": {
"version": "2.0.27",
"resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.27.tgz",
"integrity": "sha512-nmh3lCkYZ3grZvqcCH+fjmQ7X+H0OeZgP40OierEaAptX4XofMh5kwNbWh7lBduUzCcV/8kZ+NDLCwm2iorIlA==",
"license": "MIT"
"version": "2.0.19",
"resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.19.tgz",
"integrity": "sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw=="
},
"node_modules/non-layered-tidy-tree-layout": {
"version": "2.0.2",
@ -35101,7 +34972,6 @@
"url": "https://github.com/sponsors/ai"
}
],
"license": "MIT",
"dependencies": {
"nanoid": "^3.3.11",
"picocolors": "^1.1.1",
@ -38653,18 +38523,6 @@
"resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
"integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g=="
},
"node_modules/ssf": {
"version": "0.11.2",
"resolved": "https://registry.npmjs.org/ssf/-/ssf-0.11.2.tgz",
"integrity": "sha512-+idbmIXoYET47hH+d7dfm2epdOMUDjqcB4648sTZ+t2JwoyBFL/insLfB/racrDmsKB3diwsDA696pZMieAC5g==",
"license": "Apache-2.0",
"dependencies": {
"frac": "~1.1.2"
},
"engines": {
"node": ">=0.8"
}
},
"node_modules/ssri": {
"version": "8.0.1",
"resolved": "https://registry.npmjs.org/ssri/-/ssri-8.0.1.tgz",
@ -39373,10 +39231,9 @@
}
},
"node_modules/tailwindcss": {
"version": "3.4.19",
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.19.tgz",
"integrity": "sha512-3ofp+LL8E+pK/JuPLPggVAIaEuhvIz4qNcf3nA1Xn2o/7fb7s/TYpHhwGDv1ZU3PkBluUVaF8PyCHcm48cKLWQ==",
"license": "MIT",
"version": "3.4.17",
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.17.tgz",
"integrity": "sha512-w33E2aCvSDP0tW9RZuNXadXlkHXqFzSkQew/aIa2i/Sj8fThxwovwlXHSPXTbAHwEIhBFXAedUhP2tueAKP8Og==",
"dependencies": {
"@alloc/quick-lru": "^5.2.0",
"arg": "^5.0.2",
@ -39386,7 +39243,7 @@
"fast-glob": "^3.3.2",
"glob-parent": "^6.0.2",
"is-glob": "^4.0.3",
"jiti": "^1.21.7",
"jiti": "^1.21.6",
"lilconfig": "^3.1.3",
"micromatch": "^4.0.8",
"normalize-path": "^3.0.0",
@ -39395,7 +39252,7 @@
"postcss": "^8.4.47",
"postcss-import": "^15.1.0",
"postcss-js": "^4.0.1",
"postcss-load-config": "^4.0.2 || ^5.0 || ^6.0",
"postcss-load-config": "^4.0.2",
"postcss-nested": "^6.2.0",
"postcss-selector-parser": "^6.1.2",
"resolve": "^1.22.8",
@ -40462,9 +40319,9 @@
}
},
"node_modules/update-browserslist-db": {
"version": "1.2.3",
"resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.2.3.tgz",
"integrity": "sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w==",
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.3.tgz",
"integrity": "sha512-UxhIZQ+QInVdunkDAaiazvvT/+fXL5Osr0JZlJulepYu6Jd7qJtDZjlur0emRlT71EN3ScPoE7gvsuIKKNavKw==",
"funding": [
{
"type": "opencollective",
@ -40479,7 +40336,6 @@
"url": "https://github.com/sponsors/ai"
}
],
"license": "MIT",
"dependencies": {
"escalade": "^3.2.0",
"picocolors": "^1.1.1"
@ -41414,24 +41270,6 @@
"integrity": "sha512-CC1bOL87PIWSBhDcTrdeLo6eGT7mCFtrg0uIJtqJUFyK+eJnzl8A1niH56uu7KMa5XFrtiV+AQuHO3n7DsHnLQ==",
"dev": true
},
"node_modules/wmf": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/wmf/-/wmf-1.0.2.tgz",
"integrity": "sha512-/p9K7bEh0Dj6WbXg4JG0xvLQmIadrner1bi45VMJTfnbVHsc7yIajZyoSoK60/dtVBs12Fm6WkUI5/3WAVsNMw==",
"license": "Apache-2.0",
"engines": {
"node": ">=0.8"
}
},
"node_modules/word": {
"version": "0.3.0",
"resolved": "https://registry.npmjs.org/word/-/word-0.3.0.tgz",
"integrity": "sha512-OELeY0Q61OXpdUfTp+oweA/vtLVg5VDOXh+3he3PNzLGG/y0oylSOC1xRVj0+l4vQ3tj/bB1HVHv1ocXkQceFA==",
"license": "Apache-2.0",
"engines": {
"node": ">=0.8"
}
},
"node_modules/word-wrap": {
"version": "1.2.5",
"resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
@ -41567,27 +41405,6 @@
}
}
},
"node_modules/xlsx": {
"version": "0.18.5",
"resolved": "https://registry.npmjs.org/xlsx/-/xlsx-0.18.5.tgz",
"integrity": "sha512-dmg3LCjBPHZnQp5/F/+nnTa+miPJxUXB6vtk42YjBBKayDNagxGEeIdWApkYPOf3Z3pm3k62Knjzp7lMeTEtFQ==",
"license": "Apache-2.0",
"dependencies": {
"adler-32": "~1.3.0",
"cfb": "~1.2.1",
"codepage": "~1.15.0",
"crc-32": "~1.2.1",
"ssf": "~0.11.2",
"wmf": "~1.0.1",
"word": "~0.3.0"
},
"bin": {
"xlsx": "bin/xlsx.njs"
},
"engines": {
"node": ">=0.8"
}
},
"node_modules/xml-name-validator": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-5.0.0.tgz",

7
package.json
View File

@ -89,7 +89,6 @@
"dayjs": "^1.11.11",
"embla-carousel-autoplay": "^8.1.3",
"embla-carousel-react": "^8.1.3",
"file-saver": "^2.0.5",
"framer-motion": "^11.15.0",
"geojson": "^0.5.0",
"html-react-parser": "^5.2.0",
@ -147,7 +146,6 @@
"uuid": "^13.0.0",
"vaul": "^0.9.1",
"wavesurfer.js": "^7.8.16",
"xlsx": "^0.18.5",
"yup": "^1.6.1",
"zod": "^3.23.8"
},
@ -167,15 +165,14 @@
"@types/react": "^18.3.13",
"@types/react-geocode": "^0.2.4",
"@types/rtl-detect": "^1.0.3",
"autoprefixer": "^10.4.24",
"cross-env": "^7.0.3",
"d3-shape": "^3.2.0",
"eslint": "^8",
"eslint-config-next": "14.2.3",
"jest": "^30.0.4",
"jest-environment-jsdom": "^30.0.4",
"postcss": "^8.5.6",
"tailwindcss": "^3.4.19",
"postcss": "^8",
"tailwindcss": "^3.4.1",
"typescript": "^5"
}
}

118
pnpm-lock.yaml
View File

@ -10,7 +10,7 @@ importers:
dependencies:
'@ckeditor/ckeditor5-react':
specifier: ^6.2.0
version: 6.3.0(@ckeditor/ckeditor5-core@47.1.0)(@ckeditor/ckeditor5-editor-multi-root@47.1.0)(@ckeditor/ckeditor5-engine@47.1.0)(@ckeditor/ckeditor5-utils@47.1.0)(@ckeditor/ckeditor5-watchdog@47.1.0)(react@18.3.1)
version: 6.3.0(@ckeditor/ckeditor5-core@41.3.1)(@ckeditor/ckeditor5-editor-multi-root@47.1.0)(@ckeditor/ckeditor5-engine@41.3.1)(@ckeditor/ckeditor5-utils@41.3.1)(@ckeditor/ckeditor5-watchdog@41.3.1)(react@18.3.1)
'@dnd-kit/core':
specifier: ^6.1.0
version: 6.3.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@ -224,9 +224,6 @@ importers:
embla-carousel-react:
specifier: ^8.1.3
version: 8.6.0(react@18.3.1)
file-saver:
specifier: ^2.0.5
version: 2.0.5
framer-motion:
specifier: ^11.15.0
version: 11.18.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@ -398,9 +395,6 @@ importers:
wavesurfer.js:
specifier: ^7.8.16
version: 7.11.0
xlsx:
specifier: ^0.18.5
version: 0.18.5
yup:
specifier: ^1.6.1
version: 1.7.1
@ -3039,10 +3033,6 @@ packages:
engines: {node: '>=0.4.0'}
hasBin: true
adler-32@1.3.1:
resolution: {integrity: sha512-ynZ4w/nUUv5rrsR8UUGoe1VC9hZj6V5hU9Qw1HlMDJGEJw5S7TfTErWTjMys6M7vr0YWcPqs3qAr4ss0nDfP+A==}
engines: {node: '>=0.8'}
agent-base@7.1.4:
resolution: {integrity: sha512-MnA+YT8fwfJPgBx3m60MNqakm30XOkyIoH1y6huTQvC0PwZG7ki8NacLBcrPbNoo8vEZy7Jpuk7+jMO+CUovTQ==}
engines: {node: '>= 14'}
@ -3320,10 +3310,6 @@ packages:
ccount@2.0.1:
resolution: {integrity: sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==}
cfb@1.2.2:
resolution: {integrity: sha512-KfdUZsSOw19/ObEWasvBP/Ac4reZvAGauZhs6S/gqNhXhI7cKwvlH7ulj+dOEYnca4bm4SGo8C1bTAQvnTjgQA==}
engines: {node: '>=0.8'}
chalk@2.3.0:
resolution: {integrity: sha512-Az5zJR2CBujap2rqXGaJKaPHyJ0IrUimvYNX+ncCy8PJP4ltOGTrHUIo097ZaL2zMeKYpiCdqDvS6zdrTFok3Q==}
engines: {node: '>=4'}
@ -3435,10 +3421,6 @@ packages:
code-block-writer@12.0.0:
resolution: {integrity: sha512-q4dMFMlXtKR3XNBHyMHt/3pwYNA69EDk00lloMOaaUMKPUXBw6lpXtbu3MMVG6/uOihGnRDOlkyqsONEUj60+w==}
codepage@1.15.0:
resolution: {integrity: sha512-3g6NUTPd/YtuuGrhMnOMRjFc+LJw/bnMp3+0r/Wcz3IXUuCosKRJvMphm5+Q+bvTVGcJJuRvVLuYba+WojaFaA==}
engines: {node: '>=0.8'}
collect-v8-coverage@1.0.3:
resolution: {integrity: sha512-1L5aqIkwPfiodaMgQunkF1zRhNqifHBmtbbbxcr6yVxxBnliw4TDOW6NxpO8DJLgJ16OT+Y4ztZqP6p/FtXnAw==}
@ -3560,11 +3542,6 @@ packages:
typescript:
optional: true
crc-32@1.2.2:
resolution: {integrity: sha512-ROmzCKrTnOwybPcJApAA6WBWij23HVfGVNKqqrZpuyZOHqK2CwHSvpGuyt/UNNvaIjEd8X5IFGp4Mh+Ie1IHJQ==}
engines: {node: '>=0.8'}
hasBin: true
cross-env@7.0.3:
resolution: {integrity: sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==}
engines: {node: '>=10.14', npm: '>=6', yarn: '>=1'}
@ -4285,9 +4262,6 @@ packages:
resolution: {integrity: sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==}
engines: {node: ^10.12.0 || >=12.0.0}
file-saver@2.0.5:
resolution: {integrity: sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA==}
file-selector@2.1.2:
resolution: {integrity: sha512-QgXo+mXTe8ljeqUFaX3QVHc5osSItJ/Km+xpocx0aSqWGMSCf6qYs/VnzZgS864Pjn5iceMRFigeAV7AfTlaig==}
engines: {node: '>= 12'}
@ -4357,10 +4331,6 @@ packages:
resolution: {integrity: sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==}
engines: {node: '>= 0.6'}
frac@1.1.2:
resolution: {integrity: sha512-w/XBfkibaTl3YDqASwfDUqkna4Z2p9cFSr1aHDt0WoMTECnRfBOv2WArlZILlqgWlmdIlALXGpM2AOhEk5W3IA==}
engines: {node: '>=0.8'}
framer-motion@11.18.2:
resolution: {integrity: sha512-5F5Och7wrvtLVElIpclDT0CBzMVg3dL22B64aZwHtsIY8RB4mXICLrkajK4G9R+ieSAGcgrLeae2SeUTg2pr6w==}
peerDependencies:
@ -6917,10 +6887,6 @@ packages:
sprintf-js@1.0.3:
resolution: {integrity: sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==}
ssf@0.11.2:
resolution: {integrity: sha512-+idbmIXoYET47hH+d7dfm2epdOMUDjqcB4648sTZ+t2JwoyBFL/insLfB/racrDmsKB3diwsDA696pZMieAC5g==}
engines: {node: '>=0.8'}
stable-hash@0.0.5:
resolution: {integrity: sha512-+L3ccpzibovGXFK+Ap/f8LOS0ahMrHTf3xu7mMLSpEGU0EO9ucaysSylKo9eRDFNhWve/y275iPmIZ4z39a9iA==}
@ -7588,18 +7554,10 @@ packages:
engines: {node: '>= 8'}
hasBin: true
wmf@1.0.2:
resolution: {integrity: sha512-/p9K7bEh0Dj6WbXg4JG0xvLQmIadrner1bi45VMJTfnbVHsc7yIajZyoSoK60/dtVBs12Fm6WkUI5/3WAVsNMw==}
engines: {node: '>=0.8'}
word-wrap@1.2.5:
resolution: {integrity: sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==}
engines: {node: '>=0.10.0'}
word@0.3.0:
resolution: {integrity: sha512-OELeY0Q61OXpdUfTp+oweA/vtLVg5VDOXh+3he3PNzLGG/y0oylSOC1xRVj0+l4vQ3tj/bB1HVHv1ocXkQceFA==}
engines: {node: '>=0.8'}
wrap-ansi@6.2.0:
resolution: {integrity: sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==}
engines: {node: '>=8'}
@ -7643,11 +7601,6 @@ packages:
utf-8-validate:
optional: true
xlsx@0.18.5:
resolution: {integrity: sha512-dmg3LCjBPHZnQp5/F/+nnTa+miPJxUXB6vtk42YjBBKayDNagxGEeIdWApkYPOf3Z3pm3k62Knjzp7lMeTEtFQ==}
engines: {node: '>=0.8'}
hasBin: true
xml-name-validator@5.0.0:
resolution: {integrity: sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg==}
engines: {node: '>=18'}
@ -7987,6 +7940,8 @@ snapshots:
'@ckeditor/ckeditor5-core': 47.1.0
'@ckeditor/ckeditor5-upload': 47.1.0
ckeditor5: 47.1.0
transitivePeerDependencies:
- supports-color
'@ckeditor/ckeditor5-alignment@41.3.1':
dependencies:
@ -8052,6 +8007,8 @@ snapshots:
'@ckeditor/ckeditor5-ui': 47.1.0
'@ckeditor/ckeditor5-utils': 47.1.0
ckeditor5: 47.1.0
transitivePeerDependencies:
- supports-color
'@ckeditor/ckeditor5-bookmark@47.1.0':
dependencies:
@ -8119,6 +8076,8 @@ snapshots:
'@ckeditor/ckeditor5-core': 47.1.0
'@ckeditor/ckeditor5-utils': 47.1.0
ckeditor5: 47.1.0
transitivePeerDependencies:
- supports-color
'@ckeditor/ckeditor5-code-block@41.3.1':
dependencies:
@ -8185,6 +8144,8 @@ snapshots:
'@ckeditor/ckeditor5-utils': 47.1.0
ckeditor5: 47.1.0
es-toolkit: 1.39.5
transitivePeerDependencies:
- supports-color
'@ckeditor/ckeditor5-editor-decoupled@47.1.0':
dependencies:
@ -8194,6 +8155,8 @@ snapshots:
'@ckeditor/ckeditor5-utils': 47.1.0
ckeditor5: 47.1.0
es-toolkit: 1.39.5
transitivePeerDependencies:
- supports-color
'@ckeditor/ckeditor5-editor-inline@47.1.0':
dependencies:
@ -8203,6 +8166,8 @@ snapshots:
'@ckeditor/ckeditor5-utils': 47.1.0
ckeditor5: 47.1.0
es-toolkit: 1.39.5
transitivePeerDependencies:
- supports-color
'@ckeditor/ckeditor5-editor-multi-root@47.1.0':
dependencies:
@ -8502,6 +8467,8 @@ snapshots:
'@ckeditor/ckeditor5-utils': 47.1.0
'@ckeditor/ckeditor5-widget': 47.1.0
ckeditor5: 47.1.0
transitivePeerDependencies:
- supports-color
'@ckeditor/ckeditor5-mention@47.1.0':
dependencies:
@ -8560,13 +8527,13 @@ snapshots:
'@ckeditor/ckeditor5-engine': 47.1.0
ckeditor5: 47.1.0
'@ckeditor/ckeditor5-react@6.3.0(@ckeditor/ckeditor5-core@47.1.0)(@ckeditor/ckeditor5-editor-multi-root@47.1.0)(@ckeditor/ckeditor5-engine@47.1.0)(@ckeditor/ckeditor5-utils@47.1.0)(@ckeditor/ckeditor5-watchdog@47.1.0)(react@18.3.1)':
'@ckeditor/ckeditor5-react@6.3.0(@ckeditor/ckeditor5-core@41.3.1)(@ckeditor/ckeditor5-editor-multi-root@47.1.0)(@ckeditor/ckeditor5-engine@41.3.1)(@ckeditor/ckeditor5-utils@41.3.1)(@ckeditor/ckeditor5-watchdog@41.3.1)(react@18.3.1)':
dependencies:
'@ckeditor/ckeditor5-core': 47.1.0
'@ckeditor/ckeditor5-core': 41.3.1
'@ckeditor/ckeditor5-editor-multi-root': 47.1.0
'@ckeditor/ckeditor5-engine': 47.1.0
'@ckeditor/ckeditor5-utils': 47.1.0
'@ckeditor/ckeditor5-watchdog': 47.1.0
'@ckeditor/ckeditor5-engine': 41.3.1
'@ckeditor/ckeditor5-utils': 41.3.1
'@ckeditor/ckeditor5-watchdog': 41.3.1
prop-types: 15.8.1
react: 18.3.1
@ -8577,6 +8544,8 @@ snapshots:
'@ckeditor/ckeditor5-ui': 47.1.0
'@ckeditor/ckeditor5-utils': 47.1.0
ckeditor5: 47.1.0
transitivePeerDependencies:
- supports-color
'@ckeditor/ckeditor5-restricted-editing@47.1.0':
dependencies:
@ -8624,6 +8593,8 @@ snapshots:
'@ckeditor/ckeditor5-ui': 47.1.0
'@ckeditor/ckeditor5-utils': 47.1.0
ckeditor5: 47.1.0
transitivePeerDependencies:
- supports-color
'@ckeditor/ckeditor5-special-characters@47.1.0':
dependencies:
@ -8790,6 +8761,8 @@ snapshots:
'@ckeditor/ckeditor5-utils': 47.1.0
ckeditor5: 47.1.0
es-toolkit: 1.39.5
transitivePeerDependencies:
- supports-color
'@csstools/color-helpers@5.1.0': {}
@ -10927,8 +10900,6 @@ snapshots:
acorn@8.15.0: {}
adler-32@1.3.1: {}
agent-base@7.1.4: {}
ajv@6.12.6:
@ -11269,11 +11240,6 @@ snapshots:
ccount@2.0.1: {}
cfb@1.2.2:
dependencies:
adler-32: 1.3.1
crc-32: 1.2.2
chalk@2.3.0:
dependencies:
ansi-styles: 3.2.1
@ -11477,8 +11443,6 @@ snapshots:
code-block-writer@12.0.0: {}
codepage@1.15.0: {}
collect-v8-coverage@1.0.3: {}
color-convert@1.9.3:
@ -11587,8 +11551,6 @@ snapshots:
optionalDependencies:
typescript: 5.9.3
crc-32@1.2.2: {}
cross-env@7.0.3:
dependencies:
cross-spawn: 7.0.6
@ -12132,7 +12094,7 @@ snapshots:
eslint: 8.57.1
eslint-import-resolver-node: 0.3.9
eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import@2.32.0(eslint@8.57.1))(eslint@8.57.1)
eslint-plugin-import: 2.32.0(@typescript-eslint/parser@7.2.0(eslint@8.57.1)(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1)
eslint-plugin-import: 2.32.0(@typescript-eslint/parser@7.2.0(eslint@8.57.1)(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1)(eslint@8.57.1)
eslint-plugin-jsx-a11y: 6.10.2(eslint@8.57.1)
eslint-plugin-react: 7.37.5(eslint@8.57.1)
eslint-plugin-react-hooks: 5.0.0-canary-7118f5dd7-20230705(eslint@8.57.1)
@ -12162,7 +12124,7 @@ snapshots:
tinyglobby: 0.2.15
unrs-resolver: 1.11.1
optionalDependencies:
eslint-plugin-import: 2.32.0(@typescript-eslint/parser@7.2.0(eslint@8.57.1)(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1)
eslint-plugin-import: 2.32.0(@typescript-eslint/parser@7.2.0(eslint@8.57.1)(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1)(eslint@8.57.1)
transitivePeerDependencies:
- supports-color
@ -12177,7 +12139,7 @@ snapshots:
transitivePeerDependencies:
- supports-color
eslint-plugin-import@2.32.0(@typescript-eslint/parser@7.2.0(eslint@8.57.1)(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1):
eslint-plugin-import@2.32.0(@typescript-eslint/parser@7.2.0(eslint@8.57.1)(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1)(eslint@8.57.1):
dependencies:
'@rtsao/scc': 1.1.0
array-includes: 3.1.9
@ -12498,8 +12460,6 @@ snapshots:
dependencies:
flat-cache: 3.2.0
file-saver@2.0.5: {}
file-selector@2.1.2:
dependencies:
tslib: 2.8.1
@ -12570,8 +12530,6 @@ snapshots:
forwarded@0.2.0: {}
frac@1.1.2: {}
framer-motion@11.18.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
dependencies:
motion-dom: 11.18.1
@ -16092,10 +16050,6 @@ snapshots:
sprintf-js@1.0.3: {}
ssf@0.11.2:
dependencies:
frac: 1.1.2
stable-hash@0.0.5: {}
stack-utils@2.0.6:
@ -16913,12 +16867,8 @@ snapshots:
dependencies:
isexe: 2.0.0
wmf@1.0.2: {}
word-wrap@1.2.5: {}
word@0.3.0: {}
wrap-ansi@6.2.0:
dependencies:
ansi-styles: 4.3.0
@ -16948,16 +16898,6 @@ snapshots:
ws@8.18.3: {}
xlsx@0.18.5:
dependencies:
adler-32: 1.3.1
cfb: 1.2.2
codepage: 1.15.0
crc-32: 1.2.2
ssf: 0.11.2
wmf: 1.0.2
word: 0.3.0
xml-name-validator@5.0.0: {}
xmlchars@2.2.0: {}

2
service/auth.ts
View File

@ -45,7 +45,7 @@ export async function getCsrfToken() {
"content-type": "application/json",
};
return httpGet(pathUrl, headers);
// const url = 'https://new.netidhub.com/api/csrf';
// const url = 'https://netidhub.com/api/csrf';
// try {
// const response = await fetch(url, {
// method: 'GET',

2
service/broadcast/broadcast.ts
View File

@ -96,7 +96,7 @@ export async function detailMediaSummary(id: string) {
export async function saveMediaBlastAccount(data: {
accountName: string;
accountType: string;
// accountCategory: string;
accountCategory: string;
emailAddress: string;
whatsappNumber: string;
id?: string;

6
service/communication/communication.ts
View File

@ -3,6 +3,7 @@ import {
httpGetInterceptor,
httpPostInterceptor,
} from "../http-config/http-interceptor-service";
import { title } from "process";
export async function listTicketingInternal(
page: number,
@ -15,7 +16,6 @@ export async function listTicketingInternal(
);
}
export async function getTicketingEscalationPagination(
page: number,
size: any,
@ -64,10 +64,6 @@ export async function deleteTicket(id: any) {
return httpDeleteInterceptor(url, id);
}
export async function deleteTicketInternal(id: number | string) {
return await httpDeleteInterceptor(`ticketing/internal?id=${id}`);
}
export async function closeTicket(id: any) {
const url = `ticketing/close?id=${id}`;
return httpPostInterceptor(url, id);

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