feat: fixing some error

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

@@ -1,11 +1,11 @@
-// "use client";
+"use client";
 import React, { useState, useEffect, useRef, Fragment } from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { useForm, Controller } from "react-hook-form";
 import { cn, getCookiesDecrypt } from "@/lib/utils";
-import { format } from "date-fns";
+import { format, isDate } from "date-fns";
 import {
   Popover,
   PopoverContent,
@@ -28,6 +28,7 @@ import {
   ChevronDown,
   Music,
 } from "lucide-react";
+import { DateRange } from "react-day-picker";
 import DeleteConfirmationDialog from "@/components/delete-confirmation-dialog";
 import { CalendarCategory } from "./data";
 import {
@@ -95,8 +96,10 @@ const EventModal = ({
 }) => {
   const roleId = Number(getCookiesDecrypt("urie")) || 0;
   const [detail, setDetail] = useState<any>();
-  const [startDate, setStartDate] = useState<Date>(new Date());
+  const [date, setDate] = React.useState<DateRange | undefined>({
-  const [endDate, setEndDate] = useState<Date>(new Date());
+    from: new Date(),
+    to: new Date(),
+  });
   const [isPending, startTransition] = React.useTransition();
   const [listDest, setListDest] = useState([]);
   const [deleteModalOpen, setDeleteModalOpen] = useState<boolean>(false);
@@ -157,6 +160,7 @@ const EventModal = ({
   const [wavesurfer, setWavesurfer] = useState<WaveSurfer>();
   const [isPlaying, setIsPlaying] = useState(false);
   const [isPublishing, setIsPublishing] = useState(false);
+  const [isDatePickerOpen, setIsDatePickerOpen] = useState(false);
 
   const {
     register,
@@ -248,6 +252,10 @@ const EventModal = ({
     fetchDetailData();
   }, [event, setValue]);
 
+  useEffect(() => {
+    setIsDatePickerOpen(false);
+  }, [onClose])
+
   const handleCheckboxChange = (levelId: number) => {
     setCheckedLevels((prev) => {
       const updatedLevels = new Set(prev);
@@ -350,8 +358,8 @@ const EventModal = ({
       description: data.description,
       agendaType: agendaTypeList.join(","), // <-- ubah array jadi string
       assignedToLevel: assignedToLevelList.join(","), // <-- ubah array jadi string
-      startDate: format(startDate, "yyyy-MM-dd"),
+      startDate: date?.from ? format(date.from, "yyyy-MM-dd") : null,
-      endDate: format(endDate, "yyyy-MM-dd"),
+      endDate: date?.to ? format(date.to, "yyyy-MM-dd") : null,
     };
 
     console.log("Submitted Data:", reqData);
@@ -428,13 +436,20 @@ const EventModal = ({
   };
 
   useEffect(() => {
+    console.log("Event data:", event);
+    console.log("Selected date:", selectedDate);
+    
     if (selectedDate) {
-      setStartDate(selectedDate.date);
+      setDate({
-      setEndDate(selectedDate.date);
+        from: selectedDate.date,
+        to: selectedDate.date,
+      });
     }
     if (event) {
-      setStartDate(event?.event?.start);
+      setDate({
-      setEndDate(event?.event?.end);
+        from: event?.event?.start,
+        to: event?.event?.end,
+      });
       const eventCalendar = event?.event?.extendedProps?.calendar;
       setAgendaType(
         eventCalendar || (categories?.length > 0 && categories[0].value)
@@ -736,73 +751,47 @@ const EventModal = ({
                   )}
                 </div>
                 <div className="space-y-1.5">
-                  <Label htmlFor="startDate">Start Date </Label>
+                  <Label htmlFor="date">Tanggal</Label>
-                  <Popover>
+                  <Popover open={isDatePickerOpen} onOpenChange={() => setIsDatePickerOpen(true)}>
                     <PopoverTrigger asChild>
                       <Button
                         variant="outline"
                         size="md"
                         className={cn(
                           "w-full justify-between text-left font-normal border-default-200 text-default-600 md:px-4",
-                          !startDate && "text-muted-foreground"
+                          !date && "text-muted-foreground"
                         )}
                       >
-                        {startDate ? (
+                        <CalendarIcon className="h-4 w-4 mr-2" />
-                          format(startDate, "PP")
+                        {date?.from ? (
+                          date.to ? (
+                            <>
+                              {format(date.from, "LLL dd, y")} -{" "}
+                              {format(date.to, "LLL dd, y")}
+                            </>
+                          ) : (
+                            format(date.from, "LLL dd, y")
+                          )
                         ) : (
                           <span>Pick a date</span>
                         )}
-                        <CalendarIcon className="h-4 w-4" />
                       </Button>
                     </PopoverTrigger>
-                    <PopoverContent className="w-auto p-0">
+                    <PopoverContent className="w-auto p-0" align="start">
-                      <Controller
-                        name="startDate"
-                        control={control}
-                        render={({ field }) => (
                       <Calendar
-                            mode="single"
-                            selected={startDate}
-                            onSelect={(date) => setStartDate(date as Date)}
                         initialFocus
-                          />
+                        mode="range"
-                        )}
+                        defaultMonth={date?.from}
-                      />
+                        selected={date}
-                    </PopoverContent>
+                        onSelect={(newDate) => {
-                  </Popover>
+                          console.log("Date selected:", newDate);
-                </div>
+                          setDate(newDate);
-                <div className="space-y-1.5">
+                          if (newDate?.from && newDate?.to) {
-                  <Label htmlFor="endDate">End Date</Label>
+                            setIsDatePickerOpen(false);
-                  <Popover>
+                          }
-                    <PopoverTrigger asChild>
+                        }}
-                      <Button
+                        numberOfMonths={1}
-                        variant="outline"
+                        className="rounded-md border"
-                        size="md"
-                        className={cn(
-                          "w-full justify-between text-left font-normal border-default-200 text-default-600 md:px-4",
-                          !endDate && "text-muted-foreground"
-                        )}
-                      >
-                        {endDate ? (
-                          format(endDate, "PP")
-                        ) : (
-                          <span>Pick a date</span>
-                        )}
-                        <CalendarIcon className="h-4 w-4" />
-                      </Button>
-                    </PopoverTrigger>
-                    <PopoverContent className="w-auto p-0">
-                      <Controller
-                        name="endDate"
-                        control={control}
-                        render={({ field }) => (
-                          <Calendar
-                            mode="single"
-                            selected={endDate}
-                            onSelect={(date) => setEndDate(date as Date)}
-                            initialFocus
-                          />
-                        )}
                       />
                     </PopoverContent>
                   </Popover>

app/[locale]/globals.css

@@ -580,6 +580,6 @@ html[dir="rtl"] .react-select .select__loading-indicator {
 }
 
 /* Hide FullCalendar grid elements */
-/* .fc-view-harness:has(.hide-calendar-grid) {
+.fc-view-harness:has(.hide-calendar-grid) {
   display: none;
-} */
+}

next.config.mjs

@@ -16,28 +16,11 @@ const bundleAnalyzer = withBundleAnalyzer({
 });
 
 const nextConfig = {
-  // Performance optimizations
+  // i18n: {
-  experimental: {
+  //   locales: ["en", "in"],
-    optimizePackageImports: [
+  //   defaultLocale: "in",
-      '@radix-ui/react-icons',
+  // },
-      'lucide-react',
-      'react-icons',
-      'framer-motion',
-      'apexcharts',
-      'recharts',
-      'chart.js',
-      'react-chartjs-2'
-    ],
-  },
-  
-  // Image optimization
   images: {
-    formats: ['image/webp', 'image/avif'],
-    deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
-    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
-    minimumCacheTTL: 60 * 60 * 24 * 30, // 30 days
-    dangerouslyAllowSVG: true,
-    contentSecurityPolicy: "default-src 'self'; script-src 'none'; sandbox;",
     remotePatterns: [
       {
         protocol: "https",
@@ -66,43 +49,9 @@ const nextConfig = {
       },
     ],
   },
-
-  // Bundle optimization
-  webpack: (config, { dev, isServer }) => {
-    // Optimize bundle size
-    if (!dev && !isServer) {
-      config.optimization.splitChunks = {
-        chunks: 'all',
-        cacheGroups: {
-          vendor: {
-            test: /[\\/]node_modules[\\/]/,
-            name: 'vendors',
-            chunks: 'all',
-          },
-          charts: {
-            test: /[\\/]node_modules[\\/](apexcharts|recharts|chart\.js|react-chartjs-2)[\\/]/,
-            name: 'charts',
-            chunks: 'all',
-          },
-          maps: {
-            test: /[\\/]node_modules[\\/](@react-google-maps|leaflet|react-leaflet)[\\/]/,
-            name: 'maps',
-            chunks: 'all',
-          },
-        },
-      };
-    }
-    return config;
-  },
-
-  // Compression
-  compress: true,
-  
-  // Power by header removal
-  poweredByHeader: false,
-  
-  // ESLint configuration
   // eslint: {
+  //   // Warning: This allows production builds to successfully complete even if
+  //   // your project has ESLint errors.
   //   ignoreDuringBuilds: true,
   // },
 };

service/auth.ts

@@ -81,7 +81,7 @@ export async function postSetupEmail(data: any) {
 
 export async function verifyOTPByUsername(username: any, otp: any) {
   const url = `public/users/verify-otp?username=${username}&otp=${otp}`;
-  return httpPostInterceptor(url);
+  return httpPost(url);
 }
 
 export async function getSubjects() {

service/http-config/http-base-service.ts

@@ -35,7 +35,9 @@ async function getCachedCsrfToken() {
 }
 
 export async function httpPost(pathUrl: any, data?: any, headers?: any,) {
-  const csrfToken = await getCachedCsrfToken();
+  const resCsrf = await getCsrfToken();
+  const csrfToken = resCsrf?.data?.token;
+
   const authToken = Cookies.get("access_token");
 
   const defaultHeaders = {
@@ -95,7 +97,8 @@ export async function httpGet(pathUrl: any, headers: any) {
 }
 
 export async function httpPut(pathUrl: any, headers: any, data?: any) {
-  const csrfToken = await getCachedCsrfToken();
+  const resCsrf = await getCsrfToken();
+  const csrfToken = resCsrf?.data?.token;
 
   const defaultHeaders = {
     "Content-Type": "application/json",