From 982aa9229489ebfa874cbab2b03cb2a00af9076b Mon Sep 17 00:00:00 2001
From: Anang Yusman <anangyusman23@gmail.com>
Date: Thu, 27 Mar 2025 02:58:30 +0800
Subject: [PATCH] feat:update bahasa form,ui form

---
 components/form/content/audio-detail-form.tsx |  43 ++---
 components/form/content/audio-form.tsx        |  67 ++++---
 components/form/content/audio-update-form.tsx |  50 +++---
 components/form/content/image-detail-form.tsx | 105 +++++------
 components/form/content/image-form.tsx        |  78 ++++----
 components/form/content/image-update-form.tsx |  55 +++---
 components/form/content/spit-convert-form.tsx |  54 +++---
 components/form/content/teks-detail-form.tsx  | 167 +++++++++---------
 components/form/content/teks-form.tsx         |  70 ++++----
 components/form/content/teks-update-form.tsx  |  54 +++---
 components/form/content/video-detail-form.tsx | 110 ++++++------
 components/form/content/video-form.tsx        |  69 ++++----
 components/form/content/video-update-form.tsx |  58 +++---
 components/form/planning/mediahub-publish.tsx |  28 +--
 components/form/planning/medsos-publish.tsx   |  26 +--
 messages/en.json                              |  76 ++++++++
 messages/in.json                              |  79 ++++++++-
 17 files changed, 676 insertions(+), 513 deletions(-)

diff --git a/components/form/content/audio-detail-form.tsx b/components/form/content/audio-detail-form.tsx
index ebf74b2c..d78d7262 100644
--- a/components/form/content/audio-detail-form.tsx
+++ b/components/form/content/audio-detail-form.tsx
@@ -57,6 +57,7 @@ import { error } from "@/lib/swal";
 import dynamic from "next/dynamic";
 import WavesurferPlayer from "@wavesurfer/react";
 import WaveSurfer from "wavesurfer.js";
+import { useTranslations } from "next-intl";
 
 const imageSchema = z.object({
   title: z.string().min(1, { message: "Judul diperlukan" }),
@@ -135,6 +136,7 @@ export default function FormAudioDetail() {
   const [detailThumb, setDetailThumb] = useState<any>([]);
   const [thumbsSwiper, setThumbsSwiper] = useState<any>(null);
 
+  const t = useTranslations("Form");
   const [selectedTarget, setSelectedTarget] = useState("");
   const [files, setFiles] = useState<FileType[]>([]);
   const [rejectedFiles, setRejectedFiles] = useState<number[]>([]);
@@ -452,11 +454,11 @@ export default function FormAudioDetail() {
         <div className="flex flex-col lg:flex-row gap-10">
           <Card className="w-full lg:w-8/12">
             <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">
                 {/* Input Title */}
                 <div className="space-y-2 py-3">
-                  <Label>Judul</Label>
+                  <Label>{t("title")}</Label>
                   <Controller
                     control={control}
                     name="title"
@@ -477,8 +479,8 @@ export default function FormAudioDetail() {
                   )}
                 </div>
                 <div className="flex items-center">
-                  <div className="py-3 w-full">
-                    <Label>Kategori</Label>
+                  <div className="py-3 w-full space-y-2">
+                    <Label>{t("category")}</Label>
                     <Select
                       value={detail?.category.name} // Nilai default berdasarkan detail
                       onValueChange={(id) => {
@@ -500,8 +502,8 @@ export default function FormAudioDetail() {
                   </div>
                 </div>
 
-                <div className="py-3">
-                  <Label>Deskripsi</Label>
+                <div className="py-3 space-y-2">
+                  <Label>{t("description")}</Label>
                   <Controller
                     control={control}
                     name="description"
@@ -516,7 +518,7 @@ export default function FormAudioDetail() {
                   )}
                 </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={"container example"}>
                     {detailThumb?.map((url: any, index: number) => (
@@ -561,7 +563,7 @@ export default function FormAudioDetail() {
             <Card className=" h-[600px]">
               <div className="px-3 py-3">
                 <div className="space-y-2">
-                  <Label>Kreator</Label>
+                  <Label>{t("creator")}</Label>
                   <Controller
                     control={control}
                     name="creatorName"
@@ -585,7 +587,7 @@ export default function FormAudioDetail() {
 
               <div className="px-3 py-3">
                 <div className="space-y-2">
-                  <Label>Tag</Label>
+                  <Label>{t("tags")}</Label>
                   <div className="flex flex-wrap gap-2">
                     {detail?.tags
                       ?.split(",")
@@ -601,8 +603,8 @@ export default function FormAudioDetail() {
                 </div>
               </div>
               <div className="px-3 py-3">
-                <div className="flex flex-col gap-6">
-                  <Label>Target Publish</Label>
+                <div className="flex flex-col gap-6 space-y-2">
+                  <Label>{t("publish-target")}</Label>
                   <div className="flex gap-2 items-center">
                     <Checkbox
                       id="5"
@@ -639,10 +641,10 @@ export default function FormAudioDetail() {
               </div>
               <div className="px-3 py-3 flex flex-row items-center text-blue-500 gap-2 text-sm">
                 <MailIcon />
-                <p className="">Kotak Saran (0)</p>
+                <p className="">{t("suggestion-box")}(0)</p>
               </div>
               <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>
               </div>
               {/* {detail?.isPublish == false ? (
@@ -662,14 +664,15 @@ export default function FormAudioDetail() {
                       color="primary"
                       type="button"
                     >
-                      <Icon icon="fa:check" className="mr-3" /> Setujui
+                      <Icon icon="fa:check" className="mr-3" /> {t("accept")}
                     </Button>
                     <Button
                       onClick={() => actionApproval("3")}
                       className="bg-orange-400 hover:bg-orange-300"
                       type="button"
                     >
-                      <Icon icon="fa:comment-o" className="mr-3" /> Revisi
+                      <Icon icon="fa:comment-o" className="mr-3" />{" "}
+                      {t("revision")}
                     </Button>
                     <Button
                       onClick={() => actionApproval("4")}
@@ -677,7 +680,7 @@ export default function FormAudioDetail() {
                       type="button"
                     >
                       <Icon icon="fa:times" className="mr-3" />
-                      Tolak
+                      {t("reject")}
                     </Button>
                   </div>
                 )
@@ -688,7 +691,7 @@ export default function FormAudioDetail() {
               <Dialog open={modalOpen} onOpenChange={setModalOpen}>
                 <DialogContent size="md">
                   <DialogHeader>
-                    <DialogTitle>Berikan Komentar</DialogTitle>
+                    <DialogTitle>{t("leave-comment")}</DialogTitle>
                   </DialogHeader>
                   {status == "2"
                     ? files?.map((file, index) => (
@@ -725,7 +728,7 @@ export default function FormAudioDetail() {
                                     htmlFor="terms"
                                     className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
                                   >
-                                    Semua
+                                    {t("all")}
                                   </label>
                                 </div>
                                 <div className="flex items-center space-x-2">
@@ -870,7 +873,7 @@ export default function FormAudioDetail() {
                       color="primary"
                       onClick={() => submit()}
                     >
-                      Submit
+                      {t("submit")}
                     </Button>
                     <Button
                       type="button"
@@ -879,7 +882,7 @@ export default function FormAudioDetail() {
                         setModalOpen(false);
                       }}
                     >
-                      Cancel
+                      {t("cancel")}
                     </Button>
                   </DialogFooter>
                 </DialogContent>
diff --git a/components/form/content/audio-form.tsx b/components/form/content/audio-form.tsx
index 79152771..b8eeebe7 100644
--- a/components/form/content/audio-form.tsx
+++ b/components/form/content/audio-form.tsx
@@ -54,6 +54,7 @@ import { Item } from "@radix-ui/react-dropdown-menu";
 import dynamic from "next/dynamic";
 import { getCsrfToken } from "@/service/auth";
 import { Link } from "@/i18n/routing";
+import { useTranslations } from "next-intl";
 
 interface FileWithPreview extends File {
   preview: string;
@@ -88,6 +89,7 @@ export default function FormAudio() {
   const scheduleType = Cookies.get("scheduleType");
   const roleId = getCookiesDecrypt("urie");
 
+  const t = useTranslations("Form");
   const [categories, setCategories] = useState<Category[]>([]);
   const [selectedCategory, setSelectedCategory] = 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">
         <Card className="w-full lg:w-8/12">
           <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">
               {/* Input Title */}
               <div className="space-y-2 py-3">
-                <Label>Judul</Label>
+                <Label>{t("title")}</Label>
                 <Controller
                   control={control}
                   name="title"
@@ -732,8 +734,8 @@ export default function FormAudio() {
               </div>
 
               <div className="flex items-center">
-                <div className="py-3 w-full">
-                  <Label>Kategori</Label>
+                <div className="py-3 w-full space-y-2">
+                  <Label>{t("category")}</Label>
                   <Select
                     value={selectedCategory} // Ensure selectedTarget is updated correctly
                     onValueChange={(id) => {
@@ -758,7 +760,7 @@ export default function FormAudio() {
                 </div>
               </div>
               <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">
                   <Switch
                     defaultChecked={isSwitchOn}
@@ -774,7 +776,7 @@ export default function FormAudio() {
                 <div>
                   <div className="flex flex-row gap-3">
                     <div className="space-y-2 py-3 w-4/12">
-                      <Label>Bahasa</Label>
+                      <Label>{t("language")}</Label>
                       <Select onValueChange={setSelectedLanguage}>
                         <SelectTrigger size="md">
                           <SelectValue placeholder="Pilih" />
@@ -786,7 +788,7 @@ export default function FormAudio() {
                       </Select>
                     </div>
                     <div className="space-y-2 py-3 w-4/12">
-                      <Label>Writing Style</Label>
+                      <Label>{t("writing-style")}</Label>
                       <Select onValueChange={setSelectedWritingStyle}>
                         <SelectTrigger size="md">
                           <SelectValue placeholder="Pilih" />
@@ -805,7 +807,7 @@ export default function FormAudio() {
                       </Select>
                     </div>
                     <div className="space-y-2 py-3 w-4/12">
-                      <Label>Article Size</Label>
+                      <Label>{t("article-size")}</Label>
                       <Select onValueChange={setSelectedSize}>
                         <SelectTrigger size="md">
                           <SelectValue placeholder="Pilih" />
@@ -826,7 +828,7 @@ export default function FormAudio() {
                   </div>
                   <div className="mt-5">
                     <div className="flex flex-row items-center gap-3 mb-3">
-                      <Label>Main Keyword</Label>
+                      <Label>{t("main-keyword")}</Label>
                       <Button
                         variant="outline"
                         color="primary"
@@ -850,7 +852,7 @@ export default function FormAudio() {
                   </div>
                   <div className="mt-5">
                     <div className="flex flex-row items-center gap-3 mb-3">
-                      <Label>Judul</Label>
+                      <Label>{t("title")}</Label>
                       <Button
                         variant="outline"
                         color="primary"
@@ -872,7 +874,7 @@ export default function FormAudio() {
                   </div>
                   <div className="mt-5">
                     <div className="flex flex-row items-center gap-3 mb-3">
-                      <Label>SEO</Label>
+                      <Label>{t("seo")}</Label>
                       <Button
                         variant={"outline"}
                         color="primary"
@@ -883,15 +885,9 @@ export default function FormAudio() {
                       </Button>
                     </div>
                     <p className="font-semibold">
-                      Kata kunci untuk disertakan dalam teks
-                    </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;.
+                      {t("Keywords to include in the text")}
                     </p>
+                    <p className="text-sm">{t("title-key")}</p>
                     <div className="mt-3">
                       <Textarea
                         value={selectedSEO}
@@ -901,7 +897,7 @@ export default function FormAudio() {
                     </div>
                   </div>
                   <div className="mt-5">
-                    <Label>Instruksi Khusus (Optional)</Label>
+                    <Label>{t("special-instructions")} (Optional)</Label>
                     <div className="mt-3">
                       <Controller
                         control={control}
@@ -959,7 +955,7 @@ export default function FormAudio() {
                               variant={"outline"}
                               color="primary"
                             >
-                              Edit
+                              {t("update")}
                             </Button>
                           </Link>
                         )}
@@ -968,8 +964,8 @@ export default function FormAudio() {
                   </div>
                 </div>
               )}
-              <div className="">
-                <Label>Deskripsi</Label>
+              <div className="space-y-2">
+                <Label>{t("description")}</Label>
                 <Controller
                   control={control}
                   name="description"
@@ -992,8 +988,8 @@ export default function FormAudio() {
                   </p>
                 )}
               </div>
-              <div className="py-3">
-                <Label>Pilih File</Label>
+              <div className="py-3 space-y-2">
+                <Label>{t("select-file")}</Label>
                 {/* <Input
                   id="fileInput"
                   type="file"
@@ -1006,11 +1002,10 @@ export default function FormAudio() {
                       <CloudUpload className="text-default-300 w-10 h-10" />
                       <h4 className=" text-2xl font-medium mb-1 mt-3 text-card-foreground/80">
                         {/* Drop files here or click to upload. */}
-                        Tarik file disini atau klik untuk upload.
+                        {t("drag-file")}
                       </h4>
                       <div className=" text-xs text-muted-foreground">
-                        ( Upload file dengan mp3 atau wav Ukuran maksimal
-                        100mb.)
+                        {t("upload-file-audio-max")}
                       </div>
                     </div>
                   </div>
@@ -1028,7 +1023,7 @@ export default function FormAudio() {
                           color="destructive"
                           onClick={handleRemoveAllFiles}
                         >
-                          Remove All
+                          {t("remove-all")}
                         </Button>
                       </div>
                     </Fragment>
@@ -1042,7 +1037,7 @@ export default function FormAudio() {
           <Card className=" h-[500px]">
             <div className="px-3 py-3">
               <div className="space-y-2">
-                <Label>Kreator</Label>
+                <Label>{t("creator")}</Label>
                 <Controller
                   control={control}
                   name="creatorName"
@@ -1063,8 +1058,8 @@ export default function FormAudio() {
                 )}
               </div>
             </div>
-            <div className="px-3 py-3">
-              <Label htmlFor="tags">Tags</Label>
+            <div className="px-3 py-3 space-y-2">
+              <Label htmlFor="tags">{t("tags")}</Label>
 
               <Input
                 type="text"
@@ -1092,8 +1087,8 @@ export default function FormAudio() {
               </div>
             </div>
             <div className="px-3 py-3">
-              <div className="flex flex-col gap-3">
-                <Label>Target Publish</Label>
+              <div className="flex flex-col gap-3 space-y-2">
+                <Label>{t("publish-target")}</Label>
                 {options.map((option) => (
                   <div key={option.id} className="flex gap-2 items-center">
                     <Checkbox
@@ -1116,12 +1111,12 @@ export default function FormAudio() {
           <div className="flex flex-row justify-end gap-3">
             <div className="mt-4">
               <Button type="submit" color="primary">
-                Submit
+                {t("submit")}
               </Button>
             </div>
             <div className="mt-4">
               <Button type="submit" color="primary" variant="outline">
-                Cancel
+                {t("cancel")}
               </Button>
             </div>
           </div>
diff --git a/components/form/content/audio-update-form.tsx b/components/form/content/audio-update-form.tsx
index 02bd974a..c79fc23d 100644
--- a/components/form/content/audio-update-form.tsx
+++ b/components/form/content/audio-update-form.tsx
@@ -48,6 +48,7 @@ import { Icon } from "@iconify/react/dist/iconify.js";
 import { error } from "@/lib/swal";
 import { getCsrfToken } from "@/service/auth";
 import { Upload } from "tus-js-client";
+import { useTranslations } from "next-intl";
 
 const audioSchema = z.object({
   title: z.string().min(1, { message: "Judul diperlukan" }),
@@ -108,6 +109,7 @@ export default function FormAudioUpdate() {
   const scheduleId = Cookies.get("scheduleId");
   const scheduleType = Cookies.get("scheduleType");
 
+  const t = useTranslations("Form");
   const [categories, setCategories] = useState<Category[]>([]);
   const [selectedCategory, setSelectedCategory] = 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">
           <Card className="w-full lg:w-8/12">
             <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">
                 {/* Input Title */}
                 <div className="space-y-2 py-3">
-                  <Label>Judul</Label>
+                  <Label>{t("title")}</Label>
                   <Controller
                     control={control}
                     name="title"
@@ -615,8 +617,8 @@ export default function FormAudioUpdate() {
                   )}
                 </div>
                 <div className="flex items-center">
-                  <div className="py-3 w-full">
-                    <Label>Kategori</Label>
+                  <div className="py-3 w-full space-y-2">
+                    <Label>{t("category")}</Label>
                     <Select
                       defaultValue={detail?.categoryId.name} // Nilai default berdasarkan detail
                       onValueChange={(id) => {
@@ -638,8 +640,8 @@ export default function FormAudioUpdate() {
                   </div>
                 </div>
 
-                <div className="py-3">
-                  <Label>Deskripsi</Label>
+                <div className="py-3 space-y-2">
+                  <Label>{t("description")}</Label>
                   <Controller
                     control={control}
                     name="description"
@@ -658,8 +660,8 @@ export default function FormAudioUpdate() {
                     </p>
                   )}
                 </div>
-                <div className="py-3">
-                  <Label>Pilih File</Label>
+                <div className="py-3 space-y-2">
+                  <Label>{t("select-file")}</Label>
                   {/* <Input
                                   id="fileInput"
                                   type="file"
@@ -672,11 +674,10 @@ export default function FormAudioUpdate() {
                         <CloudUpload className="text-default-300 w-10 h-10" />
                         <h4 className=" text-2xl font-medium mb-1 mt-3 text-card-foreground/80">
                           {/* Drop files here or click to upload. */}
-                          Tarik file disini atau klik untuk upload.
+                          {t("drag-file")}
                         </h4>
                         <div className=" text-xs text-muted-foreground">
-                          ( Upload file dengan format .jpg, .jpeg, atau .png.
-                          Ukuran maksimal 100mb.)
+                          {t("upload-file-audio-max")}
                         </div>
                       </div>
                     </div>
@@ -685,7 +686,7 @@ export default function FormAudioUpdate() {
                         <div>{fileList}</div>
                         <div className=" flex justify-between gap-2">
                           <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">
                               <Switch defaultChecked color="primary" id="c2" />
                             </div>
@@ -701,7 +702,10 @@ export default function FormAudioUpdate() {
                     ) : null}
                     {files.length > 0 && (
                       <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">
                           {files.map((file: any) => (
                             <div
@@ -722,7 +726,7 @@ export default function FormAudioUpdate() {
                                     rel="noopener noreferrer"
                                     className="text-blue-500 text-sm"
                                   >
-                                    Lihat File
+                                    {t("view-file")}
                                   </a>
                                 </div>
                                 <div>
@@ -740,7 +744,7 @@ export default function FormAudioUpdate() {
                                       }
                                       className="form-checkbox"
                                     />
-                                    <span>Semua</span>
+                                    <span>{t("all")}</span>
                                   </Label>
                                 </div>
                                 <div>
@@ -812,7 +816,7 @@ export default function FormAudioUpdate() {
             <Card className=" h-[800px]">
               <div className="px-3 py-3">
                 <div className="space-y-2">
-                  <Label>Kreator</Label>
+                  <Label>{t("creator")}</Label>
                   <Controller
                     control={control}
                     name="creatorName"
@@ -835,7 +839,7 @@ export default function FormAudioUpdate() {
               </div>
               <div className="px-3 py-3">
                 <div className="space-y-2">
-                  <Label>Tag</Label>
+                  <Label>{t("tags")}</Label>
                   <Input
                     type="text"
                     id="tags"
@@ -869,8 +873,8 @@ export default function FormAudioUpdate() {
                 </div>
               </div>
               <div className="px-3 py-3">
-                <div className="flex flex-col gap-6">
-                  <Label>Target Publish</Label>
+                <div className="flex flex-col gap-6 space-y-2">
+                  <Label>{t("publish-target")}</Label>
                   {options.map((option: Option) => (
                     <div key={option.id} className="flex gap-2 items-center">
                       <Checkbox
@@ -890,22 +894,22 @@ export default function FormAudioUpdate() {
               </div>
               <div className="px-3 py-3 flex flex-row items-center text-blue-500 gap-2 text-sm">
                 <MailIcon />
-                <p className="">Kotak Saran (0)</p>
+                <p className="">{t("suggestion-box")} (0)</p>
               </div>
               <div className="px-3 py-3">
-                <p>Keterangan:</p>
+                <p>{t("information")}:</p>
                 {/* <p>{detail?.status}</p> */}
               </div>
             </Card>
             <div className="flex flex-row justify-end gap-3">
               <div className="mt-4">
                 <Button type="submit" color="primary">
-                  Submit
+                  {t("submit")}
                 </Button>
               </div>
               <div className="mt-4">
                 <Button type="submit" color="primary" variant="outline">
-                  Cancel
+                  {t("cancel")}
                 </Button>
               </div>
             </div>
diff --git a/components/form/content/image-detail-form.tsx b/components/form/content/image-detail-form.tsx
index 43dd6194..5b442b1b 100644
--- a/components/form/content/image-detail-form.tsx
+++ b/components/form/content/image-detail-form.tsx
@@ -57,6 +57,7 @@ import { Icon } from "@iconify/react/dist/iconify.js";
 import { error } from "@/lib/swal";
 import dynamic from "next/dynamic";
 import { useRouter } from "@/i18n/routing";
+import { useTranslations } from "next-intl";
 
 const imageSchema = z.object({
   title: z.string().min(1, { message: "Judul diperlukan" }),
@@ -119,6 +120,7 @@ export default function FormImageDetail() {
   const editor = useRef(null);
   type ImageSchema = z.infer<typeof imageSchema>;
 
+  const t = useTranslations("Form");
   const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
   const taskId = Cookies.get("taskId");
   const scheduleId = Cookies.get("scheduleId");
@@ -418,11 +420,11 @@ export default function FormImageDetail() {
         <div className="flex flex-col lg:flex-row gap-10">
           <Card className="w-full lg:w-8/12">
             <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">
                 {/* Input Title */}
                 <div className="space-y-2 py-3">
-                  <Label>Judul</Label>
+                  <Label>{t("title")} </Label>
                   <Controller
                     control={control}
                     name="title"
@@ -443,8 +445,8 @@ export default function FormImageDetail() {
                   )}
                 </div>
                 <div className="flex items-center">
-                  <div className="py-3 w-full">
-                    <Label>Kategori</Label>
+                  <div className="py-3 w-full space-y-2">
+                    <Label>{t("category")}</Label>
                     <Select
                       value={detail?.category.name} // Nilai default berdasarkan detail
                       onValueChange={(id) => {
@@ -466,8 +468,8 @@ export default function FormImageDetail() {
                   </div>
                 </div>
 
-                <div className="py-3">
-                  <Label>Deskripsi</Label>
+                <div className="py-3 space-y-2">
+                  <Label>{t("description")}</Label>
                   <Controller
                     control={control}
                     name="description"
@@ -481,46 +483,47 @@ export default function FormImageDetail() {
                     </p>
                   )}
                 </div>
-
-                <Label className="text-xl text-black">File Media</Label>
-                <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 ">
+                <div className="space-y-2">
+                  <Label className="text-xl  ">{t("file-media")}</Label>
+                  <div className="w-full  ">
                     <Swiper
-                      onSwiper={setThumbsSwiper}
-                      slidesPerView={6}
-                      spaceBetween={8}
-                      pagination={{
-                        clickable: true,
-                      }}
-                      modules={[Pagination, Thumbs]}
-                      // className="mySwiper2"
+                      thumbs={{ swiper: thumbsSwiper }}
+                      modules={[FreeMode, Navigation, Thumbs]}
+                      navigation={false}
+                      className="w-full"
                     >
                       {detailThumb?.map((data: any) => (
                         <SwiperSlide key={data.id}>
                           <img
-                            className="object-cover h-[60px] w-[80px]"
+                            className="object-fill h-full w-full rounded-md"
                             src={data}
                             alt={` ${data.id}`}
                           />
                         </SwiperSlide>
                       ))}
                     </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>
@@ -530,7 +533,7 @@ export default function FormImageDetail() {
             <Card className=" h-[1050px]">
               <div className="px-3 py-3">
                 <div className="space-y-2">
-                  <Label>Kreator</Label>
+                  <Label>{t("creator")}</Label>
                   <Controller
                     control={control}
                     name="creatorName"
@@ -551,8 +554,8 @@ export default function FormImageDetail() {
                   )}
                 </div>
               </div>
-              <div className="mt-3 px-3">
-                <Label>Pratinjau Gambar Utama</Label>
+              <div className="mt-3 px-3 space-y-2">
+                <Label>{t("preview")}</Label>
                 <Card className="mt-2">
                   <img
                     src={detail.thumbnailLink}
@@ -563,7 +566,7 @@ export default function FormImageDetail() {
               </div>
               <div className="px-3 py-3">
                 <div className="space-y-2">
-                  <Label>Tag</Label>
+                  <Label>{t("tags")}</Label>
                   <div className="flex flex-wrap gap-2">
                     {detail?.tags
                       ?.split(",")
@@ -579,8 +582,8 @@ export default function FormImageDetail() {
                 </div>
               </div>
               <div className="px-3 py-3">
-                <div className="flex flex-col gap-6">
-                  <Label>Target Publish</Label>
+                <div className="flex flex-col gap-6 space-y-2">
+                  <Label>{t("publish-target")}</Label>
                   <div className="flex gap-2 items-center">
                     <Checkbox
                       id="5"
@@ -617,10 +620,10 @@ export default function FormImageDetail() {
               </div>
               <div className="px-3 py-3 flex flex-row items-center text-blue-500 gap-2 text-sm">
                 <MailIcon />
-                <p className="">Kotak Saran (0)</p>
+                <p className="">{t("suggestion-box")} (0)</p>
               </div>
               <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>
               </div>
               {/* {detail?.isPublish == false ? (
@@ -672,14 +675,16 @@ export default function FormImageDetail() {
                       color="primary"
                       type="button"
                     >
-                      <Icon icon="fa:check" className="mr-3" /> Setujui
+                      <Icon icon="fa:check" className="mr-3" />
+                      {t("accept")}
                     </Button>
                     <Button
                       onClick={() => actionApproval("3")}
                       className="bg-orange-400 hover:bg-orange-300"
                       type="button"
                     >
-                      <Icon icon="fa:comment-o" className="mr-3" /> Revisi
+                      <Icon icon="fa:comment-o" className="mr-3" />{" "}
+                      {t("revision")}
                     </Button>
                     <Button
                       onClick={() => actionApproval("4")}
@@ -687,7 +692,7 @@ export default function FormImageDetail() {
                       type="button"
                     >
                       <Icon icon="fa:times" className="mr-3" />
-                      Tolak
+                      {t("reject")}
                     </Button>
                   </div>
                 )
@@ -698,7 +703,7 @@ export default function FormImageDetail() {
               <Dialog open={modalOpen} onOpenChange={setModalOpen}>
                 <DialogContent size="md">
                   <DialogHeader>
-                    <DialogTitle>Berikan Komentar</DialogTitle>
+                    <DialogTitle>{t("leave-comment")}</DialogTitle>
                   </DialogHeader>
                   {status == "2"
                     ? files?.map((file, index) => (
@@ -735,7 +740,7 @@ export default function FormImageDetail() {
                                     htmlFor="terms"
                                     className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
                                   >
-                                    Semua
+                                    {t("all")}
                                   </label>
                                 </div>
                                 <div className="flex items-center space-x-2">
@@ -880,7 +885,7 @@ export default function FormImageDetail() {
                       color="primary"
                       onClick={() => submit()}
                     >
-                      Submit
+                      {t("submit")}
                     </Button>
                     <Button
                       type="button"
@@ -889,7 +894,7 @@ export default function FormImageDetail() {
                         setModalOpen(false);
                       }}
                     >
-                      Cancel
+                      {t("cancel")}
                     </Button>
                   </DialogFooter>
                 </DialogContent>
diff --git a/components/form/content/image-form.tsx b/components/form/content/image-form.tsx
index dc763551..aa70a5d4 100644
--- a/components/form/content/image-form.tsx
+++ b/components/form/content/image-form.tsx
@@ -57,6 +57,7 @@ import dynamic from "next/dynamic";
 import { getCsrfToken } from "@/service/auth";
 import { Link } from "@/i18n/routing";
 import { request } from "http";
+import { useTranslations } from "next-intl";
 
 interface FileWithPreview extends File {
   preview: string;
@@ -85,6 +86,7 @@ export default function FormImage() {
   const editor = useRef(null);
   type ImageSchema = z.infer<typeof imageSchema>;
 
+  const t = useTranslations("Form");
   const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
   const taskId = Cookies.get("taskId");
   const scheduleId = Cookies.get("scheduleId");
@@ -714,11 +716,11 @@ export default function FormImage() {
       <div className="flex flex-col lg:flex-row gap-10">
         <Card className="w-full lg:w-8/12">
           <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">
               {/* Input Title */}
               <div className="space-y-2 py-3">
-                <Label>Judul</Label>
+                <Label>{t("title")}</Label>
                 <Controller
                   control={control}
                   name="title"
@@ -738,8 +740,8 @@ export default function FormImage() {
               </div>
 
               <div className="flex items-center">
-                <div className="py-3 w-full">
-                  <Label>Kategori</Label>
+                <div className="py-3 space-y-2 w-full">
+                  <Label>{t("category")}</Label>
                   <Select
                     value={selectedCategory} // Ensure selectedTarget is updated correctly
                     onValueChange={(id) => {
@@ -763,8 +765,8 @@ export default function FormImage() {
                   </Select>
                 </div>
               </div>
-              <div className="flex flex-row items-center gap-3 py-2">
-                <Label>Bantuan AI</Label>
+              <div className="flex flex-row items-center gap-3 py-3 ">
+                <Label>{t("ai-assistance")}</Label>
                 <div className="flex items-center gap-3">
                   <Switch
                     defaultChecked={isSwitchOn}
@@ -780,7 +782,7 @@ export default function FormImage() {
                 <div>
                   <div className="flex flex-row gap-3">
                     <div className="space-y-2 py-3 w-4/12">
-                      <Label>Bahasa</Label>
+                      <Label>{t("language")}</Label>
                       <Select onValueChange={setSelectedLanguage}>
                         <SelectTrigger size="md">
                           <SelectValue placeholder="Pilih" />
@@ -792,7 +794,7 @@ export default function FormImage() {
                       </Select>
                     </div>
                     <div className="space-y-2 py-3 w-4/12">
-                      <Label>Writing Style</Label>
+                      <Label>{t("writing-style")}</Label>
                       <Select onValueChange={setSelectedWritingStyle}>
                         <SelectTrigger size="md">
                           <SelectValue placeholder="Pilih" />
@@ -811,7 +813,7 @@ export default function FormImage() {
                       </Select>
                     </div>
                     <div className="space-y-2 py-3 w-4/12">
-                      <Label>Article Size</Label>
+                      <Label>{t("article-size")}</Label>
                       <Select onValueChange={setSelectedSize}>
                         <SelectTrigger size="md">
                           <SelectValue placeholder="Pilih" />
@@ -832,7 +834,7 @@ export default function FormImage() {
                   </div>
                   <div className="mt-5">
                     <div className="flex flex-row items-center gap-3 mb-3">
-                      <Label>Main Keyword</Label>
+                      <Label>{t("main-keyword")}</Label>
                       <Button
                         variant="outline"
                         color="primary"
@@ -856,7 +858,7 @@ export default function FormImage() {
                   </div>
                   <div className="mt-5">
                     <div className="flex flex-row items-center gap-3 mb-3">
-                      <Label>Judul</Label>
+                      <Label>{t("title")}</Label>
                       <Button
                         variant="outline"
                         color="primary"
@@ -878,7 +880,7 @@ export default function FormImage() {
                   </div>
                   <div className="mt-5">
                     <div className="flex flex-row items-center gap-3 mb-3">
-                      <Label>SEO</Label>
+                      <Label>{t("seo")}</Label>
                       <Button
                         variant={"outline"}
                         color="primary"
@@ -889,15 +891,9 @@ export default function FormImage() {
                       </Button>
                     </div>
                     <p className="font-semibold">
-                      Kata kunci untuk disertakan dalam teks
-                    </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;.
+                      {t("Keywords to include in the text")}
                     </p>
+                    <p className="text-sm">{t("title-key")}</p>
                     <div className="mt-3">
                       <Textarea
                         value={selectedSEO}
@@ -907,7 +903,7 @@ export default function FormImage() {
                     </div>
                   </div>
                   <div className="mt-5">
-                    <Label>Instruksi Khusus (Optional)</Label>
+                    <Label>{t("special-instructions")}(Optional)</Label>
                     <div className="mt-3">
                       <Controller
                         control={control}
@@ -964,7 +960,7 @@ export default function FormImage() {
                               variant={"outline"}
                               color="primary"
                             >
-                              Edit
+                              {t("update")}
                             </Button>
                           </Link>
                         )}
@@ -973,8 +969,8 @@ export default function FormImage() {
                   </div>
                 </div>
               )}
-              <div className="">
-                <Label>Deskripsi</Label>
+              <div className="py-3 space-y-2">
+                <Label>{t("description")}</Label>
                 <Controller
                   control={control}
                   name="description"
@@ -997,8 +993,8 @@ export default function FormImage() {
                   </p>
                 )}
               </div>
-              <div className="py-3">
-                <Label>Pilih File</Label>
+              <div className="py-3 space-y-2">
+                <Label>{t("select-file")}</Label>
                 {/* <Input
                   id="fileInput"
                   type="file"
@@ -1011,11 +1007,10 @@ export default function FormImage() {
                       <CloudUpload className="text-default-300 w-10 h-10" />
                       <h4 className=" text-2xl font-medium mb-1 mt-3 text-card-foreground/80">
                         {/* Drop files here or click to upload. */}
-                        Tarik file disini atau klik untuk upload.
+                        {t("drag-file")}
                       </h4>
                       <div className=" text-xs text-muted-foreground">
-                        ( Upload file dengan format .jpg, .jpeg, atau .png.
-                        Ukuran maksimal 100mb.)
+                        {t("upload-file-max")}
                       </div>
                     </div>
                   </div>
@@ -1024,7 +1019,7 @@ export default function FormImage() {
                       <div>{fileList}</div>
                       <div className=" flex justify-between gap-2">
                         <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">
                             <Switch defaultChecked color="primary" id="c2" />
                           </div>
@@ -1033,7 +1028,7 @@ export default function FormImage() {
                           color="destructive"
                           onClick={handleRemoveAllFiles}
                         >
-                          Remove All
+                          {t("remove-all")}
                         </Button>
                       </div>
                     </Fragment>
@@ -1049,7 +1044,7 @@ export default function FormImage() {
           <Card className=" h-[500px]">
             <div className="px-3 py-3">
               <div className="space-y-2">
-                <Label>Kreator</Label>
+                <Label>{t("creator")}</Label>
                 <Controller
                   control={control}
                   name="creatorName"
@@ -1070,9 +1065,8 @@ export default function FormImage() {
                 )}
               </div>
             </div>
-            <div className="px-3 py-3">
-              <Label htmlFor="tags">Tags</Label>
-
+            <div className="px-3 py-3 space-y-2">
+              <Label htmlFor="tags">{t("tags")}</Label>
               <Input
                 type="text"
                 id="tags"
@@ -1099,8 +1093,8 @@ export default function FormImage() {
               </div>
             </div>
             <div className="px-3 py-3">
-              <div className="flex flex-col gap-3">
-                <Label>Target Publish</Label>
+              <div className="flex flex-col gap-3 space-y-2">
+                <Label>{t("publish-target")}</Label>
                 {options.map((option) => (
                   <div key={option.id} className="flex gap-2 items-center">
                     <Checkbox
@@ -1123,13 +1117,15 @@ export default function FormImage() {
           <div className="flex flex-row justify-end gap-3">
             <div className="mt-4">
               <Button type="submit" color="primary">
-                Submit
+                {t("submit")}
               </Button>
             </div>
             <div className="mt-4">
-              <Button type="submit" color="primary" variant="outline">
-                Cancel
-              </Button>
+              <Link href={"/contributor/content/image"}>
+                <Button type="submit" color="primary" variant="outline">
+                  {t("cancel")}
+                </Button>
+              </Link>
             </div>
           </div>
         </div>
diff --git a/components/form/content/image-update-form.tsx b/components/form/content/image-update-form.tsx
index e7577551..13be118b 100644
--- a/components/form/content/image-update-form.tsx
+++ b/components/form/content/image-update-form.tsx
@@ -47,6 +47,7 @@ import Image from "next/image";
 import { error, loading } from "@/lib/swal";
 import { getCsrfToken } from "@/service/auth";
 import { Upload } from "tus-js-client";
+import { useTranslations } from "next-intl";
 
 const imageSchema = z.object({
   title: z.string().min(1, { message: "Judul diperlukan" }),
@@ -114,7 +115,7 @@ export default function FormImageUpdate() {
   let uploadPersen = 0;
   const [isStartUpload, setIsStartUpload] = useState(false);
   const [counterProgress, setCounterProgress] = useState(0);
-
+  const t = useTranslations("Form");
   const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
   const taskId = Cookies.get("taskId");
   const scheduleId = Cookies.get("scheduleId");
@@ -628,11 +629,11 @@ export default function FormImageUpdate() {
         <div className="flex flex-col lg:flex-row gap-10">
           <Card className="w-full lg:w-8/12">
             <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">
                 {/* Input Title */}
                 <div className="space-y-2 py-3">
-                  <Label>Judul</Label>
+                  <Label>{t("title")}</Label>
                   <Controller
                     control={control}
                     name="title"
@@ -653,8 +654,8 @@ export default function FormImageUpdate() {
                   )}
                 </div>
                 <div className="flex items-center">
-                  <div className="py-3 w-full">
-                    <Label>Kategori</Label>
+                  <div className="py-3 w-full space-y-2">
+                    <Label>{t("category")}</Label>
                     <Select
                       defaultValue={detail?.category.id} // Gunakan ID sebagai defaultValue
                       onValueChange={(id) => {
@@ -679,8 +680,8 @@ export default function FormImageUpdate() {
                   </div>
                 </div>
 
-                <div className="py-3">
-                  <Label>Deskripsi</Label>
+                <div className="py-3 space-y-2">
+                  <Label>{t("description")}</Label>
                   <Controller
                     control={control}
                     name="description"
@@ -697,8 +698,8 @@ export default function FormImageUpdate() {
                     </p>
                   )}
                 </div>
-                <div className="py-3">
-                  <Label>Pilih File</Label>
+                <div className="py-3 space-y-2">
+                  <Label>{t("select-file")}</Label>
                   {/* <Input
                   id="fileInput"
                   type="file"
@@ -711,11 +712,10 @@ export default function FormImageUpdate() {
                         <CloudUpload className="text-default-300 w-10 h-10" />
                         <h4 className=" text-2xl font-medium mb-1 mt-3 text-card-foreground/80">
                           {/* Drop files here or click to upload. */}
-                          Tarik file disini atau klik untuk upload.
+                          {t("drag-file")}
                         </h4>
                         <div className=" text-xs text-muted-foreground">
-                          ( Upload file dengan format .jpg, .jpeg, atau .png.
-                          Ukuran maksimal 100mb.)
+                          {t("upload-file-max")}
                         </div>
                       </div>
                     </div>
@@ -724,7 +724,7 @@ export default function FormImageUpdate() {
                         <div>{fileList}</div>
                         <div className=" flex justify-between gap-2">
                           <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">
                               <Switch defaultChecked color="primary" id="c2" />
                             </div>
@@ -740,7 +740,10 @@ export default function FormImageUpdate() {
                     ) : null}
                     {files.length > 0 && (
                       <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">
                           {files.map((file: any) => (
                             <div
@@ -761,7 +764,7 @@ export default function FormImageUpdate() {
                                     rel="noopener noreferrer"
                                     className="text-blue-500 text-sm"
                                   >
-                                    Lihat File
+                                    {t("view-file")}
                                   </a>
                                 </div>
                                 <div>
@@ -779,7 +782,7 @@ export default function FormImageUpdate() {
                                       }
                                       className="form-checkbox"
                                     />
-                                    <span>Semua</span>
+                                    <span>{t("all")}</span>
                                   </Label>
                                 </div>
                                 <div>
@@ -851,7 +854,7 @@ export default function FormImageUpdate() {
             <Card className="h-[900px] md:h-[1100px] lg:h-[800px]">
               <div className="px-3 py-3">
                 <div className="space-y-2">
-                  <Label>Kreator</Label>
+                  <Label>{t("creator")}</Label>
                   <Controller
                     control={control}
                     name="creatorName"
@@ -872,8 +875,8 @@ export default function FormImageUpdate() {
                   )}
                 </div>
               </div>
-              <div className="mt-3 px-3">
-                <Label>Pratinjau Gambar Utama</Label>
+              <div className="mt-3 px-3 space-y-2">
+                <Label>{t("preview")}</Label>
                 <Card className="mt-2">
                   <img
                     src={detail.thumbnailLink}
@@ -884,7 +887,7 @@ export default function FormImageUpdate() {
               </div>
               <div className="px-3 py-3">
                 <div className="space-y-2">
-                  <Label>Tag</Label>
+                  <Label>{t("tags")}</Label>
                   <Input
                     type="text"
                     id="tags"
@@ -928,8 +931,8 @@ export default function FormImageUpdate() {
                 </div>
               </div>
               <div className="px-3 py-3">
-                <div className="flex flex-col gap-6">
-                  <Label>Target Publish</Label>
+                <div className="flex flex-col gap-6 space-y-2">
+                  <Label>{t("publish-target")}</Label>
                   {options.map((option: Option) => (
                     <div key={option.id} className="flex gap-2 items-center">
                       <Checkbox
@@ -949,22 +952,22 @@ export default function FormImageUpdate() {
               </div>
               <div className="px-3 py-3 flex flex-row items-center text-blue-500 gap-2 text-sm">
                 <MailIcon />
-                <p className="">Kotak Saran (0)</p>
+                <p className="">{t("suggestion-box")} (0)</p>
               </div>
               <div className="px-3 py-3">
-                <p>Keterangan:</p>
+                <p>{t("information")}:</p>
                 {/* <p>{detail?.status}</p> */}
               </div>
             </Card>
             <div className="flex flex-row justify-end gap-3">
               <div className="mt-4">
                 <Button type="submit" color="primary">
-                  Submit
+                  {t("submit")}
                 </Button>
               </div>
               <div className="mt-4">
                 <Button type="submit" color="primary" variant="outline">
-                  Cancel
+                  {t("cancel")}
                 </Button>
               </div>
             </div>
diff --git a/components/form/content/spit-convert-form.tsx b/components/form/content/spit-convert-form.tsx
index 54ea4b48..3ce17175 100644
--- a/components/form/content/spit-convert-form.tsx
+++ b/components/form/content/spit-convert-form.tsx
@@ -49,6 +49,7 @@ import { generateDataArticle, getDetailArticle } from "@/service/content/ai";
 import { getCookiesDecrypt } from "@/lib/utils";
 import dynamic from "next/dynamic";
 import { error } from "@/lib/swal";
+import { useTranslations } from "next-intl";
 
 const imageSchema = z.object({
   contentTitle: z.string().min(1, { message: "Judul diperlukan" }),
@@ -144,6 +145,7 @@ export default function FormConvertSPIT() {
   const [selectedArticleId, setSelectedArticleId] = useState<string | null>(
     null
   );
+  const t = useTranslations("Form");
   const [detailData, setDetailData] = useState<any>(null);
   const [selectedFileType, setSelectedFileType] = useState("original");
   const [isLoadingData, setIsLoadingData] = useState<boolean>(false);
@@ -616,11 +618,11 @@ export default function FormConvertSPIT() {
         <div className="flex flex-col lg:flex-row gap-10">
           <Card className="w-full lg:w-8/12">
             <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">
                 {/* Input Title */}
                 <div className="space-y-2 py-3">
-                  <Label>Judul</Label>
+                  <Label>{t("title")}</Label>
                   <Controller
                     control={control}
                     name="contentTitle"
@@ -641,8 +643,8 @@ export default function FormConvertSPIT() {
                   )}
                 </div>
                 <div className="flex items-center">
-                  <div className="py-3 w-full">
-                    <Label>Kategori</Label>
+                  <div className="py-3 w-full space-y-2">
+                    <Label>{t("category")}</Label>
                     <Select
                       defaultValue={detail?.content?.name}
                       onValueChange={(id) => {
@@ -678,8 +680,8 @@ export default function FormConvertSPIT() {
                         Select Original File
                       </Label>
                     </div>
-                    <div className="py-3 ">
-                      <Label>Deskripsi</Label>
+                    <div className="py-3 space-y-2">
+                      <Label>{t("description")}</Label>
                       <Controller
                         control={control}
                         name="contentDescription"
@@ -733,11 +735,11 @@ export default function FormConvertSPIT() {
                         <div className="flex items-center space-x-2 mt-3">
                           <RadioGroupItem value="rewrite" id="rewrite-file" />
                           <Label htmlFor="rewrite-file">
-                            Select File Hasil Rewrite
+                            Select File Rewrite
                           </Label>
                         </div>
-                        <div className="py-3 ">
-                          <Label>File hasil Rewrite</Label>
+                        <div className="py-3 space-y-2">
+                          <Label>{t("file-rewrite")}</Label>
                           <Controller
                             control={control}
                             name="contentRewriteDescription"
@@ -766,8 +768,8 @@ export default function FormConvertSPIT() {
                     )}
                   </RadioGroup>
                 </div>
-                <div>
-                  <Label className="text-xl">File Media</Label>
+                <div className="space-y-2">
+                  <Label className="text-xl">{t("file-media")}</Label>
                   <div className="w-full  ">
                     <Swiper
                       thumbs={{ swiper: thumbsSwiper }}
@@ -810,7 +812,7 @@ export default function FormConvertSPIT() {
                   </div>
                 </div>
                 <div className="mt-3">
-                  <Label className="text-xl">Penempatan file</Label>
+                  <Label className="text-xl">{t("file-placement")}</Label>
                 </div>
                 {files?.length > 1 && (
                   <div className="flex flex-wrap gap-2 mt-2 justify-center">
@@ -825,7 +827,7 @@ export default function FormConvertSPIT() {
                         htmlFor="all-content"
                         className="text-xs font-medium"
                       >
-                        All
+                        {t("all")}
                       </label>
                     </div>
                     <div className="flex items-center space-x-2">
@@ -839,7 +841,7 @@ export default function FormConvertSPIT() {
                         htmlFor="all-nasional"
                         className="text-xs font-medium"
                       >
-                        All Nasional
+                        {t("all")} Nasional
                       </label>
                     </div>
                     <div className="flex items-center space-x-2">
@@ -853,7 +855,7 @@ export default function FormConvertSPIT() {
                         htmlFor="all-wilayah"
                         className="text-xs font-medium"
                       >
-                        All Wilayah
+                        {t("all")} Wilayah
                       </label>
                     </div>
                     <div className="flex items-center space-x-2">
@@ -867,7 +869,7 @@ export default function FormConvertSPIT() {
                         htmlFor="all-international"
                         className="text-xs font-medium"
                       >
-                        All Internasional
+                        {t("all")} Internasional
                       </label>
                     </div>
                   </div>
@@ -899,7 +901,7 @@ export default function FormConvertSPIT() {
                             htmlFor="terms"
                             className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
                           >
-                            Semua
+                            {t("all")}
                           </label>
                         </div>
                         <div className="flex items-center space-x-2">
@@ -961,7 +963,7 @@ export default function FormConvertSPIT() {
             <Card className=" h-[800px]">
               <div className="px-3 py-3">
                 <div className="space-y-2">
-                  <Label>Kreator</Label>
+                  <Label>{t("creator")}</Label>
                   <Controller
                     control={control}
                     name="contentCreator"
@@ -983,7 +985,7 @@ export default function FormConvertSPIT() {
                 </div>
               </div>
               <div className="mt-3 px-3">
-                <Label>Pratinjau Gambar Utama</Label>
+                <Label>{t("preview")}</Label>
                 <Card className="mt-2">
                   <img
                     src={detail.contentThumbnail}
@@ -994,7 +996,7 @@ export default function FormConvertSPIT() {
               </div>
               <div className="px-3 py-3">
                 <div className="space-y-2">
-                  <Label>Tag</Label>
+                  <Label>{t("tags")}</Label>
                   <div className="flex flex-wrap gap-2">
                     {detail?.contentTag
                       ?.split(",")
@@ -1010,8 +1012,8 @@ export default function FormConvertSPIT() {
                 </div>
               </div>
               <div className="px-3 py-3">
-                <div className="flex flex-col gap-3">
-                  <Label>Target Publish</Label>
+                <div className="flex flex-col gap-3 space-y-2">
+                  <Label>{t("publish-target")}</Label>
                   {options.map((option) => (
                     <div key={option.id} className="flex gap-2 items-center">
                       <Checkbox
@@ -1032,17 +1034,17 @@ export default function FormConvertSPIT() {
               </div>
               <div className="px-3 py-3 flex flex-row items-center text-blue-500 gap-2 text-sm">
                 <MailIcon />
-                <p className="">Kotak Saran (0)</p>
+                <p className="">{t("suggestion-box")} (0)</p>
               </div>
               <div className="px-3 py-3">
-                <p>Keterangan:</p>
+                <p>{t("information")}:</p>
                 {/* <p>{detail?.status}</p> */}
               </div>
             </Card>
             <div className="flex flex-row justify-end gap-3">
               <div className="mt-4">
                 <Button type="submit" color="primary">
-                  Submit
+                  {t("submit")}
                 </Button>
               </div>
               <div className="mt-4">
@@ -1051,7 +1053,7 @@ export default function FormConvertSPIT() {
                   className="bg-red-500 hover:bg-red-700"
                   onClick={() => deleteSpitContent()}
                 >
-                  Delete
+                  {t("cancel")}
                 </Button>
               </div>
             </div>
diff --git a/components/form/content/teks-detail-form.tsx b/components/form/content/teks-detail-form.tsx
index 7ae5276c..9b3d367e 100644
--- a/components/form/content/teks-detail-form.tsx
+++ b/components/form/content/teks-detail-form.tsx
@@ -55,6 +55,7 @@ import { getCookiesDecrypt } from "@/lib/utils";
 import { Icon } from "@iconify/react/dist/iconify.js";
 import { error } from "@/lib/swal";
 import dynamic from "next/dynamic";
+import { useTranslations } from "next-intl";
 
 const imageSchema = z.object({
   title: z.string().min(1, { message: "Judul diperlukan" }),
@@ -133,6 +134,7 @@ export default function FormTeksDetail() {
   const [detailThumb, setDetailThumb] = useState<any>([]);
   const [thumbsSwiper, setThumbsSwiper] = useState<any>(null);
 
+  const t = useTranslations("Form");
   const [selectedTarget, setSelectedTarget] = useState("");
   const [files, setFiles] = useState<FileType[]>([]);
   const [rejectedFiles, setRejectedFiles] = useState<number[]>([]);
@@ -421,13 +423,11 @@ export default function FormTeksDetail() {
         <div className="flex flex-col lg:flex-row gap-10">
           <Card className="w-full lg:w-8/12">
             <div className="px-6 py-6">
-              <p className="text-lg font-semibold mb-3">
-                Form detail Konten Teks
-              </p>
+              <p className="text-lg font-semibold mb-3">{t("form-text")}</p>
               <div className="gap-5 mb-5">
                 {/* Input Title */}
                 <div className="space-y-2 py-3">
-                  <Label>Judul</Label>
+                  <Label>{t("title")}</Label>
                   <Controller
                     control={control}
                     name="title"
@@ -448,8 +448,8 @@ export default function FormTeksDetail() {
                   )}
                 </div>
                 <div className="flex items-center">
-                  <div className="py-3 w-full">
-                    <Label>Kategori</Label>
+                  <div className="py-3 w-full space-y-2">
+                    <Label>{t("category")}</Label>
                     <Select
                       value={detail?.category.name} // Nilai default berdasarkan detail
                       onValueChange={(id) => {
@@ -471,8 +471,8 @@ export default function FormTeksDetail() {
                   </div>
                 </div>
 
-                <div className="py-3">
-                  <Label>Deskripsi</Label>
+                <div className="py-3 space-y-2">
+                  <Label>{t("description")}</Label>
                   <Controller
                     control={control}
                     name="description"
@@ -486,81 +486,85 @@ export default function FormTeksDetail() {
                     </p>
                   )}
                 </div>
-                <Label className="text-xl text-black">File Media</Label>
-                <div className="w-full">
-                  <Swiper
-                    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 ">
+                <div className="space-y-2">
+                  <Label className="text-xl">{t("file-media")} </Label>
+                  <div className="w-full">
                     <Swiper
-                      onSwiper={setThumbsSwiper}
-                      slidesPerView={8}
-                      spaceBetween={8}
-                      pagination={{ clickable: true }}
-                      modules={[Pagination, Thumbs]}
+                      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-cover h-[60px] w-[80px]"
+                              className="object-fill h-full w-full rounded-md"
                               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">
-                              {data?.format?.replace(".", "").toUpperCase()}
-                            </div>
+                            // 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
+                        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>
@@ -570,7 +574,7 @@ export default function FormTeksDetail() {
             <Card className=" h-[800px]">
               <div className="px-3 py-3">
                 <div className="space-y-2">
-                  <Label>Kreator</Label>
+                  <Label>{t("creator")}</Label>
                   <Controller
                     control={control}
                     name="creatorName"
@@ -603,7 +607,7 @@ export default function FormTeksDetail() {
               </div> */}
               <div className="px-3 py-3">
                 <div className="space-y-2">
-                  <Label>Tag</Label>
+                  <Label>{t("tags")}</Label>
                   <div className="flex flex-wrap gap-2">
                     {detail?.tags
                       ?.split(",")
@@ -619,8 +623,8 @@ export default function FormTeksDetail() {
                 </div>
               </div>
               <div className="px-3 py-3">
-                <div className="flex flex-col gap-6">
-                  <Label>Target Publish</Label>
+                <div className="flex flex-col gap-6 space-y-2">
+                  <Label>{t("publish-target")}</Label>
                   <div className="flex gap-2 items-center">
                     <Checkbox
                       id="5"
@@ -657,10 +661,10 @@ export default function FormTeksDetail() {
               </div>
               <div className="px-3 py-3 flex flex-row items-center text-blue-500 gap-2 text-sm">
                 <MailIcon />
-                <p className="">Kotak Saran (0)</p>
+                <p className="">{t("suggestion-box")} (0)</p>
               </div>
               <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>
               </div>
               {/* {detail?.isPublish == false ? (
@@ -680,14 +684,15 @@ export default function FormTeksDetail() {
                       color="primary"
                       type="button"
                     >
-                      <Icon icon="fa:check" className="mr-3" /> Setujui
+                      <Icon icon="fa:check" className="mr-3" /> {t("accept")}
                     </Button>
                     <Button
                       onClick={() => actionApproval("3")}
                       className="bg-orange-400 hover:bg-orange-300"
                       type="button"
                     >
-                      <Icon icon="fa:comment-o" className="mr-3" /> Revisi
+                      <Icon icon="fa:comment-o" className="mr-3" />{" "}
+                      {t("revision")}
                     </Button>
                     <Button
                       onClick={() => actionApproval("4")}
@@ -695,7 +700,7 @@ export default function FormTeksDetail() {
                       type="button"
                     >
                       <Icon icon="fa:times" className="mr-3" />
-                      Tolak
+                      {t("reject")}
                     </Button>
                   </div>
                 )
@@ -706,7 +711,7 @@ export default function FormTeksDetail() {
               <Dialog open={modalOpen} onOpenChange={setModalOpen}>
                 <DialogContent size="md">
                   <DialogHeader>
-                    <DialogTitle>Berikan Komentar</DialogTitle>
+                    <DialogTitle>{t("leave-comment")}</DialogTitle>
                   </DialogHeader>
                   {status == "2"
                     ? files?.map((file, index) => (
@@ -743,7 +748,7 @@ export default function FormTeksDetail() {
                                     htmlFor="terms"
                                     className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
                                   >
-                                    Semua
+                                    {t("all")}
                                   </label>
                                 </div>
                                 <div className="flex items-center space-x-2">
@@ -888,7 +893,7 @@ export default function FormTeksDetail() {
                       color="primary"
                       onClick={() => submit()}
                     >
-                      Submit
+                      {t("submit")}
                     </Button>
                     <Button
                       type="button"
@@ -897,7 +902,7 @@ export default function FormTeksDetail() {
                         setModalOpen(false);
                       }}
                     >
-                      Cancel
+                      {t("cancel")}
                     </Button>
                   </DialogFooter>
                 </DialogContent>
diff --git a/components/form/content/teks-form.tsx b/components/form/content/teks-form.tsx
index 4cc0060a..d4b6fdbb 100644
--- a/components/form/content/teks-form.tsx
+++ b/components/form/content/teks-form.tsx
@@ -54,6 +54,7 @@ import { Item } from "@radix-ui/react-dropdown-menu";
 import dynamic from "next/dynamic";
 import { getCsrfToken } from "@/service/auth";
 import { Link } from "@/i18n/routing";
+import { useTranslations } from "next-intl";
 
 interface FileWithPreview extends File {
   preview: string;
@@ -115,7 +116,7 @@ export default function FormTeks() {
   const [articleImages, setArticleImages] = useState<string[]>([]);
   const [isSwitchOn, setIsSwitchOn] = useState<boolean>(false);
   const inputRef = useRef<HTMLInputElement>(null);
-
+  const t = useTranslations("Form");
   const [selectedTarget, setSelectedTarget] = useState("");
   const [unitSelection, setUnitSelection] = useState({
     allUnit: false,
@@ -707,11 +708,11 @@ export default function FormTeks() {
       <div className="flex flex-col lg:flex-row gap-10">
         <Card className="w-full lg:w-8/12">
           <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">
               {/* Input Title */}
               <div className="space-y-2 py-3">
-                <Label>Judul</Label>
+                <Label>{t("title")}</Label>
                 <Controller
                   control={control}
                   name="title"
@@ -731,8 +732,8 @@ export default function FormTeks() {
               </div>
 
               <div className="flex items-center">
-                <div className="py-3 w-full">
-                  <Label>Kategori</Label>
+                <div className="py-3 w-full space-y-2">
+                  <Label>{t("category")}</Label>
                   <Select
                     value={selectedCategory} // Ensure selectedTarget is updated correctly
                     onValueChange={(id) => {
@@ -757,7 +758,7 @@ export default function FormTeks() {
                 </div>
               </div>
               <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">
                   <Switch
                     defaultChecked={isSwitchOn}
@@ -773,7 +774,7 @@ export default function FormTeks() {
                 <div>
                   <div className="flex flex-row gap-3">
                     <div className="space-y-2 py-3 w-4/12">
-                      <Label>Bahasa</Label>
+                      <Label>{t("language")}</Label>
                       <Select onValueChange={setSelectedLanguage}>
                         <SelectTrigger size="md">
                           <SelectValue placeholder="Pilih" />
@@ -785,7 +786,7 @@ export default function FormTeks() {
                       </Select>
                     </div>
                     <div className="space-y-2 py-3 w-4/12">
-                      <Label>Writing Style</Label>
+                      <Label>{t("writing-style")}</Label>
                       <Select onValueChange={setSelectedWritingStyle}>
                         <SelectTrigger size="md">
                           <SelectValue placeholder="Pilih" />
@@ -804,7 +805,7 @@ export default function FormTeks() {
                       </Select>
                     </div>
                     <div className="space-y-2 py-3 w-4/12">
-                      <Label>Article Size</Label>
+                      <Label>{t("article-size")}</Label>
                       <Select onValueChange={setSelectedSize}>
                         <SelectTrigger size="md">
                           <SelectValue placeholder="Pilih" />
@@ -825,7 +826,7 @@ export default function FormTeks() {
                   </div>
                   <div className="mt-5">
                     <div className="flex flex-row items-center gap-3 mb-3">
-                      <Label>Main Keyword</Label>
+                      <Label>{t("main-keyword")}</Label>
                       <Button
                         variant="outline"
                         color="primary"
@@ -849,7 +850,7 @@ export default function FormTeks() {
                   </div>
                   <div className="mt-5">
                     <div className="flex flex-row items-center gap-3 mb-3">
-                      <Label>Judul</Label>
+                      <Label>{t("title")}</Label>
                       <Button
                         variant="outline"
                         color="primary"
@@ -871,7 +872,7 @@ export default function FormTeks() {
                   </div>
                   <div className="mt-5">
                     <div className="flex flex-row items-center gap-3 mb-3">
-                      <Label>SEO</Label>
+                      <Label>{t("seo")}</Label>
                       <Button
                         variant={"outline"}
                         color="primary"
@@ -882,15 +883,9 @@ export default function FormTeks() {
                       </Button>
                     </div>
                     <p className="font-semibold">
-                      Kata kunci untuk disertakan dalam teks
-                    </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;.
+                      {t("Keywords to include in the text")}
                     </p>
+                    <p className="text-sm">{t("title-key")}</p>
                     <div className="mt-3">
                       <Textarea
                         value={selectedSEO}
@@ -900,7 +895,7 @@ export default function FormTeks() {
                     </div>
                   </div>
                   <div className="mt-5">
-                    <Label>Instruksi Khusus (Optional)</Label>
+                    <Label>{t("special-instructions")} (Optional)</Label>
                     <div className="mt-3">
                       <Controller
                         control={control}
@@ -957,7 +952,7 @@ export default function FormTeks() {
                               variant={"outline"}
                               color="primary"
                             >
-                              Edit
+                              {t("update")}
                             </Button>
                           </Link>
                         )}
@@ -966,8 +961,8 @@ export default function FormTeks() {
                   </div>
                 </div>
               )}
-              <div className="">
-                <Label>Deskripsi</Label>
+              <div className="space-y-2">
+                <Label>{t("description")}</Label>
                 <Controller
                   control={control}
                   name="description"
@@ -990,8 +985,8 @@ export default function FormTeks() {
                   </p>
                 )}
               </div>
-              <div className="py-3">
-                <Label>Pilih File</Label>
+              <div className="py-3 space-y-2">
+                <Label>{t("select-file")}</Label>
                 {/* <Input
                   id="fileInput"
                   type="file"
@@ -1004,11 +999,10 @@ export default function FormTeks() {
                       <CloudUpload className="text-default-300 w-10 h-10" />
                       <h4 className=" text-2xl font-medium mb-1 mt-3 text-card-foreground/80">
                         {/* Drop files here or click to upload. */}
-                        Tarik file disini atau klik untuk upload.
+                        {t("drag-file")}
                       </h4>
                       <div className=" text-xs text-muted-foreground">
-                        ( Upload file dengan format .doc, .docx, .pdf, .ppt,
-                        atau .pptx Ukuran maksimal 100mb.)
+                        {t("upload-file-text-max")}
                       </div>
                     </div>
                   </div>
@@ -1017,7 +1011,7 @@ export default function FormTeks() {
                       <div>{fileList}</div>
                       <div className=" flex justify-between gap-2">
                         <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">
                             <Switch defaultChecked color="primary" id="c2" />
                           </div>
@@ -1026,7 +1020,7 @@ export default function FormTeks() {
                           color="destructive"
                           onClick={handleRemoveAllFiles}
                         >
-                          Remove All
+                          {t("remove-all")}
                         </Button>
                       </div>
                     </Fragment>
@@ -1042,7 +1036,7 @@ export default function FormTeks() {
           <Card className=" h-[500px]">
             <div className="px-3 py-3">
               <div className="space-y-2">
-                <Label>Kreator</Label>
+                <Label>{t("creator")}</Label>
                 <Controller
                   control={control}
                   name="creatorName"
@@ -1063,8 +1057,8 @@ export default function FormTeks() {
                 )}
               </div>
             </div>
-            <div className="px-3 py-3">
-              <Label htmlFor="tags">Tags</Label>
+            <div className="px-3 py-3 space-y-2">
+              <Label htmlFor="tags">{t("tags")}</Label>
 
               <Input
                 type="text"
@@ -1092,8 +1086,8 @@ export default function FormTeks() {
               </div>
             </div>
             <div className="px-3 py-3">
-              <div className="flex flex-col gap-3">
-                <Label>Target Publish</Label>
+              <div className="flex flex-col gap-3 space-y-2">
+                <Label>{t("publish-target")}</Label>
                 {options.map((option) => (
                   <div key={option.id} className="flex gap-2 items-center">
                     <Checkbox
@@ -1116,12 +1110,12 @@ export default function FormTeks() {
           <div className="flex flex-row justify-end gap-3">
             <div className="mt-4">
               <Button type="submit" color="primary">
-                Submit
+                {t("submit")}
               </Button>
             </div>
             <div className="mt-4">
               <Button type="submit" color="primary" variant="outline">
-                Cancel
+                {t("cancel")}
               </Button>
             </div>
           </div>
diff --git a/components/form/content/teks-update-form.tsx b/components/form/content/teks-update-form.tsx
index a448bb2b..c7a9f3f7 100644
--- a/components/form/content/teks-update-form.tsx
+++ b/components/form/content/teks-update-form.tsx
@@ -44,6 +44,7 @@ import Image from "next/image";
 import { error, loading } from "@/lib/swal";
 import { Upload } from "tus-js-client";
 import { getCsrfToken } from "@/service/auth";
+import { useTranslations } from "next-intl";
 
 const teksSchema = z.object({
   title: z.string().min(1, { message: "Judul diperlukan" }),
@@ -108,6 +109,7 @@ export default function FormTeksUpdate() {
   const scheduleId = Cookies.get("scheduleId");
   const scheduleType = Cookies.get("scheduleType");
 
+  const t = useTranslations("Form");
   const [categories, setCategories] = useState<Category[]>([]);
   const [selectedCategory, setSelectedCategory] = 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">
           <Card className="w-full lg:w-8/12">
             <div className="px-6 py-6">
-              <p className="text-lg font-semibold mb-3">
-                Form Update Konten Teks
-              </p>
+              <p className="text-lg font-semibold mb-3">{t("form-text")}</p>
               <div className="gap-5 mb-5">
                 {/* Input Title */}
                 <div className="space-y-2 py-3">
-                  <Label>Judul</Label>
+                  <Label>{t("title")}</Label>
                   <Controller
                     control={control}
                     name="title"
@@ -582,8 +582,8 @@ export default function FormTeksUpdate() {
                   )}
                 </div>
                 <div className="flex items-center">
-                  <div className="py-3 w-full">
-                    <Label>Kategori</Label>
+                  <div className="py-3 w-full space-y-2">
+                    <Label>{t("category")}</Label>
                     <Select
                       defaultValue={detail?.categoryId.name} // Nilai default berdasarkan detail
                       onValueChange={(id) => {
@@ -604,8 +604,8 @@ export default function FormTeksUpdate() {
                     </Select>
                   </div>
                 </div>
-                <div className="py-3">
-                  <Label>Deskripsi</Label>
+                <div className="py-3 space-y-2">
+                  <Label>{t("description")}</Label>
                   <Controller
                     control={control}
                     name="description"
@@ -624,8 +624,8 @@ export default function FormTeksUpdate() {
                     </p>
                   )}
                 </div>
-                <div className="py-3">
-                  <Label>Pilih File</Label>
+                <div className="py-3 space-y-2">
+                  <Label>{t("select-file")}</Label>
                   {/* <Input
                   id="fileInput"
                   type="file"
@@ -638,11 +638,10 @@ export default function FormTeksUpdate() {
                         <CloudUpload className="text-default-300 w-10 h-10" />
                         <h4 className=" text-2xl font-medium mb-1 mt-3 text-card-foreground/80">
                           {/* Drop files here or click to upload. */}
-                          Tarik file disini atau klik untuk upload.
+                          {t("drag-file")}
                         </h4>
                         <div className=" text-xs text-muted-foreground">
-                          ( Upload file dengan format .doc, .docx, .pdf, .ppt,
-                          atau .pptx Ukuran maksimal 100mb.)
+                          {t("upload-file-text-max")}
                         </div>
                       </div>
                     </div>
@@ -651,7 +650,7 @@ export default function FormTeksUpdate() {
                         <div>{fileList}</div>
                         <div className=" flex justify-between gap-2">
                           <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">
                               <Switch defaultChecked color="primary" id="c2" />
                             </div>
@@ -660,14 +659,17 @@ export default function FormTeksUpdate() {
                             color="destructive"
                             onClick={handleRemoveAllFiles}
                           >
-                            Remove All
+                            {t("remove-all")}
                           </Button>
                         </div>
                       </Fragment>
                     ) : null}
                     {files.length > 0 && (
-                      <div className="mt-4">
-                        <Label className="text-lg font-semibold">File</Label>
+                      <div className="mt-4 space-y-2">
+                        <Label className="text-lg font-semibold">
+                          {" "}
+                          {t("file-media")}
+                        </Label>
                         <div className="grid gap-4">
                           {files.map((file: any) => (
                             <div
@@ -688,7 +690,7 @@ export default function FormTeksUpdate() {
                                     rel="noopener noreferrer"
                                     className="text-blue-500 text-sm"
                                   >
-                                    Lihat File
+                                    {t("view-file")}
                                   </a>
                                 </div>
                                 <div>
@@ -706,7 +708,7 @@ export default function FormTeksUpdate() {
                                       }
                                       className="form-checkbox"
                                     />
-                                    <span>Semua</span>
+                                    <span>{t("all")}</span>
                                   </Label>
                                 </div>
                                 <div>
@@ -778,7 +780,7 @@ export default function FormTeksUpdate() {
             <Card className=" h-[800px]">
               <div className="px-3 py-3">
                 <div className="space-y-2">
-                  <Label>Kreator</Label>
+                  <Label>{t("creator")}</Label>
                   <Controller
                     control={control}
                     name="creatorName"
@@ -811,7 +813,7 @@ export default function FormTeksUpdate() {
               </div> */}
               <div className="px-3 py-3">
                 <div className="space-y-2">
-                  <Label>Tag</Label>
+                  <Label>{t("tags")}</Label>
                   <Input
                     type="text"
                     id="tags"
@@ -846,7 +848,7 @@ export default function FormTeksUpdate() {
               </div>
               <div className="px-3 py-3">
                 <div className="flex flex-col gap-6">
-                  <Label>Target Publish</Label>
+                  <Label>{t("publish-target")}</Label>
                   {options.map((option) => (
                     <div key={option.id} className="flex gap-2 items-center">
                       <Checkbox
@@ -867,22 +869,22 @@ export default function FormTeksUpdate() {
               </div>
               <div className="px-3 py-3 flex flex-row items-center text-blue-500 gap-2 text-sm">
                 <MailIcon />
-                <p className="">Kotak Saran (0)</p>
+                <p className="">{t("suggestion-box")} (0)</p>
               </div>
               <div className="px-3 py-3">
-                <p>Keterangan:</p>
+                <p>{t("information")}:</p>
                 {/* <p>{detail?.status}</p> */}
               </div>
             </Card>
             <div className="flex flex-row justify-end gap-3">
               <div className="mt-4">
                 <Button type="submit" color="primary">
-                  Submit
+                  {t("submit")}
                 </Button>
               </div>
               <div className="mt-4">
                 <Button type="submit" color="primary" variant="outline">
-                  Cancel
+                  {t("cancel")}
                 </Button>
               </div>
             </div>
diff --git a/components/form/content/video-detail-form.tsx b/components/form/content/video-detail-form.tsx
index d41c4350..c775801d 100644
--- a/components/form/content/video-detail-form.tsx
+++ b/components/form/content/video-detail-form.tsx
@@ -56,6 +56,7 @@ import { Icon } from "@iconify/react/dist/iconify.js";
 import { error } from "@/lib/swal";
 import dynamic from "next/dynamic";
 import { useRouter } from "@/i18n/routing";
+import { useTranslations } from "next-intl";
 
 const imageSchema = z.object({
   title: z.string().min(1, { message: "Judul diperlukan" }),
@@ -135,6 +136,7 @@ export default function FormVideoDetail() {
   const [detailVideo, setDetailVideo] = useState<any>([]);
   const [thumbsSwiper, setThumbsSwiper] = useState<any>(null);
 
+  const t = useTranslations("Form");
   const [filePlacements, setFilePlacements] = useState<string[][]>([]);
   const [selectedTarget, setSelectedTarget] = useState("");
   const [files, setFiles] = useState<FileType[]>([]);
@@ -412,13 +414,11 @@ export default function FormVideoDetail() {
         <div className="flex flex-col lg:flex-row gap-10">
           <Card className="w-full lg:w-8/12">
             <div className="px-6 py-6">
-              <p className="text-lg font-semibold mb-3">
-                Form Detail Konten Video
-              </p>
+              <p className="text-lg font-semibold mb-3">{t("form-video")}</p>
               <div className="gap-5 mb-5">
                 {/* Input Title */}
                 <div className="space-y-2 py-3">
-                  <Label>Judul</Label>
+                  <Label>{t("title")}</Label>
                   <Controller
                     control={control}
                     name="title"
@@ -439,8 +439,8 @@ export default function FormVideoDetail() {
                   )}
                 </div>
                 <div className="flex items-center">
-                  <div className="py-3 w-full">
-                    <Label>Kategori</Label>
+                  <div className="py-3 w-full space-y-2">
+                    <Label>{t("category")}</Label>
                     <Select
                       value={detail?.category.name} // Nilai default berdasarkan detail
                       onValueChange={(id) => {
@@ -462,8 +462,8 @@ export default function FormVideoDetail() {
                   </div>
                 </div>
 
-                <div className="py-3">
-                  <Label>Deskripsi</Label>
+                <div className="py-3 space-y-2">
+                  <Label>{t("description")}</Label>
                   <Controller
                     control={control}
                     name="description"
@@ -477,48 +477,49 @@ export default function FormVideoDetail() {
                     </p>
                   )}
                 </div>
-
-                <Label className="text-xl text-black">File Mediaa</Label>
-                <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 ">
+                <div className="space-y-2">
+                  <Label className="text-xl "> {t("file-media")}</Label>
+                  <div className="w-full  ">
                     <Swiper
-                      onSwiper={setThumbsSwiper}
-                      slidesPerView={6}
-                      spaceBetween={8}
-                      pagination={{
-                        clickable: true,
-                      }}
-                      modules={[Pagination, Thumbs]}
-                      // className="mySwiper2"
+                      thumbs={{ swiper: thumbsSwiper }}
+                      modules={[FreeMode, Navigation, Thumbs]}
+                      navigation={false}
+                      className="w-full"
                     >
                       {detailVideo?.map((data: any) => (
                         <SwiperSlide key={data.id}>
                           <video
-                            className="object-cover h-[60px] w-[80px]"
+                            className="object-fill h-full w-full"
                             src={data}
-                            muted
+                            controls
                             title={`Video ${data.id}`} // Mengganti alt dengan title
                           />
                         </SwiperSlide>
                       ))}
                     </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>
@@ -528,7 +529,7 @@ export default function FormVideoDetail() {
             <Card className=" h-[800px]">
               <div className="px-3 py-3">
                 <div className="space-y-2">
-                  <Label>Kreator</Label>
+                  <Label>{t("creator")}</Label>
                   <Controller
                     control={control}
                     name="creatorName"
@@ -549,8 +550,8 @@ export default function FormVideoDetail() {
                   )}
                 </div>
               </div>
-              <div className="mt-3 px-3">
-                <Label>Pratinjau Gambar Utama</Label>
+              <div className="mt-3 px-3 space-y-2">
+                <Label>{t("preview")}</Label>
                 <Card className="mt-2">
                   <img
                     src={detail.thumbnailLink}
@@ -561,7 +562,7 @@ export default function FormVideoDetail() {
               </div>
               <div className="px-3 py-3">
                 <div className="space-y-2">
-                  <Label>Tag</Label>
+                  <Label>{t("tags")}</Label>
                   <div className="flex flex-wrap gap-2">
                     {detail?.tags
                       ?.split(",")
@@ -577,8 +578,8 @@ export default function FormVideoDetail() {
                 </div>
               </div>
               <div className="px-3 py-3">
-                <div className="flex flex-col gap-6">
-                  <Label>Target Publish</Label>
+                <div className="flex flex-col gap-6 space-y-2">
+                  <Label>{t("publish-target")}</Label>
                   <div className="flex gap-2 items-center">
                     <Checkbox
                       id="5"
@@ -615,10 +616,10 @@ export default function FormVideoDetail() {
               </div>
               <div className="px-3 py-3 flex flex-row items-center text-blue-500 gap-2 text-sm">
                 <MailIcon />
-                <p className="">Kotak Saran (0)</p>
+                <p className="">{t("suggestion-box")} (0)</p>
               </div>
               <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>
               </div>
               {/* {detail?.isPublish == false ? (
@@ -638,14 +639,15 @@ export default function FormVideoDetail() {
                       color="primary"
                       type="button"
                     >
-                      <Icon icon="fa:check" className="mr-3" /> Setujui
+                      <Icon icon="fa:check" className="mr-3" /> {t("accept")}
                     </Button>
                     <Button
                       onClick={() => actionApproval("3")}
                       className="bg-orange-400 hover:bg-orange-300"
                       type="button"
                     >
-                      <Icon icon="fa:comment-o" className="mr-3" /> Revisi
+                      <Icon icon="fa:comment-o" className="mr-3" />{" "}
+                      {t("revision")}
                     </Button>
                     <Button
                       onClick={() => actionApproval("4")}
@@ -653,7 +655,7 @@ export default function FormVideoDetail() {
                       type="button"
                     >
                       <Icon icon="fa:times" className="mr-3" />
-                      Tolak
+                      {t("reject")}
                     </Button>
                   </div>
                 )
@@ -664,7 +666,7 @@ export default function FormVideoDetail() {
               <Dialog open={modalOpen} onOpenChange={setModalOpen}>
                 <DialogContent size="md">
                   <DialogHeader>
-                    <DialogTitle>Berikan Komentar</DialogTitle>
+                    <DialogTitle>{t("leave-comment")}</DialogTitle>
                   </DialogHeader>
                   {status == "2"
                     ? files?.map((file, index) => (
@@ -701,7 +703,7 @@ export default function FormVideoDetail() {
                                     htmlFor="terms"
                                     className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
                                   >
-                                    Semua
+                                    {t("all")}
                                   </label>
                                 </div>
                                 <div className="flex items-center space-x-2">
@@ -846,14 +848,14 @@ export default function FormVideoDetail() {
                       color="primary"
                       onClick={() => submit()}
                     >
-                      Submit
+                      {t("submit")}
                     </Button>
                     <Button
                       type="button"
                       color="destructive"
                       onClick={() => setModalOpen(false)}
                     >
-                      Cancel
+                      {t("cancel")}
                     </Button>
                   </DialogFooter>
                 </DialogContent>
diff --git a/components/form/content/video-form.tsx b/components/form/content/video-form.tsx
index de5a15f5..f27460ee 100644
--- a/components/form/content/video-form.tsx
+++ b/components/form/content/video-form.tsx
@@ -54,6 +54,7 @@ import { Item } from "@radix-ui/react-dropdown-menu";
 import dynamic from "next/dynamic";
 import { getCsrfToken } from "@/service/auth";
 import { Link } from "@/i18n/routing";
+import { useTranslations } from "next-intl";
 
 const CustomEditor = dynamic(
   () => {
@@ -88,6 +89,7 @@ export default function FormVideo() {
   const scheduleType = Cookies.get("scheduleType");
   const roleId = getCookiesDecrypt("urie");
 
+  const t = useTranslations("Form");
   const [categories, setCategories] = useState<Category[]>([]);
   const [selectedCategory, setSelectedCategory] = 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">
         <Card className="w-full lg:w-8/12">
           <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="space-y-2 py-3">
-                <Label>Judul</Label>
+                <Label>{t("title")}</Label>
                 <Controller
                   control={control}
                   name="title"
@@ -729,8 +731,8 @@ export default function FormVideo() {
               </div>
 
               <div className="flex items-center">
-                <div className="py-3 w-full">
-                  <Label>Kategori</Label>
+                <div className="py-3 w-full space-y-2">
+                  <Label>{t("category")}</Label>
                   <Select
                     value={selectedCategory} // Ensure selectedTarget is updated correctly
                     onValueChange={(id) => {
@@ -755,7 +757,7 @@ export default function FormVideo() {
                 </div>
               </div>
               <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">
                   <Switch
                     defaultChecked={isSwitchOn}
@@ -771,7 +773,7 @@ export default function FormVideo() {
                 <div>
                   <div className="flex flex-row gap-3">
                     <div className="space-y-2 py-3 w-4/12">
-                      <Label>Bahasa</Label>
+                      <Label>{t("language")}</Label>
                       <Select onValueChange={setSelectedLanguage}>
                         <SelectTrigger size="md">
                           <SelectValue placeholder="Pilih" />
@@ -783,7 +785,7 @@ export default function FormVideo() {
                       </Select>
                     </div>
                     <div className="space-y-2 py-3 w-4/12">
-                      <Label>Writing Style</Label>
+                      <Label>{t("writing-style")}</Label>
                       <Select onValueChange={setSelectedWritingStyle}>
                         <SelectTrigger size="md">
                           <SelectValue placeholder="Pilih" />
@@ -802,7 +804,7 @@ export default function FormVideo() {
                       </Select>
                     </div>
                     <div className="space-y-2 py-3 w-4/12">
-                      <Label>Article Size</Label>
+                      <Label>{t("article-size")}</Label>
                       <Select onValueChange={setSelectedSize}>
                         <SelectTrigger size="md">
                           <SelectValue placeholder="Pilih" />
@@ -823,7 +825,7 @@ export default function FormVideo() {
                   </div>
                   <div className="mt-5">
                     <div className="flex flex-row items-center gap-3 mb-3">
-                      <Label>Main Keyword</Label>
+                      <Label>{t("main-keyword")}</Label>
                       <Button
                         variant="outline"
                         color="primary"
@@ -847,7 +849,7 @@ export default function FormVideo() {
                   </div>
                   <div className="mt-5">
                     <div className="flex flex-row items-center gap-3 mb-3">
-                      <Label>Judul</Label>
+                      <Label>{t("title")}</Label>
                       <Button
                         variant="outline"
                         color="primary"
@@ -869,7 +871,7 @@ export default function FormVideo() {
                   </div>
                   <div className="mt-5">
                     <div className="flex flex-row items-center gap-3 mb-3">
-                      <Label>SEO</Label>
+                      <Label>{t("seo")}</Label>
                       <Button
                         variant={"outline"}
                         color="primary"
@@ -880,15 +882,9 @@ export default function FormVideo() {
                       </Button>
                     </div>
                     <p className="font-semibold">
-                      Kata kunci untuk disertakan dalam teks
-                    </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;.
+                      {t("Keywords to include in the text")}
                     </p>
+                    <p className="text-sm">{t("title-key")}</p>
                     <div className="mt-3">
                       <Textarea
                         value={selectedSEO}
@@ -898,7 +894,7 @@ export default function FormVideo() {
                     </div>
                   </div>
                   <div className="mt-5">
-                    <Label>Instruksi Khusus (Optional)</Label>
+                    <Label>{t("special-instructions")} (Optional)</Label>
                     <div className="mt-3">
                       <Controller
                         control={control}
@@ -955,7 +951,7 @@ export default function FormVideo() {
                               variant={"outline"}
                               color="primary"
                             >
-                              Edit
+                              {t("update")}
                             </Button>
                           </Link>
                         )}
@@ -964,8 +960,8 @@ export default function FormVideo() {
                   </div>
                 </div>
               )}
-              <div className="">
-                <Label>Deskripsi</Label>
+              <div className="space-y-2">
+                <Label>{t("description")}</Label>
                 <Controller
                   control={control}
                   name="description"
@@ -988,8 +984,8 @@ export default function FormVideo() {
                   </p>
                 )}
               </div>
-              <div className="py-3">
-                <Label>Pilih File</Label>
+              <div className="py-3 space-y-2">
+                <Label>{t("select-file")}</Label>
                 {/* <Input
                   id="fileInput"
                   type="file"
@@ -1002,11 +998,10 @@ export default function FormVideo() {
                       <CloudUpload className="text-default-300 w-10 h-10" />
                       <h4 className=" text-2xl font-medium mb-1 mt-3 text-card-foreground/80">
                         {/* Drop files here or click to upload. */}
-                        Tarik file disini atau klik untuk upload.
+                        {t("drag-file")}
                       </h4>
                       <div className=" text-xs text-muted-foreground">
-                        ( Upload file dengan mp4 atau mov Ukuran maksimal
-                        100mb.)
+                        {t("upload-file-video-max")}
                       </div>
                     </div>
                   </div>
@@ -1015,7 +1010,7 @@ export default function FormVideo() {
                       <div>{fileList}</div>
                       <div className=" flex justify-between gap-2">
                         <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">
                             <Switch defaultChecked color="primary" id="c2" />
                           </div>
@@ -1024,7 +1019,7 @@ export default function FormVideo() {
                           color="destructive"
                           onClick={handleRemoveAllFiles}
                         >
-                          Remove All
+                          {t("remove-all")}
                         </Button>
                       </div>
                     </Fragment>
@@ -1040,7 +1035,7 @@ export default function FormVideo() {
           <Card className=" h-[800px]">
             <div className="px-3 py-3">
               <div className="space-y-2">
-                <Label>Kreator</Label>
+                <Label>{t("creator")}</Label>
                 <Controller
                   control={control}
                   name="creatorName"
@@ -1074,8 +1069,8 @@ export default function FormVideo() {
                 />
               </div>
             )}
-            <div className="px-3 py-3">
-              <Label htmlFor="tags">Tags</Label>
+            <div className="px-3 py-3 space-y-2">
+              <Label htmlFor="tags">{t("tags")}</Label>
 
               <Input
                 type="text"
@@ -1103,8 +1098,8 @@ export default function FormVideo() {
               </div>
             </div>
             <div className="px-3 py-3">
-              <div className="flex flex-col gap-3">
-                <Label>Target Publish</Label>
+              <div className="flex flex-col gap-3 space-y-2">
+                <Label>{t("publish-target")}</Label>
                 {options.map((option) => (
                   <div key={option.id} className="flex gap-2 items-center">
                     <Checkbox
@@ -1127,12 +1122,12 @@ export default function FormVideo() {
           <div className="flex flex-row justify-end gap-3">
             <div className="mt-4">
               <Button type="submit" color="primary">
-                Submit
+                {t("submit")}
               </Button>
             </div>
             <div className="mt-4">
               <Button type="submit" color="primary" variant="outline">
-                Cancel
+                {t("cancel")}
               </Button>
             </div>
           </div>
diff --git a/components/form/content/video-update-form.tsx b/components/form/content/video-update-form.tsx
index 43f24e2c..b91569b3 100644
--- a/components/form/content/video-update-form.tsx
+++ b/components/form/content/video-update-form.tsx
@@ -55,6 +55,7 @@ import { Icon } from "@iconify/react/dist/iconify.js";
 import { Upload } from "tus-js-client";
 import { getCsrfToken } from "@/service/auth";
 import { error, loading } from "@/lib/swal";
+import { useTranslations } from "next-intl";
 
 const videoSchema = z.object({
   title: z.string().min(1, { message: "Judul diperlukan" }),
@@ -110,6 +111,7 @@ export default function FormVideoUpdate() {
   const [isStartUpload, setIsStartUpload] = useState(false);
   const [counterProgress, setCounterProgress] = useState(0);
 
+  const t = useTranslations("Form");
   const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
   const taskId = Cookies.get("taskId");
   const scheduleId = Cookies.get("scheduleId");
@@ -609,13 +611,11 @@ export default function FormVideoUpdate() {
         <div className="flex flex-col lg:flex-row gap-10">
           <Card className="w-full lg:w-8/12">
             <div className="px-6 py-6">
-              <p className="text-lg font-semibold mb-3">
-                Form Update Konten Video
-              </p>
+              <p className="text-lg font-semibold mb-3">{t("form-video")}</p>
               <div className="gap-5 mb-5">
                 {/* Input Title */}
                 <div className="space-y-2 py-3">
-                  <Label>Judul</Label>
+                  <Label>{t("title")}</Label>
                   <Controller
                     control={control}
                     name="title"
@@ -636,8 +636,8 @@ export default function FormVideoUpdate() {
                   )}
                 </div>
                 <div className="flex items-center">
-                  <div className="py-3 w-full">
-                    <Label>Kategori</Label>
+                  <div className="py-3 w-full space-y-2">
+                    <Label>{t("category")}</Label>
                     <Select
                       defaultValue={detail?.categoryId.name} // Nilai default berdasarkan detail
                       onValueChange={(id) => {
@@ -659,8 +659,8 @@ export default function FormVideoUpdate() {
                   </div>
                 </div>
 
-                <div className="py-3">
-                  <Label>Deskripsi</Label>
+                <div className="py-3 space-y-2">
+                  <Label>{t("description")}</Label>
                   <Controller
                     control={control}
                     name="description"
@@ -679,8 +679,8 @@ export default function FormVideoUpdate() {
                     </p>
                   )}
                 </div>
-                <div className="py-3">
-                  <Label>Pilih File</Label>
+                <div className="py-3 space-y-2">
+                  <Label>{t("select-file")}</Label>
                   {/* <Input
                   id="fileInput"
                   type="file"
@@ -693,11 +693,10 @@ export default function FormVideoUpdate() {
                         <CloudUpload className="text-default-300 w-10 h-10" />
                         <h4 className=" text-2xl font-medium mb-1 mt-3 text-card-foreground/80">
                           {/* Drop files here or click to upload. */}
-                          Tarik file disini atau klik untuk upload.
+                          {t("drag-file")}
                         </h4>
                         <div className=" text-xs text-muted-foreground">
-                          ( Upload file dengan format .jpg, .jpeg, atau .png.
-                          Ukuran maksimal 100mb.)
+                          {t("upload-file-video-max")}
                         </div>
                       </div>
                     </div>
@@ -706,7 +705,7 @@ export default function FormVideoUpdate() {
                         <div>{fileList}</div>
                         <div className=" flex justify-between gap-2">
                           <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">
                               <Switch defaultChecked color="primary" id="c2" />
                             </div>
@@ -721,8 +720,11 @@ export default function FormVideoUpdate() {
                       </Fragment>
                     ) : null}
                     {files.length > 0 && (
-                      <div className="mt-4">
-                        <Label className="text-lg font-semibold">File</Label>
+                      <div className="mt-4 space-y-2">
+                        <Label className="text-lg font-semibold">
+                          {" "}
+                          {t("file-media")}
+                        </Label>
                         <div className="grid gap-4">
                           {files.map((file: any) => (
                             <div
@@ -743,7 +745,7 @@ export default function FormVideoUpdate() {
                                     rel="noopener noreferrer"
                                     className="text-blue-500 text-sm"
                                   >
-                                    Lihat File
+                                    {t("view-file")}
                                   </a>
                                 </div>
                                 <div>
@@ -761,7 +763,7 @@ export default function FormVideoUpdate() {
                                       }
                                       className="form-checkbox"
                                     />
-                                    <span>Semua</span>
+                                    <span>{t("all")}</span>
                                   </Label>
                                 </div>
                                 <div>
@@ -833,7 +835,7 @@ export default function FormVideoUpdate() {
             <Card className=" h-[800px]">
               <div className="px-3 py-3">
                 <div className="space-y-2">
-                  <Label>Kreator</Label>
+                  <Label>{t("creator")}</Label>
                   <Controller
                     control={control}
                     name="creatorName"
@@ -854,8 +856,8 @@ export default function FormVideoUpdate() {
                   )}
                 </div>
               </div>
-              <div className="mt-3 px-3">
-                <Label>Pratinjau Gambar Utama</Label>
+              <div className="mt-3 px-3 space-y-2">
+                <Label>{t("preview")}</Label>
                 <Card className="mt-2">
                   <img
                     src={detail.thumbnailLink}
@@ -866,7 +868,7 @@ export default function FormVideoUpdate() {
               </div>
               <div className="px-3 py-3">
                 <div className="space-y-2">
-                  <Label>Tag</Label>
+                  <Label>{t("tags")}</Label>
                   <Input
                     type="text"
                     id="tags"
@@ -900,8 +902,8 @@ export default function FormVideoUpdate() {
                 </div>
               </div>
               <div className="px-3 py-3">
-                <div className="flex flex-col gap-6">
-                  <Label>Target Publish</Label>
+                <div className="flex flex-col gap-6 space-y-2">
+                  <Label>{t("publish-target")}</Label>
                   {options.map((option: Option) => (
                     <div key={option.id} className="flex gap-2 items-center">
                       <Checkbox
@@ -921,22 +923,22 @@ export default function FormVideoUpdate() {
               </div>
               <div className="px-3 py-3 flex flex-row items-center text-blue-500 gap-2 text-sm">
                 <MailIcon />
-                <p className="">Kotak Saran (0)</p>
+                <p className="">{t("suggestion-box")} (0)</p>
               </div>
               <div className="px-3 py-3">
-                <p>Keterangan:</p>
+                <p>{t("information")}:</p>
                 {/* <p>{detail?.status}</p> */}
               </div>
             </Card>
             <div className="flex flex-row justify-end gap-3">
               <div className="mt-4">
                 <Button type="submit" color="primary">
-                  Submit
+                  {t("submit")}
                 </Button>
               </div>
               <div className="mt-4">
                 <Button type="submit" color="primary" variant="outline">
-                  Cancel
+                  {t("cancel")}
                 </Button>
               </div>
             </div>
diff --git a/components/form/planning/mediahub-publish.tsx b/components/form/planning/mediahub-publish.tsx
index 063e59a7..e7e0675e 100644
--- a/components/form/planning/mediahub-publish.tsx
+++ b/components/form/planning/mediahub-publish.tsx
@@ -37,6 +37,7 @@ import {
 } from "@/components/ui/dialog";
 import { AlertDialogHeader } from "@/components/ui/alert-dialog";
 import { Description } from "@radix-ui/react-toast";
+import { useTranslations } from "next-intl";
 
 const taskSchema = z.object({
   title: z.string().min(1, { message: "Judul diperlukan" }),
@@ -75,6 +76,7 @@ export default function PublishMediahub() {
     image: false,
     text: false,
   });
+  const t = useTranslations("Form");
   const [mainType, setMainType] = useState<number>(1);
   const [taskType, setTaskType] = useState<string>("atensi-khusus");
   const [broadcastType, setBroadcastType] = useState<string>("all"); // untuk Tipe Penugasan
@@ -304,13 +306,13 @@ export default function PublishMediahub() {
   return (
     <Card>
       <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 ? (
           <form onSubmit={handleSubmit(onSubmit)}>
             <div className="gap-5 mb-5">
               {/* Input Title */}
               <div className="space-y-2">
-                <Label>Judul</Label>
+                <Label>{t("title")}</Label>
                 <Controller
                   control={control}
                   name="title"
@@ -328,8 +330,8 @@ export default function PublishMediahub() {
                   <p className="text-red-400 text-sm">{errors.title.message}</p>
                 )}
               </div>
-              <div className="mt-6">
-                <Label>Output Tugas</Label>
+              <div className="mt-6 space-y-2">
+                <Label>{t("output-tugas")}</Label>
                 <div className="flex flex-wrap gap-3 mt-1">
                   {Object.keys(taskOutput).map((key) => (
                     <div className="flex items-center gap-2" key={key}>
@@ -347,8 +349,8 @@ export default function PublishMediahub() {
                   ))}
                 </div>
               </div>
-              <div className="mt-6">
-                <Label>Pelaksana Tugas</Label>
+              <div className="mt-6 space-y-2">
+                <Label>{t("executive-task")}</Label>
               </div>
               <div className="flex flex-row items-center gap-3">
                 <div className="">
@@ -451,8 +453,8 @@ export default function PublishMediahub() {
                   </DialogContent>
                 </Dialog>
               </div>
-              <div className="mt-6">
-                <Label>Jenis Penugasan</Label>
+              <div className="mt-6 space-y-2">
+                <Label>{t("assignment-type")}</Label>
                 <RadioGroup
                   value={detail?.assignmentType?.id.toString()}
                   onValueChange={(value) => setType(value)}
@@ -473,8 +475,8 @@ export default function PublishMediahub() {
                 </RadioGroup>
               </div>
               <div className="mt-6">
-                <div className="flex flex-col">
-                  <Label>Date</Label>
+                <div className="flex flex-col space-y-2">
+                  <Label>{t("date")}</Label>
                   <div>
                     <Button
                       defaultValue={detail?.date}
@@ -495,8 +497,8 @@ export default function PublishMediahub() {
                   </div>
                 </div>
               </div>
-              <div className="mt-6">
-                <Label>Narasi Penugasan</Label>
+              <div className="mt-6 space-y-2">
+                <Label>{t("description-task")}</Label>
                 <Controller
                   control={control}
                   name="description"
@@ -520,7 +522,7 @@ export default function PublishMediahub() {
             {/* Submit Button */}
             <div className="mt-4">
               <Button type="submit" color="primary">
-                Submit
+                {t("submit")}
               </Button>
             </div>
           </form>
diff --git a/components/form/planning/medsos-publish.tsx b/components/form/planning/medsos-publish.tsx
index 0af3adf1..84bcfa31 100644
--- a/components/form/planning/medsos-publish.tsx
+++ b/components/form/planning/medsos-publish.tsx
@@ -33,6 +33,7 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog";
+import { useTranslations } from "next-intl";
 
 const taskSchema = z.object({
   title: z.string().min(1, { message: "Judul diperlukan" }),
@@ -69,6 +70,7 @@ export default function PublishMedsos() {
     image: false,
     text: false,
   });
+  const t = useTranslations("Form");
   const [mainType, setMainType] = useState<number>(1);
   const [taskType, setTaskType] = useState<string>("atensi-khusus");
   const [broadcastType, setBroadcastType] = useState<string>("all"); // untuk Tipe Penugasan
@@ -297,13 +299,13 @@ export default function PublishMedsos() {
   return (
     <Card>
       <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 ? (
           <form onSubmit={handleSubmit(onSubmit)}>
             <div className="gap-5 mb-5">
               {/* Input Title */}
               <div className="space-y-2">
-                <Label>Judul</Label>
+                <Label>{t("title")}</Label>
                 <Controller
                   control={control}
                   name="title"
@@ -322,7 +324,7 @@ export default function PublishMedsos() {
                 )}
               </div>
               <div className="mt-6">
-                <Label>Output Tugas</Label>
+                <Label>{t("output-tugas")}</Label>
                 <div className="flex flex-wrap gap-3 mt-1">
                   {Object.keys(taskOutput).map((key) => (
                     <div className="flex items-center gap-2" key={key}>
@@ -340,8 +342,8 @@ export default function PublishMedsos() {
                   ))}
                 </div>
               </div>
-              <div className="mt-6">
-                <Label>Pelaksana Tugas</Label>
+              <div className="mt-6 space-y-2">
+                <Label>{t("executive-task")}</Label>
               </div>
               <div className="flex flex-row items-center gap-3">
                 <div>
@@ -444,8 +446,8 @@ export default function PublishMedsos() {
                   </DialogContent>
                 </Dialog>
               </div>
-              <div className="mt-6">
-                <Label>Jenis Penugasan</Label>
+              <div className="mt-6  space-y-2">
+                <Label>{t("assignment-type")}</Label>
                 <RadioGroup
                   value={detail.assignmentType.id.toString()} // State yang dipetakan ke value RadioGroup
                   onValueChange={(value) => setType(value)} // Mengubah nilai state ketika pilihan berubah
@@ -465,9 +467,9 @@ export default function PublishMedsos() {
                   </div>
                 </RadioGroup>
               </div>
-              <div className="mt-6">
+              <div className="mt-6  space-y-2">
                 <div className="flex flex-col">
-                  <Label>Date</Label>
+                  <Label>{t("date")}</Label>
                   <div>
                     <Button
                       value={detail.date}
@@ -488,8 +490,8 @@ export default function PublishMedsos() {
                   </div>
                 </div>
               </div>
-              <div className="mt-6">
-                <Label>Narasi Penugasan</Label>
+              <div className="mt-6  space-y-2">
+                <Label>{t("description-task")}</Label>
                 <Controller
                   control={control}
                   name="description"
@@ -513,7 +515,7 @@ export default function PublishMedsos() {
             {/* Submit Button */}
             <div className="mt-4">
               <Button type="submit" color="primary">
-                Submit
+                {t("submit")}
               </Button>
             </div>
           </form>
diff --git a/messages/en.json b/messages/en.json
index 8f5f769b..fdb3088c 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -641,5 +641,81 @@
     "target-output": "Target Output",
     "target-participant": "Target Participant",
     "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"
   }
 }
diff --git a/messages/in.json b/messages/in.json
index 8cc09c09..5d771382 100644
--- a/messages/in.json
+++ b/messages/in.json
@@ -43,10 +43,10 @@
     "date": "Tanggal",
     "active": "Aktif",
     "done": "Selesai",
-    "image": "Image",
+    "image": "Foto",
     "video": "Video",
     "audio": "Audio",
-    "text": "Text"
+    "text": "Teks"
   },
   "BankingDashboard": {
     "widget_title": "Good evening",
@@ -642,5 +642,80 @@
     "target-output": "Target Output",
     "target-participant": "Target Peserta",
     "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"
   }
 }