fix: ckeditor and Table task-ta

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

@@ -23,7 +23,7 @@ import Swal from "sweetalert2";
 import { useTranslations } from "next-intl";
 
 const useTableColumns = () => {
-  const t = useTranslations("Table"); // Panggil di dalam hook
+  const t = useTranslations("Table");
   const columns: ColumnDef<any>[] = [
     {
       accessorKey: "no",
@@ -50,6 +50,12 @@ const useTableColumns = () => {
       ),
     },
 
+    {
+      accessorKey: "uniqueCode",
+      header: t("code", { defaultValue: "Code" }),
+      cell: ({ row }) => <span>{row.getValue("uniqueCode")}</span>,
+    },
+
     {
       accessorKey: "createdAt",
       header: t("upload-date", { defaultValue: "Upload Date" }),

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

@@ -54,7 +54,7 @@ import { Badge } from "@/components/ui/badge";
 import { useRouter, useSearchParams } from "next/navigation";
 import TablePagination from "@/components/table/table-pagination";
 import columns from "./columns";
-import { listTask, listTaskTa } from "@/service/task";
+import { listTask, listTaskMabesForTa, listTaskTa } from "@/service/task";
 import { Label } from "@/components/ui/label";
 import { format } from "date-fns";
 import { useTranslations } from "next-intl";
@@ -133,15 +133,25 @@ const TaskTaTable = () => {
       ? format(new Date(dateFilter), "yyyy-MM-dd")
       : "";
     try {
-      const res = await listTaskTa(
+      const res = isSpecificAttention
-        page - 1,
+        ? await listTaskTa(
-        search,
+            page - 1,
-        showData,
+            search,
-        filterByCode,
+            showData,
-        formattedStartDate,
+            filterByCode,
-        isSpecificAttention ? "atensi-khusus" : "tugas-harian",
+            formattedStartDate,
-        statusFilter
+            "atensi-khusus",
-      );
+            statusFilter
+          )
+        : await listTask(
+            page - 1,
+            search,
+            showData,
+            filterByCode,
+            formattedStartDate,
+            "atensi-khusus",
+            statusFilter
+          );
 
       const data = res?.data?.data;
       const contentData = data?.content;
@@ -210,7 +220,7 @@ const TaskTaTable = () => {
                   } 
                 px-[18px] py-1 transition duration-100 rounded`}
                 >
-                  {t("special-attention", { defaultValue: "Special Attention" })}
+                  Atensi Khusus TA{" "}
                 </span>
                 <span
                   className={`
@@ -222,7 +232,9 @@ const TaskTaTable = () => {
                 px-[18px] py-1 transition duration-100 rounded
                 `}
                 >
-                  {t("daily-tasks", { defaultValue: "Daily Tasks" })}
+                  {t("special-attention", {
+                    defaultValue: "Special Attention",
+                  })}{" "}
                 </span>
               </label>
             </div>

components/editor/custom-editor.js

@@ -6,7 +6,7 @@ import Editor from "ckeditor5-custom-build";
 
 function CustomEditor(props) {
   const maxHeight = props.maxHeight || 600; // Default max height 600px
-  
+
   return (
     <div className="ckeditor-wrapper">
       <CKEditor
@@ -36,21 +36,22 @@ function CustomEditor(props) {
             "codeBlock",
             "sourceEditing",
           ],
-          // Add content styling configuration
           content_style: `
             body {
               font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
               font-size: 14px;
               line-height: 1.6;
-              color: #333;
+              color: #111 !important; 
+              background: #fff !important;
               margin: 0;
-              padding: 0;
+              padding: 1rem;
             }
             p {
               margin: 0.5em 0;
             }
             h1, h2, h3, h4, h5, h6 {
               margin: 1em 0 0.5em 0;
+              color: inherit !important;
             }
             ul, ol {
               margin: 0.5em 0;
@@ -61,56 +62,103 @@ function CustomEditor(props) {
               padding: 0.5em 1em;
               border-left: 4px solid #d1d5db;
               background-color: #f9fafb;
+              color: inherit !important;
             }
           `,
-          // Editor appearance settings
           height: props.height || 400,
-          removePlugins: ['Title'],
+          removePlugins: ["Title"],
-          // Better mobile support
           mobile: {
-            theme: 'silver'
+            theme: "silver",
-          }
+          },
         }}
       />
       <style jsx>{`
         .ckeditor-wrapper {
           border-radius: 6px;
           overflow: hidden;
-          box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+          box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1),
+            0 1px 2px 0 rgba(0, 0, 0, 0.06);
         }
-        
+
         .ckeditor-wrapper :global(.ck.ck-editor__main) {
           min-height: ${props.height || 400}px;
           max-height: ${maxHeight}px;
         }
-        
+
         .ckeditor-wrapper :global(.ck.ck-editor__editable) {
           min-height: ${(props.height || 400) - 50}px;
           max-height: ${maxHeight - 50}px;
           overflow-y: auto !important;
           scrollbar-width: thin;
           scrollbar-color: #cbd5e1 #f1f5f9;
+          background: #fff !important;
+          color: #111 !important;
         }
-        
+
+        /* Dark mode support */
+        :global(.dark) .ckeditor-wrapper :global(.ck.ck-editor__editable) {
+          background: #111 !important;
+          color: #f9fafb !important;
+        }
+
+        :global(.dark) .ckeditor-wrapper :global(.ck.ck-editor__editable h1),
+        :global(.dark) .ckeditor-wrapper :global(.ck.ck-editor__editable h2),
+        :global(.dark) .ckeditor-wrapper :global(.ck.ck-editor__editable h3),
+        :global(.dark) .ckeditor-wrapper :global(.ck.ck-editor__editable h4),
+        :global(.dark) .ckeditor-wrapper :global(.ck.ck-editor__editable h5),
+        :global(.dark) .ckeditor-wrapper :global(.ck.ck-editor__editable h6) {
+          color: #f9fafb !important;
+        }
+
+        :global(.dark)
+          .ckeditor-wrapper
+          :global(.ck.ck-editor__editable blockquote) {
+          background-color: #1f2937 !important;
+          border-left-color: #374151 !important;
+          color: #f3f4f6 !important;
+        }
+
         /* Custom scrollbar styling for webkit browsers */
         .ckeditor-wrapper :global(.ck.ck-editor__editable::-webkit-scrollbar) {
           width: 8px;
         }
-        
+
-        .ckeditor-wrapper :global(.ck.ck-editor__editable::-webkit-scrollbar-track) {
+        .ckeditor-wrapper
+          :global(.ck.ck-editor__editable::-webkit-scrollbar-track) {
           background: #f1f5f9;
           border-radius: 4px;
         }
-        
+
-        .ckeditor-wrapper :global(.ck.ck-editor__editable::-webkit-scrollbar-thumb) {
+        .ckeditor-wrapper
+          :global(.ck.ck-editor__editable::-webkit-scrollbar-thumb) {
           background: #cbd5e1;
           border-radius: 4px;
         }
-        
+
-        .ckeditor-wrapper :global(.ck.ck-editor__editable::-webkit-scrollbar-thumb:hover) {
+        .ckeditor-wrapper
+          :global(.ck.ck-editor__editable::-webkit-scrollbar-thumb:hover) {
           background: #94a3b8;
         }
-        
+
+        /* Dark mode scrollbar */
+        :global(.dark)
+          .ckeditor-wrapper
+          :global(.ck.ck-editor__editable::-webkit-scrollbar-track) {
+          background: #1f2937;
+        }
+
+        :global(.dark)
+          .ckeditor-wrapper
+          :global(.ck.ck-editor__editable::-webkit-scrollbar-thumb) {
+          background: #4b5563;
+        }
+
+        :global(.dark)
+          .ckeditor-wrapper
+          :global(.ck.ck-editor__editable::-webkit-scrollbar-thumb:hover) {
+          background: #6b7280;
+        }
+
         /* Ensure content doesn't overflow */
         .ckeditor-wrapper :global(.ck.ck-editor__editable .ck-content) {
           overflow: hidden;

components/form/task-ta/task-ta-form.tsx

@@ -548,8 +548,8 @@ export default function FormTaskTa() {
               >
                 <RadioGroupItem value="atensi-khusus" id="khusus" />
                 <Label htmlFor="atensi-khusus">Atensi Khusus</Label>
-                <RadioGroupItem value="tugas-harian" id="harian" />
+                {/* <RadioGroupItem value="tugas-harian" id="harian" />
-                <Label htmlFor="tugas-harian">Tugas Harian</Label>
+                <Label htmlFor="tugas-harian">Tugas Harian</Label> */}
               </RadioGroup>
             </div>
             <div className="flex flex-col space-y-2 mt-5">

service/task.ts

@@ -4,6 +4,7 @@ import {
   httpGetInterceptor,
   httpPostInterceptor,
 } from "./http-config/http-interceptor-service";
+import { httpGet } from "./http-config/http-base-service";
 
 // export async function listTask(size: number, page: number) {
 //   return await httpGetInterceptor(
@@ -33,6 +34,29 @@ export async function listTask(
   );
 }
 
+export async function listTaskMabesForTa(
+  page: any,
+  title: string = "",
+  size: any,
+  code: any,
+  createdAt: any,
+  taskType: string,
+  status: number[]
+) {
+  let statusQuery = "";
+
+  if (status.includes(1)) {
+    statusQuery = "&isDone=true";
+  } else if (status.includes(2)) {
+    statusQuery = "&isDone=false";
+  }
+
+  return httpGet(
+    `assignment/list?enablePage=1&size=${size}&page=${page}&title=${title}&taskType=${taskType}&uniqueCode=${code}&createdAt=${createdAt}${statusQuery}`,
+    {}
+  );
+}
+
 // export async function createTask(data: any) {
 //   const url = "assignment";
 //   return httpPostInterceptor(url, data);