This commit is contained in:
hanif salafi 2025-07-24 16:31:25 +07:00
commit 7d9f23896e
40 changed files with 624 additions and 280 deletions

View File

@ -76,9 +76,6 @@ export default function EditUserForm() {
}, },
}); });
const passwordVal = form.watch("password");
const confPasswordVal = form.watch("confirmPassword");
useEffect(() => { useEffect(() => {
initData(); initData();
}, []); }, []);

View File

@ -354,7 +354,7 @@ export default function EditUserForm() {
rules={["minLength", "specialChar", "number", "capital", "match"]} rules={["minLength", "specialChar", "number", "capital", "match"]}
minLength={8} minLength={8}
value={passwordVal || ""} value={passwordVal || ""}
valueAgain={confPasswordVal} valueAgain={confPasswordVal || ""}
onChange={(isValid) => { onChange={(isValid) => {
form.setValue("isValidPassword", isValid); form.setValue("isValidPassword", isValid);
}} }}

View File

@ -752,7 +752,7 @@ export default function CreateUserForm() {
rules={["minLength", "specialChar", "number", "capital", "match"]} rules={["minLength", "specialChar", "number", "capital", "match"]}
minLength={8} minLength={8}
value={passwordVal || ""} value={passwordVal || ""}
valueAgain={confPasswordVal} valueAgain={confPasswordVal || ""}
onChange={(isValid) => { onChange={(isValid) => {
form.setValue("isValidPassword", isValid); form.setValue("isValidPassword", isValid);
}} }}

View File

@ -191,8 +191,6 @@ export default function DetailUserForm() {
}, },
}); });
const passwordVal = form.watch("password");
const confPasswordVal = form.watch("confirmPassword");
const selectedRole = form.watch("role"); const selectedRole = form.watch("role");
useEffect(() => { useEffect(() => {

View File

@ -757,7 +757,7 @@ export default function EditUserForm() {
rules={["minLength", "specialChar", "number", "capital", "match"]} rules={["minLength", "specialChar", "number", "capital", "match"]}
minLength={8} minLength={8}
value={passwordVal || ""} value={passwordVal || ""}
valueAgain={confPasswordVal} valueAgain={confPasswordVal || ""}
onChange={(isValid) => { onChange={(isValid) => {
form.setValue("isValidPassword", isValid); form.setValue("isValidPassword", isValid);
}} }}

View File

@ -125,16 +125,16 @@ export default function CreateCategoryModal() {
}); });
const contentType = form.watch("contentType"); const contentType = form.watch("contentType");
const isAllContentChecked = listContent.every((item) => const isAllContentChecked = contentType && listContent.every((item) =>
contentType?.includes(item.id) contentType.includes(item.id)
); );
const users = form.watch("selectedUser"); const users = form.watch("selectedUser");
const isAllUserChecked = userList.every((item) => users?.includes(item.id)); const isAllUserChecked = users && userList.every((item) => users.includes(item.id));
const target = form.watch("publishTo"); const target = form.watch("publishTo");
const isAllTargetChecked = publishToList.every((item) => const isAllTargetChecked = target && publishToList.every((item) =>
target?.includes(item.id) target.includes(item.id)
); );
const { getRootProps, getInputProps } = useDropzone({ const { getRootProps, getInputProps } = useDropzone({

View File

@ -146,12 +146,12 @@ export default function EditCategoryModal(props: {
form.setValue("id", String(data?.id)); form.setValue("id", String(data?.id));
form.setValue("title", String(data?.name)); form.setValue("title", String(data?.name));
form.setValue("description", String(data?.description)); form.setValue("description", String(data?.description));
form.setValue("contentType", data?.mediaTypes?.split(",")); form.setValue("contentType", data?.mediaTypes?.split(",") || []);
form.setValue( form.setValue(
"selectedUser", "selectedUser",
removeAndReturn(data?.publishedFor, [2, 3, 4]) removeAndReturn(data?.publishedFor, [2, 3, 4])
); );
form.setValue("publishTo", data?.publishedLocation?.split(",")); form.setValue("publishTo", data?.publishedLocation?.split(",") || []);
form.setValue("file", thumbnailLink); form.setValue("file", thumbnailLink);
setUnitData(filterString(data?.publishedLocationLevel, "under")); setUnitData(filterString(data?.publishedLocationLevel, "under"));
@ -183,16 +183,16 @@ export default function EditCategoryModal(props: {
} }
const contentType = form.watch("contentType"); const contentType = form.watch("contentType");
const isAllContentChecked = listContent.every((item) => const isAllContentChecked = contentType && listContent.every((item) =>
contentType?.includes(item.id) contentType.includes(item.id)
); );
const users = form.watch("selectedUser"); const users = form.watch("selectedUser");
const isAllUserChecked = userList.every((item) => users?.includes(item.id)); const isAllUserChecked = users && userList.every((item) => users.includes(item.id));
const target = form.watch("publishTo"); const target = form.watch("publishTo");
const isAllTargetChecked = publishToList.every((item) => const isAllTargetChecked = target && publishToList.every((item) =>
target?.includes(item.id) target.includes(item.id)
); );
useEffect(() => { useEffect(() => {

View File

@ -68,11 +68,11 @@ export function UnitMapping(props: {
const unitType = form.watch("items"); const unitType = form.watch("items");
const isAllUnitChecked = unitList.every((item) => const isAllUnitChecked = unitType && unitList.every((item) =>
unitType?.includes(String(item.id)) unitType.includes(String(item.id))
); );
const isAllSatkerChecked = satkerList.every((item) => const isAllSatkerChecked = unitType && satkerList.every((item) =>
unitType?.includes(String(item.id)) unitType.includes(String(item.id))
); );
const setupUnit = (data: UnitType[]) => { const setupUnit = (data: UnitType[]) => {

View File

@ -91,8 +91,8 @@ export default function CreateFAQModal() {
}); });
const target = form.watch("publishTo"); const target = form.watch("publishTo");
const isAllTargetChecked = publishToList.every((item) => const isAllTargetChecked = target && publishToList.every((item) =>
target?.includes(item.id) target.includes(item.id)
); );
const onSubmit = async (data: z.infer<typeof FormSchema>) => { const onSubmit = async (data: z.infer<typeof FormSchema>) => {

View File

@ -74,11 +74,11 @@ export function UnitMapping(props: {
const unitType = form.watch("items"); const unitType = form.watch("items");
const isAllUnitChecked = unitList.every((item) => const isAllUnitChecked = unitType && unitList.every((item) =>
unitType?.includes(String(item.id)) unitType.includes(String(item.id))
); );
const isAllSatkerChecked = satkerList.every((item) => const isAllSatkerChecked = unitType && satkerList.every((item) =>
unitType?.includes(String(item.id)) unitType.includes(String(item.id))
); );
const isAllPolresChecked = polresList.every((item) => const isAllPolresChecked = polresList.every((item) =>
unitType?.includes(String(item.id)) unitType?.includes(String(item.id))

View File

@ -132,29 +132,36 @@ const useTableColumns = () => {
accessorKey: "statusName", accessorKey: "statusName",
header: "Status", header: "Status",
cell: ({ row }) => { cell: ({ row }) => {
const statusColors: Record<string, string> = { const statusId = Number(row.original?.statusId);
diterima: "bg-green-100 text-green-600", const reviewedAtLevel = row.original?.reviewedAtLevel || "";
"menunggu review": "bg-orange-100 text-orange-600", const creatorGroupLevelId = Number(row.original?.creatorGroupLevelId);
const needApprovalFromLevel = Number(
row.original?.needApprovalFromLevel
);
const userHasReviewed = reviewedAtLevel.includes(`:${userLevelId}:`);
const isCreator = creatorGroupLevelId === Number(userLevelId);
const isWaitingForReview =
statusId === 2 && !userHasReviewed && !isCreator;
const isApprovalNeeded =
statusId === 1 && needApprovalFromLevel === Number(userLevelId);
const label =
isWaitingForReview || isApprovalNeeded
? "Menunggu Review"
: statusId === 2
? "Diterima"
: row.original?.statusName;
const colors: Record<string, string> = {
"Menunggu Review": "bg-orange-100 text-orange-600",
Diterima: "bg-green-100 text-green-600",
default: "bg-red-200 text-red-600",
}; };
const colors = [ const statusStyles = colors[label] || colors.default;
"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 ( return (
<Badge <Badge
@ -163,18 +170,7 @@ const useTableColumns = () => {
statusStyles statusStyles
)} )}
> >
{(Number(row.original?.statusId) == 2 && {label}
!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> </Badge>
); );
}, },

View File

@ -281,11 +281,11 @@ export default function DetailDaily() {
const output = form.watch("output"); const output = form.watch("output");
const isAllChecked = items.every((item) => output?.includes(item.id)); const isAllChecked = output && items.every((item) => output.includes(item.id));
const unit = form.watch("unit"); const unit = form.watch("unit");
const isAllUnitChecked = units.every((item) => unit?.includes(item.id)); const isAllUnitChecked = unit && units.every((item) => unit.includes(item.id));
const handleAllCheckedChange = (checked: boolean | string) => { const handleAllCheckedChange = (checked: boolean | string) => {
if (checked) { if (checked) {
@ -318,11 +318,11 @@ export default function DetailDaily() {
const handleUnitCheckedChange = (id: string, checked: boolean | string) => { const handleUnitCheckedChange = (id: string, checked: boolean | string) => {
if (checked) { if (checked) {
form.setValue("unit", [...unit, id]); form.setValue("unit", [...(unit ?? []), id]);
} else { } else {
if (id == "2") { if (id == "2") {
const temp = []; const temp = [];
for (const element of unit) { for (const element of unit ?? []) {
if (element == "1") { if (element == "1") {
temp.push("1"); temp.push("1");
} }
@ -331,7 +331,7 @@ export default function DetailDaily() {
} else { } else {
form.setValue( form.setValue(
"unit", "unit",
unit.filter((value) => value !== id) (unit ?? []).filter((value) => value !== id)
); );
} }
} }
@ -542,14 +542,14 @@ export default function DetailDaily() {
id={list.id} id={list.id}
name={`all${list.id}`} name={`all${list.id}`}
checked={ checked={
unit.includes("2") unit?.includes("2") ?? false
? true ? true
: !!selected[list.id] : !!selected[list.id]
} }
onCheckedChange={() => onCheckedChange={() =>
handleParentChange(list.id) handleParentChange(list.id)
} }
disabled={unit.includes("2")} disabled={unit?.includes("2") ?? false}
/> />
<label <label
htmlFor={list.name} htmlFor={list.name}
@ -564,7 +564,7 @@ export default function DetailDaily() {
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
<Checkbox <Checkbox
checked={ checked={
unit.includes("3") unit?.includes("3") ?? false
? true ? true
: !!selectAll[list.id] : !!selectAll[list.id]
} }
@ -574,7 +574,7 @@ export default function DetailDaily() {
Boolean(e) Boolean(e)
) )
} }
disabled={unit.includes("3")} disabled={unit?.includes("3") ?? false}
/> />
<label <label
htmlFor="all-polres" htmlFor="all-polres"
@ -592,7 +592,7 @@ export default function DetailDaily() {
<Checkbox <Checkbox
id={`${list.id}${subDes.id}`} id={`${list.id}${subDes.id}`}
checked={ checked={
unit.includes("3") unit?.includes("3") ?? false
? true ? true
: !!selected[ : !!selected[
`${list.id}${subDes.id}` `${list.id}${subDes.id}`
@ -603,7 +603,7 @@ export default function DetailDaily() {
`${list.id}${subDes.id}` `${list.id}${subDes.id}`
) )
} }
disabled={unit.includes("3")} disabled={unit?.includes("3") ?? false}
/> />
<label <label
htmlFor={`${list.id}${subDes.id}`} htmlFor={`${list.id}${subDes.id}`}

View File

@ -294,11 +294,11 @@ export default function EditDaily() {
const output = form.watch("output"); const output = form.watch("output");
const isAllChecked = items.every((item) => output?.includes(item.id)); const isAllChecked = output && items.every((item) => output.includes(item.id));
const unit = form.watch("unit"); const unit = form.watch("unit");
const isAllUnitChecked = units.every((item) => unit?.includes(item.id)); const isAllUnitChecked = unit && units.every((item) => unit.includes(item.id));
const handleAllCheckedChange = (checked: boolean | string) => { const handleAllCheckedChange = (checked: boolean | string) => {
if (checked) { if (checked) {
@ -314,7 +314,7 @@ export default function EditDaily() {
const handleItemCheckedChange = (id: string, checked: boolean | string) => { const handleItemCheckedChange = (id: string, checked: boolean | string) => {
form.setValue( form.setValue(
"output", "output",
checked ? [...output, id] : output.filter((value) => value !== id) checked ? [...(output ?? []), id] : (output ?? []).filter((value) => value !== id)
); );
}; };
@ -331,11 +331,11 @@ export default function EditDaily() {
const handleUnitCheckedChange = (id: string, checked: boolean | string) => { const handleUnitCheckedChange = (id: string, checked: boolean | string) => {
if (checked) { if (checked) {
form.setValue("unit", [...unit, id]); form.setValue("unit", [...(unit ?? []), id]);
} else { } else {
if (id == "2") { if (id == "2") {
const temp = []; const temp = [];
for (const element of unit) { for (const element of unit ?? []) {
if (element == "1") { if (element == "1") {
temp.push("1"); temp.push("1");
} }
@ -344,7 +344,7 @@ export default function EditDaily() {
} else { } else {
form.setValue( form.setValue(
"unit", "unit",
unit.filter((value) => value !== id) (unit ?? []).filter((value) => value !== id)
); );
} }
} }
@ -506,7 +506,7 @@ export default function EditDaily() {
<Checkbox <Checkbox
checked={unit?.includes(item.id)} checked={unit?.includes(item.id)}
disabled={ disabled={
item.id === "3" && !unit.includes("2") item.id === "3" && !(unit?.includes("2") ?? false)
} }
onCheckedChange={(checked) => onCheckedChange={(checked) =>
handleUnitCheckedChange(item.id, checked) handleUnitCheckedChange(item.id, checked)
@ -550,14 +550,14 @@ export default function EditDaily() {
id={list.id} id={list.id}
name={`all${list.id}`} name={`all${list.id}`}
checked={ checked={
unit.includes("2") unit?.includes("2") ?? false
? true ? true
: !!selected[list.id] : !!selected[list.id]
} }
onCheckedChange={() => onCheckedChange={() =>
handleParentChange(list.id) handleParentChange(list.id)
} }
disabled={unit.includes("2")} disabled={unit?.includes("2") ?? false}
/> />
<label <label
htmlFor={list.name} htmlFor={list.name}
@ -572,7 +572,7 @@ export default function EditDaily() {
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
<Checkbox <Checkbox
checked={ checked={
unit.includes("3") unit?.includes("3") ?? false
? true ? true
: !!selectAll[list.id] : !!selectAll[list.id]
} }
@ -582,7 +582,7 @@ export default function EditDaily() {
Boolean(e) Boolean(e)
) )
} }
disabled={unit.includes("3")} disabled={unit?.includes("3") ?? false}
/> />
<label <label
htmlFor="all-polres" htmlFor="all-polres"
@ -600,7 +600,7 @@ export default function EditDaily() {
<Checkbox <Checkbox
id={`${list.id}${subDes.id}`} id={`${list.id}${subDes.id}`}
checked={ checked={
unit.includes("3") unit?.includes("3") ?? false
? true ? true
: !!selected[ : !!selected[
`${list.id}${subDes.id}` `${list.id}${subDes.id}`
@ -611,7 +611,7 @@ export default function EditDaily() {
`${list.id}${subDes.id}` `${list.id}${subDes.id}`
) )
} }
disabled={unit.includes("3")} disabled={unit?.includes("3") ?? false}
/> />
<label <label
htmlFor={`${list.id}${subDes.id}`} htmlFor={`${list.id}${subDes.id}`}

View File

@ -242,11 +242,11 @@ export default function CreateDaily() {
const output = form.watch("output"); const output = form.watch("output");
const isAllChecked = items.every((item) => output?.includes(item.id)); const isAllChecked = output && items.every((item) => output.includes(item.id));
const unit = form.watch("unit"); const unit = form.watch("unit");
const isAllUnitChecked = units.every((item) => unit?.includes(item.id)); const isAllUnitChecked = unit && units.every((item) => unit.includes(item.id));
const handleAllCheckedChange = (checked: boolean | string) => { const handleAllCheckedChange = (checked: boolean | string) => {
if (checked) { if (checked) {
@ -262,7 +262,7 @@ export default function CreateDaily() {
const handleItemCheckedChange = (id: string, checked: boolean | string) => { const handleItemCheckedChange = (id: string, checked: boolean | string) => {
form.setValue( form.setValue(
"output", "output",
checked ? [...output, id] : output.filter((value) => value !== id) checked ? [...(output ?? []), id] : (output ?? []).filter((value) => value !== id)
); );
}; };
@ -279,11 +279,11 @@ export default function CreateDaily() {
const handleUnitCheckedChange = (id: string, checked: boolean | string) => { const handleUnitCheckedChange = (id: string, checked: boolean | string) => {
if (checked) { if (checked) {
form.setValue("unit", [...unit, id]); form.setValue("unit", [...(unit ?? []), id]);
} else { } else {
if (id == "2") { if (id == "2") {
const temp = []; const temp = [];
for (const element of unit) { for (const element of unit ?? []) {
if (element == "1") { if (element == "1") {
temp.push("1"); temp.push("1");
} }
@ -292,7 +292,7 @@ export default function CreateDaily() {
} else { } else {
form.setValue( form.setValue(
"unit", "unit",
unit.filter((value) => value !== id) (unit ?? []).filter((value) => value !== id)
); );
} }
} }
@ -472,7 +472,7 @@ export default function CreateDaily() {
<Checkbox <Checkbox
checked={unit?.includes(item.id)} checked={unit?.includes(item.id)}
disabled={ disabled={
item.id === "3" && !unit.includes("2") item.id === "3" && !(unit?.includes("2") ?? false)
} }
onCheckedChange={(checked) => onCheckedChange={(checked) =>
handleUnitCheckedChange(item.id, checked) handleUnitCheckedChange(item.id, checked)
@ -516,14 +516,14 @@ export default function CreateDaily() {
id={list.id} id={list.id}
name={`all${list.id}`} name={`all${list.id}`}
checked={ checked={
unit.includes("2") unit?.includes("2") ?? false
? true ? true
: !!selected[list.id] : !!selected[list.id]
} }
onCheckedChange={() => onCheckedChange={() =>
handleParentChange(list.id) handleParentChange(list.id)
} }
disabled={unit.includes("2")} disabled={unit?.includes("2") ?? false}
/> />
<label <label
htmlFor={list.name} htmlFor={list.name}
@ -538,7 +538,7 @@ export default function CreateDaily() {
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
<Checkbox <Checkbox
checked={ checked={
unit.includes("3") unit?.includes("3") ?? false
? true ? true
: !!selectAll[list.id] : !!selectAll[list.id]
} }
@ -548,7 +548,7 @@ export default function CreateDaily() {
Boolean(e) Boolean(e)
) )
} }
disabled={unit.includes("3")} disabled={unit?.includes("3") ?? false}
/> />
<label <label
htmlFor="all-polres" htmlFor="all-polres"
@ -566,7 +566,7 @@ export default function CreateDaily() {
<Checkbox <Checkbox
id={`${list.id}${subDes.id}`} id={`${list.id}${subDes.id}`}
checked={ checked={
unit.includes("3") unit?.includes("3") ?? false
? true ? true
: !!selected[ : !!selected[
`${list.id}${subDes.id}` `${list.id}${subDes.id}`
@ -577,7 +577,7 @@ export default function CreateDaily() {
`${list.id}${subDes.id}` `${list.id}${subDes.id}`
) )
} }
disabled={unit.includes("3")} disabled={unit?.includes("3") ?? false}
/> />
<label <label
htmlFor={`${list.id}${subDes.id}`} htmlFor={`${list.id}${subDes.id}`}

View File

@ -281,11 +281,11 @@ export default function DetailDaily() {
const output = form.watch("output"); const output = form.watch("output");
const isAllChecked = items.every((item) => output?.includes(item.id)); const isAllChecked = output && items.every((item) => output.includes(item.id));
const unit = form.watch("unit"); const unit = form.watch("unit");
const isAllUnitChecked = units.every((item) => unit?.includes(item.id)); const isAllUnitChecked = unit && units.every((item) => unit.includes(item.id));
const handleAllCheckedChange = (checked: boolean | string) => { const handleAllCheckedChange = (checked: boolean | string) => {
if (checked) { if (checked) {
@ -301,7 +301,7 @@ export default function DetailDaily() {
const handleItemCheckedChange = (id: string, checked: boolean | string) => { const handleItemCheckedChange = (id: string, checked: boolean | string) => {
form.setValue( form.setValue(
"output", "output",
checked ? [...output, id] : output.filter((value) => value !== id) checked ? [...(output ?? []), id] : (output ?? []).filter((value) => value !== id)
); );
}; };
@ -318,11 +318,11 @@ export default function DetailDaily() {
const handleUnitCheckedChange = (id: string, checked: boolean | string) => { const handleUnitCheckedChange = (id: string, checked: boolean | string) => {
if (checked) { if (checked) {
form.setValue("unit", [...unit, id]); form.setValue("unit", [...(unit ?? []), id]);
} else { } else {
if (id == "2") { if (id == "2") {
const temp = []; const temp = [];
for (const element of unit) { for (const element of unit ?? []) {
if (element == "1") { if (element == "1") {
temp.push("1"); temp.push("1");
} }
@ -331,7 +331,7 @@ export default function DetailDaily() {
} else { } else {
form.setValue( form.setValue(
"unit", "unit",
unit.filter((value) => value !== id) (unit ?? []).filter((value) => value !== id)
); );
} }
} }
@ -542,14 +542,14 @@ export default function DetailDaily() {
id={list.id} id={list.id}
name={`all${list.id}`} name={`all${list.id}`}
checked={ checked={
unit.includes("2") unit?.includes("2") ?? false
? true ? true
: !!selected[list.id] : !!selected[list.id]
} }
onCheckedChange={() => onCheckedChange={() =>
handleParentChange(list.id) handleParentChange(list.id)
} }
disabled={unit.includes("2")} disabled={unit?.includes("2") ?? false}
/> />
<label <label
htmlFor={list.name} htmlFor={list.name}
@ -564,7 +564,7 @@ export default function DetailDaily() {
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
<Checkbox <Checkbox
checked={ checked={
unit.includes("3") unit?.includes("3") ?? false
? true ? true
: !!selectAll[list.id] : !!selectAll[list.id]
} }
@ -574,7 +574,7 @@ export default function DetailDaily() {
Boolean(e) Boolean(e)
) )
} }
disabled={unit.includes("3")} disabled={unit?.includes("3") ?? false}
/> />
<label <label
htmlFor="all-polres" htmlFor="all-polres"
@ -592,7 +592,7 @@ export default function DetailDaily() {
<Checkbox <Checkbox
id={`${list.id}${subDes.id}`} id={`${list.id}${subDes.id}`}
checked={ checked={
unit.includes("3") unit?.includes("3") ?? false
? true ? true
: !!selected[ : !!selected[
`${list.id}${subDes.id}` `${list.id}${subDes.id}`
@ -603,7 +603,7 @@ export default function DetailDaily() {
`${list.id}${subDes.id}` `${list.id}${subDes.id}`
) )
} }
disabled={unit.includes("3")} disabled={unit?.includes("3") ?? false}
/> />
<label <label
htmlFor={`${list.id}${subDes.id}`} htmlFor={`${list.id}${subDes.id}`}

View File

@ -294,11 +294,11 @@ export default function EditDaily() {
const output = form.watch("output"); const output = form.watch("output");
const isAllChecked = items.every((item) => output?.includes(item.id)); const isAllChecked = output && items.every((item) => output.includes(item.id));
const unit = form.watch("unit"); const unit = form.watch("unit");
const isAllUnitChecked = units.every((item) => unit?.includes(item.id)); const isAllUnitChecked = unit && units.every((item) => unit.includes(item.id));
const handleAllCheckedChange = (checked: boolean | string) => { const handleAllCheckedChange = (checked: boolean | string) => {
if (checked) { if (checked) {
@ -314,7 +314,7 @@ export default function EditDaily() {
const handleItemCheckedChange = (id: string, checked: boolean | string) => { const handleItemCheckedChange = (id: string, checked: boolean | string) => {
form.setValue( form.setValue(
"output", "output",
checked ? [...output, id] : output.filter((value) => value !== id) checked ? [...(output ?? []), id] : (output ?? []).filter((value) => value !== id)
); );
}; };
@ -331,11 +331,11 @@ export default function EditDaily() {
const handleUnitCheckedChange = (id: string, checked: boolean | string) => { const handleUnitCheckedChange = (id: string, checked: boolean | string) => {
if (checked) { if (checked) {
form.setValue("unit", [...unit, id]); form.setValue("unit", [...(unit ?? []), id]);
} else { } else {
if (id == "2") { if (id == "2") {
const temp = []; const temp = [];
for (const element of unit) { for (const element of unit ?? []) {
if (element == "1") { if (element == "1") {
temp.push("1"); temp.push("1");
} }
@ -344,7 +344,7 @@ export default function EditDaily() {
} else { } else {
form.setValue( form.setValue(
"unit", "unit",
unit.filter((value) => value !== id) (unit ?? []).filter((value) => value !== id)
); );
} }
} }
@ -506,7 +506,7 @@ export default function EditDaily() {
<Checkbox <Checkbox
checked={unit?.includes(item.id)} checked={unit?.includes(item.id)}
disabled={ disabled={
item.id === "3" && !unit.includes("2") item.id === "3" && !(unit?.includes("2") ?? false)
} }
onCheckedChange={(checked) => onCheckedChange={(checked) =>
handleUnitCheckedChange(item.id, checked) handleUnitCheckedChange(item.id, checked)
@ -550,14 +550,14 @@ export default function EditDaily() {
id={list.id} id={list.id}
name={`all${list.id}`} name={`all${list.id}`}
checked={ checked={
unit.includes("2") unit?.includes("2") ?? false
? true ? true
: !!selected[list.id] : !!selected[list.id]
} }
onCheckedChange={() => onCheckedChange={() =>
handleParentChange(list.id) handleParentChange(list.id)
} }
disabled={unit.includes("2")} disabled={unit?.includes("2") ?? false}
/> />
<label <label
htmlFor={list.name} htmlFor={list.name}
@ -572,7 +572,7 @@ export default function EditDaily() {
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
<Checkbox <Checkbox
checked={ checked={
unit.includes("3") unit?.includes("3") ?? false
? true ? true
: !!selectAll[list.id] : !!selectAll[list.id]
} }
@ -582,7 +582,7 @@ export default function EditDaily() {
Boolean(e) Boolean(e)
) )
} }
disabled={unit.includes("3")} disabled={unit?.includes("3") ?? false}
/> />
<label <label
htmlFor="all-polres" htmlFor="all-polres"
@ -600,7 +600,7 @@ export default function EditDaily() {
<Checkbox <Checkbox
id={`${list.id}${subDes.id}`} id={`${list.id}${subDes.id}`}
checked={ checked={
unit.includes("3") unit?.includes("3") ?? false
? true ? true
: !!selected[ : !!selected[
`${list.id}${subDes.id}` `${list.id}${subDes.id}`
@ -611,7 +611,7 @@ export default function EditDaily() {
`${list.id}${subDes.id}` `${list.id}${subDes.id}`
) )
} }
disabled={unit.includes("3")} disabled={unit?.includes("3") ?? false}
/> />
<label <label
htmlFor={`${list.id}${subDes.id}`} htmlFor={`${list.id}${subDes.id}`}

View File

@ -264,9 +264,9 @@ export default function CreateDaily() {
const media = form.watch("media"); const media = form.watch("media");
const unit = form.watch("unit"); const unit = form.watch("unit");
const isAllChecked = items.every((item) => output?.includes(item.id)); const isAllChecked = output && items.every((item) => output.includes(item.id));
const isAllMediaChecked = medias.every((item) => media?.includes(item.id)); const isAllMediaChecked = media && medias.every((item) => media.includes(item.id));
const isAllUnitChecked = units.every((item) => unit?.includes(item.id)); const isAllUnitChecked = unit && units.every((item) => unit.includes(item.id));
useEffect(() => { useEffect(() => {
async function initState() { async function initState() {
@ -398,10 +398,8 @@ export default function CreateDaily() {
form.setValue( form.setValue(
"output", "output",
checked checked
? [...output, item.id] ? [...(output ?? []), item.id]
: output.filter( : (output ?? []).filter((value) => value !== item.id)
(value) => value !== item.id
)
); );
}} }}
/> />
@ -464,16 +462,14 @@ export default function CreateDaily() {
checked={unit?.includes(item.id)} checked={unit?.includes(item.id)}
disabled={ disabled={
item.id === "polres" && item.id === "polres" &&
!unit.includes("polda") !(unit?.includes("polda") ?? false)
} }
onCheckedChange={(checked) => { onCheckedChange={(checked) => {
form.setValue( form.setValue(
"unit", "unit",
checked checked
? [...unit, item.id] ? [...(unit ?? []), item.id]
: unit.filter( : (unit ?? []).filter((value) => value !== item.id)
(value) => value !== item.id
)
); );
}} }}
/> />
@ -515,14 +511,14 @@ export default function CreateDaily() {
id={list.id} id={list.id}
name={`all${list.id}`} name={`all${list.id}`}
checked={ checked={
unit.includes("2") unit?.includes("2") ?? false
? true ? true
: !!selected[list.id] : !!selected[list.id]
} }
onCheckedChange={() => onCheckedChange={() =>
handleParentChange(list.id) handleParentChange(list.id)
} }
disabled={unit.includes("2")} disabled={unit?.includes("2") ?? false}
/> />
<label <label
htmlFor={list.name} htmlFor={list.name}
@ -537,7 +533,7 @@ export default function CreateDaily() {
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
<Checkbox <Checkbox
checked={ checked={
unit.includes("3") unit?.includes("3") ?? false
? true ? true
: !!selectAll[list.id] : !!selectAll[list.id]
} }
@ -547,7 +543,7 @@ export default function CreateDaily() {
Boolean(e) Boolean(e)
) )
} }
disabled={unit.includes("3")} disabled={unit?.includes("3") ?? false}
/> />
<label <label
htmlFor="all-polres" htmlFor="all-polres"
@ -565,7 +561,7 @@ export default function CreateDaily() {
<Checkbox <Checkbox
id={`${list.id}${subDes.id}`} id={`${list.id}${subDes.id}`}
checked={ checked={
unit.includes("3") unit?.includes("3") ?? false
? true ? true
: !!selected[ : !!selected[
`${list.id}${subDes.id}` `${list.id}${subDes.id}`
@ -576,7 +572,7 @@ export default function CreateDaily() {
`${list.id}${subDes.id}` `${list.id}${subDes.id}`
) )
} }
disabled={unit.includes("3")} disabled={unit?.includes("3") ?? false}
/> />
<label <label
htmlFor={`${list.id}${subDes.id}`} htmlFor={`${list.id}${subDes.id}`}
@ -648,8 +644,8 @@ export default function CreateDaily() {
form.setValue( form.setValue(
"media", "media",
checked checked
? [...media, item.id] ? [...(media ?? []), item.id]
: media.filter( : (media ?? []).filter(
(value) => value !== item.id (value) => value !== item.id
) )
); );

View File

@ -24,6 +24,7 @@ import {
} from "@/components/ui/table"; } from "@/components/ui/table";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"; import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { import {
ChevronDown,
ChevronLeft, ChevronLeft,
ChevronRight, ChevronRight,
Eye, Eye,
@ -61,6 +62,7 @@ import {
SelectValue, SelectValue,
} from "@/components/ui/select"; } from "@/components/ui/select";
import { useTranslations } from "next-intl"; import { useTranslations } from "next-intl";
import { Label } from "@/components/ui/label";
type StatusFilter = string[]; type StatusFilter = string[];
@ -87,7 +89,8 @@ const ContentTable = () => {
const userLevelId = getCookiesDecrypt("ulie"); const userLevelId = getCookiesDecrypt("ulie");
const [categories, setCategories] = React.useState<string[]>(); const [categories, setCategories] = React.useState<string[]>();
const [categoryFilter, setCategoryFilter] = React.useState<string[]>([]); const [categoryFilter, setCategoryFilter] = React.useState<string[]>([]);
const [statusFilter, setStatusFilter] = React.useState<StatusFilter>([]); // const [statusFilter, setStatusFilter] = React.useState<StatusFilter>([]);
const [statusFilter, setStatusFilter] = React.useState<any[]>([]);
const [startDateString, setStartDateString] = React.useState<string>(""); const [startDateString, setStartDateString] = React.useState<string>("");
const [endDateString, setEndDateString] = React.useState<string>(""); const [endDateString, setEndDateString] = React.useState<string>("");
const [filterByCreator, setFilterByCreator] = React.useState<string>(""); const [filterByCreator, setFilterByCreator] = React.useState<string>("");
@ -168,6 +171,14 @@ const ContentTable = () => {
table.getColumn("judul")?.setFilterValue(e.target.value); table.getColumn("judul")?.setFilterValue(e.target.value);
}; };
function handleStatusCheckboxChange(value: any) {
setStatusFilter((prev: any) =>
prev.includes(value)
? prev.filter((status: any) => status !== value)
: [...prev, value]
);
}
return ( return (
<div className="w-full overflow-x-auto"> <div className="w-full overflow-x-auto">
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between md:flex-row md:items-center md:justify-between lg:flex-row items-start lg:justify-between lg:items-center px-5"> <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between md:flex-row md:items-center md:justify-between lg:flex-row items-start lg:justify-between lg:items-center px-5">
@ -185,43 +196,88 @@ const ContentTable = () => {
/> />
</InputGroup> </InputGroup>
</div> </div>
<div className=" items-center gap-3 w-full md:w-[200px]"> <div className="flex flex-row gap-3">
{/* <Select <div className=" items-center gap-3 w-full md:w-[152px] border border-black rounded-lg">
onValueChange={(value) => { <Select
setStatusFilter([value]); onValueChange={(value) => {
}} setFileTypeFilter([value]);
> }}
<SelectTrigger className="w-[180px]"> >
<SelectValue placeholder="Select a Filter Status" /> <SelectTrigger className="w-full lg:w-[150px]">
</SelectTrigger> <SelectValue placeholder={t("selectFilter")} />
<SelectContent> </SelectTrigger>
<SelectGroup> <SelectContent>
<SelectLabel>Status</SelectLabel> <SelectGroup>
<SelectItem value="1">Menunggu Review</SelectItem> <SelectLabel>Filter</SelectLabel>
<SelectItem value="2">Diterima</SelectItem> <SelectItem value="1">{t("image")}</SelectItem>
<SelectItem value="3">Minta Update</SelectItem> <SelectItem value="2">{t("audio-visual")}</SelectItem>
<SelectItem value="4">Ditolak</SelectItem> <SelectItem value="3">{t("text")}</SelectItem>
</SelectGroup> <SelectItem value="4">{t("audio")}</SelectItem>
</SelectContent> </SelectGroup>
</Select> */} </SelectContent>
<Select </Select>
onValueChange={(value) => { </div>
setFileTypeFilter([value]); <DropdownMenu>
}} <DropdownMenuTrigger asChild>
> <Button variant="outline" className="ml-auto" size="md">
<SelectTrigger className="w-full lg:w-[180px]"> Filter <ChevronDown />
<SelectValue placeholder={t("selectFilter")} /> </Button>
</SelectTrigger> </DropdownMenuTrigger>
<SelectContent> <DropdownMenuContent
<SelectGroup> align="end"
<SelectLabel>Filter</SelectLabel> className="w-64 h-[150px] overflow-y-auto"
<SelectItem value="1">{t("image")}</SelectItem> >
<SelectItem value="2">{t("audio-visual")}</SelectItem> <Label className="ml-2 mt-2">Status</Label>
<SelectItem value="3">{t("text")}</SelectItem> <div className="flex items-center px-4 py-1">
<SelectItem value="4">Audio</SelectItem> <input
</SelectGroup> type="checkbox"
</SelectContent> id="status-2"
</Select> className="mr-2"
checked={statusFilter.includes(1)}
onChange={() => handleStatusCheckboxChange(1)}
/>
<label htmlFor="status-2" className="text-sm">
Menunggu Review
</label>
</div>
<div className="flex items-center px-4 py-1">
<input
type="checkbox"
id="status-2"
className="mr-2"
checked={statusFilter.includes(2)}
onChange={() => handleStatusCheckboxChange(2)}
/>
<label htmlFor="status-2" className="text-sm">
Diterima
</label>
</div>
<div className="flex items-center px-4 py-1">
<input
type="checkbox"
id="status-3"
className="mr-2"
checked={statusFilter.includes(3)}
onChange={() => handleStatusCheckboxChange(3)}
/>
<label htmlFor="status-3" className="text-sm">
Minta Update
</label>
</div>
<div className="flex items-center px-4 py-1">
<input
type="checkbox"
id="status-4"
className="mr-2"
checked={statusFilter.includes(4)}
onChange={() => handleStatusCheckboxChange(4)}
/>
<label htmlFor="status-4" className="text-sm">
Ditolak
</label>
</div>
</DropdownMenuContent>
</DropdownMenu>
</div> </div>
</div> </div>
<Table className="overflow-hidden mt-3"> <Table className="overflow-hidden mt-3">

View File

@ -81,8 +81,8 @@ export default function CreateSpvFAQModal() {
}); });
const target = form.watch("publishTo"); const target = form.watch("publishTo");
const isAllTargetChecked = publishToList.every((item) => const isAllTargetChecked = target && publishToList.every((item) =>
target?.includes(item.id) target.includes(item.id)
); );
const onSubmit = async (data: z.infer<typeof FormSchema>) => { const onSubmit = async (data: z.infer<typeof FormSchema>) => {

View File

@ -98,7 +98,6 @@ export default function FilterPage() {
setSearchTitle(title); setSearchTitle(title);
setCategoryFilter(category ? category.split("&") : []); setCategoryFilter(category ? category.split("&") : []);
setSortByOpt(sortBy === "popular" ? "clickCount" : "createdAt"); setSortByOpt(sortBy === "popular" ? "clickCount" : "createdAt");
}, [searchParams]); }, [searchParams]);
useEffect(() => { useEffect(() => {
@ -120,7 +119,7 @@ export default function FilterPage() {
"", "",
isInt, isInt,
pageNumber pageNumber
); );
const content = response?.data?.data?.content || []; const content = response?.data?.data?.content || [];
const total = response?.data?.data?.totalPages || 1; const total = response?.data?.data?.totalPages || 1;
@ -437,10 +436,21 @@ export default function FilterPage() {
</span> </span>
</p> </p>
<p className="font-bold">|</p> <p className="font-bold">|</p>
<p>{`${t("thereIs", { defaultValue: "There Is" })} ${totalContent} ${t( {!title ? (
"downloadableContent", <p>
{ defaultValue: "Downloadable ContentS" } {`${t("thereIs", { defaultValue: "Terdapat" })} ${totalContent} ${t(
)}`}</p> "downloadableImage",
{ defaultValue: "artikel berisi Foto yang dapat diunduh" }
)}`}
</p>
) : (
<>
<p>
{t("search-results", { defaultValue: "Hasil pencarian untuk" })}{" "}
<span className="font-bold">"{title}"</span>
</p>
</>
)}
</div> </div>
{/* Left */} {/* Left */}

View File

@ -486,10 +486,27 @@ const FilterPage = () => {
<div className="flex flex-col md:flex-row items-start gap-5 py-10 px-4 lg:px-20 bg-[#f7f7f7] dark:bg-black"> <div className="flex flex-col md:flex-row items-start gap-5 py-10 px-4 lg:px-20 bg-[#f7f7f7] dark:bg-black">
<p> <p>
{" "} {" "}
Audio {">"} <span className="font-bold">{t("allAudio", { defaultValue: "All Audio" })}</span> Audio {">"}{" "}
<span className="font-bold">
{t("allAudio", { defaultValue: "All Audio" })}
</span>
</p> </p>
<p className="font-bold">|</p> <p className="font-bold">|</p>
<p>{`${t("thereIs", { defaultValue: "There Is" })} ${totalContent} ${t("downloadableAudio", { defaultValue: "Downloadable Audio" })}`}</p> {!title ? (
<p>
{`${t("thereIs", { defaultValue: "Terdapat" })} ${totalContent} ${t(
"downloadableImage",
{ defaultValue: "artikel berisi Foto yang dapat diunduh" }
)}`}
</p>
) : (
<>
<p>
{t("search-results", { defaultValue: "Hasil pencarian untuk" })}{" "}
<span className="font-bold">"{title}"</span>
</p>
</>
)}
</div> </div>
{/* Left */} {/* Left */}
@ -529,7 +546,9 @@ const FilterPage = () => {
className="mt-1 w-full text-xs border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500" className="mt-1 w-full text-xs border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
onChange={(date) => setMonthYearFilter(date)} onChange={(date) => setMonthYearFilter(date)}
dateFormat="MM | yyyy" dateFormat="MM | yyyy"
placeholderText={t("selectYear", { defaultValue: "Select Year" })} placeholderText={t("selectYear", {
defaultValue: "Select Year",
})}
showMonthYearPicker showMonthYearPicker
/> />
</div> </div>
@ -547,7 +566,9 @@ const FilterPage = () => {
onChange={(update) => { onChange={(update) => {
setDateRange(update); setDateRange(update);
}} }}
placeholderText={t("searchDate", { defaultValue: "Search Date" })} placeholderText={t("searchDate", {
defaultValue: "Search Date",
})}
onCalendarClose={() => setCalenderState(!calenderState)} onCalendarClose={() => setCalenderState(!calenderState)}
/> />
<div className="flex items-center"> <div className="flex items-center">
@ -707,14 +728,20 @@ const FilterPage = () => {
<div className="w-full pr-4 lg:pr-16 pb-4"> <div className="w-full pr-4 lg:pr-16 pb-4">
<Reveal> <Reveal>
<div className="flex flex-col items-end mb-4"> <div className="flex flex-col items-end mb-4">
<h2 className="text-lg font-semibold">{t("sortBy", { defaultValue: "Sort By" })} </h2> <h2 className="text-lg font-semibold">
{t("sortBy", { defaultValue: "Sort By" })}{" "}
</h2>
<select <select
defaultValue={sortBy == "popular" ? "terpopuler" : "terbaru"} defaultValue={sortBy == "popular" ? "terpopuler" : "terbaru"}
onChange={(e) => handleSorting(e)} onChange={(e) => handleSorting(e)}
className="border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500" className="border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
> >
<option value="latest">{t("latest", { defaultValue: "Latest" })}</option> <option value="latest">
<option value="popular">{t("mostPopular", { defaultValue: "Most Popular" })}</option> {t("latest", { defaultValue: "Latest" })}
</option>
<option value="popular">
{t("mostPopular", { defaultValue: "Most Popular" })}
</option>
</select> </select>
</div> </div>

View File

@ -502,10 +502,27 @@ const FilterPage = () => {
<div className="flex flex-col md:flex-row items-start gap-5 py-10 px-4 lg:px-20 bg-[#f7f7f7] dark:bg-black"> <div className="flex flex-col md:flex-row items-start gap-5 py-10 px-4 lg:px-20 bg-[#f7f7f7] dark:bg-black">
<p> <p>
{" "} {" "}
{t("text", { defaultValue: "Text" })} {">"} <span className="font-bold">{t("allText", { defaultValue: "All Text" })}</span> {t("text", { defaultValue: "Text" })} {">"}{" "}
<span className="font-bold">
{t("allText", { defaultValue: "All Text" })}
</span>
</p> </p>
<p className="font-bold">|</p> <p className="font-bold">|</p>
<p>{`${t("thereIs", { defaultValue: "There Is" })} ${totalContent} ${t("downloadableText", { defaultValue: "Downloadable Text" })}`}</p> {!title ? (
<p>
{`${t("thereIs", { defaultValue: "Terdapat" })} ${totalContent} ${t(
"downloadableImage",
{ defaultValue: "artikel berisi Foto yang dapat diunduh" }
)}`}
</p>
) : (
<>
<p>
{t("search-results", { defaultValue: "Hasil pencarian untuk" })}{" "}
<span className="font-bold">"{title}"</span>
</p>
</>
)}
</div> </div>
{/* Left */} {/* Left */}
@ -545,7 +562,9 @@ const FilterPage = () => {
className="mt-1 w-full text-xs border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500" className="mt-1 w-full text-xs border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
onChange={(date) => setMonthYearFilter(date)} onChange={(date) => setMonthYearFilter(date)}
dateFormat="MM | yyyy" dateFormat="MM | yyyy"
placeholderText={t("selectYear", { defaultValue: "Select Year" })} placeholderText={t("selectYear", {
defaultValue: "Select Year",
})}
showMonthYearPicker showMonthYearPicker
/> />
</div> </div>
@ -563,7 +582,9 @@ const FilterPage = () => {
onChange={(update) => { onChange={(update) => {
setDateRange(update); setDateRange(update);
}} }}
placeholderText={t("selectDate", { defaultValue: "Select Date" })} placeholderText={t("selectDate", {
defaultValue: "Select Date",
})}
onCalendarClose={() => setCalenderState(!calenderState)} onCalendarClose={() => setCalenderState(!calenderState)}
/> />
<div className="flex items-center"> <div className="flex items-center">
@ -769,14 +790,20 @@ const FilterPage = () => {
<Reveal> <Reveal>
<div className="flex-1"> <div className="flex-1">
<div className="flex flex-col items-end mb-4"> <div className="flex flex-col items-end mb-4">
<h2 className="text-lg font-semibold">{t("sortBy", { defaultValue: "Sort By" })}</h2> <h2 className="text-lg font-semibold">
{t("sortBy", { defaultValue: "Sort By" })}
</h2>
<select <select
defaultValue={sortBy == "popular" ? "terpopuler" : "terbaru"} defaultValue={sortBy == "popular" ? "terpopuler" : "terbaru"}
onChange={(e) => handleSorting(e)} onChange={(e) => handleSorting(e)}
className="border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500" className="border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
> >
<option value="latest">{t("latest", { defaultValue: "Latest" })}</option> <option value="latest">
<option value="popular">{t("mostPopular", { defaultValue: "Most Popular" })}</option> {t("latest", { defaultValue: "Latest" })}
</option>
<option value="popular">
{t("mostPopular", { defaultValue: "Most Popular" })}
</option>
</select> </select>
</div> </div>

View File

@ -503,10 +503,26 @@ const FilterPage = () => {
<p> {t("image", { defaultValue: "Image" })}</p> <p> {t("image", { defaultValue: "Image" })}</p>
{">"} {">"}
<p> <p>
<span className="font-bold">{t("allImage", { defaultValue: "All Image" })}</span> <span className="font-bold">
{t("allImage", { defaultValue: "All Image" })}
</span>
</p> </p>
<p className="font-bold">|</p> <p className="font-bold">|</p>
<p>{`${t("thereIs", { defaultValue: "There Is" })} ${totalContent} ${t("downloadableImage", { defaultValue: "Downloadable Image" })}`}</p> {!title ? (
<p>
{`${t("thereIs", { defaultValue: "Terdapat" })} ${totalContent} ${t(
"downloadableImage",
{ defaultValue: "artikel berisi Foto yang dapat diunduh" }
)}`}
</p>
) : (
<>
<p>
{t("search-results", { defaultValue: "Hasil pencarian untuk" })}{" "}
<span className="font-bold">"{title}"</span>
</p>
</>
)}
</div> </div>
{/* Left */} {/* Left */}
@ -542,7 +558,9 @@ const FilterPage = () => {
onKeyDown={handleKeyDown} onKeyDown={handleKeyDown}
type="text" type="text"
id="search" id="search"
placeholder={t("searchTitle", { defaultValue: "Search Title" })} placeholder={t("searchTitle", {
defaultValue: "Search Title",
})}
className="mt-1 w-full border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500" className="mt-1 w-full border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
/> />
</div> </div>
@ -556,7 +574,9 @@ const FilterPage = () => {
className="mt-1 w-full text-xs border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500" className="mt-1 w-full text-xs border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
onChange={(date) => setMonthYearFilter(date)} onChange={(date) => setMonthYearFilter(date)}
dateFormat="MM | yyyy" dateFormat="MM | yyyy"
placeholderText={t("selectYear", { defaultValue: "Select Year" })} placeholderText={t("selectYear", {
defaultValue: "Select Year",
})}
showMonthYearPicker showMonthYearPicker
/> />
</div> </div>
@ -574,7 +594,9 @@ const FilterPage = () => {
onChange={(update) => { onChange={(update) => {
setDateRange(update); setDateRange(update);
}} }}
placeholderText={t("selectDate", { defaultValue: "Select Date" })} placeholderText={t("selectDate", {
defaultValue: "Select Date",
})}
onCalendarClose={() => setCalenderState(!calenderState)} onCalendarClose={() => setCalenderState(!calenderState)}
/> />
<div className="flex items-center"> <div className="flex items-center">
@ -753,14 +775,20 @@ const FilterPage = () => {
<Reveal> <Reveal>
<div className="w-full"> <div className="w-full">
<div className="flex flex-col items-end mb-4"> <div className="flex flex-col items-end mb-4">
<h2 className="text-lg font-semibold">{t("sortBy", { defaultValue: "Sort By" })}</h2> <h2 className="text-lg font-semibold">
{t("sortBy", { defaultValue: "Sort By" })}
</h2>
<select <select
defaultValue={sortBy == "popular" ? "terpopuler" : "terbaru"} defaultValue={sortBy == "popular" ? "terpopuler" : "terbaru"}
onChange={(e) => handleSorting(e)} onChange={(e) => handleSorting(e)}
className="border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500" className="border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
> >
<option value="latest">{t("latest", { defaultValue: "Latest" })}</option> <option value="latest">
<option value="popular">{t("mostPopular", { defaultValue: "Most Popular" })}</option> {t("latest", { defaultValue: "Latest" })}
</option>
<option value="popular">
{t("mostPopular", { defaultValue: "Most Popular" })}
</option>
</select> </select>
</div> </div>

View File

@ -499,10 +499,27 @@ const FilterPage = () => {
<p> <p>
{" "} {" "}
{t("video", { defaultValue: "Video" })}&nbsp; {t("video", { defaultValue: "Video" })}&nbsp;
{">"} <span className="font-bold">{t("allVideo", { defaultValue: "All Video" })}</span> {">"}{" "}
<span className="font-bold">
{t("allVideo", { defaultValue: "All Video" })}
</span>
</p> </p>
<p className="font-bold">|</p> <p className="font-bold">|</p>
<p>{`${t("thereIs", { defaultValue: "There Is" })} ${totalContent} ${t("downloadableVideo", { defaultValue: "Downloadable Video" })}`}</p> {!title ? (
<p>
{`${t("thereIs", { defaultValue: "Terdapat" })} ${totalContent} ${t(
"downloadableImage",
{ defaultValue: "artikel berisi Foto yang dapat diunduh" }
)}`}
</p>
) : (
<>
<p>
{t("search-results", { defaultValue: "Hasil pencarian untuk" })}{" "}
<span className="font-bold">"{title}"</span>
</p>
</>
)}
</div> </div>
{/* Left */} {/* Left */}
@ -542,7 +559,9 @@ const FilterPage = () => {
className="mt-1 w-full text-xs border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500" className="mt-1 w-full text-xs border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
onChange={(date) => setMonthYearFilter(date)} onChange={(date) => setMonthYearFilter(date)}
dateFormat="MM | yyyy" dateFormat="MM | yyyy"
placeholderText={t("selectYear", { defaultValue: "Select Year" })} placeholderText={t("selectYear", {
defaultValue: "Select Year",
})}
showMonthYearPicker showMonthYearPicker
/> />
</div> </div>
@ -560,7 +579,9 @@ const FilterPage = () => {
onChange={(update) => { onChange={(update) => {
setDateRange(update); setDateRange(update);
}} }}
placeholderText={t("selectDate", { defaultValue: "Select Date" })} placeholderText={t("selectDate", {
defaultValue: "Select Date",
})}
onCalendarClose={() => setCalenderState(!calenderState)} onCalendarClose={() => setCalenderState(!calenderState)}
/> />
<div className="flex items-center"> <div className="flex items-center">
@ -766,14 +787,20 @@ const FilterPage = () => {
<Reveal> <Reveal>
<div className="w-full"> <div className="w-full">
<div className="flex flex-col items-end mb-4"> <div className="flex flex-col items-end mb-4">
<h2 className="text-lg font-semibold">{t("sortBy", { defaultValue: "Sort By" })}</h2> <h2 className="text-lg font-semibold">
{t("sortBy", { defaultValue: "Sort By" })}
</h2>
<select <select
defaultValue={sortBy == "popular" ? "terpopuler" : "terbaru"} defaultValue={sortBy == "popular" ? "terpopuler" : "terbaru"}
onChange={(e) => handleSorting(e)} onChange={(e) => handleSorting(e)}
className="border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500" className="border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
> >
<option value="latest">{t("latest", { defaultValue: "Latest" })}</option> <option value="latest">
<option value="popular">{t("mostPopular", { defaultValue: "Most Popular" })}</option> {t("latest", { defaultValue: "Latest" })}
</option>
<option value="popular">
{t("mostPopular", { defaultValue: "Most Popular" })}
</option>
</select> </select>
</div> </div>

View File

@ -319,7 +319,7 @@ const FilterPage = () => {
} }
} }
const handleCategoryFilter = (e: boolean, id: string) => { const handleCategoryFilter = (e: boolean, id: string) => {
let filter = [...categoryFilter]; let filter = [...categoryFilter];
if (e) { if (e) {
@ -486,10 +486,27 @@ const FilterPage = () => {
<div className="flex flex-col md:flex-row items-start gap-5 py-10 px-4 lg:px-20 bg-[#f7f7f7] dark:bg-black"> <div className="flex flex-col md:flex-row items-start gap-5 py-10 px-4 lg:px-20 bg-[#f7f7f7] dark:bg-black">
<p> <p>
{" "} {" "}
Audio {">"} <span className="font-bold">{t("allAudio", { defaultValue: "All Audio" })}</span> Audio {">"}{" "}
<span className="font-bold">
{t("allAudio", { defaultValue: "All Audio" })}
</span>
</p> </p>
<p className="font-bold">|</p> <p className="font-bold">|</p>
<p>{`${t("thereIs", { defaultValue: "There Is" })} ${totalContent} ${t("downloadableAudio", { defaultValue: "Downloadable Audio" })}`}</p> {!title ? (
<p>
{`${t("thereIs", { defaultValue: "Terdapat" })} ${totalContent} ${t(
"downloadableImage",
{ defaultValue: "artikel berisi Foto yang dapat diunduh" }
)}`}
</p>
) : (
<>
<p>
{t("search-results", { defaultValue: "Hasil pencarian untuk" })}{" "}
<span className="font-bold">"{title}"</span>
</p>
</>
)}
</div> </div>
{/* Left */} {/* Left */}
@ -529,7 +546,9 @@ const FilterPage = () => {
className="mt-1 w-full text-xs border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500" className="mt-1 w-full text-xs border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
onChange={(date) => setMonthYearFilter(date)} onChange={(date) => setMonthYearFilter(date)}
dateFormat="MM | yyyy" dateFormat="MM | yyyy"
placeholderText={t("selectYear", { defaultValue: "Select Year" })} placeholderText={t("selectYear", {
defaultValue: "Select Year",
})}
showMonthYearPicker showMonthYearPicker
/> />
</div> </div>
@ -547,7 +566,9 @@ const FilterPage = () => {
onChange={(update) => { onChange={(update) => {
setDateRange(update); setDateRange(update);
}} }}
placeholderText={t("searchDate", { defaultValue: "Search Date" })} placeholderText={t("searchDate", {
defaultValue: "Search Date",
})}
onCalendarClose={() => setCalenderState(!calenderState)} onCalendarClose={() => setCalenderState(!calenderState)}
/> />
<div className="flex items-center"> <div className="flex items-center">
@ -707,14 +728,20 @@ const FilterPage = () => {
<div className="w-full pr-4 lg:pr-16 pb-4"> <div className="w-full pr-4 lg:pr-16 pb-4">
<Reveal> <Reveal>
<div className="flex flex-col items-end mb-4"> <div className="flex flex-col items-end mb-4">
<h2 className="text-lg font-semibold">{t("sortBy", { defaultValue: "Sort By" })} </h2> <h2 className="text-lg font-semibold">
{t("sortBy", { defaultValue: "Sort By" })}{" "}
</h2>
<select <select
defaultValue={sortBy == "popular" ? "terpopuler" : "terbaru"} defaultValue={sortBy == "popular" ? "terpopuler" : "terbaru"}
onChange={(e) => handleSorting(e)} onChange={(e) => handleSorting(e)}
className="border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500" className="border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
> >
<option value="latest">{t("latest", { defaultValue: "Latest" })}</option> <option value="latest">
<option value="popular">{t("mostPopular", { defaultValue: "Most Popular" })}</option> {t("latest", { defaultValue: "Latest" })}
</option>
<option value="popular">
{t("mostPopular", { defaultValue: "Most Popular" })}
</option>
</select> </select>
</div> </div>

View File

@ -492,10 +492,27 @@ const FilterPage = () => {
<div className="flex flex-row md:flex-row items-start gap-3 py-10 px-4 lg:px-20 bg-[#f7f7f7] dark:bg-black"> <div className="flex flex-row md:flex-row items-start gap-3 py-10 px-4 lg:px-20 bg-[#f7f7f7] dark:bg-black">
<p> <p>
{" "} {" "}
{t("text", { defaultValue: "Text" })} {">"} <span className="font-bold">{t("allText", { defaultValue: "All Text" })}</span> {t("text", { defaultValue: "Text" })} {">"}{" "}
<span className="font-bold">
{t("allText", { defaultValue: "All Text" })}
</span>
</p> </p>
<p className="font-bold">|</p> <p className="font-bold">|</p>
<p>{`${t("thereIs", { defaultValue: "There Is" })} ${totalContent} ${t("downloadableText", { defaultValue: "Downloadable Text" })}`}</p> {!title ? (
<p>
{`${t("thereIs", { defaultValue: "Terdapat" })} ${totalContent} ${t(
"downloadableImage",
{ defaultValue: "artikel berisi Foto yang dapat diunduh" }
)}`}
</p>
) : (
<>
<p>
{t("search-results", { defaultValue: "Hasil pencarian untuk" })}{" "}
<span className="font-bold">"{title}"</span>
</p>
</>
)}
</div> </div>
{/* Left */} {/* Left */}
@ -535,7 +552,9 @@ const FilterPage = () => {
className="mt-1 w-full text-xs border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500" className="mt-1 w-full text-xs border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
onChange={(date) => setMonthYearFilter(date)} onChange={(date) => setMonthYearFilter(date)}
dateFormat="MM | yyyy" dateFormat="MM | yyyy"
placeholderText={t("selectYear", { defaultValue: "Select Year" })} placeholderText={t("selectYear", {
defaultValue: "Select Year",
})}
showMonthYearPicker showMonthYearPicker
/> />
</div> </div>
@ -553,7 +572,9 @@ const FilterPage = () => {
onChange={(update) => { onChange={(update) => {
setDateRange(update); setDateRange(update);
}} }}
placeholderText={t("selectDate", { defaultValue: "Select Date" })} placeholderText={t("selectDate", {
defaultValue: "Select Date",
})}
onCalendarClose={() => setCalenderState(!calenderState)} onCalendarClose={() => setCalenderState(!calenderState)}
/> />
<div className="flex items-center"> <div className="flex items-center">
@ -759,14 +780,20 @@ const FilterPage = () => {
<Reveal> <Reveal>
<div className="flex-1"> <div className="flex-1">
<div className="flex flex-col items-end mb-4"> <div className="flex flex-col items-end mb-4">
<h2 className="text-lg font-semibold">{t("sortBy", { defaultValue: "Sort By" })}</h2> <h2 className="text-lg font-semibold">
{t("sortBy", { defaultValue: "Sort By" })}
</h2>
<select <select
defaultValue={sortBy == "popular" ? "terpopuler" : "terbaru"} defaultValue={sortBy == "popular" ? "terpopuler" : "terbaru"}
onChange={(e) => handleSorting(e)} onChange={(e) => handleSorting(e)}
className="border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500" className="border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
> >
<option value="latest">{t("latest", { defaultValue: "Latest" })}</option> <option value="latest">
<option value="popular">{t("mostPopular", { defaultValue: "Most Popular" })}</option> {t("latest", { defaultValue: "Latest" })}
</option>
<option value="popular">
{t("mostPopular", { defaultValue: "Most Popular" })}
</option>
</select> </select>
</div> </div>

View File

@ -303,7 +303,7 @@ const FilterPage = () => {
} }
} }
const handleCategoryFilter = (e: boolean, id: string) => { const handleCategoryFilter = (e: boolean, id: string) => {
let filter = [...categoryFilter]; let filter = [...categoryFilter];
if (e) { if (e) {
@ -469,10 +469,27 @@ const FilterPage = () => {
<div className="flex flex-row md:flex-row items-start gap-3 py-10 px-4 lg:px-20 bg-[#f7f7f7] dark:bg-black"> <div className="flex flex-row md:flex-row items-start gap-3 py-10 px-4 lg:px-20 bg-[#f7f7f7] dark:bg-black">
<p> <p>
{" "} {" "}
{t("image", { defaultValue: "Image" })} {">"} <span className="font-bold">{t("allImage", { defaultValue: "All Image" })}</span> {t("image", { defaultValue: "Image" })} {">"}{" "}
<span className="font-bold">
{t("allImage", { defaultValue: "All Image" })}
</span>
</p> </p>
<p className="font-bold">|</p> <p className="font-bold">|</p>
<p>{`${t("thereIs", { defaultValue: "There Is" })} ${totalContent} ${t("downloadableImage", { defaultValue: "Downloadable Image" })}`}</p> {!title ? (
<p>
{`${t("thereIs", { defaultValue: "Terdapat" })} ${totalContent} ${t(
"downloadableImage",
{ defaultValue: "artikel berisi Foto yang dapat diunduh" }
)}`}
</p>
) : (
<>
<p>
{t("search-results", { defaultValue: "Hasil pencarian untuk" })}{" "}
<span className="font-bold">"{title}"</span>
</p>
</>
)}
</div> </div>
{/* Left */} {/* Left */}
@ -507,7 +524,9 @@ const FilterPage = () => {
onKeyDown={handleKeyDown} onKeyDown={handleKeyDown}
type="text" type="text"
id="search" id="search"
placeholder={t("searchTitle", { defaultValue: "Search Title" })} placeholder={t("searchTitle", {
defaultValue: "Search Title",
})}
className="mt-1 w-full border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500" className="mt-1 w-full border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
/> />
</div> </div>
@ -521,7 +540,9 @@ const FilterPage = () => {
className="mt-1 w-full text-xs border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500" className="mt-1 w-full text-xs border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
onChange={(date) => setMonthYearFilter(date)} onChange={(date) => setMonthYearFilter(date)}
dateFormat="MM | yyyy" dateFormat="MM | yyyy"
placeholderText={t("selectYear", { defaultValue: "Select Year" })} placeholderText={t("selectYear", {
defaultValue: "Select Year",
})}
showMonthYearPicker showMonthYearPicker
/> />
</div> </div>
@ -539,7 +560,9 @@ const FilterPage = () => {
onChange={(update) => { onChange={(update) => {
setDateRange(update); setDateRange(update);
}} }}
placeholderText={t("selectDate", { defaultValue: "Select Date" })} placeholderText={t("selectDate", {
defaultValue: "Select Date",
})}
onCalendarClose={() => setCalenderState(!calenderState)} onCalendarClose={() => setCalenderState(!calenderState)}
/> />
<div className="flex items-center"> <div className="flex items-center">
@ -718,14 +741,20 @@ const FilterPage = () => {
<Reveal> <Reveal>
<div className="flex-1"> <div className="flex-1">
<div className="flex flex-col items-end mb-4"> <div className="flex flex-col items-end mb-4">
<h2 className="text-lg font-semibold">{t("sortBy", { defaultValue: "Sort By" })}</h2> <h2 className="text-lg font-semibold">
{t("sortBy", { defaultValue: "Sort By" })}
</h2>
<select <select
defaultValue={sortBy == "popular" ? "terpopuler" : "terbaru"} defaultValue={sortBy == "popular" ? "terpopuler" : "terbaru"}
onChange={(e) => handleSorting(e)} onChange={(e) => handleSorting(e)}
className="border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500" className="border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
> >
<option value="latest">{t("latest", { defaultValue: "Latest" })}</option> <option value="latest">
<option value="popular">{t("mostPopular", { defaultValue: "Most Popular" })}</option> {t("latest", { defaultValue: "Latest" })}
</option>
<option value="popular">
{t("mostPopular", { defaultValue: "Most Popular" })}
</option>
</select> </select>
</div> </div>

View File

@ -487,10 +487,27 @@ const FilterPage = () => {
<p> <p>
{" "} {" "}
{t("video", { defaultValue: "Video" })}&nbsp; {t("video", { defaultValue: "Video" })}&nbsp;
{">"} <span className="font-bold">{t("allVideo", { defaultValue: "All Video" })}</span> {">"}{" "}
<span className="font-bold">
{t("allVideo", { defaultValue: "All Video" })}
</span>
</p> </p>
<p className="font-bold">|</p> <p className="font-bold">|</p>
<p>{`${t("thereIs", { defaultValue: "There Is" })} ${totalContent} ${t("downloadableVideo", { defaultValue: "Downloadable Video" })}`}</p> {!title ? (
<p>
{`${t("thereIs", { defaultValue: "Terdapat" })} ${totalContent} ${t(
"downloadableImage",
{ defaultValue: "artikel berisi Foto yang dapat diunduh" }
)}`}
</p>
) : (
<>
<p>
{t("search-results", { defaultValue: "Hasil pencarian untuk" })}{" "}
<span className="font-bold">"{title}"</span>
</p>
</>
)}
</div> </div>
{/* Left */} {/* Left */}
@ -530,7 +547,9 @@ const FilterPage = () => {
className="mt-1 w-full text-xs border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500" className="mt-1 w-full text-xs border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
onChange={(date) => setMonthYearFilter(date)} onChange={(date) => setMonthYearFilter(date)}
dateFormat="MM | yyyy" dateFormat="MM | yyyy"
placeholderText={t("selectYear", { defaultValue: "Select Year" })} placeholderText={t("selectYear", {
defaultValue: "Select Year",
})}
showMonthYearPicker showMonthYearPicker
/> />
</div> </div>
@ -548,7 +567,9 @@ const FilterPage = () => {
onChange={(update) => { onChange={(update) => {
setDateRange(update); setDateRange(update);
}} }}
placeholderText={t("selectDate", { defaultValue: "Select Date" })} placeholderText={t("selectDate", {
defaultValue: "Select Date",
})}
onCalendarClose={() => setCalenderState(!calenderState)} onCalendarClose={() => setCalenderState(!calenderState)}
/> />
<div className="flex items-center"> <div className="flex items-center">
@ -754,14 +775,20 @@ const FilterPage = () => {
<Reveal> <Reveal>
<div className="flex-1"> <div className="flex-1">
<div className="flex flex-col items-end mb-4"> <div className="flex flex-col items-end mb-4">
<h2 className="text-lg font-semibold">{t("sortBy", { defaultValue: "Sort By" })}</h2> <h2 className="text-lg font-semibold">
{t("sortBy", { defaultValue: "Sort By" })}
</h2>
<select <select
defaultValue={sortBy == "popular" ? "terpopuler" : "terbaru"} defaultValue={sortBy == "popular" ? "terpopuler" : "terbaru"}
onChange={(e) => handleSorting(e)} onChange={(e) => handleSorting(e)}
className="border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500" className="border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
> >
<option value="latest">{t("latest", { defaultValue: "Latest" })}</option> <option value="latest">
<option value="popular">{t("mostPopular", { defaultValue: "Most Popular" })}</option> {t("latest", { defaultValue: "Latest" })}
</option>
<option value="popular">
{t("mostPopular", { defaultValue: "Most Popular" })}
</option>
</select> </select>
</div> </div>

View File

@ -98,7 +98,6 @@ export default function FilterPage() {
setSearchTitle(title); setSearchTitle(title);
setCategoryFilter(category ? category.split("&") : []); setCategoryFilter(category ? category.split("&") : []);
setSortByOpt(sortBy === "popular" ? "clickCount" : "createdAt"); setSortByOpt(sortBy === "popular" ? "clickCount" : "createdAt");
}, [searchParams]); }, [searchParams]);
useEffect(() => { useEffect(() => {
@ -120,7 +119,7 @@ export default function FilterPage() {
"", "",
isInt, isInt,
pageNumber pageNumber
); );
const content = response?.data?.data?.content || []; const content = response?.data?.data?.content || [];
const total = response?.data?.data?.totalPages || 1; const total = response?.data?.data?.totalPages || 1;
@ -437,10 +436,21 @@ export default function FilterPage() {
</span> </span>
</p> </p>
<p className="font-bold">|</p> <p className="font-bold">|</p>
<p>{`${t("thereIs", { defaultValue: "There Is" })} ${totalContent} ${t( {!title ? (
"downloadableContent", <p>
{ defaultValue: "Downloadable ContentS" } {`${t("thereIs", { defaultValue: "Terdapat" })} ${totalContent} ${t(
)}`}</p> "downloadableImage",
{ defaultValue: "artikel berisi Foto yang dapat diunduh" }
)}`}
</p>
) : (
<>
<p>
{t("search-results", { defaultValue: "Hasil pencarian untuk" })}{" "}
<span className="font-bold">"{title}"</span>
</p>
</>
)}
</div> </div>
{/* Left */} {/* Left */}

View File

@ -494,10 +494,21 @@ const FilterPage = () => {
</span> </span>
</p> </p>
<p className="font-bold">|</p> <p className="font-bold">|</p>
<p>{`${t("thereIs", { defaultValue: "There Is" })} ${totalContent} ${t( {!title ? (
"downloadableAudio", <p>
{ defaultValue: "Downloadable Audio" } {`${t("thereIs", { defaultValue: "Terdapat" })} ${totalContent} ${t(
)}`}</p> "downloadableImage",
{ defaultValue: "artikel berisi Foto yang dapat diunduh" }
)}`}
</p>
) : (
<>
<p>
{t("search-results", { defaultValue: "Hasil pencarian untuk" })}{" "}
<span className="font-bold">"{title}"</span>
</p>
</>
)}
</div> </div>
{/* Left */} {/* Left */}

View File

@ -510,10 +510,21 @@ const FilterPage = () => {
</span> </span>
</p> </p>
<p className="font-bold">|</p> <p className="font-bold">|</p>
<p>{`${t("thereIs", { defaultValue: "There Is" })} ${totalContent} ${t( {!title ? (
"downloadableText", <p>
{ defaultValue: "Downloadable Text" } {`${t("thereIs", { defaultValue: "Terdapat" })} ${totalContent} ${t(
)}`}</p> "downloadableImage",
{ defaultValue: "artikel berisi Foto yang dapat diunduh" }
)}`}
</p>
) : (
<>
<p>
{t("search-results", { defaultValue: "Hasil pencarian untuk" })}{" "}
<span className="font-bold">"{title}"</span>
</p>
</>
)}
</div> </div>
{/* Left */} {/* Left */}

View File

@ -516,10 +516,21 @@ const FilterPage = () => {
</span> </span>
</p> </p>
<p className="font-bold">|</p> <p className="font-bold">|</p>
<p>{`${t("thereIs", { defaultValue: "There Is" })} ${totalContent} ${t( {!title ? (
"downloadableImage", <p>
{ defaultValue: "Downloadable Image" } {`${t("thereIs", { defaultValue: "Terdapat" })} ${totalContent} ${t(
)}`}</p> "downloadableImage",
{ defaultValue: "artikel berisi Foto yang dapat diunduh" }
)}`}
</p>
) : (
<>
<p>
{t("search-results", { defaultValue: "Hasil pencarian untuk" })}{" "}
<span className="font-bold">"{title}"</span>
</p>
</>
)}
</div> </div>
<div className="flex flex-col lg:flex-row gap-6 pl-4 lg:pl-20 py-4"> <div className="flex flex-col lg:flex-row gap-6 pl-4 lg:pl-20 py-4">

View File

@ -425,10 +425,22 @@ export default function FilterPage() {
</span> </span>
</p> </p>
<p className="font-bold">|</p> <p className="font-bold">|</p>
<p>{`${t("thereIs", { defaultValue: "There Is" })} ${totalContent} ${t( {!title ? (
"downloadableContent", <p>
{ defaultValue: "Downloadable ContentS" } {`${t("thereIs", { defaultValue: "Terdapat" })} ${
)}`}</p> totalContent ?? 0
} ${t("downloadableImage", {
defaultValue: "artikel berisi Foto yang dapat diunduh",
})}`}
</p>
) : (
<>
<p>
{t("search-results", { defaultValue: "Hasil pencarian untuk" })}{" "}
<span className="font-bold">"{title}"</span>
</p>
</>
)}
</div> </div>
{/* Left */} {/* Left */}

View File

@ -511,10 +511,21 @@ const FilterPage = () => {
</span> </span>
</p> </p>
<p className="font-bold">|</p> <p className="font-bold">|</p>
<p>{`${t("thereIs", { defaultValue: "There Is" })} ${totalContent} ${t( {!title ? (
"downloadableVideo", <p>
{ defaultValue: "Downloadable Video" } {`${t("thereIs", { defaultValue: "Terdapat" })} ${totalContent} ${t(
)}`}</p> "downloadableImage",
{ defaultValue: "artikel berisi Foto yang dapat diunduh" }
)}`}
</p>
) : (
<>
<p>
{t("search-results", { defaultValue: "Hasil pencarian untuk" })}{" "}
<span className="font-bold">"{title}"</span>
</p>
</>
)}
</div> </div>
{/* Left */} {/* Left */}

View File

@ -571,6 +571,7 @@ export default function FormAudioUpdate() {
</div> </div>
<Button <Button
type="button"
size="icon" size="icon"
color="destructive" color="destructive"
variant="outline" variant="outline"

View File

@ -550,6 +550,7 @@ export default function FormImageUpdate() {
</div> </div>
<Button <Button
type="button"
size="icon" size="icon"
color="destructive" color="destructive"
variant="outline" variant="outline"

View File

@ -553,6 +553,7 @@ export default function FormTeksUpdate() {
</div> </div>
<Button <Button
type="button"
size="icon" size="icon"
color="destructive" color="destructive"
variant="outline" variant="outline"

View File

@ -627,6 +627,7 @@ export default function FormVideoUpdate() {
</div> </div>
<Button <Button
type="button"
size="icon" size="icon"
color="destructive" color="destructive"
variant="outline" variant="outline"

View File

@ -643,7 +643,7 @@
"FilterPage": { "FilterPage": {
"downloadableContent": "Downloadable Content", "downloadableContent": "Downloadable Content",
"content": "Content", "content": "Content",
"allContent":"All Content", "allContent": "All Content",
"image": "Image", "image": "Image",
"video": "Video", "video": "Video",
"text": "Text", "text": "Text",
@ -666,7 +666,8 @@
"categories": "Categories", "categories": "Categories",
"sortBy": "Sort by", "sortBy": "Sort by",
"latest": "Latest", "latest": "Latest",
"mostPopular": "Most Popular" "mostPopular": "Most Popular",
"search-results": "Search Result"
}, },
"Planning": { "Planning": {
"planning": "Planning", "planning": "Planning",

View File

@ -667,7 +667,8 @@
"categories": "Kategori", "categories": "Kategori",
"sortBy": "Urutkan Berdasarkan", "sortBy": "Urutkan Berdasarkan",
"latest": "Terbaru", "latest": "Terbaru",
"mostPopular": "Terpopuler" "mostPopular": "Terpopuler",
"search-results": "Hasil Pencarian"
}, },
"Planning": { "Planning": {
"planning": "Perencanaan", "planning": "Perencanaan",