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

feat:update bahasa form,ui form

This commit is contained in:
Anang Yusman 2025-03-27 02:58:30 +08:00
parent cd80247170
commit 982aa92294
17 changed files with 676 additions and 513 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -57,6 +57,7 @@ import { error } from "@/lib/swal";
import dynamic from "next/dynamic"; import dynamic from "next/dynamic";
import WavesurferPlayer from "@wavesurfer/react"; import WavesurferPlayer from "@wavesurfer/react";
import WaveSurfer from "wavesurfer.js"; import WaveSurfer from "wavesurfer.js";
import { useTranslations } from "next-intl";
const imageSchema = z.object({ const imageSchema = z.object({
title: z.string().min(1, { message: "Judul diperlukan" }), title: z.string().min(1, { message: "Judul diperlukan" }),
@ -135,6 +136,7 @@ export default function FormAudioDetail() {
const [detailThumb, setDetailThumb] = useState<any>([]); const [detailThumb, setDetailThumb] = useState<any>([]);
const [thumbsSwiper, setThumbsSwiper] = useState<any>(null); const [thumbsSwiper, setThumbsSwiper] = useState<any>(null);
const t = useTranslations("Form");
const [selectedTarget, setSelectedTarget] = useState(""); const [selectedTarget, setSelectedTarget] = useState("");
const [files, setFiles] = useState<FileType[]>([]); const [files, setFiles] = useState<FileType[]>([]);
const [rejectedFiles, setRejectedFiles] = useState<number[]>([]); const [rejectedFiles, setRejectedFiles] = useState<number[]>([]);
@ -452,11 +454,11 @@ export default function FormAudioDetail() {
<div className="flex flex-col lg:flex-row gap-10"> <div className="flex flex-col lg:flex-row gap-10">
<Card className="w-full lg:w-8/12"> <Card className="w-full lg:w-8/12">
<div className="px-6 py-6"> <div className="px-6 py-6">
<p className="text-lg font-semibold mb-3">Form Konten Audio</p> <p className="text-lg font-semibold mb-3">{t("form-audio")}</p>
<div className="gap-5 mb-5"> <div className="gap-5 mb-5">
{/* Input Title */} {/* Input Title */}
<div className="space-y-2 py-3"> <div className="space-y-2 py-3">
<Label>Judul</Label> <Label>{t("title")}</Label>
<Controller <Controller
control={control} control={control}
name="title" name="title"
@ -477,8 +479,8 @@ export default function FormAudioDetail() {
)} )}
</div> </div>
<div className="flex items-center"> <div className="flex items-center">
<div className="py-3 w-full"> <div className="py-3 w-full space-y-2">
<Label>Kategori</Label> <Label>{t("category")}</Label>
<Select <Select
value={detail?.category.name} // Nilai default berdasarkan detail value={detail?.category.name} // Nilai default berdasarkan detail
onValueChange={(id) => { onValueChange={(id) => {
@ -500,8 +502,8 @@ export default function FormAudioDetail() {
</div> </div>
</div> </div>
<div className="py-3"> <div className="py-3 space-y-2">
<Label>Deskripsi</Label> <Label>{t("description")}</Label>
<Controller <Controller
control={control} control={control}
name="description" name="description"
@ -516,7 +518,7 @@ export default function FormAudioDetail() {
)} )}
</div> </div>
<Label className="text-xl text-black">File Mediaaa</Label> <Label className="text-xl space-y-2">{t("file-media")}</Label>
<div className="w-full"> <div className="w-full">
<div className={"container example"}> <div className={"container example"}>
{detailThumb?.map((url: any, index: number) => ( {detailThumb?.map((url: any, index: number) => (
@ -561,7 +563,7 @@ export default function FormAudioDetail() {
<Card className=" h-[600px]"> <Card className=" h-[600px]">
<div className="px-3 py-3"> <div className="px-3 py-3">
<div className="space-y-2"> <div className="space-y-2">
<Label>Kreator</Label> <Label>{t("creator")}</Label>
<Controller <Controller
control={control} control={control}
name="creatorName" name="creatorName"
@ -585,7 +587,7 @@ export default function FormAudioDetail() {
<div className="px-3 py-3"> <div className="px-3 py-3">
<div className="space-y-2"> <div className="space-y-2">
<Label>Tag</Label> <Label>{t("tags")}</Label>
<div className="flex flex-wrap gap-2"> <div className="flex flex-wrap gap-2">
{detail?.tags {detail?.tags
?.split(",") ?.split(",")
@ -601,8 +603,8 @@ export default function FormAudioDetail() {
</div> </div>
</div> </div>
<div className="px-3 py-3"> <div className="px-3 py-3">
<div className="flex flex-col gap-6"> <div className="flex flex-col gap-6 space-y-2">
<Label>Target Publish</Label> <Label>{t("publish-target")}</Label>
<div className="flex gap-2 items-center"> <div className="flex gap-2 items-center">
<Checkbox <Checkbox
id="5" id="5"
@ -639,10 +641,10 @@ export default function FormAudioDetail() {
</div> </div>
<div className="px-3 py-3 flex flex-row items-center text-blue-500 gap-2 text-sm"> <div className="px-3 py-3 flex flex-row items-center text-blue-500 gap-2 text-sm">
<MailIcon /> <MailIcon />
<p className="">Kotak Saran (0)</p> <p className="">{t("suggestion-box")}(0)</p>
</div> </div>
<div className="px-3 py-3 border mx-3"> <div className="px-3 py-3 border mx-3">
<p>Keterangan:</p> <p>{t("information")}:</p>
<p className="text-sm text-slate-400">{detail?.statusName}</p> <p className="text-sm text-slate-400">{detail?.statusName}</p>
</div> </div>
{/* {detail?.isPublish == false ? ( {/* {detail?.isPublish == false ? (
@ -662,14 +664,15 @@ export default function FormAudioDetail() {
color="primary" color="primary"
type="button" type="button"
> >
<Icon icon="fa:check" className="mr-3" /> Setujui <Icon icon="fa:check" className="mr-3" /> {t("accept")}
</Button> </Button>
<Button <Button
onClick={() => actionApproval("3")} onClick={() => actionApproval("3")}
className="bg-orange-400 hover:bg-orange-300" className="bg-orange-400 hover:bg-orange-300"
type="button" type="button"
> >
<Icon icon="fa:comment-o" className="mr-3" /> Revisi <Icon icon="fa:comment-o" className="mr-3" />{" "}
{t("revision")}
</Button> </Button>
<Button <Button
onClick={() => actionApproval("4")} onClick={() => actionApproval("4")}
@ -677,7 +680,7 @@ export default function FormAudioDetail() {
type="button" type="button"
> >
<Icon icon="fa:times" className="mr-3" /> <Icon icon="fa:times" className="mr-3" />
Tolak {t("reject")}
</Button> </Button>
</div> </div>
) )
@ -688,7 +691,7 @@ export default function FormAudioDetail() {
<Dialog open={modalOpen} onOpenChange={setModalOpen}> <Dialog open={modalOpen} onOpenChange={setModalOpen}>
<DialogContent size="md"> <DialogContent size="md">
<DialogHeader> <DialogHeader>
<DialogTitle>Berikan Komentar</DialogTitle> <DialogTitle>{t("leave-comment")}</DialogTitle>
</DialogHeader> </DialogHeader>
{status == "2" {status == "2"
? files?.map((file, index) => ( ? files?.map((file, index) => (
@ -725,7 +728,7 @@ export default function FormAudioDetail() {
htmlFor="terms" htmlFor="terms"
className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
> >
Semua {t("all")}
</label> </label>
</div> </div>
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
@ -870,7 +873,7 @@ export default function FormAudioDetail() {
color="primary" color="primary"
onClick={() => submit()} onClick={() => submit()}
> >
Submit {t("submit")}
</Button> </Button>
<Button <Button
type="button" type="button"
@ -879,7 +882,7 @@ export default function FormAudioDetail() {
setModalOpen(false); setModalOpen(false);
}} }}
> >
Cancel {t("cancel")}
</Button> </Button>
</DialogFooter> </DialogFooter>
</DialogContent> </DialogContent>

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

@ -54,6 +54,7 @@ import { Item } from "@radix-ui/react-dropdown-menu";
import dynamic from "next/dynamic"; import dynamic from "next/dynamic";
import { getCsrfToken } from "@/service/auth"; import { getCsrfToken } from "@/service/auth";
import { Link } from "@/i18n/routing"; import { Link } from "@/i18n/routing";
import { useTranslations } from "next-intl";
interface FileWithPreview extends File { interface FileWithPreview extends File {
preview: string; preview: string;
@ -88,6 +89,7 @@ export default function FormAudio() {
const scheduleType = Cookies.get("scheduleType"); const scheduleType = Cookies.get("scheduleType");
const roleId = getCookiesDecrypt("urie"); const roleId = getCookiesDecrypt("urie");
const t = useTranslations("Form");
const [categories, setCategories] = useState<Category[]>([]); const [categories, setCategories] = useState<Category[]>([]);
const [selectedCategory, setSelectedCategory] = useState<any>(); const [selectedCategory, setSelectedCategory] = useState<any>();
const [tags, setTags] = useState<any[]>([]); const [tags, setTags] = useState<any[]>([]);
@ -708,11 +710,11 @@ export default function FormAudio() {
<div className="flex flex-col lg:flex-row gap-10"> <div className="flex flex-col lg:flex-row gap-10">
<Card className="w-full lg:w-8/12"> <Card className="w-full lg:w-8/12">
<div className="px-6 py-6"> <div className="px-6 py-6">
<p className="text-lg font-semibold mb-3">Form Konten Audio</p> <p className="text-lg font-semibold mb-3">{t("form-audio")}</p>
<div className="gap-5 mb-5"> <div className="gap-5 mb-5">
{/* Input Title */} {/* Input Title */}
<div className="space-y-2 py-3"> <div className="space-y-2 py-3">
<Label>Judul</Label> <Label>{t("title")}</Label>
<Controller <Controller
control={control} control={control}
name="title" name="title"
@ -732,8 +734,8 @@ export default function FormAudio() {
</div> </div>
<div className="flex items-center"> <div className="flex items-center">
<div className="py-3 w-full"> <div className="py-3 w-full space-y-2">
<Label>Kategori</Label> <Label>{t("category")}</Label>
<Select <Select
value={selectedCategory} // Ensure selectedTarget is updated correctly value={selectedCategory} // Ensure selectedTarget is updated correctly
onValueChange={(id) => { onValueChange={(id) => {
@ -758,7 +760,7 @@ export default function FormAudio() {
</div> </div>
</div> </div>
<div className="flex flex-row items-center gap-3 py-2"> <div className="flex flex-row items-center gap-3 py-2">
<Label>Bantuan AI</Label> <Label>{t("ai-assistance")}</Label>
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<Switch <Switch
defaultChecked={isSwitchOn} defaultChecked={isSwitchOn}
@ -774,7 +776,7 @@ export default function FormAudio() {
<div> <div>
<div className="flex flex-row gap-3"> <div className="flex flex-row gap-3">
<div className="space-y-2 py-3 w-4/12"> <div className="space-y-2 py-3 w-4/12">
<Label>Bahasa</Label> <Label>{t("language")}</Label>
<Select onValueChange={setSelectedLanguage}> <Select onValueChange={setSelectedLanguage}>
<SelectTrigger size="md"> <SelectTrigger size="md">
<SelectValue placeholder="Pilih" /> <SelectValue placeholder="Pilih" />
@ -786,7 +788,7 @@ export default function FormAudio() {
</Select> </Select>
</div> </div>
<div className="space-y-2 py-3 w-4/12"> <div className="space-y-2 py-3 w-4/12">
<Label>Writing Style</Label> <Label>{t("writing-style")}</Label>
<Select onValueChange={setSelectedWritingStyle}> <Select onValueChange={setSelectedWritingStyle}>
<SelectTrigger size="md"> <SelectTrigger size="md">
<SelectValue placeholder="Pilih" /> <SelectValue placeholder="Pilih" />
@ -805,7 +807,7 @@ export default function FormAudio() {
</Select> </Select>
</div> </div>
<div className="space-y-2 py-3 w-4/12"> <div className="space-y-2 py-3 w-4/12">
<Label>Article Size</Label> <Label>{t("article-size")}</Label>
<Select onValueChange={setSelectedSize}> <Select onValueChange={setSelectedSize}>
<SelectTrigger size="md"> <SelectTrigger size="md">
<SelectValue placeholder="Pilih" /> <SelectValue placeholder="Pilih" />
@ -826,7 +828,7 @@ export default function FormAudio() {
</div> </div>
<div className="mt-5"> <div className="mt-5">
<div className="flex flex-row items-center gap-3 mb-3"> <div className="flex flex-row items-center gap-3 mb-3">
<Label>Main Keyword</Label> <Label>{t("main-keyword")}</Label>
<Button <Button
variant="outline" variant="outline"
color="primary" color="primary"
@ -850,7 +852,7 @@ export default function FormAudio() {
</div> </div>
<div className="mt-5"> <div className="mt-5">
<div className="flex flex-row items-center gap-3 mb-3"> <div className="flex flex-row items-center gap-3 mb-3">
<Label>Judul</Label> <Label>{t("title")}</Label>
<Button <Button
variant="outline" variant="outline"
color="primary" color="primary"
@ -872,7 +874,7 @@ export default function FormAudio() {
</div> </div>
<div className="mt-5"> <div className="mt-5">
<div className="flex flex-row items-center gap-3 mb-3"> <div className="flex flex-row items-center gap-3 mb-3">
<Label>SEO</Label> <Label>{t("seo")}</Label>
<Button <Button
variant={"outline"} variant={"outline"}
color="primary" color="primary"
@ -883,15 +885,9 @@ export default function FormAudio() {
</Button> </Button>
</div> </div>
<p className="font-semibold"> <p className="font-semibold">
Kata kunci untuk disertakan dalam teks {t("Keywords to include in the text")}
</p>
<p className="text-sm">
JIka Anda tidak Memberikan kata kunci, kami akan secara
otomatis membuat kata kunci yang relevan dari kata kunci
utama untuk setiap bagian dan menggunakannya untuk membuat
artikel. Untuk menambahkan kata kunci baru, ketik &apos;,
+ kata kunci&apos;.
</p> </p>
<p className="text-sm">{t("title-key")}</p>
<div className="mt-3"> <div className="mt-3">
<Textarea <Textarea
value={selectedSEO} value={selectedSEO}
@ -901,7 +897,7 @@ export default function FormAudio() {
</div> </div>
</div> </div>
<div className="mt-5"> <div className="mt-5">
<Label>Instruksi Khusus (Optional)</Label> <Label>{t("special-instructions")} (Optional)</Label>
<div className="mt-3"> <div className="mt-3">
<Controller <Controller
control={control} control={control}
@ -959,7 +955,7 @@ export default function FormAudio() {
variant={"outline"} variant={"outline"}
color="primary" color="primary"
> >
Edit {t("update")}
</Button> </Button>
</Link> </Link>
)} )}
@ -968,8 +964,8 @@ export default function FormAudio() {
</div> </div>
</div> </div>
)} )}
<div className=""> <div className="space-y-2">
<Label>Deskripsi</Label> <Label>{t("description")}</Label>
<Controller <Controller
control={control} control={control}
name="description" name="description"
@ -992,8 +988,8 @@ export default function FormAudio() {
</p> </p>
)} )}
</div> </div>
<div className="py-3"> <div className="py-3 space-y-2">
<Label>Pilih File</Label> <Label>{t("select-file")}</Label>
{/* <Input {/* <Input
id="fileInput" id="fileInput"
type="file" type="file"
@ -1006,11 +1002,10 @@ export default function FormAudio() {
<CloudUpload className="text-default-300 w-10 h-10" /> <CloudUpload className="text-default-300 w-10 h-10" />
<h4 className=" text-2xl font-medium mb-1 mt-3 text-card-foreground/80"> <h4 className=" text-2xl font-medium mb-1 mt-3 text-card-foreground/80">
{/* Drop files here or click to upload. */} {/* Drop files here or click to upload. */}
Tarik file disini atau klik untuk upload. {t("drag-file")}
</h4> </h4>
<div className=" text-xs text-muted-foreground"> <div className=" text-xs text-muted-foreground">
( Upload file dengan mp3 atau wav Ukuran maksimal {t("upload-file-audio-max")}
100mb.)
</div> </div>
</div> </div>
</div> </div>
@ -1028,7 +1023,7 @@ export default function FormAudio() {
color="destructive" color="destructive"
onClick={handleRemoveAllFiles} onClick={handleRemoveAllFiles}
> >
Remove All {t("remove-all")}
</Button> </Button>
</div> </div>
</Fragment> </Fragment>
@ -1042,7 +1037,7 @@ export default function FormAudio() {
<Card className=" h-[500px]"> <Card className=" h-[500px]">
<div className="px-3 py-3"> <div className="px-3 py-3">
<div className="space-y-2"> <div className="space-y-2">
<Label>Kreator</Label> <Label>{t("creator")}</Label>
<Controller <Controller
control={control} control={control}
name="creatorName" name="creatorName"
@ -1063,8 +1058,8 @@ export default function FormAudio() {
)} )}
</div> </div>
</div> </div>
<div className="px-3 py-3"> <div className="px-3 py-3 space-y-2">
<Label htmlFor="tags">Tags</Label> <Label htmlFor="tags">{t("tags")}</Label>
<Input <Input
type="text" type="text"
@ -1092,8 +1087,8 @@ export default function FormAudio() {
</div> </div>
</div> </div>
<div className="px-3 py-3"> <div className="px-3 py-3">
<div className="flex flex-col gap-3"> <div className="flex flex-col gap-3 space-y-2">
<Label>Target Publish</Label> <Label>{t("publish-target")}</Label>
{options.map((option) => ( {options.map((option) => (
<div key={option.id} className="flex gap-2 items-center"> <div key={option.id} className="flex gap-2 items-center">
<Checkbox <Checkbox
@ -1116,12 +1111,12 @@ export default function FormAudio() {
<div className="flex flex-row justify-end gap-3"> <div className="flex flex-row justify-end gap-3">
<div className="mt-4"> <div className="mt-4">
<Button type="submit" color="primary"> <Button type="submit" color="primary">
Submit {t("submit")}
</Button> </Button>
</div> </div>
<div className="mt-4"> <div className="mt-4">
<Button type="submit" color="primary" variant="outline"> <Button type="submit" color="primary" variant="outline">
Cancel {t("cancel")}
</Button> </Button>
</div> </div>
</div> </div>

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

@ -48,6 +48,7 @@ import { Icon } from "@iconify/react/dist/iconify.js";
import { error } from "@/lib/swal"; import { error } from "@/lib/swal";
import { getCsrfToken } from "@/service/auth"; import { getCsrfToken } from "@/service/auth";
import { Upload } from "tus-js-client"; import { Upload } from "tus-js-client";
import { useTranslations } from "next-intl";
const audioSchema = z.object({ const audioSchema = z.object({
title: z.string().min(1, { message: "Judul diperlukan" }), title: z.string().min(1, { message: "Judul diperlukan" }),
@ -108,6 +109,7 @@ export default function FormAudioUpdate() {
const scheduleId = Cookies.get("scheduleId"); const scheduleId = Cookies.get("scheduleId");
const scheduleType = Cookies.get("scheduleType"); const scheduleType = Cookies.get("scheduleType");
const t = useTranslations("Form");
const [categories, setCategories] = useState<Category[]>([]); const [categories, setCategories] = useState<Category[]>([]);
const [selectedCategory, setSelectedCategory] = useState<any>(); const [selectedCategory, setSelectedCategory] = useState<any>();
const [tags, setTags] = useState<any[]>([]); const [tags, setTags] = useState<any[]>([]);
@ -590,11 +592,11 @@ export default function FormAudioUpdate() {
<div className="flex flex-col lg:flex-row gap-10"> <div className="flex flex-col lg:flex-row gap-10">
<Card className="w-full lg:w-8/12"> <Card className="w-full lg:w-8/12">
<div className="px-6 py-6"> <div className="px-6 py-6">
<p className="text-lg font-semibold mb-3">Form Konten Audio</p> <p className="text-lg font-semibold mb-3">{t("form-audio")}</p>
<div className="gap-5 mb-5"> <div className="gap-5 mb-5">
{/* Input Title */} {/* Input Title */}
<div className="space-y-2 py-3"> <div className="space-y-2 py-3">
<Label>Judul</Label> <Label>{t("title")}</Label>
<Controller <Controller
control={control} control={control}
name="title" name="title"
@ -615,8 +617,8 @@ export default function FormAudioUpdate() {
)} )}
</div> </div>
<div className="flex items-center"> <div className="flex items-center">
<div className="py-3 w-full"> <div className="py-3 w-full space-y-2">
<Label>Kategori</Label> <Label>{t("category")}</Label>
<Select <Select
defaultValue={detail?.categoryId.name} // Nilai default berdasarkan detail defaultValue={detail?.categoryId.name} // Nilai default berdasarkan detail
onValueChange={(id) => { onValueChange={(id) => {
@ -638,8 +640,8 @@ export default function FormAudioUpdate() {
</div> </div>
</div> </div>
<div className="py-3"> <div className="py-3 space-y-2">
<Label>Deskripsi</Label> <Label>{t("description")}</Label>
<Controller <Controller
control={control} control={control}
name="description" name="description"
@ -658,8 +660,8 @@ export default function FormAudioUpdate() {
</p> </p>
)} )}
</div> </div>
<div className="py-3"> <div className="py-3 space-y-2">
<Label>Pilih File</Label> <Label>{t("select-file")}</Label>
{/* <Input {/* <Input
id="fileInput" id="fileInput"
type="file" type="file"
@ -672,11 +674,10 @@ export default function FormAudioUpdate() {
<CloudUpload className="text-default-300 w-10 h-10" /> <CloudUpload className="text-default-300 w-10 h-10" />
<h4 className=" text-2xl font-medium mb-1 mt-3 text-card-foreground/80"> <h4 className=" text-2xl font-medium mb-1 mt-3 text-card-foreground/80">
{/* Drop files here or click to upload. */} {/* Drop files here or click to upload. */}
Tarik file disini atau klik untuk upload. {t("drag-file")}
</h4> </h4>
<div className=" text-xs text-muted-foreground"> <div className=" text-xs text-muted-foreground">
( Upload file dengan format .jpg, .jpeg, atau .png. {t("upload-file-audio-max")}
Ukuran maksimal 100mb.)
</div> </div>
</div> </div>
</div> </div>
@ -685,7 +686,7 @@ export default function FormAudioUpdate() {
<div>{fileList}</div> <div>{fileList}</div>
<div className=" flex justify-between gap-2"> <div className=" flex justify-between gap-2">
<div className="flex flex-row items-center gap-3 py-3"> <div className="flex flex-row items-center gap-3 py-3">
<Label>Gunakan Watermark</Label> <Label>{t("watermark")}</Label>
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<Switch defaultChecked color="primary" id="c2" /> <Switch defaultChecked color="primary" id="c2" />
</div> </div>
@ -701,7 +702,10 @@ export default function FormAudioUpdate() {
) : null} ) : null}
{files.length > 0 && ( {files.length > 0 && (
<div className="mt-4"> <div className="mt-4">
<Label className="text-lg font-semibold">File</Label> <Label className="text-lg font-semibold">
{" "}
{t("file-media")}
</Label>
<div className="grid gap-4"> <div className="grid gap-4">
{files.map((file: any) => ( {files.map((file: any) => (
<div <div
@ -722,7 +726,7 @@ export default function FormAudioUpdate() {
rel="noopener noreferrer" rel="noopener noreferrer"
className="text-blue-500 text-sm" className="text-blue-500 text-sm"
> >
Lihat File {t("view-file")}
</a> </a>
</div> </div>
<div> <div>
@ -740,7 +744,7 @@ export default function FormAudioUpdate() {
} }
className="form-checkbox" className="form-checkbox"
/> />
<span>Semua</span> <span>{t("all")}</span>
</Label> </Label>
</div> </div>
<div> <div>
@ -812,7 +816,7 @@ export default function FormAudioUpdate() {
<Card className=" h-[800px]"> <Card className=" h-[800px]">
<div className="px-3 py-3"> <div className="px-3 py-3">
<div className="space-y-2"> <div className="space-y-2">
<Label>Kreator</Label> <Label>{t("creator")}</Label>
<Controller <Controller
control={control} control={control}
name="creatorName" name="creatorName"
@ -835,7 +839,7 @@ export default function FormAudioUpdate() {
</div> </div>
<div className="px-3 py-3"> <div className="px-3 py-3">
<div className="space-y-2"> <div className="space-y-2">
<Label>Tag</Label> <Label>{t("tags")}</Label>
<Input <Input
type="text" type="text"
id="tags" id="tags"
@ -869,8 +873,8 @@ export default function FormAudioUpdate() {
</div> </div>
</div> </div>
<div className="px-3 py-3"> <div className="px-3 py-3">
<div className="flex flex-col gap-6"> <div className="flex flex-col gap-6 space-y-2">
<Label>Target Publish</Label> <Label>{t("publish-target")}</Label>
{options.map((option: Option) => ( {options.map((option: Option) => (
<div key={option.id} className="flex gap-2 items-center"> <div key={option.id} className="flex gap-2 items-center">
<Checkbox <Checkbox
@ -890,22 +894,22 @@ export default function FormAudioUpdate() {
</div> </div>
<div className="px-3 py-3 flex flex-row items-center text-blue-500 gap-2 text-sm"> <div className="px-3 py-3 flex flex-row items-center text-blue-500 gap-2 text-sm">
<MailIcon /> <MailIcon />
<p className="">Kotak Saran (0)</p> <p className="">{t("suggestion-box")} (0)</p>
</div> </div>
<div className="px-3 py-3"> <div className="px-3 py-3">
<p>Keterangan:</p> <p>{t("information")}:</p>
{/* <p>{detail?.status}</p> */} {/* <p>{detail?.status}</p> */}
</div> </div>
</Card> </Card>
<div className="flex flex-row justify-end gap-3"> <div className="flex flex-row justify-end gap-3">
<div className="mt-4"> <div className="mt-4">
<Button type="submit" color="primary"> <Button type="submit" color="primary">
Submit {t("submit")}
</Button> </Button>
</div> </div>
<div className="mt-4"> <div className="mt-4">
<Button type="submit" color="primary" variant="outline"> <Button type="submit" color="primary" variant="outline">
Cancel {t("cancel")}
</Button> </Button>
</div> </div>
</div> </div>

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

@ -57,6 +57,7 @@ import { Icon } from "@iconify/react/dist/iconify.js";
import { error } from "@/lib/swal"; import { error } from "@/lib/swal";
import dynamic from "next/dynamic"; import dynamic from "next/dynamic";
import { useRouter } from "@/i18n/routing"; import { useRouter } from "@/i18n/routing";
import { useTranslations } from "next-intl";
const imageSchema = z.object({ const imageSchema = z.object({
title: z.string().min(1, { message: "Judul diperlukan" }), title: z.string().min(1, { message: "Judul diperlukan" }),
@ -119,6 +120,7 @@ export default function FormImageDetail() {
const editor = useRef(null); const editor = useRef(null);
type ImageSchema = z.infer<typeof imageSchema>; type ImageSchema = z.infer<typeof imageSchema>;
const t = useTranslations("Form");
const [selectedFiles, setSelectedFiles] = useState<File[]>([]); const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
const taskId = Cookies.get("taskId"); const taskId = Cookies.get("taskId");
const scheduleId = Cookies.get("scheduleId"); const scheduleId = Cookies.get("scheduleId");
@ -418,11 +420,11 @@ export default function FormImageDetail() {
<div className="flex flex-col lg:flex-row gap-10"> <div className="flex flex-col lg:flex-row gap-10">
<Card className="w-full lg:w-8/12"> <Card className="w-full lg:w-8/12">
<div className="px-6 py-6"> <div className="px-6 py-6">
<p className="text-lg font-semibold mb-3">Form Konten Foto</p> <p className="text-lg font-semibold mb-3">{t("form-image")}</p>
<div className="gap-5 mb-5"> <div className="gap-5 mb-5">
{/* Input Title */} {/* Input Title */}
<div className="space-y-2 py-3"> <div className="space-y-2 py-3">
<Label>Judul</Label> <Label>{t("title")} </Label>
<Controller <Controller
control={control} control={control}
name="title" name="title"
@ -443,8 +445,8 @@ export default function FormImageDetail() {
)} )}
</div> </div>
<div className="flex items-center"> <div className="flex items-center">
<div className="py-3 w-full"> <div className="py-3 w-full space-y-2">
<Label>Kategori</Label> <Label>{t("category")}</Label>
<Select <Select
value={detail?.category.name} // Nilai default berdasarkan detail value={detail?.category.name} // Nilai default berdasarkan detail
onValueChange={(id) => { onValueChange={(id) => {
@ -466,8 +468,8 @@ export default function FormImageDetail() {
</div> </div>
</div> </div>
<div className="py-3"> <div className="py-3 space-y-2">
<Label>Deskripsi</Label> <Label>{t("description")}</Label>
<Controller <Controller
control={control} control={control}
name="description" name="description"
@ -481,46 +483,47 @@ export default function FormImageDetail() {
</p> </p>
)} )}
</div> </div>
<div className="space-y-2">
<Label className="text-xl text-black">File Media</Label> <Label className="text-xl ">{t("file-media")}</Label>
<div className="w-full "> <div className="w-full ">
<Swiper
thumbs={{ swiper: thumbsSwiper }}
modules={[FreeMode, Navigation, Thumbs]}
navigation={false}
className="w-full"
>
{detailThumb?.map((data: any) => (
<SwiperSlide key={data.id}>
<img
className="object-fill h-full w-full rounded-md"
src={data}
alt={` ${data.id}`}
/>
</SwiperSlide>
))}
</Swiper>
<div className=" mt-2 ">
<Swiper <Swiper
onSwiper={setThumbsSwiper} thumbs={{ swiper: thumbsSwiper }}
slidesPerView={6} modules={[FreeMode, Navigation, Thumbs]}
spaceBetween={8} navigation={false}
pagination={{ className="w-full"
clickable: true,
}}
modules={[Pagination, Thumbs]}
// className="mySwiper2"
> >
{detailThumb?.map((data: any) => ( {detailThumb?.map((data: any) => (
<SwiperSlide key={data.id}> <SwiperSlide key={data.id}>
<img <img
className="object-cover h-[60px] w-[80px]" className="object-fill h-full w-full rounded-md"
src={data} src={data}
alt={` ${data.id}`} alt={` ${data.id}`}
/> />
</SwiperSlide> </SwiperSlide>
))} ))}
</Swiper> </Swiper>
<div className=" mt-2 ">
<Swiper
onSwiper={setThumbsSwiper}
slidesPerView={6}
spaceBetween={8}
pagination={{
clickable: true,
}}
modules={[Pagination, Thumbs]}
// className="mySwiper2"
>
{detailThumb?.map((data: any) => (
<SwiperSlide key={data.id}>
<img
className="object-cover h-[60px] w-[80px]"
src={data}
alt={` ${data.id}`}
/>
</SwiperSlide>
))}
</Swiper>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -530,7 +533,7 @@ export default function FormImageDetail() {
<Card className=" h-[1050px]"> <Card className=" h-[1050px]">
<div className="px-3 py-3"> <div className="px-3 py-3">
<div className="space-y-2"> <div className="space-y-2">
<Label>Kreator</Label> <Label>{t("creator")}</Label>
<Controller <Controller
control={control} control={control}
name="creatorName" name="creatorName"
@ -551,8 +554,8 @@ export default function FormImageDetail() {
)} )}
</div> </div>
</div> </div>
<div className="mt-3 px-3"> <div className="mt-3 px-3 space-y-2">
<Label>Pratinjau Gambar Utama</Label> <Label>{t("preview")}</Label>
<Card className="mt-2"> <Card className="mt-2">
<img <img
src={detail.thumbnailLink} src={detail.thumbnailLink}
@ -563,7 +566,7 @@ export default function FormImageDetail() {
</div> </div>
<div className="px-3 py-3"> <div className="px-3 py-3">
<div className="space-y-2"> <div className="space-y-2">
<Label>Tag</Label> <Label>{t("tags")}</Label>
<div className="flex flex-wrap gap-2"> <div className="flex flex-wrap gap-2">
{detail?.tags {detail?.tags
?.split(",") ?.split(",")
@ -579,8 +582,8 @@ export default function FormImageDetail() {
</div> </div>
</div> </div>
<div className="px-3 py-3"> <div className="px-3 py-3">
<div className="flex flex-col gap-6"> <div className="flex flex-col gap-6 space-y-2">
<Label>Target Publish</Label> <Label>{t("publish-target")}</Label>
<div className="flex gap-2 items-center"> <div className="flex gap-2 items-center">
<Checkbox <Checkbox
id="5" id="5"
@ -617,10 +620,10 @@ export default function FormImageDetail() {
</div> </div>
<div className="px-3 py-3 flex flex-row items-center text-blue-500 gap-2 text-sm"> <div className="px-3 py-3 flex flex-row items-center text-blue-500 gap-2 text-sm">
<MailIcon /> <MailIcon />
<p className="">Kotak Saran (0)</p> <p className="">{t("suggestion-box")} (0)</p>
</div> </div>
<div className="px-3 py-3 border mx-3"> <div className="px-3 py-3 border mx-3">
<p>Keterangan:</p> <p>{t("information")}:</p>
<p className="text-sm text-slate-400">{detail?.statusName}</p> <p className="text-sm text-slate-400">{detail?.statusName}</p>
</div> </div>
{/* {detail?.isPublish == false ? ( {/* {detail?.isPublish == false ? (
@ -672,14 +675,16 @@ export default function FormImageDetail() {
color="primary" color="primary"
type="button" type="button"
> >
<Icon icon="fa:check" className="mr-3" /> Setujui <Icon icon="fa:check" className="mr-3" />
{t("accept")}
</Button> </Button>
<Button <Button
onClick={() => actionApproval("3")} onClick={() => actionApproval("3")}
className="bg-orange-400 hover:bg-orange-300" className="bg-orange-400 hover:bg-orange-300"
type="button" type="button"
> >
<Icon icon="fa:comment-o" className="mr-3" /> Revisi <Icon icon="fa:comment-o" className="mr-3" />{" "}
{t("revision")}
</Button> </Button>
<Button <Button
onClick={() => actionApproval("4")} onClick={() => actionApproval("4")}
@ -687,7 +692,7 @@ export default function FormImageDetail() {
type="button" type="button"
> >
<Icon icon="fa:times" className="mr-3" /> <Icon icon="fa:times" className="mr-3" />
Tolak {t("reject")}
</Button> </Button>
</div> </div>
) )
@ -698,7 +703,7 @@ export default function FormImageDetail() {
<Dialog open={modalOpen} onOpenChange={setModalOpen}> <Dialog open={modalOpen} onOpenChange={setModalOpen}>
<DialogContent size="md"> <DialogContent size="md">
<DialogHeader> <DialogHeader>
<DialogTitle>Berikan Komentar</DialogTitle> <DialogTitle>{t("leave-comment")}</DialogTitle>
</DialogHeader> </DialogHeader>
{status == "2" {status == "2"
? files?.map((file, index) => ( ? files?.map((file, index) => (
@ -735,7 +740,7 @@ export default function FormImageDetail() {
htmlFor="terms" htmlFor="terms"
className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
> >
Semua {t("all")}
</label> </label>
</div> </div>
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
@ -880,7 +885,7 @@ export default function FormImageDetail() {
color="primary" color="primary"
onClick={() => submit()} onClick={() => submit()}
> >
Submit {t("submit")}
</Button> </Button>
<Button <Button
type="button" type="button"
@ -889,7 +894,7 @@ export default function FormImageDetail() {
setModalOpen(false); setModalOpen(false);
}} }}
> >
Cancel {t("cancel")}
</Button> </Button>
</DialogFooter> </DialogFooter>
</DialogContent> </DialogContent>

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

@ -57,6 +57,7 @@ import dynamic from "next/dynamic";
import { getCsrfToken } from "@/service/auth"; import { getCsrfToken } from "@/service/auth";
import { Link } from "@/i18n/routing"; import { Link } from "@/i18n/routing";
import { request } from "http"; import { request } from "http";
import { useTranslations } from "next-intl";
interface FileWithPreview extends File { interface FileWithPreview extends File {
preview: string; preview: string;
@ -85,6 +86,7 @@ export default function FormImage() {
const editor = useRef(null); const editor = useRef(null);
type ImageSchema = z.infer<typeof imageSchema>; type ImageSchema = z.infer<typeof imageSchema>;
const t = useTranslations("Form");
const [selectedFiles, setSelectedFiles] = useState<File[]>([]); const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
const taskId = Cookies.get("taskId"); const taskId = Cookies.get("taskId");
const scheduleId = Cookies.get("scheduleId"); const scheduleId = Cookies.get("scheduleId");
@ -714,11 +716,11 @@ export default function FormImage() {
<div className="flex flex-col lg:flex-row gap-10"> <div className="flex flex-col lg:flex-row gap-10">
<Card className="w-full lg:w-8/12"> <Card className="w-full lg:w-8/12">
<div className="px-6 py-6"> <div className="px-6 py-6">
<p className="text-lg font-semibold mb-3">Form Konten Foto</p> <p className="text-lg font-semibold mb-3">{t("form-image")}</p>
<div className="gap-5 mb-5"> <div className="gap-5 mb-5">
{/* Input Title */} {/* Input Title */}
<div className="space-y-2 py-3"> <div className="space-y-2 py-3">
<Label>Judul</Label> <Label>{t("title")}</Label>
<Controller <Controller
control={control} control={control}
name="title" name="title"
@ -738,8 +740,8 @@ export default function FormImage() {
</div> </div>
<div className="flex items-center"> <div className="flex items-center">
<div className="py-3 w-full"> <div className="py-3 space-y-2 w-full">
<Label>Kategori</Label> <Label>{t("category")}</Label>
<Select <Select
value={selectedCategory} // Ensure selectedTarget is updated correctly value={selectedCategory} // Ensure selectedTarget is updated correctly
onValueChange={(id) => { onValueChange={(id) => {
@ -763,8 +765,8 @@ export default function FormImage() {
</Select> </Select>
</div> </div>
</div> </div>
<div className="flex flex-row items-center gap-3 py-2"> <div className="flex flex-row items-center gap-3 py-3 ">
<Label>Bantuan AI</Label> <Label>{t("ai-assistance")}</Label>
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<Switch <Switch
defaultChecked={isSwitchOn} defaultChecked={isSwitchOn}
@ -780,7 +782,7 @@ export default function FormImage() {
<div> <div>
<div className="flex flex-row gap-3"> <div className="flex flex-row gap-3">
<div className="space-y-2 py-3 w-4/12"> <div className="space-y-2 py-3 w-4/12">
<Label>Bahasa</Label> <Label>{t("language")}</Label>
<Select onValueChange={setSelectedLanguage}> <Select onValueChange={setSelectedLanguage}>
<SelectTrigger size="md"> <SelectTrigger size="md">
<SelectValue placeholder="Pilih" /> <SelectValue placeholder="Pilih" />
@ -792,7 +794,7 @@ export default function FormImage() {
</Select> </Select>
</div> </div>
<div className="space-y-2 py-3 w-4/12"> <div className="space-y-2 py-3 w-4/12">
<Label>Writing Style</Label> <Label>{t("writing-style")}</Label>
<Select onValueChange={setSelectedWritingStyle}> <Select onValueChange={setSelectedWritingStyle}>
<SelectTrigger size="md"> <SelectTrigger size="md">
<SelectValue placeholder="Pilih" /> <SelectValue placeholder="Pilih" />
@ -811,7 +813,7 @@ export default function FormImage() {
</Select> </Select>
</div> </div>
<div className="space-y-2 py-3 w-4/12"> <div className="space-y-2 py-3 w-4/12">
<Label>Article Size</Label> <Label>{t("article-size")}</Label>
<Select onValueChange={setSelectedSize}> <Select onValueChange={setSelectedSize}>
<SelectTrigger size="md"> <SelectTrigger size="md">
<SelectValue placeholder="Pilih" /> <SelectValue placeholder="Pilih" />
@ -832,7 +834,7 @@ export default function FormImage() {
</div> </div>
<div className="mt-5"> <div className="mt-5">
<div className="flex flex-row items-center gap-3 mb-3"> <div className="flex flex-row items-center gap-3 mb-3">
<Label>Main Keyword</Label> <Label>{t("main-keyword")}</Label>
<Button <Button
variant="outline" variant="outline"
color="primary" color="primary"
@ -856,7 +858,7 @@ export default function FormImage() {
</div> </div>
<div className="mt-5"> <div className="mt-5">
<div className="flex flex-row items-center gap-3 mb-3"> <div className="flex flex-row items-center gap-3 mb-3">
<Label>Judul</Label> <Label>{t("title")}</Label>
<Button <Button
variant="outline" variant="outline"
color="primary" color="primary"
@ -878,7 +880,7 @@ export default function FormImage() {
</div> </div>
<div className="mt-5"> <div className="mt-5">
<div className="flex flex-row items-center gap-3 mb-3"> <div className="flex flex-row items-center gap-3 mb-3">
<Label>SEO</Label> <Label>{t("seo")}</Label>
<Button <Button
variant={"outline"} variant={"outline"}
color="primary" color="primary"
@ -889,15 +891,9 @@ export default function FormImage() {
</Button> </Button>
</div> </div>
<p className="font-semibold"> <p className="font-semibold">
Kata kunci untuk disertakan dalam teks {t("Keywords to include in the text")}
</p>
<p className="text-sm">
JIka Anda tidak Memberikan kata kunci, kami akan secara
otomatis membuat kata kunci yang relevan dari kata kunci
utama untuk setiap bagian dan menggunakannya untuk membuat
artikel. Untuk menambahkan kata kunci baru, ketik &apos;,
+ kata kunci&apos;.
</p> </p>
<p className="text-sm">{t("title-key")}</p>
<div className="mt-3"> <div className="mt-3">
<Textarea <Textarea
value={selectedSEO} value={selectedSEO}
@ -907,7 +903,7 @@ export default function FormImage() {
</div> </div>
</div> </div>
<div className="mt-5"> <div className="mt-5">
<Label>Instruksi Khusus (Optional)</Label> <Label>{t("special-instructions")}(Optional)</Label>
<div className="mt-3"> <div className="mt-3">
<Controller <Controller
control={control} control={control}
@ -964,7 +960,7 @@ export default function FormImage() {
variant={"outline"} variant={"outline"}
color="primary" color="primary"
> >
Edit {t("update")}
</Button> </Button>
</Link> </Link>
)} )}
@ -973,8 +969,8 @@ export default function FormImage() {
</div> </div>
</div> </div>
)} )}
<div className=""> <div className="py-3 space-y-2">
<Label>Deskripsi</Label> <Label>{t("description")}</Label>
<Controller <Controller
control={control} control={control}
name="description" name="description"
@ -997,8 +993,8 @@ export default function FormImage() {
</p> </p>
)} )}
</div> </div>
<div className="py-3"> <div className="py-3 space-y-2">
<Label>Pilih File</Label> <Label>{t("select-file")}</Label>
{/* <Input {/* <Input
id="fileInput" id="fileInput"
type="file" type="file"
@ -1011,11 +1007,10 @@ export default function FormImage() {
<CloudUpload className="text-default-300 w-10 h-10" /> <CloudUpload className="text-default-300 w-10 h-10" />
<h4 className=" text-2xl font-medium mb-1 mt-3 text-card-foreground/80"> <h4 className=" text-2xl font-medium mb-1 mt-3 text-card-foreground/80">
{/* Drop files here or click to upload. */} {/* Drop files here or click to upload. */}
Tarik file disini atau klik untuk upload. {t("drag-file")}
</h4> </h4>
<div className=" text-xs text-muted-foreground"> <div className=" text-xs text-muted-foreground">
( Upload file dengan format .jpg, .jpeg, atau .png. {t("upload-file-max")}
Ukuran maksimal 100mb.)
</div> </div>
</div> </div>
</div> </div>
@ -1024,7 +1019,7 @@ export default function FormImage() {
<div>{fileList}</div> <div>{fileList}</div>
<div className=" flex justify-between gap-2"> <div className=" flex justify-between gap-2">
<div className="flex flex-row items-center gap-3 py-3"> <div className="flex flex-row items-center gap-3 py-3">
<Label>Gunakan Watermark</Label> <Label>{t("watermark")}</Label>
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<Switch defaultChecked color="primary" id="c2" /> <Switch defaultChecked color="primary" id="c2" />
</div> </div>
@ -1033,7 +1028,7 @@ export default function FormImage() {
color="destructive" color="destructive"
onClick={handleRemoveAllFiles} onClick={handleRemoveAllFiles}
> >
Remove All {t("remove-all")}
</Button> </Button>
</div> </div>
</Fragment> </Fragment>
@ -1049,7 +1044,7 @@ export default function FormImage() {
<Card className=" h-[500px]"> <Card className=" h-[500px]">
<div className="px-3 py-3"> <div className="px-3 py-3">
<div className="space-y-2"> <div className="space-y-2">
<Label>Kreator</Label> <Label>{t("creator")}</Label>
<Controller <Controller
control={control} control={control}
name="creatorName" name="creatorName"
@ -1070,9 +1065,8 @@ export default function FormImage() {
)} )}
</div> </div>
</div> </div>
<div className="px-3 py-3"> <div className="px-3 py-3 space-y-2">
<Label htmlFor="tags">Tags</Label> <Label htmlFor="tags">{t("tags")}</Label>
<Input <Input
type="text" type="text"
id="tags" id="tags"
@ -1099,8 +1093,8 @@ export default function FormImage() {
</div> </div>
</div> </div>
<div className="px-3 py-3"> <div className="px-3 py-3">
<div className="flex flex-col gap-3"> <div className="flex flex-col gap-3 space-y-2">
<Label>Target Publish</Label> <Label>{t("publish-target")}</Label>
{options.map((option) => ( {options.map((option) => (
<div key={option.id} className="flex gap-2 items-center"> <div key={option.id} className="flex gap-2 items-center">
<Checkbox <Checkbox
@ -1123,13 +1117,15 @@ export default function FormImage() {
<div className="flex flex-row justify-end gap-3"> <div className="flex flex-row justify-end gap-3">
<div className="mt-4"> <div className="mt-4">
<Button type="submit" color="primary"> <Button type="submit" color="primary">
Submit {t("submit")}
</Button> </Button>
</div> </div>
<div className="mt-4"> <div className="mt-4">
<Button type="submit" color="primary" variant="outline"> <Link href={"/contributor/content/image"}>
Cancel <Button type="submit" color="primary" variant="outline">
</Button> {t("cancel")}
</Button>
</Link>
</div> </div>
</div> </div>
</div> </div>

55
components/form/content/image-update-form.tsx
View File

@ -47,6 +47,7 @@ import Image from "next/image";
import { error, loading } from "@/lib/swal"; import { error, loading } from "@/lib/swal";
import { getCsrfToken } from "@/service/auth"; import { getCsrfToken } from "@/service/auth";
import { Upload } from "tus-js-client"; import { Upload } from "tus-js-client";
import { useTranslations } from "next-intl";
const imageSchema = z.object({ const imageSchema = z.object({
title: z.string().min(1, { message: "Judul diperlukan" }), title: z.string().min(1, { message: "Judul diperlukan" }),
@ -114,7 +115,7 @@ export default function FormImageUpdate() {
let uploadPersen = 0; let uploadPersen = 0;
const [isStartUpload, setIsStartUpload] = useState(false); const [isStartUpload, setIsStartUpload] = useState(false);
const [counterProgress, setCounterProgress] = useState(0); const [counterProgress, setCounterProgress] = useState(0);
const t = useTranslations("Form");
const [selectedFiles, setSelectedFiles] = useState<File[]>([]); const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
const taskId = Cookies.get("taskId"); const taskId = Cookies.get("taskId");
const scheduleId = Cookies.get("scheduleId"); const scheduleId = Cookies.get("scheduleId");
@ -628,11 +629,11 @@ export default function FormImageUpdate() {
<div className="flex flex-col lg:flex-row gap-10"> <div className="flex flex-col lg:flex-row gap-10">
<Card className="w-full lg:w-8/12"> <Card className="w-full lg:w-8/12">
<div className="px-6 py-6"> <div className="px-6 py-6">
<p className="text-lg font-semibold mb-3">Form Konten Foto</p> <p className="text-lg font-semibold mb-3">{t("form-image")}</p>
<div className="gap-5 mb-5"> <div className="gap-5 mb-5">
{/* Input Title */} {/* Input Title */}
<div className="space-y-2 py-3"> <div className="space-y-2 py-3">
<Label>Judul</Label> <Label>{t("title")}</Label>
<Controller <Controller
control={control} control={control}
name="title" name="title"
@ -653,8 +654,8 @@ export default function FormImageUpdate() {
)} )}
</div> </div>
<div className="flex items-center"> <div className="flex items-center">
<div className="py-3 w-full"> <div className="py-3 w-full space-y-2">
<Label>Kategori</Label> <Label>{t("category")}</Label>
<Select <Select
defaultValue={detail?.category.id} // Gunakan ID sebagai defaultValue defaultValue={detail?.category.id} // Gunakan ID sebagai defaultValue
onValueChange={(id) => { onValueChange={(id) => {
@ -679,8 +680,8 @@ export default function FormImageUpdate() {
</div> </div>
</div> </div>
<div className="py-3"> <div className="py-3 space-y-2">
<Label>Deskripsi</Label> <Label>{t("description")}</Label>
<Controller <Controller
control={control} control={control}
name="description" name="description"
@ -697,8 +698,8 @@ export default function FormImageUpdate() {
</p> </p>
)} )}
</div> </div>
<div className="py-3"> <div className="py-3 space-y-2">
<Label>Pilih File</Label> <Label>{t("select-file")}</Label>
{/* <Input {/* <Input
id="fileInput" id="fileInput"
type="file" type="file"
@ -711,11 +712,10 @@ export default function FormImageUpdate() {
<CloudUpload className="text-default-300 w-10 h-10" /> <CloudUpload className="text-default-300 w-10 h-10" />
<h4 className=" text-2xl font-medium mb-1 mt-3 text-card-foreground/80"> <h4 className=" text-2xl font-medium mb-1 mt-3 text-card-foreground/80">
{/* Drop files here or click to upload. */} {/* Drop files here or click to upload. */}
Tarik file disini atau klik untuk upload. {t("drag-file")}
</h4> </h4>
<div className=" text-xs text-muted-foreground"> <div className=" text-xs text-muted-foreground">
( Upload file dengan format .jpg, .jpeg, atau .png. {t("upload-file-max")}
Ukuran maksimal 100mb.)
</div> </div>
</div> </div>
</div> </div>
@ -724,7 +724,7 @@ export default function FormImageUpdate() {
<div>{fileList}</div> <div>{fileList}</div>
<div className=" flex justify-between gap-2"> <div className=" flex justify-between gap-2">
<div className="flex flex-row items-center gap-3 py-3"> <div className="flex flex-row items-center gap-3 py-3">
<Label>Gunakan Watermark</Label> <Label>{t("watermark")}</Label>
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<Switch defaultChecked color="primary" id="c2" /> <Switch defaultChecked color="primary" id="c2" />
</div> </div>
@ -740,7 +740,10 @@ export default function FormImageUpdate() {
) : null} ) : null}
{files.length > 0 && ( {files.length > 0 && (
<div className="mt-4"> <div className="mt-4">
<Label className="text-lg font-semibold">File</Label> <Label className="text-lg font-semibold">
{" "}
{t("file-media")}
</Label>
<div className="grid gap-4"> <div className="grid gap-4">
{files.map((file: any) => ( {files.map((file: any) => (
<div <div
@ -761,7 +764,7 @@ export default function FormImageUpdate() {
rel="noopener noreferrer" rel="noopener noreferrer"
className="text-blue-500 text-sm" className="text-blue-500 text-sm"
> >
Lihat File {t("view-file")}
</a> </a>
</div> </div>
<div> <div>
@ -779,7 +782,7 @@ export default function FormImageUpdate() {
} }
className="form-checkbox" className="form-checkbox"
/> />
<span>Semua</span> <span>{t("all")}</span>
</Label> </Label>
</div> </div>
<div> <div>
@ -851,7 +854,7 @@ export default function FormImageUpdate() {
<Card className="h-[900px] md:h-[1100px] lg:h-[800px]"> <Card className="h-[900px] md:h-[1100px] lg:h-[800px]">
<div className="px-3 py-3"> <div className="px-3 py-3">
<div className="space-y-2"> <div className="space-y-2">
<Label>Kreator</Label> <Label>{t("creator")}</Label>
<Controller <Controller
control={control} control={control}
name="creatorName" name="creatorName"
@ -872,8 +875,8 @@ export default function FormImageUpdate() {
)} )}
</div> </div>
</div> </div>
<div className="mt-3 px-3"> <div className="mt-3 px-3 space-y-2">
<Label>Pratinjau Gambar Utama</Label> <Label>{t("preview")}</Label>
<Card className="mt-2"> <Card className="mt-2">
<img <img
src={detail.thumbnailLink} src={detail.thumbnailLink}
@ -884,7 +887,7 @@ export default function FormImageUpdate() {
</div> </div>
<div className="px-3 py-3"> <div className="px-3 py-3">
<div className="space-y-2"> <div className="space-y-2">
<Label>Tag</Label> <Label>{t("tags")}</Label>
<Input <Input
type="text" type="text"
id="tags" id="tags"
@ -928,8 +931,8 @@ export default function FormImageUpdate() {
</div> </div>
</div> </div>
<div className="px-3 py-3"> <div className="px-3 py-3">
<div className="flex flex-col gap-6"> <div className="flex flex-col gap-6 space-y-2">
<Label>Target Publish</Label> <Label>{t("publish-target")}</Label>
{options.map((option: Option) => ( {options.map((option: Option) => (
<div key={option.id} className="flex gap-2 items-center"> <div key={option.id} className="flex gap-2 items-center">
<Checkbox <Checkbox
@ -949,22 +952,22 @@ export default function FormImageUpdate() {
</div> </div>
<div className="px-3 py-3 flex flex-row items-center text-blue-500 gap-2 text-sm"> <div className="px-3 py-3 flex flex-row items-center text-blue-500 gap-2 text-sm">
<MailIcon /> <MailIcon />
<p className="">Kotak Saran (0)</p> <p className="">{t("suggestion-box")} (0)</p>
</div> </div>
<div className="px-3 py-3"> <div className="px-3 py-3">
<p>Keterangan:</p> <p>{t("information")}:</p>
{/* <p>{detail?.status}</p> */} {/* <p>{detail?.status}</p> */}
</div> </div>
</Card> </Card>
<div className="flex flex-row justify-end gap-3"> <div className="flex flex-row justify-end gap-3">
<div className="mt-4"> <div className="mt-4">
<Button type="submit" color="primary"> <Button type="submit" color="primary">
Submit {t("submit")}
</Button> </Button>
</div> </div>
<div className="mt-4"> <div className="mt-4">
<Button type="submit" color="primary" variant="outline"> <Button type="submit" color="primary" variant="outline">
Cancel {t("cancel")}
</Button> </Button>
</div> </div>
</div> </div>

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

@ -49,6 +49,7 @@ import { generateDataArticle, getDetailArticle } from "@/service/content/ai";
import { getCookiesDecrypt } from "@/lib/utils"; import { getCookiesDecrypt } from "@/lib/utils";
import dynamic from "next/dynamic"; import dynamic from "next/dynamic";
import { error } from "@/lib/swal"; import { error } from "@/lib/swal";
import { useTranslations } from "next-intl";
const imageSchema = z.object({ const imageSchema = z.object({
contentTitle: z.string().min(1, { message: "Judul diperlukan" }), contentTitle: z.string().min(1, { message: "Judul diperlukan" }),
@ -144,6 +145,7 @@ export default function FormConvertSPIT() {
const [selectedArticleId, setSelectedArticleId] = useState<string | null>( const [selectedArticleId, setSelectedArticleId] = useState<string | null>(
null null
); );
const t = useTranslations("Form");
const [detailData, setDetailData] = useState<any>(null); const [detailData, setDetailData] = useState<any>(null);
const [selectedFileType, setSelectedFileType] = useState("original"); const [selectedFileType, setSelectedFileType] = useState("original");
const [isLoadingData, setIsLoadingData] = useState<boolean>(false); const [isLoadingData, setIsLoadingData] = useState<boolean>(false);
@ -616,11 +618,11 @@ export default function FormConvertSPIT() {
<div className="flex flex-col lg:flex-row gap-10"> <div className="flex flex-col lg:flex-row gap-10">
<Card className="w-full lg:w-8/12"> <Card className="w-full lg:w-8/12">
<div className="px-6 py-6"> <div className="px-6 py-6">
<p className="text-lg font-semibold mb-3">Form Konten Foto</p> <p className="text-lg font-semibold mb-3">{t("form-spit")}</p>
<div className="gap-5 mb-5"> <div className="gap-5 mb-5">
{/* Input Title */} {/* Input Title */}
<div className="space-y-2 py-3"> <div className="space-y-2 py-3">
<Label>Judul</Label> <Label>{t("title")}</Label>
<Controller <Controller
control={control} control={control}
name="contentTitle" name="contentTitle"
@ -641,8 +643,8 @@ export default function FormConvertSPIT() {
)} )}
</div> </div>
<div className="flex items-center"> <div className="flex items-center">
<div className="py-3 w-full"> <div className="py-3 w-full space-y-2">
<Label>Kategori</Label> <Label>{t("category")}</Label>
<Select <Select
defaultValue={detail?.content?.name} defaultValue={detail?.content?.name}
onValueChange={(id) => { onValueChange={(id) => {
@ -678,8 +680,8 @@ export default function FormConvertSPIT() {
Select Original File Select Original File
</Label> </Label>
</div> </div>
<div className="py-3 "> <div className="py-3 space-y-2">
<Label>Deskripsi</Label> <Label>{t("description")}</Label>
<Controller <Controller
control={control} control={control}
name="contentDescription" name="contentDescription"
@ -733,11 +735,11 @@ export default function FormConvertSPIT() {
<div className="flex items-center space-x-2 mt-3"> <div className="flex items-center space-x-2 mt-3">
<RadioGroupItem value="rewrite" id="rewrite-file" /> <RadioGroupItem value="rewrite" id="rewrite-file" />
<Label htmlFor="rewrite-file"> <Label htmlFor="rewrite-file">
Select File Hasil Rewrite Select File Rewrite
</Label> </Label>
</div> </div>
<div className="py-3 "> <div className="py-3 space-y-2">
<Label>File hasil Rewrite</Label> <Label>{t("file-rewrite")}</Label>
<Controller <Controller
control={control} control={control}
name="contentRewriteDescription" name="contentRewriteDescription"
@ -766,8 +768,8 @@ export default function FormConvertSPIT() {
)} )}
</RadioGroup> </RadioGroup>
</div> </div>
<div> <div className="space-y-2">
<Label className="text-xl">File Media</Label> <Label className="text-xl">{t("file-media")}</Label>
<div className="w-full "> <div className="w-full ">
<Swiper <Swiper
thumbs={{ swiper: thumbsSwiper }} thumbs={{ swiper: thumbsSwiper }}
@ -810,7 +812,7 @@ export default function FormConvertSPIT() {
</div> </div>
</div> </div>
<div className="mt-3"> <div className="mt-3">
<Label className="text-xl">Penempatan file</Label> <Label className="text-xl">{t("file-placement")}</Label>
</div> </div>
{files?.length > 1 && ( {files?.length > 1 && (
<div className="flex flex-wrap gap-2 mt-2 justify-center"> <div className="flex flex-wrap gap-2 mt-2 justify-center">
@ -825,7 +827,7 @@ export default function FormConvertSPIT() {
htmlFor="all-content" htmlFor="all-content"
className="text-xs font-medium" className="text-xs font-medium"
> >
All {t("all")}
</label> </label>
</div> </div>
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
@ -839,7 +841,7 @@ export default function FormConvertSPIT() {
htmlFor="all-nasional" htmlFor="all-nasional"
className="text-xs font-medium" className="text-xs font-medium"
> >
All Nasional {t("all")} Nasional
</label> </label>
</div> </div>
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
@ -853,7 +855,7 @@ export default function FormConvertSPIT() {
htmlFor="all-wilayah" htmlFor="all-wilayah"
className="text-xs font-medium" className="text-xs font-medium"
> >
All Wilayah {t("all")} Wilayah
</label> </label>
</div> </div>
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
@ -867,7 +869,7 @@ export default function FormConvertSPIT() {
htmlFor="all-international" htmlFor="all-international"
className="text-xs font-medium" className="text-xs font-medium"
> >
All Internasional {t("all")} Internasional
</label> </label>
</div> </div>
</div> </div>
@ -899,7 +901,7 @@ export default function FormConvertSPIT() {
htmlFor="terms" htmlFor="terms"
className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
> >
Semua {t("all")}
</label> </label>
</div> </div>
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
@ -961,7 +963,7 @@ export default function FormConvertSPIT() {
<Card className=" h-[800px]"> <Card className=" h-[800px]">
<div className="px-3 py-3"> <div className="px-3 py-3">
<div className="space-y-2"> <div className="space-y-2">
<Label>Kreator</Label> <Label>{t("creator")}</Label>
<Controller <Controller
control={control} control={control}
name="contentCreator" name="contentCreator"
@ -983,7 +985,7 @@ export default function FormConvertSPIT() {
</div> </div>
</div> </div>
<div className="mt-3 px-3"> <div className="mt-3 px-3">
<Label>Pratinjau Gambar Utama</Label> <Label>{t("preview")}</Label>
<Card className="mt-2"> <Card className="mt-2">
<img <img
src={detail.contentThumbnail} src={detail.contentThumbnail}
@ -994,7 +996,7 @@ export default function FormConvertSPIT() {
</div> </div>
<div className="px-3 py-3"> <div className="px-3 py-3">
<div className="space-y-2"> <div className="space-y-2">
<Label>Tag</Label> <Label>{t("tags")}</Label>
<div className="flex flex-wrap gap-2"> <div className="flex flex-wrap gap-2">
{detail?.contentTag {detail?.contentTag
?.split(",") ?.split(",")
@ -1010,8 +1012,8 @@ export default function FormConvertSPIT() {
</div> </div>
</div> </div>
<div className="px-3 py-3"> <div className="px-3 py-3">
<div className="flex flex-col gap-3"> <div className="flex flex-col gap-3 space-y-2">
<Label>Target Publish</Label> <Label>{t("publish-target")}</Label>
{options.map((option) => ( {options.map((option) => (
<div key={option.id} className="flex gap-2 items-center"> <div key={option.id} className="flex gap-2 items-center">
<Checkbox <Checkbox
@ -1032,17 +1034,17 @@ export default function FormConvertSPIT() {
</div> </div>
<div className="px-3 py-3 flex flex-row items-center text-blue-500 gap-2 text-sm"> <div className="px-3 py-3 flex flex-row items-center text-blue-500 gap-2 text-sm">
<MailIcon /> <MailIcon />
<p className="">Kotak Saran (0)</p> <p className="">{t("suggestion-box")} (0)</p>
</div> </div>
<div className="px-3 py-3"> <div className="px-3 py-3">
<p>Keterangan:</p> <p>{t("information")}:</p>
{/* <p>{detail?.status}</p> */} {/* <p>{detail?.status}</p> */}
</div> </div>
</Card> </Card>
<div className="flex flex-row justify-end gap-3"> <div className="flex flex-row justify-end gap-3">
<div className="mt-4"> <div className="mt-4">
<Button type="submit" color="primary"> <Button type="submit" color="primary">
Submit {t("submit")}
</Button> </Button>
</div> </div>
<div className="mt-4"> <div className="mt-4">
@ -1051,7 +1053,7 @@ export default function FormConvertSPIT() {
className="bg-red-500 hover:bg-red-700" className="bg-red-500 hover:bg-red-700"
onClick={() => deleteSpitContent()} onClick={() => deleteSpitContent()}
> >
Delete {t("cancel")}
</Button> </Button>
</div> </div>
</div> </div>

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

@ -55,6 +55,7 @@ import { getCookiesDecrypt } from "@/lib/utils";
import { Icon } from "@iconify/react/dist/iconify.js"; import { Icon } from "@iconify/react/dist/iconify.js";
import { error } from "@/lib/swal"; import { error } from "@/lib/swal";
import dynamic from "next/dynamic"; import dynamic from "next/dynamic";
import { useTranslations } from "next-intl";
const imageSchema = z.object({ const imageSchema = z.object({
title: z.string().min(1, { message: "Judul diperlukan" }), title: z.string().min(1, { message: "Judul diperlukan" }),
@ -133,6 +134,7 @@ export default function FormTeksDetail() {
const [detailThumb, setDetailThumb] = useState<any>([]); const [detailThumb, setDetailThumb] = useState<any>([]);
const [thumbsSwiper, setThumbsSwiper] = useState<any>(null); const [thumbsSwiper, setThumbsSwiper] = useState<any>(null);
const t = useTranslations("Form");
const [selectedTarget, setSelectedTarget] = useState(""); const [selectedTarget, setSelectedTarget] = useState("");
const [files, setFiles] = useState<FileType[]>([]); const [files, setFiles] = useState<FileType[]>([]);
const [rejectedFiles, setRejectedFiles] = useState<number[]>([]); const [rejectedFiles, setRejectedFiles] = useState<number[]>([]);
@ -421,13 +423,11 @@ export default function FormTeksDetail() {
<div className="flex flex-col lg:flex-row gap-10"> <div className="flex flex-col lg:flex-row gap-10">
<Card className="w-full lg:w-8/12"> <Card className="w-full lg:w-8/12">
<div className="px-6 py-6"> <div className="px-6 py-6">
<p className="text-lg font-semibold mb-3"> <p className="text-lg font-semibold mb-3">{t("form-text")}</p>
Form detail Konten Teks
</p>
<div className="gap-5 mb-5"> <div className="gap-5 mb-5">
{/* Input Title */} {/* Input Title */}
<div className="space-y-2 py-3"> <div className="space-y-2 py-3">
<Label>Judul</Label> <Label>{t("title")}</Label>
<Controller <Controller
control={control} control={control}
name="title" name="title"
@ -448,8 +448,8 @@ export default function FormTeksDetail() {
)} )}
</div> </div>
<div className="flex items-center"> <div className="flex items-center">
<div className="py-3 w-full"> <div className="py-3 w-full space-y-2">
<Label>Kategori</Label> <Label>{t("category")}</Label>
<Select <Select
value={detail?.category.name} // Nilai default berdasarkan detail value={detail?.category.name} // Nilai default berdasarkan detail
onValueChange={(id) => { onValueChange={(id) => {
@ -471,8 +471,8 @@ export default function FormTeksDetail() {
</div> </div>
</div> </div>
<div className="py-3"> <div className="py-3 space-y-2">
<Label>Deskripsi</Label> <Label>{t("description")}</Label>
<Controller <Controller
control={control} control={control}
name="description" name="description"
@ -486,81 +486,85 @@ export default function FormTeksDetail() {
</p> </p>
)} )}
</div> </div>
<Label className="text-xl text-black">File Media</Label> <div className="space-y-2">
<div className="w-full"> <Label className="text-xl">{t("file-media")} </Label>
<Swiper <div className="w-full">
thumbs={{ swiper: thumbsSwiper }}
modules={[FreeMode, Navigation, Thumbs]}
navigation={false}
className="w-full"
>
{detailThumb?.map((data: any, index: number) => (
<SwiperSlide key={index}>
{[".jpg", ".jpeg", ".png", ".webp"].includes(
data.format
) ? (
// Menampilkan gambar
<img
className="object-fill h-full w-full rounded-md"
src={data.url}
alt={data.fileName || "File"}
/>
) : data.format === ".pdf" ? (
// Menampilkan PDF menggunakan iframe
<iframe
className="w-full h-96 rounded-md"
src={data.url}
title={data.fileName || "PDF File"}
/>
) : [".docx", ".ppt", ".pptx"].includes(data.format) ? (
// Menampilkan file dokumen menggunakan Office Viewer
<iframe
className="w-full h-96 rounded-md"
src={`https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(
data.url
)}`}
title={data.fileName || "Document"}
/>
) : (
// Menampilkan link jika format tidak dikenali
<a
href={data.url}
target="_blank"
rel="noopener noreferrer"
className="block text-blue-500 underline"
>
View {data.fileName || "File"}
</a>
)}
</SwiperSlide>
))}
</Swiper>
<div className="mt-2 ">
<Swiper <Swiper
onSwiper={setThumbsSwiper} thumbs={{ swiper: thumbsSwiper }}
slidesPerView={8} modules={[FreeMode, Navigation, Thumbs]}
spaceBetween={8} navigation={false}
pagination={{ clickable: true }} className="w-full"
modules={[Pagination, Thumbs]}
> >
{detailThumb?.map((data: any, index: number) => ( {detailThumb?.map((data: any, index: number) => (
<SwiperSlide key={index}> <SwiperSlide key={index}>
{[".jpg", ".jpeg", ".png", ".webp"].includes( {[".jpg", ".jpeg", ".png", ".webp"].includes(
data.format data.format
) ? ( ) ? (
// Menampilkan gambar
<img <img
className="object-cover h-[60px] w-[80px]" className="object-fill h-full w-full rounded-md"
src={data.url} src={data.url}
alt={data.fileName} alt={data.fileName || "File"}
/>
) : data.format === ".pdf" ? (
// Menampilkan PDF menggunakan iframe
<iframe
className="w-full h-96 rounded-md"
src={data.url}
title={data.fileName || "PDF File"}
/>
) : [".docx", ".ppt", ".pptx"].includes(
data.format
) ? (
// Menampilkan file dokumen menggunakan Office Viewer
<iframe
className="w-full h-96 rounded-md"
src={`https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(
data.url
)}`}
title={data.fileName || "Document"}
/> />
) : ( ) : (
<div className="h-[60px] w-[80px] flex items-center justify-center bg-gray-200 text-sm text-center text-gray-700 rounded-md"> // Menampilkan link jika format tidak dikenali
{data?.format?.replace(".", "").toUpperCase()} <a
</div> href={data.url}
target="_blank"
rel="noopener noreferrer"
className="block text-blue-500 underline"
>
View {data.fileName || "File"}
</a>
)} )}
</SwiperSlide> </SwiperSlide>
))} ))}
</Swiper> </Swiper>
<div className="mt-2 ">
<Swiper
onSwiper={setThumbsSwiper}
slidesPerView={8}
spaceBetween={8}
pagination={{ clickable: true }}
modules={[Pagination, Thumbs]}
>
{detailThumb?.map((data: any, index: number) => (
<SwiperSlide key={index}>
{[".jpg", ".jpeg", ".png", ".webp"].includes(
data.format
) ? (
<img
className="object-cover h-[60px] w-[80px]"
src={data.url}
alt={data.fileName}
/>
) : (
<div className="h-[60px] w-[80px] flex items-center justify-center bg-gray-200 text-sm text-center text-gray-700 rounded-md">
{data?.format?.replace(".", "").toUpperCase()}
</div>
)}
</SwiperSlide>
))}
</Swiper>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -570,7 +574,7 @@ export default function FormTeksDetail() {
<Card className=" h-[800px]"> <Card className=" h-[800px]">
<div className="px-3 py-3"> <div className="px-3 py-3">
<div className="space-y-2"> <div className="space-y-2">
<Label>Kreator</Label> <Label>{t("creator")}</Label>
<Controller <Controller
control={control} control={control}
name="creatorName" name="creatorName"
@ -603,7 +607,7 @@ export default function FormTeksDetail() {
</div> */} </div> */}
<div className="px-3 py-3"> <div className="px-3 py-3">
<div className="space-y-2"> <div className="space-y-2">
<Label>Tag</Label> <Label>{t("tags")}</Label>
<div className="flex flex-wrap gap-2"> <div className="flex flex-wrap gap-2">
{detail?.tags {detail?.tags
?.split(",") ?.split(",")
@ -619,8 +623,8 @@ export default function FormTeksDetail() {
</div> </div>
</div> </div>
<div className="px-3 py-3"> <div className="px-3 py-3">
<div className="flex flex-col gap-6"> <div className="flex flex-col gap-6 space-y-2">
<Label>Target Publish</Label> <Label>{t("publish-target")}</Label>
<div className="flex gap-2 items-center"> <div className="flex gap-2 items-center">
<Checkbox <Checkbox
id="5" id="5"
@ -657,10 +661,10 @@ export default function FormTeksDetail() {
</div> </div>
<div className="px-3 py-3 flex flex-row items-center text-blue-500 gap-2 text-sm"> <div className="px-3 py-3 flex flex-row items-center text-blue-500 gap-2 text-sm">
<MailIcon /> <MailIcon />
<p className="">Kotak Saran (0)</p> <p className="">{t("suggestion-box")} (0)</p>
</div> </div>
<div className="px-3 py-3 border mx-3"> <div className="px-3 py-3 border mx-3">
<p>Keterangan:</p> <p>{t("information")}:</p>
<p className="text-sm text-slate-400">{detail?.statusName}</p> <p className="text-sm text-slate-400">{detail?.statusName}</p>
</div> </div>
{/* {detail?.isPublish == false ? ( {/* {detail?.isPublish == false ? (
@ -680,14 +684,15 @@ export default function FormTeksDetail() {
color="primary" color="primary"
type="button" type="button"
> >
<Icon icon="fa:check" className="mr-3" /> Setujui <Icon icon="fa:check" className="mr-3" /> {t("accept")}
</Button> </Button>
<Button <Button
onClick={() => actionApproval("3")} onClick={() => actionApproval("3")}
className="bg-orange-400 hover:bg-orange-300" className="bg-orange-400 hover:bg-orange-300"
type="button" type="button"
> >
<Icon icon="fa:comment-o" className="mr-3" /> Revisi <Icon icon="fa:comment-o" className="mr-3" />{" "}
{t("revision")}
</Button> </Button>
<Button <Button
onClick={() => actionApproval("4")} onClick={() => actionApproval("4")}
@ -695,7 +700,7 @@ export default function FormTeksDetail() {
type="button" type="button"
> >
<Icon icon="fa:times" className="mr-3" /> <Icon icon="fa:times" className="mr-3" />
Tolak {t("reject")}
</Button> </Button>
</div> </div>
) )
@ -706,7 +711,7 @@ export default function FormTeksDetail() {
<Dialog open={modalOpen} onOpenChange={setModalOpen}> <Dialog open={modalOpen} onOpenChange={setModalOpen}>
<DialogContent size="md"> <DialogContent size="md">
<DialogHeader> <DialogHeader>
<DialogTitle>Berikan Komentar</DialogTitle> <DialogTitle>{t("leave-comment")}</DialogTitle>
</DialogHeader> </DialogHeader>
{status == "2" {status == "2"
? files?.map((file, index) => ( ? files?.map((file, index) => (
@ -743,7 +748,7 @@ export default function FormTeksDetail() {
htmlFor="terms" htmlFor="terms"
className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
> >
Semua {t("all")}
</label> </label>
</div> </div>
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
@ -888,7 +893,7 @@ export default function FormTeksDetail() {
color="primary" color="primary"
onClick={() => submit()} onClick={() => submit()}
> >
Submit {t("submit")}
</Button> </Button>
<Button <Button
type="button" type="button"
@ -897,7 +902,7 @@ export default function FormTeksDetail() {
setModalOpen(false); setModalOpen(false);
}} }}
> >
Cancel {t("cancel")}
</Button> </Button>
</DialogFooter> </DialogFooter>
</DialogContent> </DialogContent>

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

@ -54,6 +54,7 @@ import { Item } from "@radix-ui/react-dropdown-menu";
import dynamic from "next/dynamic"; import dynamic from "next/dynamic";
import { getCsrfToken } from "@/service/auth"; import { getCsrfToken } from "@/service/auth";
import { Link } from "@/i18n/routing"; import { Link } from "@/i18n/routing";
import { useTranslations } from "next-intl";
interface FileWithPreview extends File { interface FileWithPreview extends File {
preview: string; preview: string;
@ -115,7 +116,7 @@ export default function FormTeks() {
const [articleImages, setArticleImages] = useState<string[]>([]); const [articleImages, setArticleImages] = useState<string[]>([]);
const [isSwitchOn, setIsSwitchOn] = useState<boolean>(false); const [isSwitchOn, setIsSwitchOn] = useState<boolean>(false);
const inputRef = useRef<HTMLInputElement>(null); const inputRef = useRef<HTMLInputElement>(null);
const t = useTranslations("Form");
const [selectedTarget, setSelectedTarget] = useState(""); const [selectedTarget, setSelectedTarget] = useState("");
const [unitSelection, setUnitSelection] = useState({ const [unitSelection, setUnitSelection] = useState({
allUnit: false, allUnit: false,
@ -707,11 +708,11 @@ export default function FormTeks() {
<div className="flex flex-col lg:flex-row gap-10"> <div className="flex flex-col lg:flex-row gap-10">
<Card className="w-full lg:w-8/12"> <Card className="w-full lg:w-8/12">
<div className="px-6 py-6"> <div className="px-6 py-6">
<p className="text-lg font-semibold mb-3">Form Konten Teks</p> <p className="text-lg font-semibold mb-3">{t("form-text")}</p>
<div className="gap-5 mb-5"> <div className="gap-5 mb-5">
{/* Input Title */} {/* Input Title */}
<div className="space-y-2 py-3"> <div className="space-y-2 py-3">
<Label>Judul</Label> <Label>{t("title")}</Label>
<Controller <Controller
control={control} control={control}
name="title" name="title"
@ -731,8 +732,8 @@ export default function FormTeks() {
</div> </div>
<div className="flex items-center"> <div className="flex items-center">
<div className="py-3 w-full"> <div className="py-3 w-full space-y-2">
<Label>Kategori</Label> <Label>{t("category")}</Label>
<Select <Select
value={selectedCategory} // Ensure selectedTarget is updated correctly value={selectedCategory} // Ensure selectedTarget is updated correctly
onValueChange={(id) => { onValueChange={(id) => {
@ -757,7 +758,7 @@ export default function FormTeks() {
</div> </div>
</div> </div>
<div className="flex flex-row items-center gap-3 py-2"> <div className="flex flex-row items-center gap-3 py-2">
<Label>Bantuan AI</Label> <Label>{t("ai-assistance")}</Label>
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<Switch <Switch
defaultChecked={isSwitchOn} defaultChecked={isSwitchOn}
@ -773,7 +774,7 @@ export default function FormTeks() {
<div> <div>
<div className="flex flex-row gap-3"> <div className="flex flex-row gap-3">
<div className="space-y-2 py-3 w-4/12"> <div className="space-y-2 py-3 w-4/12">
<Label>Bahasa</Label> <Label>{t("language")}</Label>
<Select onValueChange={setSelectedLanguage}> <Select onValueChange={setSelectedLanguage}>
<SelectTrigger size="md"> <SelectTrigger size="md">
<SelectValue placeholder="Pilih" /> <SelectValue placeholder="Pilih" />
@ -785,7 +786,7 @@ export default function FormTeks() {
</Select> </Select>
</div> </div>
<div className="space-y-2 py-3 w-4/12"> <div className="space-y-2 py-3 w-4/12">
<Label>Writing Style</Label> <Label>{t("writing-style")}</Label>
<Select onValueChange={setSelectedWritingStyle}> <Select onValueChange={setSelectedWritingStyle}>
<SelectTrigger size="md"> <SelectTrigger size="md">
<SelectValue placeholder="Pilih" /> <SelectValue placeholder="Pilih" />
@ -804,7 +805,7 @@ export default function FormTeks() {
</Select> </Select>
</div> </div>
<div className="space-y-2 py-3 w-4/12"> <div className="space-y-2 py-3 w-4/12">
<Label>Article Size</Label> <Label>{t("article-size")}</Label>
<Select onValueChange={setSelectedSize}> <Select onValueChange={setSelectedSize}>
<SelectTrigger size="md"> <SelectTrigger size="md">
<SelectValue placeholder="Pilih" /> <SelectValue placeholder="Pilih" />
@ -825,7 +826,7 @@ export default function FormTeks() {
</div> </div>
<div className="mt-5"> <div className="mt-5">
<div className="flex flex-row items-center gap-3 mb-3"> <div className="flex flex-row items-center gap-3 mb-3">
<Label>Main Keyword</Label> <Label>{t("main-keyword")}</Label>
<Button <Button
variant="outline" variant="outline"
color="primary" color="primary"
@ -849,7 +850,7 @@ export default function FormTeks() {
</div> </div>
<div className="mt-5"> <div className="mt-5">
<div className="flex flex-row items-center gap-3 mb-3"> <div className="flex flex-row items-center gap-3 mb-3">
<Label>Judul</Label> <Label>{t("title")}</Label>
<Button <Button
variant="outline" variant="outline"
color="primary" color="primary"
@ -871,7 +872,7 @@ export default function FormTeks() {
</div> </div>
<div className="mt-5"> <div className="mt-5">
<div className="flex flex-row items-center gap-3 mb-3"> <div className="flex flex-row items-center gap-3 mb-3">
<Label>SEO</Label> <Label>{t("seo")}</Label>
<Button <Button
variant={"outline"} variant={"outline"}
color="primary" color="primary"
@ -882,15 +883,9 @@ export default function FormTeks() {
</Button> </Button>
</div> </div>
<p className="font-semibold"> <p className="font-semibold">
Kata kunci untuk disertakan dalam teks {t("Keywords to include in the text")}
</p>
<p className="text-sm">
JIka Anda tidak Memberikan kata kunci, kami akan secara
otomatis membuat kata kunci yang relevan dari kata kunci
utama untuk setiap bagian dan menggunakannya untuk membuat
artikel. Untuk menambahkan kata kunci baru, ketik &apos;,
+ kata kunci&apos;.
</p> </p>
<p className="text-sm">{t("title-key")}</p>
<div className="mt-3"> <div className="mt-3">
<Textarea <Textarea
value={selectedSEO} value={selectedSEO}
@ -900,7 +895,7 @@ export default function FormTeks() {
</div> </div>
</div> </div>
<div className="mt-5"> <div className="mt-5">
<Label>Instruksi Khusus (Optional)</Label> <Label>{t("special-instructions")} (Optional)</Label>
<div className="mt-3"> <div className="mt-3">
<Controller <Controller
control={control} control={control}
@ -957,7 +952,7 @@ export default function FormTeks() {
variant={"outline"} variant={"outline"}
color="primary" color="primary"
> >
Edit {t("update")}
</Button> </Button>
</Link> </Link>
)} )}
@ -966,8 +961,8 @@ export default function FormTeks() {
</div> </div>
</div> </div>
)} )}
<div className=""> <div className="space-y-2">
<Label>Deskripsi</Label> <Label>{t("description")}</Label>
<Controller <Controller
control={control} control={control}
name="description" name="description"
@ -990,8 +985,8 @@ export default function FormTeks() {
</p> </p>
)} )}
</div> </div>
<div className="py-3"> <div className="py-3 space-y-2">
<Label>Pilih File</Label> <Label>{t("select-file")}</Label>
{/* <Input {/* <Input
id="fileInput" id="fileInput"
type="file" type="file"
@ -1004,11 +999,10 @@ export default function FormTeks() {
<CloudUpload className="text-default-300 w-10 h-10" /> <CloudUpload className="text-default-300 w-10 h-10" />
<h4 className=" text-2xl font-medium mb-1 mt-3 text-card-foreground/80"> <h4 className=" text-2xl font-medium mb-1 mt-3 text-card-foreground/80">
{/* Drop files here or click to upload. */} {/* Drop files here or click to upload. */}
Tarik file disini atau klik untuk upload. {t("drag-file")}
</h4> </h4>
<div className=" text-xs text-muted-foreground"> <div className=" text-xs text-muted-foreground">
( Upload file dengan format .doc, .docx, .pdf, .ppt, {t("upload-file-text-max")}
atau .pptx Ukuran maksimal 100mb.)
</div> </div>
</div> </div>
</div> </div>
@ -1017,7 +1011,7 @@ export default function FormTeks() {
<div>{fileList}</div> <div>{fileList}</div>
<div className=" flex justify-between gap-2"> <div className=" flex justify-between gap-2">
<div className="flex flex-row items-center gap-3 py-3"> <div className="flex flex-row items-center gap-3 py-3">
<Label>Gunakan Watermark</Label> <Label>{t("watermark")}</Label>
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<Switch defaultChecked color="primary" id="c2" /> <Switch defaultChecked color="primary" id="c2" />
</div> </div>
@ -1026,7 +1020,7 @@ export default function FormTeks() {
color="destructive" color="destructive"
onClick={handleRemoveAllFiles} onClick={handleRemoveAllFiles}
> >
Remove All {t("remove-all")}
</Button> </Button>
</div> </div>
</Fragment> </Fragment>
@ -1042,7 +1036,7 @@ export default function FormTeks() {
<Card className=" h-[500px]"> <Card className=" h-[500px]">
<div className="px-3 py-3"> <div className="px-3 py-3">
<div className="space-y-2"> <div className="space-y-2">
<Label>Kreator</Label> <Label>{t("creator")}</Label>
<Controller <Controller
control={control} control={control}
name="creatorName" name="creatorName"
@ -1063,8 +1057,8 @@ export default function FormTeks() {
)} )}
</div> </div>
</div> </div>
<div className="px-3 py-3"> <div className="px-3 py-3 space-y-2">
<Label htmlFor="tags">Tags</Label> <Label htmlFor="tags">{t("tags")}</Label>
<Input <Input
type="text" type="text"
@ -1092,8 +1086,8 @@ export default function FormTeks() {
</div> </div>
</div> </div>
<div className="px-3 py-3"> <div className="px-3 py-3">
<div className="flex flex-col gap-3"> <div className="flex flex-col gap-3 space-y-2">
<Label>Target Publish</Label> <Label>{t("publish-target")}</Label>
{options.map((option) => ( {options.map((option) => (
<div key={option.id} className="flex gap-2 items-center"> <div key={option.id} className="flex gap-2 items-center">
<Checkbox <Checkbox
@ -1116,12 +1110,12 @@ export default function FormTeks() {
<div className="flex flex-row justify-end gap-3"> <div className="flex flex-row justify-end gap-3">
<div className="mt-4"> <div className="mt-4">
<Button type="submit" color="primary"> <Button type="submit" color="primary">
Submit {t("submit")}
</Button> </Button>
</div> </div>
<div className="mt-4"> <div className="mt-4">
<Button type="submit" color="primary" variant="outline"> <Button type="submit" color="primary" variant="outline">
Cancel {t("cancel")}
</Button> </Button>
</div> </div>
</div> </div>

54
components/form/content/teks-update-form.tsx
View File

@ -44,6 +44,7 @@ import Image from "next/image";
import { error, loading } from "@/lib/swal"; import { error, loading } from "@/lib/swal";
import { Upload } from "tus-js-client"; import { Upload } from "tus-js-client";
import { getCsrfToken } from "@/service/auth"; import { getCsrfToken } from "@/service/auth";
import { useTranslations } from "next-intl";
const teksSchema = z.object({ const teksSchema = z.object({
title: z.string().min(1, { message: "Judul diperlukan" }), title: z.string().min(1, { message: "Judul diperlukan" }),
@ -108,6 +109,7 @@ export default function FormTeksUpdate() {
const scheduleId = Cookies.get("scheduleId"); const scheduleId = Cookies.get("scheduleId");
const scheduleType = Cookies.get("scheduleType"); const scheduleType = Cookies.get("scheduleType");
const t = useTranslations("Form");
const [categories, setCategories] = useState<Category[]>([]); const [categories, setCategories] = useState<Category[]>([]);
const [selectedCategory, setSelectedCategory] = useState<any>(); const [selectedCategory, setSelectedCategory] = useState<any>();
const [tags, setTags] = useState<any[]>([]); const [tags, setTags] = useState<any[]>([]);
@ -555,13 +557,11 @@ export default function FormTeksUpdate() {
<div className="flex flex-col lg:flex-row gap-10"> <div className="flex flex-col lg:flex-row gap-10">
<Card className="w-full lg:w-8/12"> <Card className="w-full lg:w-8/12">
<div className="px-6 py-6"> <div className="px-6 py-6">
<p className="text-lg font-semibold mb-3"> <p className="text-lg font-semibold mb-3">{t("form-text")}</p>
Form Update Konten Teks
</p>
<div className="gap-5 mb-5"> <div className="gap-5 mb-5">
{/* Input Title */} {/* Input Title */}
<div className="space-y-2 py-3"> <div className="space-y-2 py-3">
<Label>Judul</Label> <Label>{t("title")}</Label>
<Controller <Controller
control={control} control={control}
name="title" name="title"
@ -582,8 +582,8 @@ export default function FormTeksUpdate() {
)} )}
</div> </div>
<div className="flex items-center"> <div className="flex items-center">
<div className="py-3 w-full"> <div className="py-3 w-full space-y-2">
<Label>Kategori</Label> <Label>{t("category")}</Label>
<Select <Select
defaultValue={detail?.categoryId.name} // Nilai default berdasarkan detail defaultValue={detail?.categoryId.name} // Nilai default berdasarkan detail
onValueChange={(id) => { onValueChange={(id) => {
@ -604,8 +604,8 @@ export default function FormTeksUpdate() {
</Select> </Select>
</div> </div>
</div> </div>
<div className="py-3"> <div className="py-3 space-y-2">
<Label>Deskripsi</Label> <Label>{t("description")}</Label>
<Controller <Controller
control={control} control={control}
name="description" name="description"
@ -624,8 +624,8 @@ export default function FormTeksUpdate() {
</p> </p>
)} )}
</div> </div>
<div className="py-3"> <div className="py-3 space-y-2">
<Label>Pilih File</Label> <Label>{t("select-file")}</Label>
{/* <Input {/* <Input
id="fileInput" id="fileInput"
type="file" type="file"
@ -638,11 +638,10 @@ export default function FormTeksUpdate() {
<CloudUpload className="text-default-300 w-10 h-10" /> <CloudUpload className="text-default-300 w-10 h-10" />
<h4 className=" text-2xl font-medium mb-1 mt-3 text-card-foreground/80"> <h4 className=" text-2xl font-medium mb-1 mt-3 text-card-foreground/80">
{/* Drop files here or click to upload. */} {/* Drop files here or click to upload. */}
Tarik file disini atau klik untuk upload. {t("drag-file")}
</h4> </h4>
<div className=" text-xs text-muted-foreground"> <div className=" text-xs text-muted-foreground">
( Upload file dengan format .doc, .docx, .pdf, .ppt, {t("upload-file-text-max")}
atau .pptx Ukuran maksimal 100mb.)
</div> </div>
</div> </div>
</div> </div>
@ -651,7 +650,7 @@ export default function FormTeksUpdate() {
<div>{fileList}</div> <div>{fileList}</div>
<div className=" flex justify-between gap-2"> <div className=" flex justify-between gap-2">
<div className="flex flex-row items-center gap-3 py-3"> <div className="flex flex-row items-center gap-3 py-3">
<Label>Gunakan Watermark</Label> <Label>{t("watermark")}</Label>
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<Switch defaultChecked color="primary" id="c2" /> <Switch defaultChecked color="primary" id="c2" />
</div> </div>
@ -660,14 +659,17 @@ export default function FormTeksUpdate() {
color="destructive" color="destructive"
onClick={handleRemoveAllFiles} onClick={handleRemoveAllFiles}
> >
Remove All {t("remove-all")}
</Button> </Button>
</div> </div>
</Fragment> </Fragment>
) : null} ) : null}
{files.length > 0 && ( {files.length > 0 && (
<div className="mt-4"> <div className="mt-4 space-y-2">
<Label className="text-lg font-semibold">File</Label> <Label className="text-lg font-semibold">
{" "}
{t("file-media")}
</Label>
<div className="grid gap-4"> <div className="grid gap-4">
{files.map((file: any) => ( {files.map((file: any) => (
<div <div
@ -688,7 +690,7 @@ export default function FormTeksUpdate() {
rel="noopener noreferrer" rel="noopener noreferrer"
className="text-blue-500 text-sm" className="text-blue-500 text-sm"
> >
Lihat File {t("view-file")}
</a> </a>
</div> </div>
<div> <div>
@ -706,7 +708,7 @@ export default function FormTeksUpdate() {
} }
className="form-checkbox" className="form-checkbox"
/> />
<span>Semua</span> <span>{t("all")}</span>
</Label> </Label>
</div> </div>
<div> <div>
@ -778,7 +780,7 @@ export default function FormTeksUpdate() {
<Card className=" h-[800px]"> <Card className=" h-[800px]">
<div className="px-3 py-3"> <div className="px-3 py-3">
<div className="space-y-2"> <div className="space-y-2">
<Label>Kreator</Label> <Label>{t("creator")}</Label>
<Controller <Controller
control={control} control={control}
name="creatorName" name="creatorName"
@ -811,7 +813,7 @@ export default function FormTeksUpdate() {
</div> */} </div> */}
<div className="px-3 py-3"> <div className="px-3 py-3">
<div className="space-y-2"> <div className="space-y-2">
<Label>Tag</Label> <Label>{t("tags")}</Label>
<Input <Input
type="text" type="text"
id="tags" id="tags"
@ -846,7 +848,7 @@ export default function FormTeksUpdate() {
</div> </div>
<div className="px-3 py-3"> <div className="px-3 py-3">
<div className="flex flex-col gap-6"> <div className="flex flex-col gap-6">
<Label>Target Publish</Label> <Label>{t("publish-target")}</Label>
{options.map((option) => ( {options.map((option) => (
<div key={option.id} className="flex gap-2 items-center"> <div key={option.id} className="flex gap-2 items-center">
<Checkbox <Checkbox
@ -867,22 +869,22 @@ export default function FormTeksUpdate() {
</div> </div>
<div className="px-3 py-3 flex flex-row items-center text-blue-500 gap-2 text-sm"> <div className="px-3 py-3 flex flex-row items-center text-blue-500 gap-2 text-sm">
<MailIcon /> <MailIcon />
<p className="">Kotak Saran (0)</p> <p className="">{t("suggestion-box")} (0)</p>
</div> </div>
<div className="px-3 py-3"> <div className="px-3 py-3">
<p>Keterangan:</p> <p>{t("information")}:</p>
{/* <p>{detail?.status}</p> */} {/* <p>{detail?.status}</p> */}
</div> </div>
</Card> </Card>
<div className="flex flex-row justify-end gap-3"> <div className="flex flex-row justify-end gap-3">
<div className="mt-4"> <div className="mt-4">
<Button type="submit" color="primary"> <Button type="submit" color="primary">
Submit {t("submit")}
</Button> </Button>
</div> </div>
<div className="mt-4"> <div className="mt-4">
<Button type="submit" color="primary" variant="outline"> <Button type="submit" color="primary" variant="outline">
Cancel {t("cancel")}
</Button> </Button>
</div> </div>
</div> </div>

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

@ -56,6 +56,7 @@ import { Icon } from "@iconify/react/dist/iconify.js";
import { error } from "@/lib/swal"; import { error } from "@/lib/swal";
import dynamic from "next/dynamic"; import dynamic from "next/dynamic";
import { useRouter } from "@/i18n/routing"; import { useRouter } from "@/i18n/routing";
import { useTranslations } from "next-intl";
const imageSchema = z.object({ const imageSchema = z.object({
title: z.string().min(1, { message: "Judul diperlukan" }), title: z.string().min(1, { message: "Judul diperlukan" }),
@ -135,6 +136,7 @@ export default function FormVideoDetail() {
const [detailVideo, setDetailVideo] = useState<any>([]); const [detailVideo, setDetailVideo] = useState<any>([]);
const [thumbsSwiper, setThumbsSwiper] = useState<any>(null); const [thumbsSwiper, setThumbsSwiper] = useState<any>(null);
const t = useTranslations("Form");
const [filePlacements, setFilePlacements] = useState<string[][]>([]); const [filePlacements, setFilePlacements] = useState<string[][]>([]);
const [selectedTarget, setSelectedTarget] = useState(""); const [selectedTarget, setSelectedTarget] = useState("");
const [files, setFiles] = useState<FileType[]>([]); const [files, setFiles] = useState<FileType[]>([]);
@ -412,13 +414,11 @@ export default function FormVideoDetail() {
<div className="flex flex-col lg:flex-row gap-10"> <div className="flex flex-col lg:flex-row gap-10">
<Card className="w-full lg:w-8/12"> <Card className="w-full lg:w-8/12">
<div className="px-6 py-6"> <div className="px-6 py-6">
<p className="text-lg font-semibold mb-3"> <p className="text-lg font-semibold mb-3">{t("form-video")}</p>
Form Detail Konten Video
</p>
<div className="gap-5 mb-5"> <div className="gap-5 mb-5">
{/* Input Title */} {/* Input Title */}
<div className="space-y-2 py-3"> <div className="space-y-2 py-3">
<Label>Judul</Label> <Label>{t("title")}</Label>
<Controller <Controller
control={control} control={control}
name="title" name="title"
@ -439,8 +439,8 @@ export default function FormVideoDetail() {
)} )}
</div> </div>
<div className="flex items-center"> <div className="flex items-center">
<div className="py-3 w-full"> <div className="py-3 w-full space-y-2">
<Label>Kategori</Label> <Label>{t("category")}</Label>
<Select <Select
value={detail?.category.name} // Nilai default berdasarkan detail value={detail?.category.name} // Nilai default berdasarkan detail
onValueChange={(id) => { onValueChange={(id) => {
@ -462,8 +462,8 @@ export default function FormVideoDetail() {
</div> </div>
</div> </div>
<div className="py-3"> <div className="py-3 space-y-2">
<Label>Deskripsi</Label> <Label>{t("description")}</Label>
<Controller <Controller
control={control} control={control}
name="description" name="description"
@ -477,48 +477,49 @@ export default function FormVideoDetail() {
</p> </p>
)} )}
</div> </div>
<div className="space-y-2">
<Label className="text-xl text-black">File Mediaa</Label> <Label className="text-xl "> {t("file-media")}</Label>
<div className="w-full "> <div className="w-full ">
<Swiper
thumbs={{ swiper: thumbsSwiper }}
modules={[FreeMode, Navigation, Thumbs]}
navigation={false}
className="w-full"
>
{detailVideo?.map((data: any) => (
<SwiperSlide key={data.id}>
<video
className="object-fill h-full w-full"
src={data}
controls
title={`Video ${data.id}`} // Mengganti alt dengan title
/>
</SwiperSlide>
))}
</Swiper>
<div className=" mt-2 ">
<Swiper <Swiper
onSwiper={setThumbsSwiper} thumbs={{ swiper: thumbsSwiper }}
slidesPerView={6} modules={[FreeMode, Navigation, Thumbs]}
spaceBetween={8} navigation={false}
pagination={{ className="w-full"
clickable: true,
}}
modules={[Pagination, Thumbs]}
// className="mySwiper2"
> >
{detailVideo?.map((data: any) => ( {detailVideo?.map((data: any) => (
<SwiperSlide key={data.id}> <SwiperSlide key={data.id}>
<video <video
className="object-cover h-[60px] w-[80px]" className="object-fill h-full w-full"
src={data} src={data}
muted controls
title={`Video ${data.id}`} // Mengganti alt dengan title title={`Video ${data.id}`} // Mengganti alt dengan title
/> />
</SwiperSlide> </SwiperSlide>
))} ))}
</Swiper> </Swiper>
<div className=" mt-2 ">
<Swiper
onSwiper={setThumbsSwiper}
slidesPerView={6}
spaceBetween={8}
pagination={{
clickable: true,
}}
modules={[Pagination, Thumbs]}
// className="mySwiper2"
>
{detailVideo?.map((data: any) => (
<SwiperSlide key={data.id}>
<video
className="object-cover h-[60px] w-[80px]"
src={data}
muted
title={`Video ${data.id}`} // Mengganti alt dengan title
/>
</SwiperSlide>
))}
</Swiper>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -528,7 +529,7 @@ export default function FormVideoDetail() {
<Card className=" h-[800px]"> <Card className=" h-[800px]">
<div className="px-3 py-3"> <div className="px-3 py-3">
<div className="space-y-2"> <div className="space-y-2">
<Label>Kreator</Label> <Label>{t("creator")}</Label>
<Controller <Controller
control={control} control={control}
name="creatorName" name="creatorName"
@ -549,8 +550,8 @@ export default function FormVideoDetail() {
)} )}
</div> </div>
</div> </div>
<div className="mt-3 px-3"> <div className="mt-3 px-3 space-y-2">
<Label>Pratinjau Gambar Utama</Label> <Label>{t("preview")}</Label>
<Card className="mt-2"> <Card className="mt-2">
<img <img
src={detail.thumbnailLink} src={detail.thumbnailLink}
@ -561,7 +562,7 @@ export default function FormVideoDetail() {
</div> </div>
<div className="px-3 py-3"> <div className="px-3 py-3">
<div className="space-y-2"> <div className="space-y-2">
<Label>Tag</Label> <Label>{t("tags")}</Label>
<div className="flex flex-wrap gap-2"> <div className="flex flex-wrap gap-2">
{detail?.tags {detail?.tags
?.split(",") ?.split(",")
@ -577,8 +578,8 @@ export default function FormVideoDetail() {
</div> </div>
</div> </div>
<div className="px-3 py-3"> <div className="px-3 py-3">
<div className="flex flex-col gap-6"> <div className="flex flex-col gap-6 space-y-2">
<Label>Target Publish</Label> <Label>{t("publish-target")}</Label>
<div className="flex gap-2 items-center"> <div className="flex gap-2 items-center">
<Checkbox <Checkbox
id="5" id="5"
@ -615,10 +616,10 @@ export default function FormVideoDetail() {
</div> </div>
<div className="px-3 py-3 flex flex-row items-center text-blue-500 gap-2 text-sm"> <div className="px-3 py-3 flex flex-row items-center text-blue-500 gap-2 text-sm">
<MailIcon /> <MailIcon />
<p className="">Kotak Saran (0)</p> <p className="">{t("suggestion-box")} (0)</p>
</div> </div>
<div className="px-3 py-3 border mx-3"> <div className="px-3 py-3 border mx-3">
<p>Keterangan:</p> <p>{t("information")}:</p>
<p className="text-sm text-slate-400">{detail?.statusName}</p> <p className="text-sm text-slate-400">{detail?.statusName}</p>
</div> </div>
{/* {detail?.isPublish == false ? ( {/* {detail?.isPublish == false ? (
@ -638,14 +639,15 @@ export default function FormVideoDetail() {
color="primary" color="primary"
type="button" type="button"
> >
<Icon icon="fa:check" className="mr-3" /> Setujui <Icon icon="fa:check" className="mr-3" /> {t("accept")}
</Button> </Button>
<Button <Button
onClick={() => actionApproval("3")} onClick={() => actionApproval("3")}
className="bg-orange-400 hover:bg-orange-300" className="bg-orange-400 hover:bg-orange-300"
type="button" type="button"
> >
<Icon icon="fa:comment-o" className="mr-3" /> Revisi <Icon icon="fa:comment-o" className="mr-3" />{" "}
{t("revision")}
</Button> </Button>
<Button <Button
onClick={() => actionApproval("4")} onClick={() => actionApproval("4")}
@ -653,7 +655,7 @@ export default function FormVideoDetail() {
type="button" type="button"
> >
<Icon icon="fa:times" className="mr-3" /> <Icon icon="fa:times" className="mr-3" />
Tolak {t("reject")}
</Button> </Button>
</div> </div>
) )
@ -664,7 +666,7 @@ export default function FormVideoDetail() {
<Dialog open={modalOpen} onOpenChange={setModalOpen}> <Dialog open={modalOpen} onOpenChange={setModalOpen}>
<DialogContent size="md"> <DialogContent size="md">
<DialogHeader> <DialogHeader>
<DialogTitle>Berikan Komentar</DialogTitle> <DialogTitle>{t("leave-comment")}</DialogTitle>
</DialogHeader> </DialogHeader>
{status == "2" {status == "2"
? files?.map((file, index) => ( ? files?.map((file, index) => (
@ -701,7 +703,7 @@ export default function FormVideoDetail() {
htmlFor="terms" htmlFor="terms"
className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
> >
Semua {t("all")}
</label> </label>
</div> </div>
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
@ -846,14 +848,14 @@ export default function FormVideoDetail() {
color="primary" color="primary"
onClick={() => submit()} onClick={() => submit()}
> >
Submit {t("submit")}
</Button> </Button>
<Button <Button
type="button" type="button"
color="destructive" color="destructive"
onClick={() => setModalOpen(false)} onClick={() => setModalOpen(false)}
> >
Cancel {t("cancel")}
</Button> </Button>
</DialogFooter> </DialogFooter>
</DialogContent> </DialogContent>

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

@ -54,6 +54,7 @@ import { Item } from "@radix-ui/react-dropdown-menu";
import dynamic from "next/dynamic"; import dynamic from "next/dynamic";
import { getCsrfToken } from "@/service/auth"; import { getCsrfToken } from "@/service/auth";
import { Link } from "@/i18n/routing"; import { Link } from "@/i18n/routing";
import { useTranslations } from "next-intl";
const CustomEditor = dynamic( const CustomEditor = dynamic(
() => { () => {
@ -88,6 +89,7 @@ export default function FormVideo() {
const scheduleType = Cookies.get("scheduleType"); const scheduleType = Cookies.get("scheduleType");
const roleId = getCookiesDecrypt("urie"); const roleId = getCookiesDecrypt("urie");
const t = useTranslations("Form");
const [categories, setCategories] = useState<Category[]>([]); const [categories, setCategories] = useState<Category[]>([]);
const [selectedCategory, setSelectedCategory] = useState<any>(); const [selectedCategory, setSelectedCategory] = useState<any>();
const [tags, setTags] = useState<any[]>([]); const [tags, setTags] = useState<any[]>([]);
@ -706,10 +708,10 @@ export default function FormVideo() {
<div className="flex flex-col lg:flex-row gap-10"> <div className="flex flex-col lg:flex-row gap-10">
<Card className="w-full lg:w-8/12"> <Card className="w-full lg:w-8/12">
<div className="px-6 py-6"> <div className="px-6 py-6">
<p className="text-lg font-semibold mb-3">Form Konten Video</p> <p className="text-lg font-semibold mb-3">{t("form-video")}</p>
<div className="gap-5 mb-5"> <div className="gap-5 mb-5">
<div className="space-y-2 py-3"> <div className="space-y-2 py-3">
<Label>Judul</Label> <Label>{t("title")}</Label>
<Controller <Controller
control={control} control={control}
name="title" name="title"
@ -729,8 +731,8 @@ export default function FormVideo() {
</div> </div>
<div className="flex items-center"> <div className="flex items-center">
<div className="py-3 w-full"> <div className="py-3 w-full space-y-2">
<Label>Kategori</Label> <Label>{t("category")}</Label>
<Select <Select
value={selectedCategory} // Ensure selectedTarget is updated correctly value={selectedCategory} // Ensure selectedTarget is updated correctly
onValueChange={(id) => { onValueChange={(id) => {
@ -755,7 +757,7 @@ export default function FormVideo() {
</div> </div>
</div> </div>
<div className="flex flex-row items-center gap-3 py-2"> <div className="flex flex-row items-center gap-3 py-2">
<Label>Bantuan AI</Label> <Label>{t("ai-assistance")}</Label>
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<Switch <Switch
defaultChecked={isSwitchOn} defaultChecked={isSwitchOn}
@ -771,7 +773,7 @@ export default function FormVideo() {
<div> <div>
<div className="flex flex-row gap-3"> <div className="flex flex-row gap-3">
<div className="space-y-2 py-3 w-4/12"> <div className="space-y-2 py-3 w-4/12">
<Label>Bahasa</Label> <Label>{t("language")}</Label>
<Select onValueChange={setSelectedLanguage}> <Select onValueChange={setSelectedLanguage}>
<SelectTrigger size="md"> <SelectTrigger size="md">
<SelectValue placeholder="Pilih" /> <SelectValue placeholder="Pilih" />
@ -783,7 +785,7 @@ export default function FormVideo() {
</Select> </Select>
</div> </div>
<div className="space-y-2 py-3 w-4/12"> <div className="space-y-2 py-3 w-4/12">
<Label>Writing Style</Label> <Label>{t("writing-style")}</Label>
<Select onValueChange={setSelectedWritingStyle}> <Select onValueChange={setSelectedWritingStyle}>
<SelectTrigger size="md"> <SelectTrigger size="md">
<SelectValue placeholder="Pilih" /> <SelectValue placeholder="Pilih" />
@ -802,7 +804,7 @@ export default function FormVideo() {
</Select> </Select>
</div> </div>
<div className="space-y-2 py-3 w-4/12"> <div className="space-y-2 py-3 w-4/12">
<Label>Article Size</Label> <Label>{t("article-size")}</Label>
<Select onValueChange={setSelectedSize}> <Select onValueChange={setSelectedSize}>
<SelectTrigger size="md"> <SelectTrigger size="md">
<SelectValue placeholder="Pilih" /> <SelectValue placeholder="Pilih" />
@ -823,7 +825,7 @@ export default function FormVideo() {
</div> </div>
<div className="mt-5"> <div className="mt-5">
<div className="flex flex-row items-center gap-3 mb-3"> <div className="flex flex-row items-center gap-3 mb-3">
<Label>Main Keyword</Label> <Label>{t("main-keyword")}</Label>
<Button <Button
variant="outline" variant="outline"
color="primary" color="primary"
@ -847,7 +849,7 @@ export default function FormVideo() {
</div> </div>
<div className="mt-5"> <div className="mt-5">
<div className="flex flex-row items-center gap-3 mb-3"> <div className="flex flex-row items-center gap-3 mb-3">
<Label>Judul</Label> <Label>{t("title")}</Label>
<Button <Button
variant="outline" variant="outline"
color="primary" color="primary"
@ -869,7 +871,7 @@ export default function FormVideo() {
</div> </div>
<div className="mt-5"> <div className="mt-5">
<div className="flex flex-row items-center gap-3 mb-3"> <div className="flex flex-row items-center gap-3 mb-3">
<Label>SEO</Label> <Label>{t("seo")}</Label>
<Button <Button
variant={"outline"} variant={"outline"}
color="primary" color="primary"
@ -880,15 +882,9 @@ export default function FormVideo() {
</Button> </Button>
</div> </div>
<p className="font-semibold"> <p className="font-semibold">
Kata kunci untuk disertakan dalam teks {t("Keywords to include in the text")}
</p>
<p className="text-sm">
JIka Anda tidak Memberikan kata kunci, kami akan secara
otomatis membuat kata kunci yang relevan dari kata kunci
utama untuk setiap bagian dan menggunakannya untuk membuat
artikel. Untuk menambahkan kata kunci baru, ketik &apos;,
+ kata kunci&apos;.
</p> </p>
<p className="text-sm">{t("title-key")}</p>
<div className="mt-3"> <div className="mt-3">
<Textarea <Textarea
value={selectedSEO} value={selectedSEO}
@ -898,7 +894,7 @@ export default function FormVideo() {
</div> </div>
</div> </div>
<div className="mt-5"> <div className="mt-5">
<Label>Instruksi Khusus (Optional)</Label> <Label>{t("special-instructions")} (Optional)</Label>
<div className="mt-3"> <div className="mt-3">
<Controller <Controller
control={control} control={control}
@ -955,7 +951,7 @@ export default function FormVideo() {
variant={"outline"} variant={"outline"}
color="primary" color="primary"
> >
Edit {t("update")}
</Button> </Button>
</Link> </Link>
)} )}
@ -964,8 +960,8 @@ export default function FormVideo() {
</div> </div>
</div> </div>
)} )}
<div className=""> <div className="space-y-2">
<Label>Deskripsi</Label> <Label>{t("description")}</Label>
<Controller <Controller
control={control} control={control}
name="description" name="description"
@ -988,8 +984,8 @@ export default function FormVideo() {
</p> </p>
)} )}
</div> </div>
<div className="py-3"> <div className="py-3 space-y-2">
<Label>Pilih File</Label> <Label>{t("select-file")}</Label>
{/* <Input {/* <Input
id="fileInput" id="fileInput"
type="file" type="file"
@ -1002,11 +998,10 @@ export default function FormVideo() {
<CloudUpload className="text-default-300 w-10 h-10" /> <CloudUpload className="text-default-300 w-10 h-10" />
<h4 className=" text-2xl font-medium mb-1 mt-3 text-card-foreground/80"> <h4 className=" text-2xl font-medium mb-1 mt-3 text-card-foreground/80">
{/* Drop files here or click to upload. */} {/* Drop files here or click to upload. */}
Tarik file disini atau klik untuk upload. {t("drag-file")}
</h4> </h4>
<div className=" text-xs text-muted-foreground"> <div className=" text-xs text-muted-foreground">
( Upload file dengan mp4 atau mov Ukuran maksimal {t("upload-file-video-max")}
100mb.)
</div> </div>
</div> </div>
</div> </div>
@ -1015,7 +1010,7 @@ export default function FormVideo() {
<div>{fileList}</div> <div>{fileList}</div>
<div className=" flex justify-between gap-2"> <div className=" flex justify-between gap-2">
<div className="flex flex-row items-center gap-3 py-3"> <div className="flex flex-row items-center gap-3 py-3">
<Label>Gunakan Watermark</Label> <Label>{t("watermark")}</Label>
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<Switch defaultChecked color="primary" id="c2" /> <Switch defaultChecked color="primary" id="c2" />
</div> </div>
@ -1024,7 +1019,7 @@ export default function FormVideo() {
color="destructive" color="destructive"
onClick={handleRemoveAllFiles} onClick={handleRemoveAllFiles}
> >
Remove All {t("remove-all")}
</Button> </Button>
</div> </div>
</Fragment> </Fragment>
@ -1040,7 +1035,7 @@ export default function FormVideo() {
<Card className=" h-[800px]"> <Card className=" h-[800px]">
<div className="px-3 py-3"> <div className="px-3 py-3">
<div className="space-y-2"> <div className="space-y-2">
<Label>Kreator</Label> <Label>{t("creator")}</Label>
<Controller <Controller
control={control} control={control}
name="creatorName" name="creatorName"
@ -1074,8 +1069,8 @@ export default function FormVideo() {
/> />
</div> </div>
)} )}
<div className="px-3 py-3"> <div className="px-3 py-3 space-y-2">
<Label htmlFor="tags">Tags</Label> <Label htmlFor="tags">{t("tags")}</Label>
<Input <Input
type="text" type="text"
@ -1103,8 +1098,8 @@ export default function FormVideo() {
</div> </div>
</div> </div>
<div className="px-3 py-3"> <div className="px-3 py-3">
<div className="flex flex-col gap-3"> <div className="flex flex-col gap-3 space-y-2">
<Label>Target Publish</Label> <Label>{t("publish-target")}</Label>
{options.map((option) => ( {options.map((option) => (
<div key={option.id} className="flex gap-2 items-center"> <div key={option.id} className="flex gap-2 items-center">
<Checkbox <Checkbox
@ -1127,12 +1122,12 @@ export default function FormVideo() {
<div className="flex flex-row justify-end gap-3"> <div className="flex flex-row justify-end gap-3">
<div className="mt-4"> <div className="mt-4">
<Button type="submit" color="primary"> <Button type="submit" color="primary">
Submit {t("submit")}
</Button> </Button>
</div> </div>
<div className="mt-4"> <div className="mt-4">
<Button type="submit" color="primary" variant="outline"> <Button type="submit" color="primary" variant="outline">
Cancel {t("cancel")}
</Button> </Button>
</div> </div>
</div> </div>

58
components/form/content/video-update-form.tsx
View File

@ -55,6 +55,7 @@ import { Icon } from "@iconify/react/dist/iconify.js";
import { Upload } from "tus-js-client"; import { Upload } from "tus-js-client";
import { getCsrfToken } from "@/service/auth"; import { getCsrfToken } from "@/service/auth";
import { error, loading } from "@/lib/swal"; import { error, loading } from "@/lib/swal";
import { useTranslations } from "next-intl";
const videoSchema = z.object({ const videoSchema = z.object({
title: z.string().min(1, { message: "Judul diperlukan" }), title: z.string().min(1, { message: "Judul diperlukan" }),
@ -110,6 +111,7 @@ export default function FormVideoUpdate() {
const [isStartUpload, setIsStartUpload] = useState(false); const [isStartUpload, setIsStartUpload] = useState(false);
const [counterProgress, setCounterProgress] = useState(0); const [counterProgress, setCounterProgress] = useState(0);
const t = useTranslations("Form");
const [selectedFiles, setSelectedFiles] = useState<File[]>([]); const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
const taskId = Cookies.get("taskId"); const taskId = Cookies.get("taskId");
const scheduleId = Cookies.get("scheduleId"); const scheduleId = Cookies.get("scheduleId");
@ -609,13 +611,11 @@ export default function FormVideoUpdate() {
<div className="flex flex-col lg:flex-row gap-10"> <div className="flex flex-col lg:flex-row gap-10">
<Card className="w-full lg:w-8/12"> <Card className="w-full lg:w-8/12">
<div className="px-6 py-6"> <div className="px-6 py-6">
<p className="text-lg font-semibold mb-3"> <p className="text-lg font-semibold mb-3">{t("form-video")}</p>
Form Update Konten Video
</p>
<div className="gap-5 mb-5"> <div className="gap-5 mb-5">
{/* Input Title */} {/* Input Title */}
<div className="space-y-2 py-3"> <div className="space-y-2 py-3">
<Label>Judul</Label> <Label>{t("title")}</Label>
<Controller <Controller
control={control} control={control}
name="title" name="title"
@ -636,8 +636,8 @@ export default function FormVideoUpdate() {
)} )}
</div> </div>
<div className="flex items-center"> <div className="flex items-center">
<div className="py-3 w-full"> <div className="py-3 w-full space-y-2">
<Label>Kategori</Label> <Label>{t("category")}</Label>
<Select <Select
defaultValue={detail?.categoryId.name} // Nilai default berdasarkan detail defaultValue={detail?.categoryId.name} // Nilai default berdasarkan detail
onValueChange={(id) => { onValueChange={(id) => {
@ -659,8 +659,8 @@ export default function FormVideoUpdate() {
</div> </div>
</div> </div>
<div className="py-3"> <div className="py-3 space-y-2">
<Label>Deskripsi</Label> <Label>{t("description")}</Label>
<Controller <Controller
control={control} control={control}
name="description" name="description"
@ -679,8 +679,8 @@ export default function FormVideoUpdate() {
</p> </p>
)} )}
</div> </div>
<div className="py-3"> <div className="py-3 space-y-2">
<Label>Pilih File</Label> <Label>{t("select-file")}</Label>
{/* <Input {/* <Input
id="fileInput" id="fileInput"
type="file" type="file"
@ -693,11 +693,10 @@ export default function FormVideoUpdate() {
<CloudUpload className="text-default-300 w-10 h-10" /> <CloudUpload className="text-default-300 w-10 h-10" />
<h4 className=" text-2xl font-medium mb-1 mt-3 text-card-foreground/80"> <h4 className=" text-2xl font-medium mb-1 mt-3 text-card-foreground/80">
{/* Drop files here or click to upload. */} {/* Drop files here or click to upload. */}
Tarik file disini atau klik untuk upload. {t("drag-file")}
</h4> </h4>
<div className=" text-xs text-muted-foreground"> <div className=" text-xs text-muted-foreground">
( Upload file dengan format .jpg, .jpeg, atau .png. {t("upload-file-video-max")}
Ukuran maksimal 100mb.)
</div> </div>
</div> </div>
</div> </div>
@ -706,7 +705,7 @@ export default function FormVideoUpdate() {
<div>{fileList}</div> <div>{fileList}</div>
<div className=" flex justify-between gap-2"> <div className=" flex justify-between gap-2">
<div className="flex flex-row items-center gap-3 py-3"> <div className="flex flex-row items-center gap-3 py-3">
<Label>Gunakan Watermark</Label> <Label>{t("watermark")}</Label>
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<Switch defaultChecked color="primary" id="c2" /> <Switch defaultChecked color="primary" id="c2" />
</div> </div>
@ -721,8 +720,11 @@ export default function FormVideoUpdate() {
</Fragment> </Fragment>
) : null} ) : null}
{files.length > 0 && ( {files.length > 0 && (
<div className="mt-4"> <div className="mt-4 space-y-2">
<Label className="text-lg font-semibold">File</Label> <Label className="text-lg font-semibold">
{" "}
{t("file-media")}
</Label>
<div className="grid gap-4"> <div className="grid gap-4">
{files.map((file: any) => ( {files.map((file: any) => (
<div <div
@ -743,7 +745,7 @@ export default function FormVideoUpdate() {
rel="noopener noreferrer" rel="noopener noreferrer"
className="text-blue-500 text-sm" className="text-blue-500 text-sm"
> >
Lihat File {t("view-file")}
</a> </a>
</div> </div>
<div> <div>
@ -761,7 +763,7 @@ export default function FormVideoUpdate() {
} }
className="form-checkbox" className="form-checkbox"
/> />
<span>Semua</span> <span>{t("all")}</span>
</Label> </Label>
</div> </div>
<div> <div>
@ -833,7 +835,7 @@ export default function FormVideoUpdate() {
<Card className=" h-[800px]"> <Card className=" h-[800px]">
<div className="px-3 py-3"> <div className="px-3 py-3">
<div className="space-y-2"> <div className="space-y-2">
<Label>Kreator</Label> <Label>{t("creator")}</Label>
<Controller <Controller
control={control} control={control}
name="creatorName" name="creatorName"
@ -854,8 +856,8 @@ export default function FormVideoUpdate() {
)} )}
</div> </div>
</div> </div>
<div className="mt-3 px-3"> <div className="mt-3 px-3 space-y-2">
<Label>Pratinjau Gambar Utama</Label> <Label>{t("preview")}</Label>
<Card className="mt-2"> <Card className="mt-2">
<img <img
src={detail.thumbnailLink} src={detail.thumbnailLink}
@ -866,7 +868,7 @@ export default function FormVideoUpdate() {
</div> </div>
<div className="px-3 py-3"> <div className="px-3 py-3">
<div className="space-y-2"> <div className="space-y-2">
<Label>Tag</Label> <Label>{t("tags")}</Label>
<Input <Input
type="text" type="text"
id="tags" id="tags"
@ -900,8 +902,8 @@ export default function FormVideoUpdate() {
</div> </div>
</div> </div>
<div className="px-3 py-3"> <div className="px-3 py-3">
<div className="flex flex-col gap-6"> <div className="flex flex-col gap-6 space-y-2">
<Label>Target Publish</Label> <Label>{t("publish-target")}</Label>
{options.map((option: Option) => ( {options.map((option: Option) => (
<div key={option.id} className="flex gap-2 items-center"> <div key={option.id} className="flex gap-2 items-center">
<Checkbox <Checkbox
@ -921,22 +923,22 @@ export default function FormVideoUpdate() {
</div> </div>
<div className="px-3 py-3 flex flex-row items-center text-blue-500 gap-2 text-sm"> <div className="px-3 py-3 flex flex-row items-center text-blue-500 gap-2 text-sm">
<MailIcon /> <MailIcon />
<p className="">Kotak Saran (0)</p> <p className="">{t("suggestion-box")} (0)</p>
</div> </div>
<div className="px-3 py-3"> <div className="px-3 py-3">
<p>Keterangan:</p> <p>{t("information")}:</p>
{/* <p>{detail?.status}</p> */} {/* <p>{detail?.status}</p> */}
</div> </div>
</Card> </Card>
<div className="flex flex-row justify-end gap-3"> <div className="flex flex-row justify-end gap-3">
<div className="mt-4"> <div className="mt-4">
<Button type="submit" color="primary"> <Button type="submit" color="primary">
Submit {t("submit")}
</Button> </Button>
</div> </div>
<div className="mt-4"> <div className="mt-4">
<Button type="submit" color="primary" variant="outline"> <Button type="submit" color="primary" variant="outline">
Cancel {t("cancel")}
</Button> </Button>
</div> </div>
</div> </div>

28
components/form/planning/mediahub-publish.tsx
View File

@ -37,6 +37,7 @@ import {
} from "@/components/ui/dialog"; } from "@/components/ui/dialog";
import { AlertDialogHeader } from "@/components/ui/alert-dialog"; import { AlertDialogHeader } from "@/components/ui/alert-dialog";
import { Description } from "@radix-ui/react-toast"; import { Description } from "@radix-ui/react-toast";
import { useTranslations } from "next-intl";
const taskSchema = z.object({ const taskSchema = z.object({
title: z.string().min(1, { message: "Judul diperlukan" }), title: z.string().min(1, { message: "Judul diperlukan" }),
@ -75,6 +76,7 @@ export default function PublishMediahub() {
image: false, image: false,
text: false, text: false,
}); });
const t = useTranslations("Form");
const [mainType, setMainType] = useState<number>(1); const [mainType, setMainType] = useState<number>(1);
const [taskType, setTaskType] = useState<string>("atensi-khusus"); const [taskType, setTaskType] = useState<string>("atensi-khusus");
const [broadcastType, setBroadcastType] = useState<string>("all"); // untuk Tipe Penugasan const [broadcastType, setBroadcastType] = useState<string>("all"); // untuk Tipe Penugasan
@ -304,13 +306,13 @@ export default function PublishMediahub() {
return ( return (
<Card> <Card>
<div className="px-6 py-6"> <div className="px-6 py-6">
<p className="text-lg font-semibold mb-3">Perencanaan Mediahub</p> <p className="text-lg font-semibold mb-3">{t("planning-mediahub")}</p>
{detail !== undefined ? ( {detail !== undefined ? (
<form onSubmit={handleSubmit(onSubmit)}> <form onSubmit={handleSubmit(onSubmit)}>
<div className="gap-5 mb-5"> <div className="gap-5 mb-5">
{/* Input Title */} {/* Input Title */}
<div className="space-y-2"> <div className="space-y-2">
<Label>Judul</Label> <Label>{t("title")}</Label>
<Controller <Controller
control={control} control={control}
name="title" name="title"
@ -328,8 +330,8 @@ export default function PublishMediahub() {
<p className="text-red-400 text-sm">{errors.title.message}</p> <p className="text-red-400 text-sm">{errors.title.message}</p>
)} )}
</div> </div>
<div className="mt-6"> <div className="mt-6 space-y-2">
<Label>Output Tugas</Label> <Label>{t("output-tugas")}</Label>
<div className="flex flex-wrap gap-3 mt-1"> <div className="flex flex-wrap gap-3 mt-1">
{Object.keys(taskOutput).map((key) => ( {Object.keys(taskOutput).map((key) => (
<div className="flex items-center gap-2" key={key}> <div className="flex items-center gap-2" key={key}>
@ -347,8 +349,8 @@ export default function PublishMediahub() {
))} ))}
</div> </div>
</div> </div>
<div className="mt-6"> <div className="mt-6 space-y-2">
<Label>Pelaksana Tugas</Label> <Label>{t("executive-task")}</Label>
</div> </div>
<div className="flex flex-row items-center gap-3"> <div className="flex flex-row items-center gap-3">
<div className=""> <div className="">
@ -451,8 +453,8 @@ export default function PublishMediahub() {
</DialogContent> </DialogContent>
</Dialog> </Dialog>
</div> </div>
<div className="mt-6"> <div className="mt-6 space-y-2">
<Label>Jenis Penugasan</Label> <Label>{t("assignment-type")}</Label>
<RadioGroup <RadioGroup
value={detail?.assignmentType?.id.toString()} value={detail?.assignmentType?.id.toString()}
onValueChange={(value) => setType(value)} onValueChange={(value) => setType(value)}
@ -473,8 +475,8 @@ export default function PublishMediahub() {
</RadioGroup> </RadioGroup>
</div> </div>
<div className="mt-6"> <div className="mt-6">
<div className="flex flex-col"> <div className="flex flex-col space-y-2">
<Label>Date</Label> <Label>{t("date")}</Label>
<div> <div>
<Button <Button
defaultValue={detail?.date} defaultValue={detail?.date}
@ -495,8 +497,8 @@ export default function PublishMediahub() {
</div> </div>
</div> </div>
</div> </div>
<div className="mt-6"> <div className="mt-6 space-y-2">
<Label>Narasi Penugasan</Label> <Label>{t("description-task")}</Label>
<Controller <Controller
control={control} control={control}
name="description" name="description"
@ -520,7 +522,7 @@ export default function PublishMediahub() {
{/* Submit Button */} {/* Submit Button */}
<div className="mt-4"> <div className="mt-4">
<Button type="submit" color="primary"> <Button type="submit" color="primary">
Submit {t("submit")}
</Button> </Button>
</div> </div>
</form> </form>

26
components/form/planning/medsos-publish.tsx
View File

@ -33,6 +33,7 @@ import {
DialogTitle, DialogTitle,
DialogTrigger, DialogTrigger,
} from "@/components/ui/dialog"; } from "@/components/ui/dialog";
import { useTranslations } from "next-intl";
const taskSchema = z.object({ const taskSchema = z.object({
title: z.string().min(1, { message: "Judul diperlukan" }), title: z.string().min(1, { message: "Judul diperlukan" }),
@ -69,6 +70,7 @@ export default function PublishMedsos() {
image: false, image: false,
text: false, text: false,
}); });
const t = useTranslations("Form");
const [mainType, setMainType] = useState<number>(1); const [mainType, setMainType] = useState<number>(1);
const [taskType, setTaskType] = useState<string>("atensi-khusus"); const [taskType, setTaskType] = useState<string>("atensi-khusus");
const [broadcastType, setBroadcastType] = useState<string>("all"); // untuk Tipe Penugasan const [broadcastType, setBroadcastType] = useState<string>("all"); // untuk Tipe Penugasan
@ -297,13 +299,13 @@ export default function PublishMedsos() {
return ( return (
<Card> <Card>
<div className="px-6 py-6"> <div className="px-6 py-6">
<p className="text-lg font-semibold mb-3">Perencanaan Mediahub</p> <p className="text-lg font-semibold mb-3">{t("planning-medsos")}</p>
{detail !== undefined ? ( {detail !== undefined ? (
<form onSubmit={handleSubmit(onSubmit)}> <form onSubmit={handleSubmit(onSubmit)}>
<div className="gap-5 mb-5"> <div className="gap-5 mb-5">
{/* Input Title */} {/* Input Title */}
<div className="space-y-2"> <div className="space-y-2">
<Label>Judul</Label> <Label>{t("title")}</Label>
<Controller <Controller
control={control} control={control}
name="title" name="title"
@ -322,7 +324,7 @@ export default function PublishMedsos() {
)} )}
</div> </div>
<div className="mt-6"> <div className="mt-6">
<Label>Output Tugas</Label> <Label>{t("output-tugas")}</Label>
<div className="flex flex-wrap gap-3 mt-1"> <div className="flex flex-wrap gap-3 mt-1">
{Object.keys(taskOutput).map((key) => ( {Object.keys(taskOutput).map((key) => (
<div className="flex items-center gap-2" key={key}> <div className="flex items-center gap-2" key={key}>
@ -340,8 +342,8 @@ export default function PublishMedsos() {
))} ))}
</div> </div>
</div> </div>
<div className="mt-6"> <div className="mt-6 space-y-2">
<Label>Pelaksana Tugas</Label> <Label>{t("executive-task")}</Label>
</div> </div>
<div className="flex flex-row items-center gap-3"> <div className="flex flex-row items-center gap-3">
<div> <div>
@ -444,8 +446,8 @@ export default function PublishMedsos() {
</DialogContent> </DialogContent>
</Dialog> </Dialog>
</div> </div>
<div className="mt-6"> <div className="mt-6 space-y-2">
<Label>Jenis Penugasan</Label> <Label>{t("assignment-type")}</Label>
<RadioGroup <RadioGroup
value={detail.assignmentType.id.toString()} // State yang dipetakan ke value RadioGroup value={detail.assignmentType.id.toString()} // State yang dipetakan ke value RadioGroup
onValueChange={(value) => setType(value)} // Mengubah nilai state ketika pilihan berubah onValueChange={(value) => setType(value)} // Mengubah nilai state ketika pilihan berubah
@ -465,9 +467,9 @@ export default function PublishMedsos() {
</div> </div>
</RadioGroup> </RadioGroup>
</div> </div>
<div className="mt-6"> <div className="mt-6 space-y-2">
<div className="flex flex-col"> <div className="flex flex-col">
<Label>Date</Label> <Label>{t("date")}</Label>
<div> <div>
<Button <Button
value={detail.date} value={detail.date}
@ -488,8 +490,8 @@ export default function PublishMedsos() {
</div> </div>
</div> </div>
</div> </div>
<div className="mt-6"> <div className="mt-6 space-y-2">
<Label>Narasi Penugasan</Label> <Label>{t("description-task")}</Label>
<Controller <Controller
control={control} control={control}
name="description" name="description"
@ -513,7 +515,7 @@ export default function PublishMedsos() {
{/* Submit Button */} {/* Submit Button */}
<div className="mt-4"> <div className="mt-4">
<Button type="submit" color="primary"> <Button type="submit" color="primary">
Submit {t("submit")}
</Button> </Button>
</div> </div>
</form> </form>

76
messages/en.json
View File

@ -641,5 +641,81 @@
"target-output": "Target Output", "target-output": "Target Output",
"target-participant": "Target Participant", "target-participant": "Target Participant",
"action": "Actions" "action": "Actions"
},
"Form": {
"no": "No",
"title": "Title",
"category-name": "Category Name",
"upload-date": "Upload Date",
"creator-group": "Creator Group",
"source": "source",
"published": "Published",
"date": "Date",
"category": "Category",
"tag": "Tag",
"type-content": "Content Type",
"type-task": "Task Type",
"category-task": "Category Task",
"code": "Code",
"start-date": "Start Date",
"end-date": "End Date",
"speaker": "Speaker",
"time": "Time",
"address": "Address",
"question": "Question",
"sender": "Created By",
"sendto": "SendTo",
"type": "Type",
"duration": "Duration",
"target-output": "Target Output",
"target-participant": "Target Participant",
"action": "Actions",
"form-image": "Form Content Image",
"form-video": "Form Content Video",
"form-text": "Form Content Text",
"form-audio": "Form Content Audio",
"form-spit": "Form Content SPIT",
"ai-assistance": "AI assistance",
"language": "Language",
"writing-style": "Writing Style",
"article-size": "Article Size",
"main-keyword": "Main Keyword",
"seo": "Seo",
"Keywords to include in the text": "Keywords to include in the text",
"title-key": "If you do not provide keywords, we will automatically generate relevant keywords from the main keywords for each section and use them to create the article. To add a new keyword, type keyword",
"special-instructions": "Special Instructions",
"description": "Description",
"select-file": "Select File",
"drag-file": "Drag files here or click to upload.",
"upload-file-max": "(Upload files in .jpg, .jpeg, or .png format.Maximum size 100mb.)",
"watermark": "Use watermark",
"remove-all": "Remove All",
"creator": "Creator",
"tags": "Tags",
"publish-target": "Target Publish",
"submit": "Submit",
"cancel": "Cancel",
"file-media": "File Media",
"preview": "Preview",
"suggestion-box": "Suggestion Box",
"information": "Information",
"accept": "Accept",
"revision": "Revision",
"reject": "Reject",
"leave-comment": "Leave a comment",
"all": "All",
"view-file": "View File",
"update": "Update",
"upload-file-video-max": " Upload files with mp4 or mov Maximum size 100mb.",
"upload-file-text-max": " Upload files in .doc, .docx, .pdf, .ppt, or .pptx format. Maximum size 100mb.",
"upload-file-audio-max": " Upload file in mp3 atau wav Maximum size 100mb",
"file-rewrite": "File Rewrite",
"file-placement": "File Placement",
"planning-mediahub": "Planning Mediahub",
"planning-medsos": "Planning Medsos",
"output-tugas": "Output Task",
"executive-task": "Executive Task",
"assignment-type": "Assignment Type",
"description-task": "Description Task"
} }
} }

79
messages/in.json
View File

@ -43,10 +43,10 @@
"date": "Tanggal", "date": "Tanggal",
"active": "Aktif", "active": "Aktif",
"done": "Selesai", "done": "Selesai",
"image": "Image", "image": "Foto",
"video": "Video", "video": "Video",
"audio": "Audio", "audio": "Audio",
"text": "Text" "text": "Teks"
}, },
"BankingDashboard": { "BankingDashboard": {
"widget_title": "Good evening", "widget_title": "Good evening",
@ -642,5 +642,80 @@
"target-output": "Target Output", "target-output": "Target Output",
"target-participant": "Target Peserta", "target-participant": "Target Peserta",
"action": "Aksi" "action": "Aksi"
},
"Form": {
"no": "Nomor",
"title": "Judul",
"category-name": "Nama Kategori",
"upload-date": "Tanggal Upload",
"creator-group": "Pembuat",
"source": "Sumber",
"published": "Diterbitkan",
"date": "Tanggal",
"category": "Kategori",
"tag": "Tag",
"type-content": "Tipe Konten",
"type-task": "Tipen Penugasan",
"category-task": "Kategori Penugasan",
"code": "Kode",
"start-date": "Tanggal Mulai",
"end-date": "Tanggal Selesai",
"speaker": "Disampaikan Oleh",
"time": "Waktu",
"address": "Alamat",
"question": "Pertanyaan",
"sender": "Pengirim",
"sendto": "Penerima",
"type": "Tipe",
"duration": "Durasi",
"target-output": "Target Output",
"target-participant": "Target Peserta",
"action": "Aksi",
"form-image": "Form Konten Foto",
"form-video": "Form Konten Video",
"form-text": "Form Konten Teks",
"form-audio": "Form Konten Audio",
"form-spit": "Form Konten SPIT",
"ai-assistance": "Bantuan AI",
"language": "Bahasa",
"writing-style": "Writing Style",
"article-size": "Ukuran Article",
"main-keyword": "Main Keyword",
"seo": "Seo",
"Keywords to include in the text": "Kata kunci untuk di sertakan dalam teks",
"title-key": "JIka Anda tidak Memberikan kata kunci, kami akan secara otomatis membuat kata kunci yang relevan dari kata kunciutama untuk setiap bagian dan menggunakannya untuk membuat artikel. Untuk menambahkan kata kunci baru, ketik kata kunci",
"special-instructions": "Instruksi Khusus",
"description": "Deskripsi",
"select-file": "Pilih File",
"drag-file": "Tarik file disini atau klik untuk upload.",
"upload-file-max": "(Upload file dengan format .jpg, .jpeg, atau .png.Ukuran maksimal 100mb.)",
"watermark": "Gunakan watermark",
"remove-all": "Hapus semua",
"creator": "Kreator",
"tags": "Tags",
"publish-target": "Target Publish",
"submit": "Kirim",
"cancel": "Batal",
"file-media": "File Media",
"preview": "Pratinjau Gambar utama",
"suggestion-box": "Kotak Saran",
"information": "Keterangan",
"accept": "Setujui",
"revision": "Revisi",
"reject": "Tolak",
"leave-comment": "Berikan Komentar",
"all": "Semua",
"view-file": "Lihat file",
"update": "Edit",
"upload-file-video-max": " Upload file dengan mp4 atau mov Ukuran maksimal 100mb.",
"upload-file-text-max": "Upload file dengan format .doc, .docx, .pdf, .ppt, atau .pptx Ukuran maksimal 100mb. ",
"upload-file-audio-max": " Upload file dengan mp3 atau wav maksimal ukuran 100mb",
"file-rewrite": "File hasil Rewrite",
"file-placement": "Penempatan file",
"planning-mediahub": "Perencanaan Mediahub",
"output-tugas": "Output Tugas",
"executive-task": "Pelaksana Tugas",
"assignment-type": "Jenis Penugasan",
"description-task": "Narasi Penugasan"
} }
} }