pull

2025-02-23 21:24:26 +07:00 · 2025-02-23 21:24:26 +07:00 · daf524a50b
parent f89f7c4aab be7e34ee11
commit daf524a50b
40 changed files with 995 additions and 771 deletions
--- a/app/[locale]/(protected)/contributor/agenda-setting/calender-view.tsx
+++ b/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">
-                        <Book className="w-4 h-4 me-1" />
-                        Hasil Pantauan BAG PA
+                      <Button className="dark:bg-background dark:text-foreground ">
+                        <Book className="w-4 h-4" />
+                        {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
--- a/app/[locale]/(protected)/contributor/agenda-setting/event-modal.tsx
+++ b/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 || "");
--- a/app/[locale]/(protected)/contributor/blog/components/blog-table.tsx
+++ b/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>
  );
 };

--- a/app/[locale]/(protected)/contributor/blog/page.tsx
+++ b/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>
--- a/app/[locale]/(protected)/contributor/content/audio/components/table-audio.tsx
+++ b/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>
+      <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" />
--- a/app/[locale]/(protected)/contributor/content/audio/page.tsx
+++ b/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">
--- a/app/[locale]/(protected)/contributor/content/image/components/table-image.tsx
+++ b/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>
+      <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" />
--- a/app/[locale]/(protected)/contributor/content/image/page.tsx
+++ b/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"}>
--- a/app/[locale]/(protected)/contributor/content/spit/page.tsx
+++ b/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>
--- a/app/[locale]/(protected)/contributor/content/spit/table-spit/table-spit.tsx
+++ b/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" />
--- a/app/[locale]/(protected)/contributor/content/teks/components/table-teks.tsx
+++ b/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>
+      <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" />
--- a/app/[locale]/(protected)/contributor/content/teks/page.tsx
+++ b/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">
--- a/app/[locale]/(protected)/contributor/content/video/components/table-video.tsx
+++ b/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>
+      <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" />
--- a/app/[locale]/(protected)/contributor/content/video/page.tsx
+++ b/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">
--- a/app/[locale]/(protected)/contributor/planning/mediahub/components/mediahub-table.tsx
+++ b/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>
  );
 };

--- a/app/[locale]/(protected)/contributor/planning/mediahub/page.tsx
+++ b/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>
--- a/app/[locale]/(protected)/contributor/planning/medsos-mediahub/components/medsos-table.tsx
+++ b/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>
  );
 };

--- a/app/[locale]/(protected)/contributor/planning/medsos-mediahub/page.tsx
+++ b/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>
--- a/app/[locale]/(protected)/contributor/schedule/event/components/event-table.tsx
+++ b/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>
  );
 };

--- a/app/[locale]/(protected)/contributor/schedule/event/page.tsx
+++ b/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>
--- a/app/[locale]/(protected)/contributor/schedule/press-conference/components/presscon-table.tsx
+++ b/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>
  );
 };

--- a/app/[locale]/(protected)/contributor/schedule/press-conference/page.tsx
+++ b/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>
--- a/app/[locale]/(protected)/contributor/schedule/press-release/components/pressrilis-table.tsx
+++ b/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>
  );
 };

--- a/app/[locale]/(protected)/contributor/schedule/press-release/page.tsx
+++ b/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>
--- a/app/[locale]/(protected)/contributor/task/components/task-table.tsx
+++ b/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="flex flex-row items-center gap-3">
+        <div className="w-full sm:w-[100px] items-center gap-2">
+          <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>
--- a/app/[locale]/(protected)/contributor/task/page.tsx
+++ b/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>
--- a/app/[locale]/(protected)/dashboard/page.tsx
+++ b/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-1 text-xl font-medium text-default-900">
+                    <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 mb-2">
                        Table Indeks
                      </div>
                      <div>
--- a/app/[locale]/(protected)/dashboard/routine-task/components/content-table.tsx
+++ b/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>
+      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between md:flex-row md:items-center md:justify-between lg:flex-row items-start lg:justify-between lg:items-center px-5">
+        <div className="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>
--- a/app/[locale]/(protected)/dashboard/routine-task/components/recent-activity.tsx
+++ b/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>
  );
--- a/app/[locale]/(protected)/shared/communication/collaboration/components/collabroation-table.tsx
+++ b/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" />
--- a/app/[locale]/(protected)/shared/communication/escalation/components/escalation-table.tsx
+++ b/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" />
--- a/app/[locale]/(protected)/shared/communication/internal/components/internal-table.tsx
+++ b/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)}
--- a/app/[locale]/(protected)/shared/communication/page.tsx
+++ b/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 />}
--- a/app/[locale]/(protected)/shared/contest/components/contest-table.tsx
+++ b/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={
--- a/app/[locale]/(protected)/shared/contest/page.tsx
+++ b/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>
--- a/components/form/communication/internal-detail-form.tsx
+++ b/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 w-[70%]">
+      <div className="flex flex-col md:flex-row    lg:flex-row gap-5 mt-5">
+        <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>
--- a/components/form/task/task-detail-form.tsx
+++ b/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 && (
              <>
--- a/lib/menus.ts
+++ b/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: [],
--- a/messages/en.json
+++ b/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"
  }
 }
--- a/messages/in.json
+++ b/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"
  }
 }