feat: fixing some error

2025-07-14 22:55:51 +07:00 · 2025-07-14 22:55:51 +07:00 · 4250c2ec78
parent dab5958ac2
commit 4250c2ec78
5 changed files with 67 additions and 126 deletions
--- a/app/[locale]/(protected)/contributor/agenda-setting/event-modal.tsx
+++ b/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 [endDate, setEndDate] = useState<Date>(new Date());
+  const [date, setDate] = React.useState<DateRange | undefined>({
+    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"),
-      endDate: format(endDate, "yyyy-MM-dd"),
+      startDate: date?.from ? format(date.from, "yyyy-MM-dd") : null,
+      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);
-      setEndDate(selectedDate.date);
+      setDate({
+        from: selectedDate.date,
+        to: selectedDate.date,
+      });
    }
    if (event) {
-      setStartDate(event?.event?.start);
-      setEndDate(event?.event?.end);
+      setDate({
+        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>
-                  <Popover>
+                  <Label htmlFor="date">Tanggal</Label>
+                  <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 ? (
-                          format(startDate, "PP")
+                        <CalendarIcon className="h-4 w-4 mr-2" />
+                        {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">
-                      <Controller
-                        name="startDate"
-                        control={control}
-                        render={({ field }) => (
-                          <Calendar
-                            mode="single"
-                            selected={startDate}
-                            onSelect={(date) => setStartDate(date as Date)}
-                            initialFocus
-                          />
-                        )}
-                      />
-                    </PopoverContent>
-                  </Popover>
-                </div>
-                <div className="space-y-1.5">
-                  <Label htmlFor="endDate">End Date</Label>
-                  <Popover>
-                    <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",
-                          !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 className="w-auto p-0" align="start">
+                      <Calendar
+                        initialFocus
+                        mode="range"
+                        defaultMonth={date?.from}
+                        selected={date}
+                        onSelect={(newDate) => {
+                          console.log("Date selected:", newDate);
+                          setDate(newDate);
+                          if (newDate?.from && newDate?.to) {
+                            setIsDatePickerOpen(false);
+                          }
+                        }}
+                        numberOfMonths={1}
+                        className="rounded-md border"
                      />
                    </PopoverContent>
                  </Popover>
--- a/app/[locale]/globals.css
+++ b/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;
-} */
+}
--- a/next.config.mjs
+++ b/next.config.mjs
@ -16,28 +16,11 @@ const bundleAnalyzer = withBundleAnalyzer({
 });

 const nextConfig = {
-  // Performance optimizations
-  experimental: {
-    optimizePackageImports: [
-      '@radix-ui/react-icons',
-      'lucide-react',
-      'react-icons',
-      'framer-motion',
-      'apexcharts',
-      'recharts',
-      'chart.js',
-      'react-chartjs-2'
-    ],
-  },
-  
-  // Image optimization
+  // i18n: {
+  //   locales: ["en", "in"],
+  //   defaultLocale: "in",
+  // },
  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,
  // },
 };
--- a/service/auth.ts
+++ b/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() {
--- a/service/http-config/http-base-service.ts
+++ b/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",