pull

app/[locale]/(protected)/contributor/agenda-setting/calender-view.tsx

@@ -254,7 +254,7 @@ const CalendarView = ({ categories }: CalendarViewProps) => {
           isPublish: item.isPublish,
           start: new Date(item.startDate),
           end: new Date(item.endDate),
-          allDay: true, // Sesuaikan jika memang ada event sepanjang hari
+          allDay: true,
           extendedProps: {
             calendar: item.agendaType,
             description: item.description,
@@ -481,7 +481,7 @@ const CalendarView = ({ categories }: CalendarViewProps) => {
         <div className="px-2">
           {events?.length === 0 ? (
             <div className="mt-1 py-2 rounded-lg bg-white border border-black">
-              <p className="text-center">Belum ada data</p>
+              <p className="text-center">{t("no-data-yet")}</p>
             </div>
           ) : (
             <>
@@ -581,7 +581,7 @@ const CalendarView = ({ categories }: CalendarViewProps) => {
                   className="dark:bg-background dark:text-foreground"
                 >
                   <Plus className="w-4 h-4 me-1" />
-                  {"Tambahkan Agenda baru"}
+                  {t("addEvent")}
                 </Button>
               ) : (
                 ""
@@ -590,15 +590,15 @@ const CalendarView = ({ categories }: CalendarViewProps) => {
                 <Dialog open={open} onOpenChange={setOpen}>
                   <DialogTrigger asChild>
                     {roleId == 2 ? (
-                      <Button className="dark:bg-background dark:text-foreground ml-2">
+                      <Button className="dark:bg-background dark:text-foreground ">
-                        <Book className="w-4 h-4 me-1" />
+                        <Book className="w-4 h-4" />
-                        Hasil Pantauan BAG PA
+                        {t("bag-pa-monitoring-results")}
                       </Button>
                     ) : null}
                   </DialogTrigger>
                   <DialogContent className="sm:max-w-[425px] md:max-w-[500px] lg:max-w-[1500px] overflow-y-auto max-h-[500px]">
                     <DialogHeader>
-                      <DialogTitle>Hasil Pantauan</DialogTitle>
+                      <DialogTitle>{t("monitoring-results")}</DialogTitle>
                     </DialogHeader>
                     {getModalContent("terkirim")}
                   </DialogContent>
@@ -714,7 +714,6 @@ const CalendarView = ({ categories }: CalendarViewProps) => {
                   ))}
                 </div>
 
-                {/* Second Row */}
                 <div className="flex gap-1 mt-1">
                   {months.slice(3, 6).map((month) => (
                     <MonthCard
@@ -725,7 +724,6 @@ const CalendarView = ({ categories }: CalendarViewProps) => {
                   ))}
                 </div>
 
-                {/* Third Row */}
                 <div className="flex gap-1 mt-1">
                   {months.slice(6, 9).map((month) => (
                     <MonthCard
@@ -736,7 +734,6 @@ const CalendarView = ({ categories }: CalendarViewProps) => {
                   ))}
                 </div>
 
-                {/* Fourth Row */}
                 <div className="flex gap-1 mt-1">
                   {months.slice(9, 12).map((month) => (
                     <MonthCard

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

@@ -322,7 +322,7 @@ const EventModal = ({
       return false;
     }
 
-    const id = response?.data?.data.id;
+    const id = response?.data?.data?.id;
 
     loading();
     if (imageFiles?.length === 0) {
@@ -396,7 +396,9 @@ const EventModal = ({
       setStartDate(event?.event?.start);
       setEndDate(event?.event?.end);
       const eventCalendar = event?.event?.extendedProps?.calendar;
-      setAgendaType(eventCalendar || categories?.length > 0 && categories[0].value);
+      setAgendaType(
+        eventCalendar || (categories?.length > 0 && categories[0].value)
+      );
     }
     setValue("title", event?.event?.title || "");
     setValue("description", event?.event?.description || "");

app/[locale]/(protected)/contributor/blog/components/blog-table.tsx

@@ -25,7 +25,7 @@ import {
   TableRow,
 } from "@/components/ui/table";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-import { ChevronDown, Search } from "lucide-react";
+import { ChevronDown, Plus, Search } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { Input } from "@/components/ui/input";
 import { InputGroup, InputGroupText } from "@/components/ui/input-group";
@@ -42,11 +42,14 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { Label } from "@/components/ui/label";
 import { listEnableCategory } from "@/service/content/content";
+import { useTranslations } from "next-intl";
+import { CardHeader, CardTitle } from "@/components/ui/card";
+import { Link } from "@/i18n/routing";
 
 const BlogTable = () => {
   const router = useRouter();
   const searchParams = useSearchParams();
-
+  const t = useTranslations("Blog");
   const [dataTable, setDataTable] = React.useState<any[]>([]);
   const [totalData, setTotalData] = React.useState<number>(1);
   const [sorting, setSorting] = React.useState<SortingState>([]);
@@ -169,16 +172,35 @@ const BlogTable = () => {
   };
 
   return (
-    <div className="w-full overflow-x-auto">
-      <div className="flex justify-between items-center px-5">
     <div>
+      <CardHeader className="border-b border-solid border-default-200 mb-6">
+        <CardTitle>
+          <div className="flex items-center">
+            <div className="flex-1 text-xl font-medium text-default-900">
+              {t("table")} {t("blog")}
+            </div>
+            <div className="flex-none">
+              <Link href={"/contributor/blog/create"}>
+                <Button fullWidth color="primary">
+                  <Plus className="w-6 h-6 me-1.5" />
+                  {t("create-indeks")}
+                </Button>
+              </Link>
+            </div>
+          </div>
+        </CardTitle>
+      </CardHeader>
+
+      <div className="w-full overflow-x-auto">
+        <div className="flex flex-col md:flex-row lg:flex-row md:justify-between lg:justify-between items-center md:px-5 lg:px-5">
+          <div className="w-full md:w-[200px] lg:w-[200px] px-2">
             <InputGroup merged>
               <InputGroupText className="bg-transparent dark:border-secondary dark:group-focus-within:border-secondary">
                 <Search className=" h-4 w-4 dark:text-white" />
               </InputGroupText>
               <Input
                 type="text"
-              placeholder="Search Judul..."
+                placeholder="Search Title"
                 className="bg-transparent  dark:border-secondary dark:placeholder-white/80 dark:focus:border-secondary dark:text-white"
                 value={search}
                 onChange={handleSearch}
@@ -199,14 +221,8 @@ const BlogTable = () => {
                 >
                   <div className="flex flex-row justify-between my-1 mx-1">
                     <p>Filter</p>
-                  {/* <p
-                    className="text-blue-600 cursor-pointer"
-                    onClick={fetchData}
-                  >
-                    Simpan
-                  </p> */}
                   </div>
-                <Label className="ml-2">Kategori</Label>
+                  <Label className="ml-2">{t("category")}</Label>
                   {categories.length > 0 ? (
                     categories.map((category) => (
                       <div
@@ -342,14 +358,20 @@ const BlogTable = () => {
                 >
                   {row.getVisibleCells().map((cell) => (
                     <TableCell key={cell.id}>
-                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext()
+                      )}
                     </TableCell>
                   ))}
                 </TableRow>
               ))
             ) : (
               <TableRow>
-              <TableCell colSpan={columns.length} className="h-24 text-center">
+                <TableCell
+                  colSpan={columns.length}
+                  className="h-24 text-center"
+                >
                   No results.
                 </TableCell>
               </TableRow>
@@ -362,6 +384,7 @@ const BlogTable = () => {
           totalPage={totalPage}
         />
       </div>
+    </div>
   );
 };
 

app/[locale]/(protected)/contributor/blog/page.tsx

@@ -11,23 +11,6 @@ const BlogPage = async () => {
       <SiteBreadcrumb />
       <div className="space-y-4">
         <Card>
-          <CardHeader className="border-b border-solid border-default-200 mb-6">
-            <CardTitle>
-              <div className="flex items-center">
-                <div className="flex-1 text-xl font-medium text-default-900">
-                  Tabel Indeks
-                </div>
-                <div className="flex-none">
-                  <Link href={"/contributor/blog/create"}>
-                    <Button fullWidth color="primary">
-                      <Plus className="w-6 h-6 me-1.5" />
-                      Add Index
-                    </Button>
-                  </Link>
-                </div>
-              </div>
-            </CardTitle>
-          </CardHeader>
           <CardContent className="p-0">
             <BlogTable />
           </CardContent>

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

@@ -230,8 +230,8 @@ const TableAudio = () => {
 
   return (
     <div className="w-full overflow-x-auto">
-      <div className="flex justify-between items-center px-5">
+      <div className="flex flex-col md:flex-row lg:flex-row md:justify-between lg:justify-between items-center md:px-5 lg:px-5">
-        <div>
+        <div className="w-full md:w-[200px] lg:w-[200px] px-2">
           <InputGroup merged>
             <InputGroupText className="bg-transparent dark:border-secondary dark:group-focus-within:border-secondary">
               <Search className=" h-4 w-4 dark:text-white" />

app/[locale]/(protected)/contributor/content/audio/page.tsx

@@ -6,8 +6,10 @@ import { Button } from "@/components/ui/button";
 import { Icon } from "@iconify/react/dist/iconify.js";
 import TableAudio from "./components/table-audio";
 import { Link } from "@/components/navigation";
+import { useTranslations } from "next-intl";
 
 const ReactTableAudioPage = () => {
+  const t = useTranslations("AnalyticsDashboard");
   return (
     <div>
       <SiteBreadcrumb />
@@ -20,9 +22,11 @@ const ReactTableAudioPage = () => {
               </div>
               <div>
                 <p>
-                  0 <span className="text-red-500">Rata - rata :0</span>
+                  <span className="text-red-500">{t("average")} :0</span>
+                </p>
+                <p className="text-sm">
+                  {t("Hasil_unggah_disetujui_hari_ini")}
                 </p>
-                <p className="text-sm">Hasil Unggah disetujui hari ini</p>
               </div>
             </div>
             <div className="flex flex-row items-center text-xl font-medium text-default-900 gap-2">
@@ -31,9 +35,9 @@ const ReactTableAudioPage = () => {
               </div>
               <div>
                 <p>
-                  0 <span className="text-red-500">Rata - rata :0</span>
+                  <span className="text-red-500">{t("average")} :0</span>
                 </p>
-                <p className="text-sm">Hasil Unggah direvisi hari ini</p>
+                <p className="text-sm">{t("Hasil_unggah_direvisi_hari_ini")}</p>
               </div>
             </div>
             <div className="flex flex-row items-center text-xl font-medium text-default-900 gap-2">
@@ -42,9 +46,9 @@ const ReactTableAudioPage = () => {
               </div>
               <div>
                 <p>
-                  0 <span className="text-red-500">Rata - rata :0</span>
+                  <span className="text-red-500">{t("average")} :0</span>
                 </p>
-                <p className="text-sm">Hasil Unggah ditolak hari ini</p>
+                <p className="text-sm">{t("Hasil_unggah_ditolak_hari_ini")}</p>
               </div>
             </div>
           </div>
@@ -54,13 +58,13 @@ const ReactTableAudioPage = () => {
             <CardTitle>
               <div className="flex items-center">
                 <div className="flex-1 text-xl font-medium text-default-900">
-                  Konten Audio
+                  {t("audio")}
                 </div>
                 <div className="flex-none">
                   <Link href={"/contributor/content/audio/create"}>
                     <Button color="primary" className="text-white">
                       <UploadIcon />
-                      Unggah Audio
+                      {t("create-audio")}
                     </Button>
                   </Link>
                   {/* <Button color="primary" className="text-white ml-3">

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

@@ -236,8 +236,8 @@ const TableImage = () => {
 
   return (
     <div className="w-full overflow-x-auto">
-      <div className="flex justify-between items-center px-5">
+      <div className="flex flex-col md:flex-row lg:flex-row md:justify-between lg:justify-between items-center md:px-5 lg:px-5">
-        <div>
+        <div className="w-full md:w-[200px] lg:w-[200px] px-2">
           <InputGroup merged>
             <InputGroupText className="bg-transparent dark:border-secondary dark:group-focus-within:border-secondary">
               <Search className=" h-4 w-4 dark:text-white" />

app/[locale]/(protected)/contributor/content/image/page.tsx

@@ -6,8 +6,10 @@ import { UploadIcon } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Icon } from "@iconify/react/dist/iconify.js";
 import { Link } from "@/components/navigation";
+import { useTranslations } from "next-intl";
 
 const ReactTableImagePage = () => {
+  const t = useTranslations("AnalyticsDashboard");
   return (
     <div>
       <SiteBreadcrumb />
@@ -20,9 +22,11 @@ const ReactTableImagePage = () => {
               </div>
               <div>
                 <p>
-                  0 <span className="text-red-500">Rata - rata :0</span>
+                  <span className="text-red-500">{t("average")} :0</span>
+                </p>
+                <p className="text-sm">
+                  {t("Hasil_unggah_disetujui_hari_ini")}
                 </p>
-                <p className="text-sm">Hasil Unggah disetujui hari ini</p>
               </div>
             </div>
             <div className="flex flex-row items-center text-xl font-medium text-default-900 gap-2">
@@ -31,9 +35,9 @@ const ReactTableImagePage = () => {
               </div>
               <div>
                 <p>
-                  0 <span className="text-red-500">Rata - rata :0</span>
+                  <span className="text-red-500">{t("average")} :0</span>
                 </p>
-                <p className="text-sm">Hasil Unggah direvisi hari ini</p>
+                <p className="text-sm">{t("Hasil_unggah_direvisi_hari_ini")}</p>
               </div>
             </div>
             <div className="flex flex-row items-center text-xl font-medium text-default-900 gap-2">
@@ -42,9 +46,9 @@ const ReactTableImagePage = () => {
               </div>
               <div>
                 <p>
-                  0 <span className="text-red-500">Rata - rata :0</span>
+                  <span className="text-red-500">{t("average")} :0</span>
                 </p>
-                <p className="text-sm">Hasil Unggah ditolak hari ini</p>
+                <p className="text-sm">{t("Hasil_unggah_ditolak_hari_ini")}</p>
               </div>
             </div>
           </div>
@@ -54,13 +58,13 @@ const ReactTableImagePage = () => {
             <CardTitle>
               <div className="flex items-center">
                 <div className="flex-1 text-xl font-medium text-default-900">
-                  Konten Foto
+                  {t("image")}
                 </div>
                 <div className="flex-none">
                   <Link href={"/contributor/content/image/create"}>
                     <Button color="primary" className="text-white">
                       <UploadIcon />
-                      Unggah Foto
+                      {t("create-image")}
                     </Button>
                   </Link>
                   {/* <Link href={"/contributor/content/image/createAi"}>

app/[locale]/(protected)/contributor/content/spit/page.tsx

@@ -14,7 +14,7 @@ const ReactTableSPITPage = () => {
             <CardTitle>
               <div className="flex items-center">
                 <div className="flex-1 text-xl font-medium text-default-900">
-                  Konten SPIT
+                  SPIT
                 </div>
               </div>
             </CardTitle>

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

@@ -164,7 +164,7 @@ const TableSPIT = () => {
   return (
     <div className="w-full">
       <div className="flex justify-between items-center px-5">
-        <div>
+        <div className="w-[150px] md:w-[250px] lg:w-[250px]">
           <InputGroup merged>
             <InputGroupText className="bg-transparent dark:border-secondary dark:group-focus-within:border-secondary">
               <Search className=" h-4 w-4 dark:text-white" />

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

@@ -229,8 +229,8 @@ const TableTeks = () => {
 
   return (
     <div className="w-full overflow-x-auto">
-      <div className="flex justify-between items-center px-5">
+      <div className="flex flex-col md:flex-row lg:flex-row md:justify-between lg:justify-between items-center md:px-5 lg:px-5">
-        <div>
+        <div className="w-full md:w-[200px] lg:w-[200px] px-2">
           <InputGroup merged>
             <InputGroupText className="bg-transparent dark:border-secondary dark:group-focus-within:border-secondary">
               <Search className=" h-4 w-4 dark:text-white" />

app/[locale]/(protected)/contributor/content/teks/page.tsx

@@ -7,8 +7,10 @@ import { Button } from "@/components/ui/button";
 import { Icon } from "@iconify/react/dist/iconify.js";
 import TableTeks from "./components/table-teks";
 import { Link } from "@/components/navigation";
+import { useTranslations } from "next-intl";
 
 const ReactTableTeksPage = () => {
+  const t = useTranslations("AnalyticsDashboard");
   return (
     <div>
       <SiteBreadcrumb />
@@ -21,9 +23,12 @@ const ReactTableTeksPage = () => {
               </div>
               <div>
                 <p>
-                  0 <span className="text-red-500">Rata - rata :0</span>
+                  <span className="text-red-500">{t("average")} :0</span>
+                </p>
+                <p className="text-sm">
+                  {" "}
+                  {t("Hasil_unggah_disetujui_hari_ini")}
                 </p>
-                <p className="text-sm">Hasil Unggah disetujui hari ini</p>
               </div>
             </div>
             <div className="flex flex-row items-center text-xl font-medium text-default-900 gap-2">
@@ -32,9 +37,9 @@ const ReactTableTeksPage = () => {
               </div>
               <div>
                 <p>
-                  0 <span className="text-red-500">Rata - rata :0</span>
+                  <span className="text-red-500">{t("average")} :0</span>
                 </p>
-                <p className="text-sm">Hasil Unggah direvisi hari ini</p>
+                <p className="text-sm">{t("Hasil_unggah_direvisi_hari_ini")}</p>
               </div>
             </div>
             <div className="flex flex-row items-center text-xl font-medium text-default-900 gap-2">
@@ -43,9 +48,9 @@ const ReactTableTeksPage = () => {
               </div>
               <div>
                 <p>
-                  0 <span className="text-red-500">Rata - rata :0</span>
+                  <span className="text-red-500">{t("average")} :0</span>
                 </p>
-                <p className="text-sm">Hasil Unggah ditolak hari ini</p>
+                <p className="text-sm">{t("Hasil_unggah_ditolak_hari_ini")}</p>
               </div>
             </div>
           </div>
@@ -55,14 +60,14 @@ const ReactTableTeksPage = () => {
             <CardTitle>
               <div className="flex items-center">
                 <div className="flex-1 text-xl font-medium text-default-900">
-                  Konten Teks
+                  {t("text")}
                 </div>
 
                 <div className="flex-none">
                   <Link href={"/contributor/content/teks/create"}>
                     <Button color="primary" className="text-white">
                       <UploadIcon />
-                      Unggah Teks
+                      {t("create-text")}
                     </Button>
                   </Link>
                   {/* <Button color="primary" className="text-white ml-3">

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

@@ -229,8 +229,8 @@ const TableVideo = () => {
 
   return (
     <div className="w-full overflow-x-auto">
-      <div className="flex justify-between items-center px-5">
+      <div className="flex flex-col md:flex-row lg:flex-row md:justify-between lg:justify-between items-center md:px-5 lg:px-5">
-        <div>
+        <div className="w-full md:w-[200px] lg:w-[200px] px-2">
           <InputGroup merged>
             <InputGroupText className="bg-transparent dark:border-secondary dark:group-focus-within:border-secondary">
               <Search className=" h-4 w-4 dark:text-white" />

app/[locale]/(protected)/contributor/content/video/page.tsx

@@ -7,8 +7,10 @@ import { Button } from "@/components/ui/button";
 import { Icon } from "@iconify/react/dist/iconify.js";
 import TableVideo from "./components/table-video";
 import { Link } from "@/components/navigation";
+import { useTranslations } from "next-intl";
 
 const ReactTableVideoPage = () => {
+  const t = useTranslations("AnalyticsDashboard");
   return (
     <div>
       <SiteBreadcrumb />
@@ -21,9 +23,11 @@ const ReactTableVideoPage = () => {
               </div>
               <div>
                 <p>
-                  0 <span className="text-red-500">Rata - rata :0</span>
+                  <span className="text-red-500">{t("average")} :0</span>
+                </p>
+                <p className="text-sm">
+                  {t("Hasil_unggah_disetujui_hari_ini")}
                 </p>
-                <p className="text-sm">Hasil Unggah disetujui hari ini</p>
               </div>
             </div>
             <div className="flex flex-row items-center text-xl font-medium text-default-900 gap-2">
@@ -32,9 +36,9 @@ const ReactTableVideoPage = () => {
               </div>
               <div>
                 <p>
-                  0 <span className="text-red-500">Rata - rata :0</span>
+                  <span className="text-red-500">{t("average")} :0</span>
                 </p>
-                <p className="text-sm">Hasil Unggah direvisi hari ini</p>
+                <p className="text-sm">{t("Hasil_unggah_direvisi_hari_ini")}</p>
               </div>
             </div>
             <div className="flex flex-row items-center text-xl font-medium text-default-900 gap-2">
@@ -43,9 +47,9 @@ const ReactTableVideoPage = () => {
               </div>
               <div>
                 <p>
-                  0 <span className="text-red-500">Rata - rata :0</span>
+                  <span className="text-red-500">{t("average")} :0</span>
                 </p>
-                <p className="text-sm">Hasil Unggah ditolak hari ini</p>
+                <p className="text-sm">{t("Hasil_unggah_ditolak_hari_ini")}</p>
               </div>
             </div>
           </div>
@@ -55,13 +59,13 @@ const ReactTableVideoPage = () => {
             <CardTitle>
               <div className="flex items-center">
                 <div className="flex-1 text-xl font-medium text-default-900">
-                  Konten Video
+                  {t("video")}
                 </div>
                 <div className="flex-none">
                   <Link href={"/contributor/content/video/create"}>
                     <Button color="primary" className="text-white">
                       <UploadIcon />
-                      Unggah Video
+                      {t("create-video")}
                     </Button>
                   </Link>
                   {/* <Button color="primary" className="text-white ml-3">

app/[locale]/(protected)/contributor/planning/mediahub/components/mediahub-table.tsx

@@ -53,8 +53,11 @@ import TablePagination from "@/components/table/table-pagination";
 import columns from "./columns";
 import { getPlanningSentPagination } from "@/service/planning/planning";
 import search from "@/app/[locale]/(protected)/app/chat/components/search";
+import { CardHeader, CardTitle } from "@/components/ui/card";
+import { useTranslations } from "next-intl";
 
 const MediahubTable = () => {
+  const t = useTranslations("Planning");
   const router = useRouter();
   const searchParams = useSearchParams();
 
@@ -133,9 +136,19 @@ const MediahubTable = () => {
   };
 
   return (
-    <div className="w-full overflow-x-auto">
-      <div className="flex justify-between items-center px-5">
     <div>
+      <CardHeader className="border-b border-solid border-default-200 mb-6">
+        <CardTitle>
+          <div className="flex items-center">
+            <div className="flex-1 text-xl font-medium text-default-900">
+              {t("planning")} : {t("channel")} Mediahub
+            </div>
+          </div>
+        </CardTitle>
+      </CardHeader>
+      <div className="w-full overflow-x-auto">
+        <div className="flex justify-between items-center px-5 gap-3">
+          <div className="w-[150px] md:w-[250px] lg:w-[250px]">
             <InputGroup merged>
               <InputGroupText className="bg-transparent dark:border-secondary dark:group-focus-within:border-secondary">
                 <Search className=" h-4 w-4 dark:text-white" />
@@ -149,7 +162,7 @@ const MediahubTable = () => {
               />
             </InputGroup>
           </div>
-        <div className="flex-none">
+          <div className="w-[150px] md:w-[250px] lg:w-[250px]">
             <Input
               placeholder="Filter Status..."
               value={
@@ -189,14 +202,20 @@ const MediahubTable = () => {
                 >
                   {row.getVisibleCells().map((cell) => (
                     <TableCell key={cell.id}>
-                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext()
+                      )}
                     </TableCell>
                   ))}
                 </TableRow>
               ))
             ) : (
               <TableRow>
-              <TableCell colSpan={columns.length} className="h-24 text-center">
+                <TableCell
+                  colSpan={columns.length}
+                  className="h-24 text-center"
+                >
                   No results.
                 </TableCell>
               </TableRow>
@@ -209,6 +228,7 @@ const MediahubTable = () => {
           totalPage={totalPage}
         />
       </div>
+    </div>
   );
 };
 

app/[locale]/(protected)/contributor/planning/mediahub/page.tsx

@@ -1,9 +1,7 @@
 import SiteBreadcrumb from "@/components/site-breadcrumb";
-import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { UploadIcon } from "lucide-react";
-import TaskTable from "../../task/components/task-table";
 import MediahubTable from "./components/mediahub-table";
+import { useTranslations } from "next-intl";
 
 const MediahubPage = async () => {
   return (
@@ -11,15 +9,6 @@ const MediahubPage = async () => {
       <SiteBreadcrumb />
       <div className="space-y-4">
         <Card>
-          <CardHeader className="border-b border-solid border-default-200 mb-6">
-            <CardTitle>
-              <div className="flex items-center">
-                <div className="flex-1 text-xl font-medium text-default-900">
-                  Perencanaan : Kanal Mediahub
-                </div>
-              </div>
-            </CardTitle>
-          </CardHeader>
           <CardContent className="p-0">
             <MediahubTable />
           </CardContent>

app/[locale]/(protected)/contributor/planning/medsos-mediahub/components/medsos-table.tsx

@@ -52,8 +52,11 @@ import { useRouter, useSearchParams } from "next/navigation";
 import TablePagination from "@/components/table/table-pagination";
 import columns from "./columns";
 import { getPlanningSentPagination } from "@/service/planning/planning";
+import { CardHeader, CardTitle } from "@/components/ui/card";
+import { useTranslations } from "next-intl";
 
 const MedsosTable = () => {
+  const t = useTranslations("Planning");
   const router = useRouter();
   const searchParams = useSearchParams();
 
@@ -132,9 +135,19 @@ const MedsosTable = () => {
   };
 
   return (
-    <div className="w-full overflow-x-auto">
-      <div className="flex justify-between items-center px-5">
     <div>
+      <CardHeader className="border-b border-solid border-default-200 mb-6">
+        <CardTitle>
+          <div className="flex items-center">
+            <div className="flex-1 text-xl font-medium text-default-900">
+              {t("planning")} : {t("channel")} Medsos
+            </div>
+          </div>
+        </CardTitle>
+      </CardHeader>
+      <div className="w-full overflow-x-auto">
+        <div className="flex justify-between items-center px-5 gap-2">
+          <div className="w-[150px] md:w-[250px] lg:w-[250px]">
             <InputGroup merged>
               <InputGroupText className="bg-transparent dark:border-secondary dark:group-focus-within:border-secondary">
                 <Search className=" h-4 w-4 dark:text-white" />
@@ -148,7 +161,7 @@ const MedsosTable = () => {
               />
             </InputGroup>
           </div>
-        <div className="flex-none">
+          <div className="w-[150px] md:w-[250px] lg:w-[250px]">
             <Input
               placeholder="Filter Status..."
               value={
@@ -188,14 +201,20 @@ const MedsosTable = () => {
                 >
                   {row.getVisibleCells().map((cell) => (
                     <TableCell key={cell.id}>
-                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext()
+                      )}
                     </TableCell>
                   ))}
                 </TableRow>
               ))
             ) : (
               <TableRow>
-              <TableCell colSpan={columns.length} className="h-24 text-center">
+                <TableCell
+                  colSpan={columns.length}
+                  className="h-24 text-center"
+                >
                   No results.
                 </TableCell>
               </TableRow>
@@ -208,6 +227,7 @@ const MedsosTable = () => {
           totalPage={totalPage}
         />
       </div>
+    </div>
   );
 };
 

app/[locale]/(protected)/contributor/planning/medsos-mediahub/page.tsx

@@ -8,15 +8,6 @@ const MedsosMediahubPage = async () => {
       <SiteBreadcrumb />
       <div className="space-y-4">
         <Card>
-          <CardHeader className="border-b border-solid border-default-200 mb-6">
-            <CardTitle>
-              <div className="flex items-center">
-                <div className="flex-1 text-xl font-medium text-default-900">
-                  Perencanaan : Kanal Medsos
-                </div>
-              </div>
-            </CardTitle>
-          </CardHeader>
           <CardContent className="p-0">
             <MedsosTable />
           </CardContent>

app/[locale]/(protected)/contributor/schedule/event/components/event-table.tsx

@@ -22,18 +22,22 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
-import { Search } from "lucide-react";
+import { Search, UploadIcon } from "lucide-react";
 import { Input } from "@/components/ui/input";
 import { InputGroup, InputGroupText } from "@/components/ui/input-group";
 import { useRouter, useSearchParams } from "next/navigation";
 import TablePagination from "@/components/table/table-pagination";
 import columns from "./columns";
 import { paginationSchedule } from "@/service/schedule/schedule";
+import { useTranslations } from "next-intl";
+import { CardHeader, CardTitle } from "@/components/ui/card";
+import { Link } from "@/i18n/routing";
+import { Button } from "@/components/ui/button";
 
 const EventTable = () => {
   const router = useRouter();
   const searchParams = useSearchParams();
-
+  const t = useTranslations("Schedule");
   const [dataTable, setDataTable] = React.useState<any[]>([]);
   const [totalData, setTotalData] = React.useState<number>(1);
   const [sorting, setSorting] = React.useState<SortingState>([]);
@@ -109,23 +113,41 @@ const EventTable = () => {
   };
 
   return (
-    <div className="w-full overflow-x-auto">
-      <div className="flex justify-between items-center px-5">
     <div>
+      <CardHeader className="border-b border-solid border-default-200 mb-6">
+        <CardTitle>
+          <div className="flex items-center">
+            <div className="flex-1 text-xl font-medium text-default-900">
+              Event {t("schedule")}
+            </div>
+            <div className="flex-none">
+              <Link href={"/contributor/schedule/event/create"}>
+                <Button color="primary" className="text-white">
+                  <UploadIcon />
+                  {t("create-schedule")}
+                </Button>
+              </Link>
+            </div>
+          </div>
+        </CardTitle>
+      </CardHeader>
+      <div className="w-full overflow-x-auto">
+        <div className="flex justify-between items-center px-5 gap-2">
+          <div className="w-[150px] md:w-[250px] lg:w-[250px]">
             <InputGroup merged>
               <InputGroupText className="bg-transparent dark:border-secondary dark:group-focus-within:border-secondary">
                 <Search className=" h-4 w-4 dark:text-white" />
               </InputGroupText>
               <Input
                 type="text"
-              placeholder="Search Judul..."
+                placeholder="Search Title..."
                 className="bg-transparent  dark:border-secondary dark:placeholder-white/80 dark:focus:border-secondary dark:text-white"
                 value={search}
                 onChange={handleSearch}
               />
             </InputGroup>
           </div>
-        <div className="flex-none">
+          <div className="w-[150px] md:w-[250px] lg:w-[250px]">
             <Input
               placeholder="Filter Status..."
               value={
@@ -165,14 +187,20 @@ const EventTable = () => {
                 >
                   {row.getVisibleCells().map((cell) => (
                     <TableCell key={cell.id}>
-                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext()
+                      )}
                     </TableCell>
                   ))}
                 </TableRow>
               ))
             ) : (
               <TableRow>
-              <TableCell colSpan={columns.length} className="h-24 text-center">
+                <TableCell
+                  colSpan={columns.length}
+                  className="h-24 text-center"
+                >
                   No results.
                 </TableCell>
               </TableRow>
@@ -185,6 +213,7 @@ const EventTable = () => {
           totalPage={totalPage}
         />
       </div>
+    </div>
   );
 };
 

app/[locale]/(protected)/contributor/schedule/event/page.tsx

@@ -12,23 +12,6 @@ const EventPage = async () => {
       <SiteBreadcrumb />
       <div className="space-y-4">
         <Card>
-          <CardHeader className="border-b border-solid border-default-200 mb-6">
-            <CardTitle>
-              <div className="flex items-center">
-                <div className="flex-1 text-xl font-medium text-default-900">
-                  Jadwal Event
-                </div>
-                <div className="flex-none">
-                  <Link href={"/contributor/schedule/event/create"}>
-                    <Button color="primary" className="text-white">
-                      <UploadIcon />
-                      Buat Jadwal
-                    </Button>
-                  </Link>
-                </div>
-              </div>
-            </CardTitle>
-          </CardHeader>
           <CardContent className="p-0">
             <EventTable />
           </CardContent>

app/[locale]/(protected)/contributor/schedule/press-conference/components/presscon-table.tsx

@@ -35,6 +35,7 @@ import {
   Trash2,
   TrendingDown,
   TrendingUp,
+  UploadIcon,
 } from "lucide-react";
 import { Input } from "@/components/ui/input";
 import { InputGroup, InputGroupText } from "@/components/ui/input-group";
@@ -42,11 +43,14 @@ import { useRouter, useSearchParams } from "next/navigation";
 import TablePagination from "@/components/table/table-pagination";
 import columns from "./columns";
 import { paginationSchedule } from "@/service/schedule/schedule";
+import { CardHeader, CardTitle } from "@/components/ui/card";
+import { Link } from "@/i18n/routing";
+import { useTranslations } from "next-intl";
 
 const PressConferenceTable = () => {
   const router = useRouter();
   const searchParams = useSearchParams();
-
+  const t = useTranslations("Schedule");
   const [dataTable, setDataTable] = React.useState<any[]>([]);
   const [totalData, setTotalData] = React.useState<number>(1);
   const [sorting, setSorting] = React.useState<SortingState>([]);
@@ -122,23 +126,41 @@ const PressConferenceTable = () => {
   };
 
   return (
-    <div className="w-full overflow-x-auto">
-      <div className="flex justify-between items-center px-5">
     <div>
+      <CardHeader className="border-b border-solid border-default-200 mb-6">
+        <CardTitle>
+          <div className="flex items-center">
+            <div className="flex-1 text-xl font-medium text-default-900">
+              {t("press-conference")} {t("schedule")}
+            </div>
+            <div className="flex-none">
+              <Link href={"/contributor/schedule/press-conference/create"}>
+                <Button color="primary" className="text-white">
+                  <UploadIcon />
+                  {t("create-schedule")}
+                </Button>
+              </Link>
+            </div>
+          </div>
+        </CardTitle>
+      </CardHeader>
+      <div className="w-full overflow-x-auto">
+        <div className="flex justify-between items-center px-5 gap-2">
+          <div className="w-[150px] md:w-[250px] lg:w-[250px]">
             <InputGroup merged>
               <InputGroupText className="bg-transparent dark:border-secondary dark:group-focus-within:border-secondary">
                 <Search className=" h-4 w-4 dark:text-white" />
               </InputGroupText>
               <Input
                 type="text"
-              placeholder="Search Judul..."
+                placeholder="Search Title..."
                 className="bg-transparent  dark:border-secondary dark:placeholder-white/80 dark:focus:border-secondary dark:text-white"
                 value={search}
                 onChange={handleSearch}
               />
             </InputGroup>
           </div>
-        <div className="flex-none">
+          <div className="w-[150px] md:w-[250px] lg:w-[250px]">
             <Input
               placeholder="Filter Status..."
               value={
@@ -178,14 +200,20 @@ const PressConferenceTable = () => {
                 >
                   {row.getVisibleCells().map((cell) => (
                     <TableCell key={cell.id}>
-                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext()
+                      )}
                     </TableCell>
                   ))}
                 </TableRow>
               ))
             ) : (
               <TableRow>
-              <TableCell colSpan={columns.length} className="h-24 text-center">
+                <TableCell
+                  colSpan={columns.length}
+                  className="h-24 text-center"
+                >
                   No results.
                 </TableCell>
               </TableRow>
@@ -198,6 +226,7 @@ const PressConferenceTable = () => {
           totalPage={totalPage}
         />
       </div>
+    </div>
   );
 };
 

app/[locale]/(protected)/contributor/schedule/press-conference/page.tsx

@@ -2,8 +2,6 @@ import SiteBreadcrumb from "@/components/site-breadcrumb";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import PressConferenceTable from "./components/presscon-table";
-import { UploadIcon } from "lucide-react";
-import { Link } from "@/components/navigation";
 
 const PressConferencePage = async () => {
   return (
@@ -11,23 +9,6 @@ const PressConferencePage = async () => {
       <SiteBreadcrumb />
       <div className="space-y-4">
         <Card>
-          <CardHeader className="border-b border-solid border-default-200 mb-6">
-            <CardTitle>
-              <div className="flex items-center">
-                <div className="flex-1 text-xl font-medium text-default-900">
-                  Jadwal Konferensi Pers
-                </div>
-                <div className="flex-none">
-                  <Link href={"/contributor/schedule/press-conference/create"}>
-                    <Button color="primary" className="text-white">
-                      <UploadIcon />
-                      Buat Jadwal
-                    </Button>
-                  </Link>
-                </div>
-              </div>
-            </CardTitle>
-          </CardHeader>
           <CardContent className="p-0">
             <PressConferenceTable />
           </CardContent>

app/[locale]/(protected)/contributor/schedule/press-release/components/pressrilis-table.tsx

@@ -35,6 +35,7 @@ import {
   Trash2,
   TrendingDown,
   TrendingUp,
+  UploadIcon,
 } from "lucide-react";
 import { Input } from "@/components/ui/input";
 import { InputGroup, InputGroupText } from "@/components/ui/input-group";
@@ -43,11 +44,14 @@ import { useRouter, useSearchParams } from "next/navigation";
 import TablePagination from "@/components/table/table-pagination";
 import columns from "./columns";
 import { paginationSchedule } from "@/service/schedule/schedule";
+import { useTranslations } from "next-intl";
+import { CardHeader, CardTitle } from "@/components/ui/card";
+import { Link } from "@/i18n/routing";
 
 const PressReleaseTable = () => {
   const router = useRouter();
   const searchParams = useSearchParams();
-
+  const t = useTranslations("Schedule");
   const [dataTable, setDataTable] = React.useState<any[]>([]);
   const [totalData, setTotalData] = React.useState<number>(1);
   const [sorting, setSorting] = React.useState<SortingState>([]);
@@ -123,23 +127,41 @@ const PressReleaseTable = () => {
   };
 
   return (
-    <div className="w-full overflow-x-auto">
-      <div className="flex justify-between items-center px-5 mt-3">
     <div>
+      <CardHeader className="border-b border-solid border-default-200 mb-6">
+        <CardTitle>
+          <div className="flex items-center">
+            <div className="flex-1 text-xl font-medium text-default-900">
+              {t("press-release")} {t("schedule")}
+            </div>
+            <div className="flex-none">
+              <Link href={"/contributor/schedule/press-release/create"}>
+                <Button color="primary" className="text-white">
+                  <UploadIcon />
+                  {t("create-schedule")}
+                </Button>
+              </Link>
+            </div>
+          </div>
+        </CardTitle>
+      </CardHeader>
+      <div className="w-full overflow-x-auto">
+        <div className="flex justify-between items-center px-5 gap-2">
+          <div className="w-[150px] md:w-[250px] lg:w-[250px]">
             <InputGroup merged>
               <InputGroupText className="bg-transparent dark:border-secondary dark:group-focus-within:border-secondary">
                 <Search className=" h-4 w-4 dark:text-white" />
               </InputGroupText>
               <Input
                 type="text"
-              placeholder="Search Judul..."
+                placeholder="Search Title..."
                 className="bg-transparent  dark:border-secondary dark:placeholder-white/80 dark:focus:border-secondary dark:text-white"
                 value={search}
                 onChange={handleSearch}
               />
             </InputGroup>
           </div>
-        <div className="flex-none">
+          <div className="w-[150px] md:w-[250px] lg:w-[250px]">
             <Input
               placeholder="Filter Status..."
               value={
@@ -148,7 +170,7 @@ const PressReleaseTable = () => {
               onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
                 table.getColumn("status")?.setFilterValue(event.target.value)
               }
-            className="max-w-sm "
+              className="w-full "
             />
           </div>
         </div>
@@ -179,14 +201,20 @@ const PressReleaseTable = () => {
                 >
                   {row.getVisibleCells().map((cell) => (
                     <TableCell key={cell.id}>
-                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext()
+                      )}
                     </TableCell>
                   ))}
                 </TableRow>
               ))
             ) : (
               <TableRow>
-              <TableCell colSpan={columns.length} className="h-24 text-center">
+                <TableCell
+                  colSpan={columns.length}
+                  className="h-24 text-center"
+                >
                   No results.
                 </TableCell>
               </TableRow>
@@ -199,6 +227,8 @@ const PressReleaseTable = () => {
           totalPage={totalPage}
         />
       </div>
+      \{" "}
+    </div>
   );
 };
 

app/[locale]/(protected)/contributor/schedule/press-release/page.tsx

@@ -11,23 +11,6 @@ const PressReleasePage = async () => {
       <SiteBreadcrumb />
       <div className="space-y-4">
         <Card>
-          <CardHeader className="border-b border-solid border-default-200 mb-6">
-            <CardTitle>
-              <div className="flex items-center">
-                <div className="flex-1 text-xl font-medium text-default-900">
-                  Jadwal Pers Rilis
-                </div>
-                <div className="flex-none">
-                  <Link href={"/contributor/schedule/press-release/create"}>
-                    <Button color="primary" className="text-white">
-                      <UploadIcon />
-                      Buat Jadwal
-                    </Button>
-                  </Link>
-                </div>
-              </div>
-            </CardTitle>
-          </CardHeader>
           <CardContent className="p-0">
             <PressReleaseTable />
           </CardContent>

app/[locale]/(protected)/contributor/task/components/task-table.tsx

@@ -55,11 +55,12 @@ import columns from "./columns";
 import { listTask } from "@/service/task";
 import { Label } from "@/components/ui/label";
 import { format } from "date-fns";
+import { useTranslations } from "next-intl";
 
 const TaskTable = () => {
   const router = useRouter();
   const searchParams = useSearchParams();
-
+  const t = useTranslations("AnalyticsDashboard");
   const [dataTable, setDataTable] = React.useState<any[]>([]);
   const [totalData, setTotalData] = React.useState<number>(1);
   const [sorting, setSorting] = React.useState<SortingState>([]);
@@ -205,7 +206,7 @@ const TaskTable = () => {
                   } 
                 px-[18px] py-1 transition duration-100 rounded`}
                 >
-                  Atensi Khusus
+                  {t("special-attention")}
                 </span>
                 <span
                   className={`
@@ -217,14 +218,14 @@ const TaskTable = () => {
                 px-[18px] py-1 transition duration-100 rounded
                 `}
                 >
-                  Tugas Harian
+                  {t("daily-tasks")}
                 </span>
               </label>
             </div>
           </div>
         </div>
       </div>
-      <div className="flex flex-col sm:flex-row lg:flex-row justify-between lg:items-center px-5">
+      <div className="flex flex-col sm:flex-row lg:flex-row justify-between sm:items-center md:items-center lg:items-center px-5">
         <div className="mb-3 sm:mb-0 lg-mb-0">
           <InputGroup merged>
             <InputGroupText className="bg-transparent dark:border-secondary dark:group-focus-within:border-secondary">
@@ -232,19 +233,23 @@ const TaskTable = () => {
             </InputGroupText>
             <Input
               type="text"
-              placeholder="Search Judul dan Code"
+              placeholder="Search Title dan Code"
               className="bg-transparent  dark:border-secondary dark:placeholder-white/80 dark:focus:border-secondary dark:text-white w-full"
               value={search}
               onChange={handleSearch}
             />
           </InputGroup>
         </div>
-        <div className="flex flex-row items-center gap-2">
+        <div className="w-full sm:w-[100px] items-center gap-2">
-          <div className="flex flex-row items-center gap-3">
+          <div className=" gap-3">
             <div className="flex items-center py-4">
               <DropdownMenu>
                 <DropdownMenuTrigger asChild>
-                  <Button variant="outline" className="ml-auto" size="md">
+                  <Button
+                    variant="outline"
+                    className="ml-auto w-full sm:w-[100px]"
+                    size="md"
+                  >
                     Filter <ChevronDown />
                   </Button>
                 </DropdownMenuTrigger>
@@ -256,7 +261,7 @@ const TaskTable = () => {
                     <p>Filter</p>
                   </div>
                   <div className="mx-2 my-1">
-                    <Label>Tanggal Awal</Label>
+                    <Label>{t("date")}</Label>
                     <Input
                       type="date"
                       value={dateFilter}
@@ -283,7 +288,7 @@ const TaskTable = () => {
                       onChange={() => handleStatusCheckboxChange(1)}
                     />
                     <label htmlFor="status-1" className="text-sm">
-                      Selesai
+                      {t("done")}
                     </label>
                   </div>
                   <div className="flex items-center px-4 py-1">
@@ -295,7 +300,7 @@ const TaskTable = () => {
                       onChange={() => handleStatusCheckboxChange(2)}
                     />
                     <label htmlFor="status-2" className="text-sm">
-                      Aktif
+                      {t("active")}
                     </label>
                   </div>
                 </DropdownMenuContent>

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

@@ -7,8 +7,10 @@ import SiteBreadcrumb from "@/components/site-breadcrumb";
 import { Link } from "@/components/navigation";
 import { checkAuthorization, checkLoginSession } from "@/lib/utils";
 import React, { useEffect } from "react";
+import { useTranslations } from "next-intl";
 
 const TaskPage = () => {
+  const t = useTranslations("AnalyticsDashboard");
   useEffect(() => {
     function initState() {
       checkAuthorization("admin"); // Specify the page, e.g., "admin" or another value
@@ -27,13 +29,13 @@ const TaskPage = () => {
             <CardTitle>
               <div className="flex flex-col sm:flex-row lg:flex-row lg:items-center">
                 <div className="flex-1 text-xl font-medium text-default-900">
-                  Tabel Penugasan
+                  {t("tabel")} {t("task")}
                 </div>
                 <div className="flex-none">
                   <Link href={"/contributor/task/create"}>
                     <Button color="primary" className="text-white">
                       <UploadIcon />
-                      Buat Penugasan
+                      {t("create-task")}
                     </Button>
                   </Link>
                 </div>

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

@@ -39,25 +39,25 @@ const DashboardPage = () => {
                 value="routine-task"
                 className="data-[state=active]:bg-primary data-[state=active]:text-primary-foreground rounded-md px-6"
               >
-                Tugas Rutin
+                {t("task-routine")}
               </TabsTrigger>
               <TabsTrigger
                 value="task"
                 className="data-[state=active]:bg-primary data-[state=active]:text-primary-foreground rounded-md px-6"
               >
-                Penugasan
+                {t("task")}
               </TabsTrigger>
               <TabsTrigger
                 value="schedule"
                 className="data-[state=active]:bg-primary data-[state=active]:text-primary-foreground rounded-md px-6"
               >
-                Jadwal
+                {t("schedule")}
               </TabsTrigger>
               <TabsTrigger
                 value="indeks"
                 className="data-[state=active]:bg-primary data-[state=active]:text-primary-foreground rounded-md px-6"
               >
-                Indeks
+                {t("indeks")}
               </TabsTrigger>
             </TabsList>
           </Card>
@@ -68,18 +68,18 @@ const DashboardPage = () => {
                   <CardContent className="p-4">
                     <div className="grid md:grid-cols-3   gap-4">
                       <StatisticsBlock
-                        title={"Hasil unggah disetujui hari ini"}
+                        title={t("Hasil_unggah_disetujui_hari_ini")}
                         total="3,564"
                         className="bg-info/10 border-none shadow-none"
                       />
                       <StatisticsBlock
-                        title={"Hasil unggah direvisi hari ini"}
+                        title={t("Hasil_unggah_direvisi_hari_ini")}
                         total="564"
                         className="bg-warning/10 border-none shadow-none"
                         chartColor="#FB8F65"
                       />
                       <StatisticsBlock
-                        title={"Hasil unggah ditolak hari ini"}
+                        title={t("Hasil_unggah_ditolak_hari_ini")}
                         total="+5.0%"
                         className="bg-primary/10 border-none shadow-none"
                         chartColor="#2563eb"
@@ -94,7 +94,7 @@ const DashboardPage = () => {
                 <Card>
                   <CardHeader className="flex flex-row items-center">
                     <CardTitle className="flex-1 text-lg">
-                      {"Total Produksi Konten"}
+                      {t("Total-Content-Production")}
                     </CardTitle>
                     <DashboardDropdown />
                   </CardHeader>
@@ -106,7 +106,7 @@ const DashboardPage = () => {
               <div className="lg:col-span-8 col-span-12">
                 <Card>
                   <CardHeader className="flex flex-row items-center">
-                    <CardTitle className="flex-1">{"Table"}</CardTitle>
+                    <CardTitle className="flex-1">{t("tabel")}</CardTitle>
                     <DashboardDropdown />
                   </CardHeader>
                   <CardContent className="p-0">
@@ -123,7 +123,7 @@ const DashboardPage = () => {
                   <Card className="py-4 px-3">
                     <div className="flex flex-row justify-between items-center">
                       <div className="flex-1 text-xl font-medium text-default-900">
-                        Table Penugasan
+                        Tabel Penugasan
                       </div>
                       <div>
                         <Link href={"/contributor/task/create"}>
@@ -158,8 +158,8 @@ const DashboardPage = () => {
               <div className="lg:col-span-12 col-span-12">
                 <Card>
                   <Card className="py-4 px-3">
-                    <div className="flex flex-row justify-between items-center">
+                    <div className="flex flex-col md:flex-row md:justify-between md:items-center lg:flex-row lg:justify-between lg:items-center">
-                      <div className="flex-1 text-xl font-medium text-default-900">
+                      <div className="flex-1 text-xl font-medium text-default-900 mb-2">
                         Table Indeks
                       </div>
                       <div>

app/[locale]/(protected)/dashboard/routine-task/components/content-table.tsx

@@ -171,11 +171,11 @@ const ContentTable = () => {
 
   return (
     <div className="w-full overflow-x-auto">
-      <div className="flex justify-between items-center px-5">
+      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between md:flex-row md:items-center md:justify-between lg:flex-row items-start lg:justify-between lg:items-center px-5">
-        <div>
+        <div className="w-full md:w-[200px] mb-2 md:mb-0">
           <InputGroup merged>
             <InputGroupText className="bg-transparent dark:border-secondary dark:group-focus-within:border-secondary">
-              <Search className="h-4 w-4 dark:text-white" />
+              <Search className="h-4 w-full lg:w-4 dark:text-white" />
             </InputGroupText>
             <Input
               type="text"
@@ -186,7 +186,7 @@ const ContentTable = () => {
             />
           </InputGroup>
         </div>
-        <div className="flex flex-row items-center gap-3">
+        <div className=" items-center gap-3 w-full md:w-[200px]">
           {/* <Select
             onValueChange={(value) => {
               setStatusFilter([value]);
@@ -210,7 +210,7 @@ const ContentTable = () => {
               setFileTypeFilter([value]);
             }}
           >
-            <SelectTrigger className="w-[180px]">
+            <SelectTrigger className="w-full lg:w-[180px]">
               <SelectValue placeholder="Select a Filter" />
             </SelectTrigger>
             <SelectContent>

app/[locale]/(protected)/dashboard/routine-task/components/recent-activity.tsx

@@ -12,6 +12,7 @@ import { DockIcon, ImageIcon, MicIcon, YoutubeIcon } from "lucide-react";
 import { useRouter, useSearchParams } from "next/navigation";
 import React from "react";
 import search from "../../../app/chat/components/search";
+import { useTranslations } from "next-intl";
 
 type StatusFilter = string[];
 
@@ -23,6 +24,7 @@ interface Counts {
 }
 
 const RecentActivity: React.FC = () => {
+  const t = useTranslations("Menu");
   const router = useRouter();
   const searchParams = useSearchParams();
 
@@ -115,19 +117,27 @@ const RecentActivity: React.FC = () => {
     <div className="flex flex-col gap-5">
       <div className="flex flex-row items-center gap-3">
         <ImageIcon size={40} className="text-blue-700" />
-        <p className="text-xl">{counts.images} FOTO</p>
+        <p className="text-xl">
+          {counts.images} {t("image")}
+        </p>
       </div>
       <div className="flex flex-row items-center gap-3">
         <YoutubeIcon size={40} className="text-blue-700" />
-        <p className="text-xl">{counts.audiovisual} AUDIO VISUAL</p>
+        <p className="text-xl">
+          {counts.audiovisual} {t("video")}
+        </p>
       </div>
       <div className="flex flex-row items-center gap-3">
         <DockIcon size={40} className="text-blue-700" />
-        <p className="text-xl">{counts.text} TEXT</p>
+        <p className="text-xl">
+          {counts.text} {t("text")}
+        </p>
       </div>
       <div className="flex flex-row items-center gap-3">
         <MicIcon size={40} className="text-blue-700" />
-        <p className="text-xl">{counts.audio} AUDIO</p>
+        <p className="text-xl">
+          {counts.audio} {t("audio")}
+        </p>
       </div>
     </div>
   );

app/[locale]/(protected)/shared/communication/collaboration/components/collabroation-table.tsx

@@ -160,7 +160,7 @@ const CollaborationTable = () => {
   return (
     <div className="w-full overflow-x-auto">
       <div className="flex justify-between items-center">
-        <div className="mt-3 flex flex-row items-center gap-2">
+        <div className=" flex flex-row items-center gap-2">
           <InputGroup merged>
             <InputGroupText className="bg-transparent dark:border-secondary dark:group-focus-within:border-secondary">
               <Search className=" h-4 w-4 dark:text-white" />

app/[locale]/(protected)/shared/communication/escalation/components/escalation-table.tsx

@@ -169,7 +169,7 @@ const EscalationTable = () => {
   return (
     <div className="w-full overflow-x-auto">
       <div className="flex justify-between items-center">
-        <div className="mt-3 flex flex-row items-center gap-2">
+        <div className=" flex flex-row items-center gap-2">
           <InputGroup merged>
             <InputGroupText className="bg-transparent dark:border-secondary dark:group-focus-within:border-secondary">
               <Search className=" h-4 w-4 dark:text-white" />

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

@@ -174,7 +174,7 @@ const InternalTable = () => {
             </InputGroupText>
             <Input
               type="text"
-              placeholder="Search Judul..."
+              placeholder="Search Title..."
               className="bg-transparent  dark:border-secondary dark:placeholder-white/80 dark:focus:border-secondary dark:text-white"
               value={search}
               onChange={(e) => setSearch(e.target.value)}

app/[locale]/(protected)/shared/communication/page.tsx

@@ -10,9 +10,11 @@ import { Link, useRouter } from "@/i18n/routing";
 import { PlusIcon } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import InternalTable from "./internal/components/internal-table";
+import { useTranslations } from "next-intl";
 
 const CommunicationPage = () => {
   const [tab, setTab] = useState("Pertanyaan Internal");
+  const t = useTranslations("Communication");
   return (
     <div>
       <SiteBreadcrumb />
@@ -23,7 +25,7 @@ const CommunicationPage = () => {
             <Link href="/shared/communication/internal/create">
               <Button color="primary" size="md">
                 <PlusIcon />
-                Pertanyaan baru
+                {t("new-question")}
               </Button>
             </Link>
           )}
@@ -31,12 +33,12 @@ const CommunicationPage = () => {
             <Link href="/shared/communication/collaboration/create">
               <Button color="primary" size="md">
                 <PlusIcon />
-                Kolaborasi baru
+                {t("new-collaboration")}
               </Button>
             </Link>
           )}
         </div>
-        <div className="flex flex-row gap-1 border-2 rounded-md w-fit mb-5">
+        <div className="flex flex-wrap gap-1 border-2 rounded-md w-fit mb-5">
           <Button
             rounded="md"
             onClick={() => setTab("Pertanyaan Internal")}
@@ -47,7 +49,7 @@ const CommunicationPage = () => {
                     : "bg-white text-black "
                 }`}
           >
-            Pertanyaan Internal
+            {t("internal-questions")}
           </Button>
           <Button
             rounded="md"
@@ -59,7 +61,7 @@ const CommunicationPage = () => {
                     : "bg-white text-black "
                 }`}
           >
-            Eskalasi
+            {t("escalation")}
           </Button>
           <Button
             rounded="md"
@@ -71,7 +73,7 @@ const CommunicationPage = () => {
                     : "bg-white text-black "
                 }`}
           >
-            Kolaborasi
+            {t("collaboration")}
           </Button>
         </div>
         {tab === "Pertanyaan Internal" && <InternalTable />}

app/[locale]/(protected)/shared/contest/components/contest-table.tsx

@@ -123,7 +123,7 @@ const TaskTable = () => {
   return (
     <div className="w-full overflow-x-auto">
       <div className="flex justify-between items-center px-5">
-        <div>
+        <div className="w-[150px] md:w-[250px] lg:w-[250px]">
           <InputGroup merged>
             <InputGroupText className="bg-transparent dark:border-secondary dark:group-focus-within:border-secondary">
               <Search className=" h-4 w-4 dark:text-white" />
@@ -137,7 +137,7 @@ const TaskTable = () => {
             />
           </InputGroup>
         </div>
-        <div className="flex-none">
+        <div className="w-[150px] md:w-[250px] lg:w-[250px]">
           <Input
             placeholder="Filter Status..."
             value={

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

@@ -8,10 +8,11 @@ import { Button } from "@/components/ui/button";
 import { UploadIcon } from "lucide-react";
 import { getCookiesDecrypt } from "@/lib/utils";
 import { useEffect, useState } from "react";
+import { useTranslations } from "next-intl";
 
 const ContestPage = () => {
   const [userLevelId, setUserLevelId] = useState<any>(null);
-
+  const t = useTranslations("Contest");
   useEffect(() => {
     setUserLevelId(Number(getCookiesDecrypt("ulie")));
   }, []);
@@ -24,14 +25,14 @@ const ContestPage = () => {
             <CardTitle>
               <div className="flex items-center">
                 <div className="flex-1 text-xl font-medium text-default-900">
-                  Tabel Lomba
+                  {t("table")} {t("contest")}
                 </div>
                 {userLevelId !== 776 && userLevelId !== null && (
                   <div className="flex-none">
                     <Link href={"/shared/contest/create"}>
                       <Button color="primary" className="text-white">
                         <UploadIcon />
-                        Buat Lomba
+                        {t("create-contest")}
                       </Button>
                     </Link>
                   </div>

components/form/communication/internal-detail-form.tsx

@@ -193,8 +193,8 @@ export default function FormDetailInternal() {
         </Button>
       </div>
 
-      <div className="flex flex-row gap-5 mt-5">
+      <div className="flex flex-col md:flex-row    lg:flex-row gap-5 mt-5">
-        <div className="flex flex-col w-[70%]">
+        <div className="flex flex-col w-[100%] lg:w-[70%]">
           {replyVisible && (
             <div className="">
               <textarea
@@ -284,7 +284,7 @@ export default function FormDetailInternal() {
           </div>
         </div>
         {detail !== undefined && (
-          <div className="gap-5 mb-5 w-[30%] border bg-white rounded-md">
+          <div className="gap-5 mb-5 w-[100%] lg:w-[30%] border bg-white rounded-md">
             <p className="mx-3 mt-3">Properties</p>
             <div className="space-y-2 px-3">
               <Label>Judul</Label>

components/form/task/task-detail-form.tsx

@@ -1535,7 +1535,8 @@ export default function FormTaskDetail() {
                     </DialogContent>
                   </Dialog>
                 </div>
-                <table className="w-full border-collapse border border-gray-300">
+                <div className="overflow-x-auto">
+                  <table className="min-w-full border-collapse border border-gray-300">
                     <thead>
                       <tr className="bg-gray-100 border-b">
                         <th className="px-4 py-2 text-left">Judul</th>
@@ -1546,10 +1547,22 @@ export default function FormTaskDetail() {
                       </tr>
                     </thead>
                     <tbody>
-                    {uploadResults.map((item) => (
+                      {uploadResults.map((item: any) => (
                         <tr key={item.id} className="border-b">
                           <td className="px-4 py-2 text-blue-500">
-                          <a href="">{item.title}</a>
+                            <Link
+                              href={
+                                Number(item?.fileType?.id) == 1
+                                  ? `/contributor/content/image/detail/${item?.id}`
+                                  : Number(item?.fileType?.id) == 2
+                                  ? `/contributor/content/video/detail/${item?.id}`
+                                  : Number(item?.fileType?.id) == 3
+                                  ? `/contributor/content/teks/detail/${item?.id}`
+                                  : `/contributor/content/audio/detail/${item?.id}`
+                              }
+                            >
+                              {item.title}
+                            </Link>
                           </td>
                           <td className="px-4 py-2">{item.fileType.name}</td>
                           <td className="px-4 py-2">{item.category.name}</td>
@@ -1562,6 +1575,7 @@ export default function FormTaskDetail() {
                     </tbody>
                   </table>
                 </div>
+              </div>
             )}
             {showInput && (
               <>

lib/menus.ts

@@ -181,7 +181,7 @@ export function getMenuList(pathname: string, t: any): Group[] {
             submenus: [
               {
                 href: "/contributor/schedule/press-conference",
-                label: "konferensi pers",
+                label: t("press-conference"),
                 active: pathname.includes("/schedule/press-conference"),
                 icon: "heroicons:arrow-trending-up",
                 children: [],
@@ -195,7 +195,7 @@ export function getMenuList(pathname: string, t: any): Group[] {
               },
               {
                 href: "/contributor/schedule/press-release",
-                label: "pers rilis",
+                label: t("press-release"),
                 active: pathname.includes("/schedule/press-release"),
                 icon: "heroicons:shopping-cart",
                 children: [],

messages/en.json

@@ -22,7 +22,30 @@
     "last_months": "Last months",
     "last_year": "Last year",
     "choose_category": "Choose Category",
-    "international": "International"
+    "tabel": "Table",
+    "Hasil_unggah_disetujui_hari_ini": "Uploaded results approved today",
+    "Hasil_unggah_direvisi_hari_ini": "Upload results revised today",
+    "Hasil_unggah_ditolak_hari_ini": "Upload result rejected today",
+    "task-routine": "Task Routine",
+    "task": "Task",
+    "schedule": "Schedule",
+    "indeks": "Indeks",
+    "Total-Content-Production": "Total Content Production",
+    "average": "average",
+    "create-image": "Create Image",
+    "create-video": "Create Video",
+    "create-text": "Create Teks",
+    "create-audio": "Create Audio",
+    "create-task": "Create Task",
+    "special-attention": "special attention",
+    "daily-tasks": "Daily Tasks",
+    "date": "Date",
+    "active": "Active",
+    "done": "Done",
+    "image": "Image",
+    "video": "Video",
+    "audio": "Audio",
+    "text": "Text"
   },
   "BankingDashboard": {
     "widget_title": "Good evening",
@@ -108,9 +131,12 @@
     "addBoard": "Add Board"
   },
   "CalendarApp": {
-    "addEvent": "Add Event",
+    "addEvent": "Add New Agenda",
     "shortDesc": "Drag and drop your event or click in the calendar",
-    "filter": "FILTER"
+    "filter": "FILTER",
+    "no-data-yet": "Not data yet",
+    "bag-pa-monitoring-results": "BAG PA monitoring results",
+    "monitoring-results": "Monitoring Results"
   },
   "TodoApp": {
     "addTask": "Add Task",
@@ -135,6 +161,8 @@
     "task": "Task",
     "planning": "Planning",
     "schedule": "Schedule",
+    "press-conference": "Press Conference",
+    "press-release": "press release",
     "curated-content": "Curated Content",
     "communication": "Communication",
     "contest": "Contest",
@@ -543,5 +571,33 @@
     "sortBy": "Sort by",
     "latest": "Latest",
     "mostPopular": "Most Popular"
+  },
+  "Planning": {
+    "planning": "Planning",
+    "channel": "Channel"
+  },
+  "Schedule": {
+    "schedule": "Schedule",
+    "press-conference": "Press Conference",
+    "press-release": "Press Release",
+    "create-schedule": "Create Schedule"
+  },
+  "Blog": {
+    "table": "Table",
+    "blog": "Blog",
+    "create-indeks": "Add Blog",
+    "category": "Category"
+  },
+  "Communication": {
+    "internal-questions": "Internal Question",
+    "escalation": "Escalation",
+    "collaboration": "Collaboration",
+    "new-question": "New Question",
+    "new-collaboration": "New Collaboration"
+  },
+  "Contest": {
+    "table": "Table",
+    "contest": "Lomba",
+    "create-contest": "Create Contest"
   }
 }

messages/in.json

@@ -22,7 +22,31 @@
     "last_months": "Last months",
     "last_year": "Last year",
     "choose_category": "Pilih Kategori",
-    "international": "Internasional"
+    "international": "Internasional",
+    "tabel": "Tabel",
+    "Hasil_unggah_disetujui_hari_ini": "Hasil unggah disetujui hari ini",
+    "Hasil_unggah_direvisi_hari_ini": "Hasil unggah direvisi hari ini",
+    "Hasil_unggah_ditolak_hari_ini": "Hasil unggah ditolak hari ini",
+    "task-routine": "Task Routine",
+    "task": "Penugasan",
+    "schedule": "Jadwal",
+    "indeks": "Blog",
+    "Total-Content-Production": "Total Produksi Konten",
+    "average": "Rata Rata",
+    "create-image": "Unggah Foto",
+    "create-video": "Unggah Video",
+    "create-text": "Unggah Teks",
+    "create-audio": "Unggah Audio",
+    "create-task": "Buat Penugasan",
+    "special-attention": "Atensi Khusus",
+    "daily-tasks": "Tugas Khusus",
+    "date": "Tanggal",
+    "active": "Aktif",
+    "done": "Selesai",
+    "image": "Image",
+    "video": "Video",
+    "audio": "Audio",
+    "text": "Text"
   },
   "BankingDashboard": {
     "widget_title": "Good evening",
@@ -108,9 +132,12 @@
     "addBoard": "Add Board"
   },
   "CalendarApp": {
-    "addEvent": "Add Event",
+    "addEvent": "Tambah Agenda Baru",
     "shortDesc": "Drag and drop your event or click in the calendar",
-    "filter": "FILTER"
+    "filter": "FILTER",
+    "no-data-yet": "Belum ada Data",
+    "bag-pa-monitoring-results": "Hasil Pantauan BAG PA",
+    "monitoring-results": "Hasil Pantauan"
   },
   "TodoApp": {
     "addTask": "Add Task",
@@ -135,9 +162,11 @@
     "task": "Penugasan",
     "planning": "Perencanaan",
     "schedule": "Jadwal",
+    "press-conference": "Konferensi Pers",
+    "press-release": "Pers Rilis",
     "curated-content": "Kurasi Konten",
     "communication": "Komunikasi",
-    "contest": "Kontes",
+    "contest": "Lomba",
     "ticketing": "Ticketing",
     "knowledge-base": "Knowledge Base",
     "faq": "FAQ",
@@ -543,5 +572,33 @@
     "sortBy": "Urutkan Berdasarkan",
     "latest": "Terbaru",
     "mostPopular": "Terpopuler"
+  },
+  "Planning": {
+    "planning": "Perencanaan",
+    "channel": "Kanal"
+  },
+  "Schedule": {
+    "schedule": "Jadwal",
+    "press-conference": "Konferensi Pers",
+    "press-release": "Pers Rilis",
+    "create-schedule": "Buat Jadwal"
+  },
+  "Blog": {
+    "table": "Tabel",
+    "blog": "Indeks",
+    "create-indeks": "Tambah Indeks",
+    "category": "Kategori"
+  },
+  "Communication": {
+    "internal-questions": "Pertanyaan Internal",
+    "escalation": "Eskalasi",
+    "collaboration": "Kolaborasi",
+    "new-question": "Pertanyaan Baru",
+    "new-collaboration": "Kolaborasi Baru"
+  },
+  "Contest": {
+    "table": "Tabel",
+    "contest": "Lomba",
+    "create-contest": "Buat Lomba"
   }
 }